18강. 리팩토링 중복 제거 + 자바스크립트 이해

검색을 잘 하자.

 

document.querySelector('#night_day').value = 'day';

계속 선택자 들어가는 문법을 헷갈려하는데 여기서 이 코드 해석은 

queryselector은 css선택자로 요소를 선택자게 해주기에(첫번째 요소만) 

이 문서에서 id값이 night_day인 요서의 값을 'day'로 바꾸겠다.

이런 뜻!

 

코드를 좀 더 길게 보면

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

 input태그 id가 night_day 이고(id는 중복 불가임!), 이 night_day botton의 if문 조건이 맞다면 값을 day로 바꾸는.. 뭐 그런 코드...임다..

 

적어서 정리하니까 별거 아니군! 

 

그런데 의문. 

분면 자바스크립트는 <script>태그 안에 있어야 한다고 했는데 왜 여기는 없는가? 아직 이건 자바스크립트가 아닌감.

 

그래서 조건문을 쓰면

 

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

이거를 

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

이렇게 하나로 합칠 수 있다!

 

이것이 조건문의 힘