{SFB} Javascript day 9 - 반복문과 배열3

● 배열과 반복문의 활용

 

우리의 예제에서 한개의 버튼(토글형태) 만들었다. 야간 모드일 때는 링크들이 밝게 표시되고, 주간 모드일 때는 다소 어두운 계열로 링크가 표시되게 완성해보자.

 

콘솔을 이용해서 웹페이지에 적용해보면서 공부해보자.

웹페이지에서 모든 링크를 가져오기 위한 코드는

document.querySelector('a') 라고 배웠기에 이렇게 적용시켜보자.

그러면 나오는 값이 1개 나오는데 조금 이상하지 않나? 우리는 분명 모든 a태그를 불러오려고 입력했지만 맨 첫번째 a태그만 나온다.

그 이유는 querySelector() 명령어가 결과적으로 <a> 태그 중 맨 처음 등장하는 하나만 가져오기 때문이다.

따라서 전체 a 태그를 불러오기 위한 명령어는 바로

querySelectorAll() method 이다.

querySelectorAll('a') 를 입력하면 [a, a, a, a] 가 출력되는 것을 확인할 수 있다.

[] 안에 있는 것은 바로 배열이다.

물론 querySelectorAll() 의 결과는 배열이 아니고 nodelist 인데 일단 배열이라고 생각하자.

그리고 변수와 console.log() 를 이용해서 배열의 값을 불러와 보자. 

※ console.log() 는 콘솔에 () 값을 출력해주는 함수이다.

alist 변수를 만들어주고 document.querySelectorAll('a') 를 대입연산자로 대입시켜준뒤 console.log(alist[0]); 을 입력하면 <a href="index.html" style="color: blue;">WEB</a> 가 나오는 것을 확인할 수 있다.

이는 document.querySelectorAll('a') 의 배열값 중 0번째 인덱스 값으로 이해하면 되고 이 값이 첫 번째 a태그라고 이해할 수 있다.

마찬가지로 console.log(alist[1]); 를 입력하면 1번 째 인덱스 이자 문서 내 2번째 a태그임을 알 수 있다.

그렇다면 alist 배열의 값이 얼마나 있는지 알기 위해 alist.length를 입력해보자.

그 결과는 바로 4가 나온다 즉 alist 변수 안에 4개의 원소(element) 가 담겨있는 뜻이다.

 

이 점을 착안해서 할 수 있는 것이 무엇일까?

바로, 반복문을 이용해 alist 변수에 담긴 태그를 하나하나 꺼내서 그것의 style 속성을 지정할 수 있다.

alist 변수를 설정해주고,

var i = 0; 으로 i 변수의 값을 설정한다. 그리고 while 반복문의 {} 안에 i 값을 1씩 증가시키기 위해서 i = i + 1; 을 작성한다.

while 의 조건에는 ( i < alist.length ) 를 입력해주고 반복문을 이용하여 a 태그를 하나씩 불러오기 위한 값을 보기 위해 console.log(alist[i]); 값을 입력해준 뒤 결과를 보면 위 이미지와 같이 4개의 a태그가 모두 나오는 것을 확인할 수 있다.

 

모든 a 태그가 하나씩 하나씩 반복문에 의해 출력된다는 것을 알았으니 이것을 이용해서 a 태그에 style 값을 바꿔보자.

alist[i].style.color = 'powderblue'; 를 적어줌으로써 모든 a태그 하나하나의 글자색을 powderblue 로 적용한 모습을 확인할 수 있다.

이것을 복사하여 직접 코드에 적용시켜 주자.

야간 모드 일때 코드

var alist = document.querySelectorAll('a');

var i = 0;

while ( i < alist.length ) {

     alist[i].style.color = 'powderblue';

     i = i + 1;

}

주간 모드 일때 코드

var alist = document.querySelectorAll('a');

var i = 0;

while ( i < alist.length ) {

     alist[i].style.color = 'blue';

     i = i + 1;

}

를 if 문 안에 적어주면 우리가 원하는 작업이 완성된다.

 

이처럼 반복문을 이용한다면 간결하게 처리가능하고 아주 많은 일을 손쉽게 한번에 처리할 수 있게 된다. 또한, 컴퓨터는 많은 경우에 서로 연관된 데이터를 배열의 형태로 돌려주기 때문에 배열은 무척 중요하고 반복문도 정말 중요한 개념이다.

 

 

참조 : 생활코딩 유튜브 (www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA)