18. Java Script - 조건문 if

※ 늦게라도 "코딩" 이란 것을 배워봐야 겠다는 사람이 있다면 혹시라도 도움이 될까 해서 나의 경험담을 적어보려 합니다.​

지난 회차에 Java Script와 HTML을 연결하는 "onclick" 과 제어할 태그를 선택하는 속성인 "querySeletor"에 관해서 알아봤습니다.

2022.04.14 - [50대에 코딩에 도전해 봅니다.] - 17. Java Script - onclick, document.querySelector

17. Java Script - onclick, document.querySelector

이번 회차에는 지난 번 만들었던 코드를 조건문을 써서 업그레이드 해보겠습니다.

 

 

 

---

>>> Java Script -  조건문 if

 

HTML는 내용을 작성하는 정보의 역할, CSS는 디자인을 담당하고,

Java Script로는 동작을 구현한다.

 

---

1. 코드

지난 회차에 만들었던 코드 입니다.

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

버튼이 night와 day로 2개가 있습니다. 이번회차에 이 두 개의 버튼을 조건문을 이용해 하나의 버튼에서 작용할 수 있는 코드를 만들어 보겠습니다.

​

조건문을 이용한 코드

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

 

https://pmxsg.github.io/Web/Javascript_v1.html

Making Web

 

조건문을 이용해 버튼 하나로 배경화면을 어둡게 또는 밝게 하는 동작을 하게 만들었습니다.

---

2. 조건문 if

 

 조건문

 

    영어 시간에 배웠던 조건문인 if문이 그대로 Java Script에도 같은 의미로 사용됩니다.

즉, 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다.

조건문 중에서 가장 기본이 되는 실행문은 if 문입니다.

조건문 형태는 if , if / else 등이 있습니다.

​

문법은,

​if ( 조건식 ) { 조건식이 참이면 실행되는 실행문; }

​if(조건식) { 조건식이 참이면 실행되는 실행문; }

else{ 조건식이 거짓이면 실행되는 실행문;}

​따라서, 조건식은 결과가 참(True) 또는 거짓(False) 가 나오는 형식으로 만들어져야 합니다.

 

데이터 타입 (Data Type)

데이터 타입이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다.

종류로는,

(1) 숫자 (number)

(2) 문자열(string)

(3) 불리언 (boolean)

(4) undefined

(5) 객체 ( object )

가 있습니다.

​

조건식에서 쓰는 데이터는 블리언(boolean) 입니다. 참,거짓 두 개의 값만 있습니다.

---

코드 설명

  (1) input id="night_day" type="button" value="night" onclick=

        input 태그를 열고 id를 "night_day" 로 설정했습니다.

        type은 button , value로 버튼 이름을 우선 "night"로 설정합니다.

        onclick 으로 Java Script를 호출합니다.

  (2) 조건식 : if(document.querySelector('#night_day').value == 'night')

​        조건식에서는 등호를 두 개로 사용하여 조건문임을 알려줍니다.

       조건문에서 사용하는 연산자를 비교 연산자라고 합니다.

  출처 :  http://tcpschool.com/javascript/js_operator_comparison

코딩교육 티씨피스쿨

 

    " querySelector('#night_day') " : 제어할 대상이 id가 "night_day'임을 알려줍니다.

    .value ==' 'night' : 제어할 대상의 value가 'night' 인지 여부를 판단합니다.

     즉 " id가 'night_day'인 버튼 이름이 "night" 가 맞습니까 ? " 라고 질문하고 있습니다.

    (3) {  

             document.querySelector('body').style.backgroundColor = 'black';   

             document.querySelector('body').style.color = 'white';

            document.querySelector('#night_day').value = 'day';

              }

​           조건식이 "참" 일 때 실행하는 실행문입니다.

​            버튼 이름이 night를 클릭하면 배경색은 검정, 글씨는 흰색으로 바꿔라라는 실행문입니다.

           지난 회차에 아래와 같이 설명한 바 있습니다.

CSS 선택자는 HTML 태그, id, class 3가지가 있습니다. HTML태그는 태그이름을 그대로 적용시키면 됩니다.
id인 경우는 id 이름 앞에 '#' 과 함께, Class인 경우는 '.'과 함께 써서 사용하면 됩니다.

 

document.querySelector('#demo').style.backgroundColor = 'black'; // id=demo 인경우
document.querySelector('.demo1').style.backgroundColor = 'black'; // class=demo1 인 경우

즉 "document.querySelector('body')"는 body태그 안을 제어하겠다고 알려주는 코드입니다.

    document.querySelector('#night_day').value = 'day';

    'night_day' 버튼 이름을 day로 바꾸라는 코드입니다.

(4) else {

                 document.querySelector('body').style.backgroundColor = 'white';

                 document.querySelector('body').style.color = 'black';

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

                }

​           조건식이 거짓이면 실행할 실행문입니다.

​           앞서 참일 때 실행한 실행문에서 버튼이름이 night에서 day로 바뀌게 됩니다.

            따라서 "day"로 이름이 바뀐 버튼을 클릭하게 되면 조건식,

            " if(document.querySelector('#night_day').value == 'night') "은 거짓이 됩니다.

            따라서 else 문이 실행하게 됩니다.

