자바스크립트(JavaScript) 기초 - JS 문법 : 조건문

< 자바스크립트(JavaScript) 기초 - JS 문법 : 조건문 >

1. 조건문 기본구문

if(boolean data type의 조건문){조건문이 참일 때 실행될 JS 명령어}

else {조건문이 거짓인 경우 실행될 JS 명령어}

2. 비교연산자(result --> true or false)

   : === (=), &lt; (<), &gt; (>)

3. 조건문 활용 --> 버튼 2개를 조건에 따라 다른 동작을 하는 togle 버튼 하나로 변경

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

    }

  ">

4. 코드 리팩토링(code refactoring) : this(this가 속한 tag 자신), target(변수)

  <input id="night_day" type="button" value="night" onclick="

    var target = document.querySelector('body');

    if(this.value === 'night'){

      target.style.backgroundColor = 'black';

      target.style.color = 'white';

      this.value = 'day';

    } else {

      target.style.backgroundColor = 'white';

      target.style.color = 'black';

      this.value = 'night';

    }

  ">