[JavaScript] JS 조건문

조건문

하나의 프로그램의 여러 실행 경로 중에서 조건에 따라 하나의 경로를 선택하기 위한 문장으로 조건에 따라서 다른 순서대로 기능들이 실현된다.

if문, if-else문

주어진 조건식의 참과 거짓에 따라 2개의 실행 경로 중 하나를 선택.

if(boolean타입 조건식){

    문장(들); }

else{

   문장(들);}

    <h2>IF-true</h2>
    <script>
      document.write("1<br>")                       // 결과값 1, 2, 4
      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>")                // 결과값 1, 3, 4
      if(false){
        document.write("2<br>")
      } else {
        document.write("3<br>")
      }
      document.write("4<br>")
    </script>                               

switch문

하나의 표현식을 판단하여 다중 선택이 가능한 구조를 제공. 각 case문의 값과 비교해 일치하는 문장을 실행.

switch(표현식){

    case 값1 : 문장(들); break;

    case 값n : 문장(들); break;

    default : 문장(들)

}

<script>
 today = prompt("요일을 입력하세요.(월/화/수/목/금/토/일)","")
 switch(today){
  case "월" : document.write("오늘은 월요일입니다."); break;
  case "화" : document.write("오늘은 화요일입니다."); break;
  case "수" : document.write("오늘은 수요일입니다."); break;
  case "목" : document.write("오늘은 목요일입니다."); break;
  case "금" : document.write("오늘은 금요일입니다."); break;
  case "토" : 
  case "일" : document.write("주말입니다~"); break;
  default : document.write("요일이 잘못 입력되었습니다.");
 }
</script>

 

조건문으로 주/야간 모드 버튼 통합하기

선택자의 value값을 night로 변경

document.querySelector('선택자').value = '값'

태그의 value 알아내는 법 : 'javascript element get value' 검색

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