조건문

조건문이란?

if (boolean 데이터 타입이 오면, 조건에 따라서) {true일 경우에 실행되는 코드} else {false일 경우에 실행되는 코드}

<h1>Conditional statements</h1>
<h2>Program</h2>
<script>
  document.write("1<br>");
  document.write("2<br>");
  document.write("3<br>");
  document.write("4<br>");
</script>

<h2>if-true</h2>
<script>
  document.write("1<br>");
  if(true){
    document.write("2<br>");
  } else {
    document.write("3<br>");
  }
  document.write("4<br>");
</script>

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

<h2> If-true : 1, 2, 4가 차례로 출력됨
<h2> If-false : 1, 3, 4가 차례로 출력됨

조건문의 활용

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

=> 클릭 시에 배경이 검정색, 폰트가 흰색으로 변경되며, 같은 버튼을 한 번 더 누르면 배경이 흰색, 폰트가 검정색으로 변경되는 토글 버튼

[검색 tip] 자바스크립트의 요소 중에서 value값을 얻으려면,
- 검색어 : Javascript element get value 
- 검색결과 : document.getElementById("myText").value = "Johnny Bravo";

※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다.