Published 2023. 9. 3. 21:22

WEB 5주차 (Javascript 7~15장)

07장. 변수와 대입 연산자

x = 1;
y = 1;
x + y; //2

x = 1000;
x + y; //1001

첫 번째 x+y와 두 번째 x+y 계산값이 다른 것을 알 수 있다.

처음 x라는 변수에 담겨있는 값 (1) 과 두 번째 x에 담긴 값(1000) 이 다르기 때문이다.

실제 계산값으로 확인할 수 있다.

x와 같이 값을 할당할 수 있는 변수와 바뀌지 않는 값인 상수를 구분하여야 한다.

바뀔 수 있는 부분을 변수로 설정하면 쉽게 값을 바꿀 수 있다. 상수를 사용해야 할 때는 상수를, 변수를 사용해야 할 때는 변수를 사용한다.

var name = 'leezche';

변수를 선언할 때는 항상 맨 앞에 var를 붙여 준다. 또 여기서 왼쪽 변수에 오른쪽 값을 할당해주는 '=' 연산자가 있다. 이를 대입 연산자라고 한다. 대입 연산자는 변수 선언에 있어 필수적인 요소이다.

08장. 웹 브라우저 제어

<body style="background-color: black; color: white;">
    <div>hello! my name is seo hyeong</div>
    <input type="button" value="day" onclick="
            document.querySelector('body').style.backgroundColor='white';
            document.querySelector('body').style.color='black';
        ">
    <input type="button" value="night" onclick="
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color='white';
        ">

위 코드를 실행해 보면 아래와 같이 나타난다.

위 코드에서는 <body> 태그의 style 속성을 골라내 변화시켰다. 이를 골라내기 위해 <body> 태그를 웹 브라우저에 알리는 자바스크립트 문법으로 알아보자.

09장. CSS 기초: style 속성

ex3.html

<body>
    <h1><a href="index.html">WEB</a></h1>
    <div id="grid">
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html" class="now">Javascript</a></li>
        </ol>
        <div id="article">
            <h2 style="color: skyblue;">Javascript란 무엇인가</h2>
            <p><a href="https://aws.amazon.com/ko/what-is/javascript/" style="color: chocolate;">(Click Here!) Javascript</a></p>
            <p>JavaScript는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 기능은 웹사이트의 사용자 경험을 개선할 수 있습니다. 클라이언트 측 스크립팅 언어로서 JavaScript는 월드 와이드 웹의 핵심 기술 중 하나입니다. 예를 들어 인터넷 탐색 시 웹페이지에서 이미지 슬라이드쇼, 클릭하면 표시되는 드롭 다운 메뉴 또는 객체 색상의 동적 변화를 보게 된다면 이는 JavaScript의 효과를 보는 것입니다.</p>
        </div>
    </div>
</body>

h2 태그에 style 속성을 부여하여 글자 색과 배경색을 입혀 주었다.

<h2 style="color: skyblue; background-color: salmon;">Javascript란 무엇인가</h2>

이처럼 style 속성을 이용해 임의로 css 속성을 부여할 수 있다.

10장. CSS 기초: <style> 태그

style 속성이 아닌 선택자를 이용해 css를 삽입할 수 있다

<div> 태그 : 줄바꿈 O

<span> 태그 : 줄바꿈 X

둘 다 무색무취의 태그

<span>JavaScript</span>

여기에 속성을 추가할 때 style 속성을 이용하는 방법도 있지만, class와 style 태그를 이용하는 방법을 사용해 보자. 이를 사용하면 쉽게 style을 추가 및 변경할 수 있다.

<span class="js">JavaScript</span>

그리고 아래와 같은 style 태그 추가

    <style>
        .js {
            font-weight: bold;
        }
    </style>

javascript 글자만 볼드체가 된 것을 확인할 수 있다.

11장. CSS 기초: 선택자

이번 시간에는 다양한 선택자를 사용해 본다.

   <style>
        .js {
            font-weight: bold;
            color: red;
        }

        #first {
            color: green;
        }
    </style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <div id="grid">
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html" class="now">Javascript</a></li>
        </ol>
        <div id="article">
            <h2 style="color: skyblue; background-color: salmon;">Javascript란 무엇인가</h2>
            <p><a href="https://aws.amazon.com/ko/what-is/javascript/" style="color: chocolate;">(Click Here!) Javascript</a></p>
            <p><span class="js" id="first">JavaScript</span>는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, <span class="js">JavaScript</span> 기능은 웹사이트의 사용자 경험을 개선할 수 있습니다. 클라이언트 측 스크립팅 언어로서 JavaScript는 월드 와이드 웹의 핵심 기술 중 하나입니다. 예를 들어 인터넷 탐색 시 웹페이지에서 이미지 슬라이드쇼, 클릭하면 표시되는 드롭 다운 메뉴 또는 객체 색상의 동적 변화를 보게 된다면 이는 <span class="js">javascript</span>의 효과를 보는 것입니다.</p>
        </div>

.js는 class가 js인 태그들을, #first는 id가 first인 태그들의 속성을 지정할 수 있다. 위와 같이 속성을 지정해 주면 id가 first인 첫 번째 javascript를 제외하고 나머지는 .js의 속성이 적용된 것을 확인할 수 있다.

class는 여러 번 사용할 수 있고, id는 한 번만 사용할 수 있다. (중복 x)

우선순위 또한 존재하는데, id 선택자의 우선순위가 가장 높기 때문에 이 코드의 css가 먼저 적용된다.

12장. 제어할 태그 선택하기

이제 자바스크립트에서 제어할 태그를 선택하는 법을 알아보자. 우선 두 가지의 버튼을 추가하였다.

            <input type="button" value="night" class="but">
            <input type="button" value="day" class="but">

버튼을 클릭했을 때의 이벤트를 만들어 보자. onclick 속성을 추가한다.

            <input type="button" value="night" class="but" onclick="
            
            ">
            <input type="button" value="day" class="but" onclick="
            
            ">

여기에 body를 선택하여 text의 색상과 배경색을 바꾸어 준다.

        <input type="button" value="night" class="but" onclick="
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color = 'white';
        ">
        <input type="button" value="day" class="but" onclick="
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
        ">

성공적으로 night 모드가 적용된 것을 확인할 수 있다.

13장. 프로그램, 프로그래밍, 프로그래머

HTML과 Javascript의 차이

html은 프로그래밍 언어가 아니지만 javascript는 프로그래밍 언어라고 한다. 시간 순서에 따라서 실행되어야 할 기능을 적어두는 것.

조건문, 반복문, 함수 등을 지금부터 살펴본다.

14장. 조건문 예고

조건에 따라 서로 다른 순서의 기능들이 실행되도록 한다.

야간 모드에서 버튼을 누르면 -> 주간 모드

주간 모드에서 버튼을 누르면 -> 야간 모드로 가도록 해 보자.

15장. 비교 연산자와 불리언

==에는 logic이 구현되어 있다.

null, undefined도 동일하게 true로 설정

number, string이더라도 값이 동일하면 true로 설정 … etc

===은 엄격한 비교.

두 값의 type까지 비교해서 엄격히 비교 (공식 언어!)

'생활코딩! HTML+CSS+자바스크립트' 카테고리의 다른 글

WEB 6주차 (Javascript 16장~) (0)	2023.09.10
WEB 4주차 (Javascript 1~6장) (0)	2023.08.26
WEB 3주차 (CSS 7장~15장) (0)	2023.08.20
WEB 2주차 (HTML 17~22장, CSS 1~6장) (0)	2023.08.13
WEB 1주차 (HTML 1~16장) (0)	2023.08.05