본문 바로가기
웹프로그래밍

[JS] 8. 자바스크립트 조건문 및 활용법

by kimsfamily 2020. 10. 8.

이번시간에는 조건문(if else)에 대해서 배워보겠습니다. 1. 자바스크립트 조건문 If, else

새로운 html파일을 작성해서 아래와 같이 코딩해봅니다.

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

결과를 보시면? 

 

if문 ( ) 안에는 boolean 데이터타입이 옵니다. (true 또는 false가 옵니다.)

위 코딩에서 if가 true이기 때문에

2,4가 출력이 됩니다. 

위코딩에서는 if(false)이기 때문에,

3,4가 출력이 됩니다.

 

즉, if 다음의 ( ) 의 값의 결과에 따라서 if 문 중괄호 안에 있는 코딩을 출력하든지, else문 중괄호 안에 있는 코딩을 결과값으로 출력해주게 됩니다.

 

 

2. 자바스크립트 조건문 활용하기

2.1 기본적인 if else문으로 아래 코드를 입력합니다.

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

 

button의 value값 이름을 night로 지정했고, 클릭이벤트가 발생하였을 경우에

조건문을 통해서 블랙 또는 화이트로 표시되는것까지 코딩했습니다.

 

2.1 if 문 안에 조건문을 넣어봅시다.

 

먼저 value를 night로 지정해 주었는데 여기에 id값을 지정해주고 어떻게 value값을 자바스크립트로 불러오는지를 알아야 합니다.

input태그에 먼저 id값 id="night_day"를 지정해줍니다.

그리고 웹페이지 개발자도구에서,input 태그 소스부분에 마우스를 올려놓으시면 아래와 같이 확인이 가능한데요.

우리가 해결하고자 하는건 이 #night_day의 value값을 어떻게 자바스크립트로 가져오는지입니다.

 

 

2.2 자바스크립트로 해당하는 버튼의 Value값 알아오기

 

일단 검색을 해봅시다!

javascript element get value 이렇게 검색했습니다.

 

 

첫번째 문서에 보면 질문이 있고, 이에 대한 답들이 있는데요 답 아래에 내려보니,

아래와 같이 사용법에 대한 답이 잘 나와있네요 한번 적용해보겠습니다.

var value = document.getElementById(id).value;

 

 

위 예시를 따라서 콘솔창에서 아래와 같이 코딩해봅니다.

document.querySelector('#night_day')

아래와 같이 #night_day를 잘 불러왔습니다.

 

다음으로는 value값을 한번 가져와볼께요

아래와 같이 입력해보시고 결과를 보면, night를 불러온걸 확인할 수 있습니다.

Element에서 value를 day로 바꿔서 다시 코딩해봅니다.

소스에서 value의 night를 day로 바꾸고,

아래와 같이 value값을 출력해보면, day로 표시되는걸 확인할 수 있습니다.

 

 

2.3 적용해보기

 

아래의 코드를 한번 적용해봅시다.

  if(document.querySelector('#night_day').value === 'night')

의미는, document.querySelector('#night_day').value가 night와 같다면, 아래의 코드가 실행되고 아니라면 그 밑에 코드가 실행되라는 뜻입니다.

 

자, 실행을 했더니 night로는 바뀌었는데 이 버튼에서 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';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }
  ">

기존에 있던 코드에서 아래부분이 추가가 되었습니다.

즉, night로 바뀌고 나서 기존에 iput 태그에 있던 value값을 day로 바꿔줍니다.

그리고 else는 그 반대로 해줍니다.

      document.querySelector('#night_day').value = 'day';
    } else {
      document.querySelector('#night_day').value = 'night';

결과를 보시면 아래와 같이 잘 바뀌는걸 확인할 수 있습니다.

 

네, 이번시간에는 자바스크립트 조건문에 대해서 배웠습니다.

조건문을 잘 활용하는게 프로그래밍에서 아주 중요합니다.

 

 

아래 생활코딩 강의안을 바탕으로 재작성된 강의안입니다.

opentutorials.org/course/3085/18878

 

댓글0