생활코딩 WEB3 - javascript편(3/6)

12. 제어할 태그 선택

 

자바스크립트의 문법에 따라 웹브라우저에게 body태그를 선택하도록.

 

1. javascript select tag by css selector 라고 검색해보자.

(즉, css 선택자로 태그를 선택하는 법)

 

document.querySelector('선택자')

document.querySelector('body')

 

2. 자바스크립트를 통해 스타일을 적용하는 것을 검색해보자.

.style

 

3. 배경색 (background color)을 바꾸는 자바스크립트를 검색해보자.

.style.backgroundColor

document.querySelector('body').style.backgroundColor = 'black';

 

 

4. 그 다음, 글자 색을 바꾸는 자바스크립트를 검색해보자.

.style.color 

document.querySelector('body').style.color = 'white';

 

 

이제 night 버튼의 코드를 이해할 수 있다.

마찬가지로 day 버튼의 코드도 작성해보자.

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

 

 

실행 결과

** 개인적으로 고치고싶은 점

 

- 버튼을 유동성있게 토글버튼으로

- <a>태그 걸린것들은 글자색이 안바뀐다. 이런 어떻게 할지.

 

---

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

 

 

html은 컴퓨터 언어이지만, 프로그래밍 언어는 아님.

javascript는 컴퓨터 언어이면서, 프로그래밍 언어이다.

 

program 이란 무엇인지, 프로그래밍은 무엇인지 의미를 자세히 생각해보자.

 

• program 순서
• programming 순서를 만드는 것
• programmer 순서를 만드는 사람

>> 소프트웨어 뿐만 아니라 많은 분야에서 이런 의미로 사용된다. 

 

 

html은 나타내는, 즉 보여지는 요소를 위한 언어이기 떄문에

'시간의 순서'에 따라 실행되는 기능을 갖고 있지 않다.

이는 html을 programming 언어라고 할 수 없는 이유이다.

 

반면에 자바스크립트는 사용자와 상호작용하기위한 컴퓨터 언어이고,

그를 위해선 시간의 흐름에 따라 실행되는 '프로그래밍 언어'라 할 수 있다.

 

 

---

14. 조건문 ex.

 

하나의 프로그램이 하나의 흐름으로 가지 않고, 조건에 따라 여러가지 흐름으로 진행되도록.

 

** 위 예제에서 했던 night, day 버튼을 개선해보자.

- 버튼의 갯수를 하나로 해서, 지금 밝은 상태라면 어둡게 만들고 / 어두운 상태라면 밝게 만들자.

= 토글(Toggle)

 

if - else 문, 즉 조건문을 사용하여 만들 수 있다.

 

<input type="button" value="night" onclick="
    if(document.querySelector('body').dataset.mode === 'day'){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      document.querySelector('body').dataset.mode = 'night';
      this.value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('body').dataset.mode = 'day';
      this.value = 'night';
    }

우선 태그를 먼저 작성한 후 하나하나 살펴보자.

전체적인 구성은 같다.

(input type, value / onclick 안에 자바스크립트 코드)

 

 

 

---

15. 비교 연산자와 블리언

• 비교연산자
• 비교연산자를 통해 만들어지는 불리언(Boolean) 이라는 데이터타입.
• 조건문

    <h3>1===1</h3>
    <script>
      document.write(1===1); // === 는 비교연산자.
    </script>
    
    <h3>1===2</h3>
    <script>
      document.write(1===2);
    </script>

 

Boolean이라는 데이터 타입에는 True와 False 두가지만 존재함.

 

비교연산자는 이항연산(두개의 항이 존재하는 연산)에서 두 수를 비교하는 연산자.

==	값이 같다.
===	값이 같다 and 타입도 같다
>	크다
<	작다
>=	크거나같다
<=	작거나같다
!=	값이 다르다
!==	값이 다르다 or 타입이 다르다

 

---

16. 조건문

 

<script>
  document.write("1<br>");
  document.write("2<br>");
  document.write("3<br>");
  document.write("4<br>");
</script>

위와 같은 코드가 있다고 치자.

이를 조건문을 이용해서 출력하여 조건문에 대해 이해해보자.

 

 

1. IF-true

 

<script>
    document.write("1<br>");
    if(true){
      document.write("2<br>");
    } else {
    document.write("3<br>");
    }
    document.write("4<br>");
</script>

 

2. IF-false

<script>
    document.write("1<br>");
    if(false){
      document.write("2<br>");
    } else {
    document.write("3<br>");
    }
    document.write("4<br>");
</script>

우선, if(True)의 경우

if문이 실행되었고, else문은 실행되지 않아서

1-2-4와 같은 결과가 나왔다.

 

두번째로, if(false)의 경우

if문은 실행되지 않고, else문이 실행되어

1-3-4와 같은 결과가 나왔다.

 

위 코드처럼, if() 괄호 안에는 Boolean값인 True나 False가 반드시 와야한다.

그러나, 위에처럼 True 나 false를 그대로 적는 경우는 의미가 없다.

 

즉, 앞서 배운 '비교연산자'를 이용하여 조건문의 조건을 작성하고, 그에 따른 Boolean값을 통해

if와 else로 나눠지게 해야 한다.

 

 

exam.html

0.00MB

 

 

---

17. 조건문의 활용

 

1. 현재 버튼의 value값이 무엇인지를 알아내야 한다.

 

크롬 F12 - 콘솔(Console)을 이용한다.

 

지금 수정하고 있는 버튼에 임시로 id값을 준다.

 

<input id="night-day" type="button" value="night">

 

html 태그에서 value를 얻기 위한 자바스크립트 코드가 필요하다.

즉, input이라는 요소의 value 값을 알아야 하므로 

 

구글링 > javascript element get value

.value

 

콘솔창에 다음과 같이 입력한다.

 

즉, 위 input태그, 즉 버튼의 value값은 night이다.

 

 

 

<input id="night_day" type="button" value="night" onclick="
      if(document.querySelector('body').value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
      } else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
      }
    ">

 

즉, 코드를 작성하면 다음과 같다.

 

현재 버튼 value가 night이므로

if value === night라면 > 야간모드로 변환

else (night가 아니면) > 원래대로 변환

 

그러나, 이때 추가적으로 마지막에 value값을 night에서 day로, day에서 night로 바꿔줘야

원래대로 돌아오는 기능을 반복해서 할 수 있으므로

 

--> 사진에 오타 있음. 소스코드는 아래 참조.

 

 

선택자를 night_day라는 id로 하여 (#로 표기)

해당 아이디를 가진 요소의 value값을 day로 바꿔준다.

 

 

<input id="night_day" type="button" value="night" onclick="
      if(document.querySelector('#night_day').value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        document.querySelector('#night_day').value = 'day';
      } else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#night_day').value = 'night';
      }
    ">

 

 

 

 

이제 하나의 버튼으로 야간/주간모드 설정이 가능하다.