19. Java Script - 변수, this

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

지난 회차에 Java Scrip 조건문인 if문 에 대해서 알아봤습니다.

2022.04.18 - [50대에 코딩에 도전해 봅니다.] - 18. Java Script - 조건문 if

18. Java Script - 조건문 if

 

이번 회차에는 지난 번 조건문을 써서 만들었던 코드를 변수와 this를 통해서 간략히 정리하려고 합니다.

---

 >>> Java Script 변수 & this

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

지난 번 조건문 if로 만들었던 코드입니다.

 <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

---

1. Java Script 변수 ( Variable )

 

위의 코드를 아래와 같이 단순화 시켜보려고 합니다.

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

이 때 유용하게 사용하는 것이 변수 입니다.

​

변수는 데이터를 저장하기 위한 장소입니다. 그래서 그릇이라고 하기도 하고 컨테이너라 말하기도 합니다. 이 변수는 거의 대부분의 컴퓨터 프로그래밍 언어에서 같은 의미로 사용하기 때문에 한 번 잘 알아두면 다른 언어를 배울 때도 유용합니다.

​

변수를 사용하는 이유는 값을 변경하고 변경된 값을 적용하는데 좀더 효율적이고 쉽게 작업하는데 용이하기 때문입니다. 있어보이게 말하자면, "코드의 재활용성과 가독성을 높여주고 중복을 제거하여 유지보수가 용이" 하기 때문이라고 합니다.

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

위 코드에서 보면, "document.querySelector('body')" 가 4번 반복해서 사용하고 있습니다.

​

이 중복을 간략히 하기 위해 쓰는 방법이 변수를 사용하는 것입니다.

​

변수를 사용하려면 먼저 변수 선언을 해야합니다.

기본적으로 var를 사용합니다. var은 variable 약어입니다.

예를 들어, var a = 25 , 라 선언하면 변수 a는 25를 담고 있는 저장소입니다.

​

변수 이름은 영문자(대소문자),숫자,언더스코어(_) 또는 $ 로만 구성됩니다.

다만 숫자와의 구분을 빠르게 하려고 숫자로는 시작할 수 없습니다.

​

변수 선언하는 또 다른 방법은 let, const가 있습니다.

var과 다른 점이라면, let은 변수에 재할당이 가능하고 const는 변수 재선언, 재할당 모두 불가능합니다.

즉, 변수를 바꾸지 않고 계속 쓰고자 한다면 const 선언하고 사용하시면 됩니다.

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

여기서는 변수이름을 "bodys"라고 정하고, 반복되었던 "document.querySelector('body')"를 변수 안에 담았습니다.

var bodys = document.querySelector('body')

그리고  if문 안의 "document.querySelector('body') " 자리에는 변수 "bodys"로 대체합니다.

​

2. Java Script - this

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

위 코드에서 보면, "document.querySelector('#night_day')" 가 3번 반복해서 사용하고 있습니다.

​

이 중복을 줄이기 위해서 사용할 수 있는 것이 "this" 라는 변수입니다.

​

"this"는 Java Script예약어 입니다. 즉, 프로그램내의 용법이 정해져 있다는 뜻입니다.

​

"this"란 "이것"이란 뜻입니다. 그래서, 프로그램 내에서 자기 자신을 나타낼 때 "this"라는 특수 변수를 사용합니다.

다만, "this"는 어느 위치에 있는지, 어디에서 호출 되는지, 어떤 함수에 있느냐에 따라 참조 값이 달라집니다. 그래서 사용할 때 자기자신이 어디에 위치해 있는지에 대한 주의를 해야합니다.

​

"document.querySelector('#night_day')"는 id가 "night_day"를 가리킵니다. 이를 "this" 로 대체한다면, 여기서 "this"는 input 태그 자체를 의미합니다. 따라서, id="night-day"를 제거해도 똑같이 실행됩니다.

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

이렇게 "this"를 사용하는 이유는 this를 사용함으로써 추가 보완없이 그대로 복사해서 어느 곳에서든 사용할 수 있습니다. 만약, this를 쓰지않고 원래 코드를 복사해서 쓰려면, id를 바꿔줘야 합니다. id의 특성상 하나만 대표하기 때문에 복사해서 다른 곳에 붙여넣어 쓰려면 id는 변경해 주어야 합니다.

 

---

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

Making Web

Full Code

<!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 type="button" value="night" onclick="
      var bodys = document.querySelector('body')
    if(this.value === 'night'){
      bodys.style.backgroundColor = 'black';
      bodys.style.color = 'white';
      this.value = 'day';
    } else {
      bodys.style.backgroundColor = 'white';
      bodys.style.color = 'black';
      this.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>