20. Java Script - 배열과 반복문

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

지난 회차에 Java Script 변수와 this에 대해서 알아봤습니다.

2022.04.24 - [50대에 코딩에 도전해 봅니다.] - 19. Java Script - 변수, this

19. Java Script - 변수, this

이번 회차에는 Java Script 조건문에 버금가는 반복문에 대해 알아보도록 하겠습니다.

 

 

 

---

>>> Java Script  배열과 반복문

 

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

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

 

지난 회차에 변수와 this를 이용해서 아래와 같이 코드를 간략히 정리해 봤습니다.

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

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

Making Web

 

이번 회차에서는 검은색 배경화면일 때 a 태그 링크가 보기에 편하게 색깔을 밝은 색 계열로 바꿔 보겠습니다.

​

코드를 만들기 전에 자바스크립터 배열에 대해서 잠깐 얘기해 보겠습니다.

반복문을 사용하려면 같이 자주 사용하는 배열에 대한 개념에 대해 알아보겠습니다.

---

 

1.  Java Script  배열 Array

   배열 Array 이란 ?

배열은 Java Script를 사용하다보면 많이 듣는 용어 중의 하나 입니다.

가장 직관적으로는 여러 데이터가 들어가 있는 변수 집합이라고 말할 수 있습니다.

통상 검색해서 나오는 정의는 "이름과 인덱스로 참조되는 정렬된 값의 집합" 이라고 합니다.

​ 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.

 

배열 Array 만드는 법

1) var cars = [ BMW, Benz, Audi ]

2) var cars = Array( BMW, Benz, Audi )

3) var cars = new Array( BMW, Benz, Audi )

​

위의 세가지 방법은 모두 같은 배열을 만들어 줍니다.

1)의 경우는 대괄호 [ ]와 쉼표(,)로 구분하여 만들어 주고,

2)의 경우는 Array를 선언하고 괄호와 쉼표로

3)의 경우는 new Array를 선언하고 괄호와 쉼표로 구분합니다.

편한 방법으로 사용하시면 됩니다.

 

배열의 인덱스 사용법

위의 cars 라는 배열에서 BMW를 가리키는 방법 중에 인덱스를 사용할 수 있습니다.

​인덱스는 배열에서의 위치를 가리키는 숫자입니다.

따라서, cars[0]은 "BMW"를 가리킵니다. 여기서 0은 첫번째를 의미하는 인덱스 입니다.

cars[1] 은 "Benz" , cars[2]는 "Audi"를 나타냅니다.

Java Script에서 인덱스는 0부터 시작합니다. 0이 첫번째를 의미합니다.

대부분의 프로그래밍언어들이 거의 다 0로 시작합니다.

 

배열의 길이

배열안에 몇 개의 데이터가 있는 지 알아내는 데 쓰이는 속성(Property)입니다.

​배열이름 뒤에 length를 붙이면 됩니다.

즉, "cars.length"로 사용하면 됩니다. 여기에서는 "3"을 의미합니다.

반복문과 함께 사용할 때 유용합니다. 반복문에서 다시 얘기해 보겠습니다.

​

2.  Java Script  반복문 while 문

Java Script에서 사용하는 반복문의 형태는

while 문 , do/while문, for 문, for / in문, for/of 문 등이 있습니다.

이번회차에서는 while문을 사용해 보겠습니다.

​반복문 문법

반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문입니다.

아마도 컴퓨터가 제일 잘하는 것이 반복하는 것일 겁니다. 사람은 반복을 하다보면 싫증이 나기도 하지만, 컴퓨터는 프로그램만 입력해주면 불평없이 끊임없이 반복할 수 있습니다.

​

제 개인적인적 으로는 이 반복문만 완벽하게 이해한다면 Java Script 뿐 아니라 다른 프로그래밍언어도 손쉽게 이해할 수 있을 것이라 생각됩니다. 최소한 절반이상은 프로그램을 이해했다고 해도 과언이 아닐 겁니다.

​

문법은,

while(조건식) {

조건식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문 ;

}

​

반복문 예시

var i = 1;
while(i<10) { 
   documnent.write ( i ) ;
   i = i + 1 ;
  }

위 코드를 실행하면 "123456789" 이 나타날 것 입니다.

​ while문 안의 조건식이 거짓이 될 때까지 계속 반복해서 실행하기 때문입니다.

"i = i +1" 을 실행문 안에 넣어줌으로해서 변수 i가 1씩 증가합니다.

즉, 변수 i는 1로 정하고 반복문이 시작해서 처음 " documnent.write ( 1 ) "을 실행하고, 그 다음 라인 " i = i + 1"을 거치면 i는 2가 되어 다시 조건식 의 i 에는 2가 들어가고 참이기 때문에 실행문은 i가 9까지 실행하고 10이 되면 거짓이 되어 실행문에서 빠져나오게 됩니다.

 

3.  코드 실행

이번 회차에서 업그레이드 할 코드입니다.

<input id="night_day" 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';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'yellow';
        i = i + 1;
      }
    } else {
      bodys.style.backgroundColor = 'white';
      bodys.style.color = 'black';
      this.value = 'night';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  ">

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

Making Web

 

 

바뀐 코드를 실행하면 a 태그의 색깔을 검은색 배경일 때 "노란색"으로 바뀌었습니다.

​기존 코드에 추가된 코드는 아래와 같습니다.

 

var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'yellow';
        i = i + 1;
      }

 

documenrt.querySelectorAll​

"document.querySelector('body')"는 body태그 안을 제어하겠다고 알려주는 코드라고 지난 회차에 얘기했었습니다.   "querySeletcor"는 하나의 태그만을 제어할 수 있습니다.

이 웹페이지의 a태그는 여러 개가 있기 때문에 "querySeletcor"를 사용할 수 없습니다.​

이 때, 사용할 수 있는 것이 "querySelectorAll" 입니다.

"querySeletcor"와 같은 기능을 하는데 복수의 태그를 지정할 때 사용합니다.​

따라서, document.querySelectorAll('a') 은 이 웹페이지에 있는 모든 a 태그들 모두를 제어하겠다고 알려줍니다.

이를 배열을 alist에 담습니다.

 

반복문 while

반복문을 이용하여 모든 a 태그들의 글자색을 바꾸려면, 먼저 a 태그가 총 몇 개인지를 알아야 합니다.

그래야 반복해야 할 횟수를 정해서 while문 안 조건식에 넣어줘야 합니다.​

물론 하나씩 a 태그 숫자를 세어서 숫자를 입력하는 방법도 있지만, 이 때 유용하게 사용하는 것이 배열의 총숫자를 알아낼 수 있는 length 속성입니다.​

while(i < alist.length ) : alist에 속해있는 a 태그 숫자만큼 반복하라는 의미가 됩니다.​

alist[i].style.color = 'yellow'; 처음 시작은 alist[0]의 글자색을 노란색으로..​

i = i + 1; i는 1이 되어 반복문의 조건식으로 갑니다. 이렇게 a 태그 모두가 반복되어 실행되고 나면 실행을 끝냅니다.

 

---

 

다시 배경색이 하얗게 되었을 때는 다시 a 태그 색을 파란색으로 바뀌게 하는 코드

var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }

 

---

---

최종 결과물 & 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 id="night_day" 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';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'yellow';
        i = i + 1;
      }
    } else {
      bodys.style.backgroundColor = 'white';
      bodys.style.color = 'black';
      this.value = 'night';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  ">
  <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>