생활코딩 WEB2 JavaScript - 6. 조건문

1. 조건문

if

if는 조건이 true일 때 쓰이고

 

else

else는 조건이 false일 때 쓰인다.

if <조건> :

    <조건이 True인 경우 실행할 문장들>
else :

    <조건이 False인 경우 실행할 문장들>

 

 

2. 조건문의 활용

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

 

id값을 "button"으로 주었으니 if 문장에서 body 대신 id값(button)을 넣어서 버튼을 타겟팅한다.

document.querySelector('#button')

 

이항연산자 ===로 인해 현재 value가 night라면 (값이 참이면) 첫번째 코드가 실행이 되고, 그 상황에서 버튼의 이름은 day로 바뀌어서 id값(button).value는 day가 된다.

 

그 상태에서 버튼을 누르면 value==='night'가 아니기 때문에 false가 되어 else의 조건문이 실행된다.

 

=> night 버튼을 누르면 배경은 검은색, 글씨는 흰색이 되고

day 버튼을 누르면 배경은 흰색, 글씨는 검은색이 되는 조건문