[JavaScript-생활코딩] 14. 조건문의 활용

https://opentutorials.org/module/3180/18878

조건문의 활용 - WEB2 - JavaScript

id 값이 night_day 인 저 element 의 value값을 어떻게 알아냈는지 검색하려면?

JavaScript Get Element Value

document.querySelector('#night_day').value

<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';
    }
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
</p>

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

id = # 타겟팅

onclick 이벤트

if (){}else{} 조건문

​

id값 : night_day

if에 넣은 id 값으로 인해 버튼 타겟팅이 된다.

​

이항연산자 === 으로 인해 현재 value가 night이면 (값이 : ture) 밑에 작성된 코드가 실행된다.

백그라운드색은 블랙, 글씨색은 화이트 - 실행

실행된 후 value값 day로 변경

​

value==='night'인데 바뀐 value 값이 day인 경우엔 값이 ture가 되지않아 false (=거짓 else) 가 되기 때문에

, if 안의 코드가 무시되고 else에 있는 코드가 실행된다.