TIL#03 조건문 ,비교연산자, 불리언(Boolean)

 

14강 조건문 예고

 

 

깜깜한 상태에서 버튼을 클릭하면 밝은 상태가 되고 

밝은 상태에서 버튼을 클릭하면 깜깜한 상태가 되는 기능을 구현하는걸

토글(Toggle)이라고 한다.

 

 

 

15강 비교 연산자와 불리언

 

See the Pen 비교연산자와 Boolean 데이터 타입 by egoing (@egoing) on CodePen.

===는 비교 연산자(Comparison operator)라고 부른다.

 

비교 연산자는 좌항과 우항의 관계에 따라서 true,false 둘 중 하나의 값을 만들어내는 연산자다.

좌항과 우항의 값이 같으면 true, 다르면 false가 나온다.

 

true와 false 두 가지 값을 묶어서 Boolean이라고 부른다.

 

number,string같은 경우는 무한히 많은 데이터가 있지만 boolean은

단 2개의 데이터로 이루어져 있는 데이터 타입이다.

 

 

#HTML에서는 <는 꺽쇠라는 문법이기 때문에 less than이라는 뜻에서 &lt;가 <역할을 한다.

 

 

 

16강 조건문

See the Pen 조건문 by egoing (@egoing) on CodePen.

 

if문의 뒤에 따라오는 괄호 안에는 불리언(boolean) 데이터 타입이 오는데

 

true라면 첫 번째 중괄호에 있는 코드들이 실행되고 두 번째 중괄호는 무시된다.

false라면 첫 번째 중괄호에 있는 코그들이 무시되고 두 번째 중괄호가 실행된다.

 

즉, 불리언의 값에 따라서 실행되는 코드가 바뀐다는 것이다.

 

 

 

17강 조건문의 활용

See the Pen 조건문의 활용 by egoing (@egoing) on CodePen.

<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';
    }
  ">

id가 night_day인 태그의 value 값이 night라면 배경은 검은색으로  글씨색은 하얀색으로 value값을 day로 바꾸라는 것

 

value값이 night가 아니라면 배경은 하얀색으로 글씨색은 검은색으로 value값을 night로 바꾸라는 것