조건문과 그 활용 <생활코딩> 중

 

<생활코딩>의 내용을 발췌 및 정리

조건문

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

ㅇ위의 코드에서 if(true)의 뜻은 document.write("2<br>")을 실행시키겠다는 의미이다.

그래서 실제로 나올 때는

IF-true
1
2
4

이렇게 나온다.

 

하지만 위의 코드를 아래처럼 바꿔보자.

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

여기서 if(false)의 뜻은 else로 감싸져 있는 document.write("3<br>")을 실행시키겠다는 의미이다. 즉, 

IF-false
1
3
4

로 출력된다.

 

즉, if( ) 에서 ( )에는 Boolean의 값이 들어간다. Boolean이 무슨 값이 들어가 있는지에 따라 결과가 다르게 나타나는 것이다. 

---

조건문의 활용

<h1><a href="index.html">WEB</a></h1>
  <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';
    }
  ">

잘 봐야 할 것은 3번째 줄인 if 문이다.

document.querySelector('#id')는 앞에서 배웠던 제어할 태그를 선택하기 위한 명령어이고, ===는 비교 연산자이다. 

위 코드의 결과는 6분 20초부터 보면 됨.