본문 바로가기
cording/생활코딩

[Java Script] 조건문의 활용

효기롭다 2022. 3. 5. 00:14

조건문 if 를 사용해보기.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <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>
  </body>
</html>

 

결과값

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <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>
  </body>
</html>

if의 값이 true일때 2가 실행되고 3이 실행 되지 않고 4가 실행된다. 

반대로 if의 값이 false일때 2가 실행되지 않고 3,4가 실행된다.

 

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
  <body>
    <input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
    ">
    <input type="button" value="day" onclick="
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
    ">
    <input id="night_day" type="button" value="night" onclick="
      if(night)
        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';
      }
    ">
    <h2>Hello world</h2>
  </body>
</html>

 

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
  <body>
    <input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
    ">
    <input type="button" value="day" onclick="
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
    ">
    <input id="night_day" type="button" value="night" onclick="  

: 기본 페이지의 값이 흰색 바탕임으로 night 일때라는 조건을 설정해줬다.


      if(night)
        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';
      }

: 아닌경우는 day일때로 설정해준다.
    ">
    <h2>Hello world</h2>
  </body>
</html>

* id="night_day"  아이디 값을 설정해주고 값이 night 가 맞는지 웹페이지의 검사페이지에서 확인해본다.

document.querySelector('#night_day').value 을 검사하면 night 가 나오는걸 알수있다. 

*여기서 value 값을 day 로 바꾸면 day 값이 나오는걸 알수있다.

 

그렇다면, 

 

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
  <body>
    <input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
    ">
    <input type="button" value="day" onclick="
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
    ">
    <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';
      }
    ">
    <h2>Hello world</h2>

 

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
  <body>
    <input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
    ">
    <input type="button" value="day" onclick="
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
    ">
    <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'; 
      }
    ">
    <h2>Hello world</h2>

*  현재 id값의 value 가 night 이면 === night 값이 참이므로 밑에 작성한 코드(백그라운드 블랙, 컬러 화이트)가 실행이되고, 그 후의 실행값(=버튼이)은 day로 바뀌게 된다.

그러면 다시 id값의 value가 day 이기 때문에 === night 거짓이 된다. 때문에 참일때의 if 안의 코드는 무시가 되고 그 밑의 else에 있는 코드가 실행된다. 그리고 그 후 id.value는 night이 된다.

if 조건문으로 두가지 모두를 충족시키는 버튼을 만들었고 그러므로 위의 각각의 버튼은 필요없어 삭제한다.

 

결과물로 다시 이해를 해보자.

적용전의 결과물이다. 맨 오른쪽 버튼 (if 조건문을 사용한)이 night 값. 그러므로 === night 이라는 조건이 참이다. 누르게되면

참일때의 조건대로 백그라운드 블랙, 컬러 화이트로 적용되었고, 버튼또한 day의 값이 되었다. 다시 버튼을 누르면 id의 값이 day === night 거짓임으로 if 안의 조건은 실행되지 않고 else의 조건이 실행된다.

 

 다시 적용전의 결과물로 돌아온다. 

 

정리된 코드들.

 

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
  </head>
  <body>
    <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';
      }
    ">
    <h2>Hello world</h2>
  </body>
</html>
저작자표시 비영리 동일조건 (새창열림)

'cording > 생활코딩' 카테고리의 다른 글

[Java Script] 배열  (0) 2022.03.07
[Java Script] 리팩토링 중복의 제거  (0) 2022.03.06
[Java Script] 비교연산자  (0) 2022.03.03
[Java Script] 웹브라우저 제어  (0) 2022.03.03
[Java Script] 자바스크립트 데이터 타입  (0) 2022.03.03

'cording/생활코딩' Related Articles

티스토리툴바