​유의할 부분

    처음 코드 짤 때 깜박하고 빠뜨려서 에러가 났던 부분들을 얘기해 보고자 합니다.

   ​ 첫번째가 조건식에서 등호를 하나만 하는 경우가 많았습니다. 등호 둘을 쓰는 것이 낯설고 익숙하지 않아서 종종  빠뜨리곤 했습니다.

​     두번째가 세미콜론(;) 찍는 것입니다. 실행문이 하나 일 때는 세미콜론이 없이 끝내도 에러없이 잘 실행되지만, 실행문이 여러 개 일 때는 세미콜론 ; 으로 실행문 사이를 구분합니다.

     ​혹시 다 잘 된 것 같은데 에러가 발생했다면, 이 두 부분을 잘 챙겨보시기 바랍니다.

​

---

 

https://pmxsg.github.io/Web/Javascript_v1.html

Making Web

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Making Web </title>
<style>
  .container{
      display: flex;
      flex-direction: column;
  }
  header{
      border-bottom:1px solid gray;
      padding-left:20px;
  }
  footer{
      border-top:1px solid gray;
      padding:20px;
      text-align: center;
  }
  .content{
      display:flex;
  }
  .content nav{
      border-right:1px solid gray;
  }
  .content aside{
      border-left:1px solid gray;    
  }
  nav, aside{
      flex-basis: 150px;
      flex-shrink: 0;   
  }
  main{
      padding:10px;
  }
  /* 추가분 */
  .clearfix {
            overflow: auto;
            border: 3px solid #4CAF50;
            padding: 5px;           
            
          }
    #img1{ width : 200px ;
           float:left; 
           margin : 20px;
    }
    #img2{ width : 400px; 
           float: right ; 
           margin : 20px;
    }
</style>
</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';
    }
  ">
  <div class="container">
    <header>
        <h1> Java Script </h1>
    </header>
    <section class="content">
        <nav>
          <ol>
            <li> <a href = "hello.html"> Hello, World! </a> </li>
            <li> <a href = "html.html"> HTML </a></li>
            <li> <a href="internet.html"> 인터넷 과 웹 </a> </li>
            <li> <a href="css.html"> CSS</a> </li>
            <li> <a href="0JavaScript.html"> Java Script</a> </li>
        </ol>
        </nav>
        <main>
            <h2 style="text-align: center;"> Java Script란 ? </h2> 
        <div class="clearfix">
           

          
            <p> 
                HTML는 내용을 작성하는 정보의 역할, <br> CSS는 디자인을 담당하고, <br>
                Java Script로는 동작을 구현한다.</p>

             <p>
                JavaScript는 세계에서 가장 인기 있는 프로그래밍 언어입니다. <br>

                JavaScript는 웹의 프로그래밍 언어입니다.
                <br>
                자바스크립트는 배우기 쉽습니다. <br>
<br>
                Java Script는 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있고, 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다고 합니다.

​

그만큼 Java Script는 웹상에서는 가장 많이 사용되고 있는 프로그래밍 언어입니다.
             </p>   
            <br>
           
         </div>
          <br>

          <h2> Java Script로 할 수 있는 일</h2>

           <div class="clearfix">
           
            <p id="demo"> JavaScript는 HTML 콘텐츠를 변경할 수 있습니다</p>            
            <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'> 확인 </button>
          </div>
          <br>
          <div class="clearfix">
            <p>JavaScript는 HTML 속성(attribute) 값을 변경할 수 있습니다.</p>
              <p>이 예제에서 JavaScript는 <img> 태그의 src(source) 속성 값을 변경합니다.</p>

              <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

             <img id="myImage" src="pic_bulboff.gif" style="width:100px">

            <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
           </div>
<br>
           <div class="clearfix">
            <p id="demo1">JavaScript는 HTML 스타일(CSS)을 변경할 수 있습니다.</p>

            <button type="button" onclick="document.getElementById('demo1').style.fontSize='35px'">Click Me!</button>
             
           </div> 
<br>
           <div class="clearfix">
            <p id="demo2"> JavaScript는 HTML 요소를 숨길 수 있습니다.</p>

<button type="button" onclick="document.getElementById('demo2').style.display='none'"> 숨기기!</button>
 
            
        </div> 
<br>
        <div class="clearfix">
            <p id="demo3" style="display:none">Hello JavaScript!</p>

            <button type="button" onclick="document.getElementById('demo3').style.display='block'">Click Me!</button>
                 
            
        </div> 
        </main>
        <aside>
          <h4 style="text-align: center;"> 코딩공부 참조할 <br>  만한 사이트 </h4>

          <ul>
          <li> <a href="https://www.w3schools.com/">W3Schools</a></li> 
          <li><a href="https://opentutorials.org/course/1">생활코딩</a></li>
          <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">Mdn Documents</a></li>
          <li><a href="http://www.tcpschool.com/">tcp School</a></li>
          </ul>


        </aside>
    </section>
    <footer>
        <a href="index.html">홈페이지</a>
    </footer>
</div>
  


</body>
</html>