조건문 if

(Conditional statements)

1. if 조건문

if(조건){
    실행될 코드;
}

1-1. Boolean(true/false)

true 실행결과 = javascript

if(true){
    alert('javascript');
}

false 실행결과 = 아무것도 출력X

if(false){
    alert('javascript');
}

1-2. else

true 출력결과 = 1

if(true){
    alert(1);
} else {
    alert(2);
}

false 출력결과 = 2

if(false){
    alert(1);
} else {
    alert(2);
}

• if문의 조건이 true라면 if의 중괄호 구간이 실행

• if문의 조건이 false라면 else 이후의 중괄호 구간이 실행

1-3. if~else 조건문의 true/false 예시

true

<h2>IF-ture</h2>
<script>
     document.write("1<br>");      //1
     if(true){
          document.write("2<br>"); //2
     }else{
          document.write("3<br>"); //if가 ture이므로 실행X
     }
          document.write("4<br>"); //4
</script>

false

<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~else의 예시

1. value 값 가져오기

value값 가져오는 방법

search : javascript element get value

var value = document.getElementByid(id).value;

2. 예시) 주/야간모드 토글버튼 만들기

제어할 태그 선택하기의 주/야간모드에서 발전

좌 : night를 누르면 if구간 실행 / 우 : day를 누르면 else구간 실행

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