[생활코딩]WEB2-JavaScript (3) (2020.12.8)

본 내용은 아래의 강의를 토대로 하여 작성하였습니다.

링크:opentutorials.org/course/3085

WEB2 - JavaScript - 생활코딩

 

1. 강의 내용

Array(배열)

책장에는 수많은 책을 정리할 수 있다. 잡다한 많은 물건들 또한 수납상자에 정리할 수 있다. 이처럼, 많은 것들을 정리하는 것은 중요하다. 프로그래밍은 무한에 가까운 데이터들을 다룬다. 이 데이터들을 정리하지 않으면 절대 정상적으로 코딩할 수 없을 것이다. 그러므로 프로그래밍에서도 정리정돈은 필수이다. 이 정리정돈을 프로그래밍에서는 Array(배열)이라고 한다. 

Array(배열)의 문법과 성격

 

 

var coworkers=["greedysiru","jaemin"];

 

 

배열의 문법은 위와 같다. 대괄호를 사용하고 값과 값 사이는 컴마로 구분한다. 저 명령어로 인해 coworkers라는 변수는 greedysiru와 jaemin이라는 stringd을 배열로서 존재한다.

 

 

배열을 출력하기 위해 아래를 입력하면,

 

 

document.write(coworkers[0]);

 

 

greedysiru가 출력된다. 1을 입력하면 jaemin이 나오는데, 이로 알 수 있는 것은 배열은 첫 번째가 0이라는 것이다.

 

 

document.write(coworkers.length);

 

 

입력하면 배열의 길이 2가 나온다. 문자열의 총 길이가 아닌 문자열의 개수를 말해준다.

 

 

coworkers.push("")

 

 

를 입력하면 배열에 해당 데이터를 입력할 수 있다.

 

반복문

반복문의 문법은 아래와 같다.

 

 

while( ){

}

 

 

괄호에는 불리언이 들어가서 true에서 false가 될 때까지 작업을 반복한다. false가 되면 다음 명령을 진행한다. while은 종료를 잘 지정해야 한다. 그렇지 않으면, 명령을 무한히 반복하여 웹 페이지를 열 수 없게 된다.

 

 

document.write('<li>1</li>') ;
      var i = 0;
      while(i<3){
      document.write('<li>2</li>') ;
      document.write('<li>3</li>') ;
      i = i + 1;
      }
      document.write('<li>4</li>') ;

 

 

위 반복문은 리스트를 만드는데, 1 다음에 2와3을 총 세 번 반복하는 반복문이다. 변수 i가 0에서 반복을 할 때마다 1이 더해지고, 3이 되면 false가 되므로 다음 명령을 실행하게 된다. 그 결과, 아래처럼 Loop가 출력된다.

 

 

Loop

 

배열과 반복문

배열 각각의 항목을 원소라고 한다. 아래처럼 배열의 수만큼 리스트에 배열을 나열하려면 어떻게 할까?

Loop & Array

아래의 명령어를 참고해보자.

 

 

<script>
      var coworkers = ['greedsiru','jaemin','sirujonmot','sirubabo'];
</script>

    <ul>
      <script>

        var i = 0;
        while(i < 4){
        document.write('<li>'+coworkers[i]+'</li>');
        i = i + 1
      }

      </script>
    </ul>

 

 

while문을 사용하여 위의 결과를 출력할 수 있다. 하지만, 이 명령어는 유연하지 못하다. 원소를 추가했을 때, 그 사항이 적용되지 않고 원소가 바뀌면 undefined가 뜰 수 있다. 이때는 while문의 조건에 배열의 원소수 coworkers.length를 넣어준다.

 

 

<h1>Loop & Array</h1>
    <script>
      var coworkers = ['greedsiru','etc', 'jaemin','sirujonmot','sirubabo'];
</script>
    <ul>
      <script>

        var i = 0;
        while(i < coworkers.length){
        document.write('<li>'+coworkers[i]+'</li>');
        i = i + 1
      }

 	  </script>
    </ul>

 

 

그 결과, 이제 어떤 원소를 추가하더라도 정상적으로 작동한다.

 

원소 추가

 

배열과 반복문의 활용

전에 만든 웹 페이지에 야간모드와 주간모드를 추가했었는데, 링크의 폰트 색상을 바꿔주는 기능을 추가함으로 가독성을 높일 것이다. 그러기 위해서, 해당 페이지의 모든 a태그들을 가져와, 속성을 부여해야 한다.

 

 

document.querySelector('a')

 

 

하지만, 이 명령어를 콘솔 창에서 실행하면 a태그 첫 번째만 가져와서 원하는 결과를 낼 수 없다. querySelectorAll('a')를 대신 쓰면 모든 a태그의 배열을 가져온다. 

 

 

var alist = document.querySelectorAll('a'); console.log(alist[0];

 

 

alist라는 변수를 만들고 여기에 a태그 배열의 첫 번째를 가져오면

 

 

콘솔

위처럼 a태그의 첫 번째가 출력이 된다. 이제 이 변수에 i를 넣어서 순차적으로 모든 태그의 폰트 색상을 바꿔주는 명령어를 입력할 수 있다.

 

 

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

 

 

alist.length는 배열의 수를 말하고 i의 초기값은 0이다. while을 한번 실행할 때 1씩 더해지므로 모든 링크에 원하는 폰트 색상이 적용된다. 이제 이것을 기존 명령어 버튼에 넣는다.

2. 느낀 점

반복문과 배열을 사용해서 페이지의 모든 a태그들에 폰트 속성을 변경할 수 있었다. document.querySelectorAll 메서드로 바로 폰트 속성을 주면 안 되나라는 의문이 들었는데, 저 메서드는 배열의 데이터 형태이므로 되지 않는다.

 

3. 명령어

 var coworkers = ["a", "b"];

변수에 배열 넣기

 

coworkers.length;

배열의 길이(수)

 

coworkers.push("")

배열에 데이터 추가

 

while( ){

}

( ) 안의 조건을 true일 때 { } 반복

 

'+variable+'

명령문 내 변수 추가

 

document.querySelector('a')

a태그를 첫 번째만 가져오는 매서드

 

document.querySeletorAll('a')

모든 a태그를 배열로 가져오는 매서드

 

console.log( )

콘솔에서 해당( )을 출력

 

array.length

배열수