본문 바로가기
블록체인 및 경제/웹프로그래밍

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

by kimsfamily 2020. 10. 8.

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

6. 자바스크립트로 웹브라우저 제어하기

7. 비교연산자, Boolean 데이터타입

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

9. 리팩토링(refactoring)

10. 배열에 대한 이해

11. 반복문에 대하여

12. 배열과 반복문

13. 배열과 반복문의 활용

14. 함수란 무엇이고 왜 필요한가?

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

21. 라이브러리와 프레임워크

22. API & UI 그리고 프로젝트 활용도구

 


 

이번시간에는 조건문(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