생활코딩 Javascript #9 배열과 반복문 활용

Javascript #9 배열과 반복문 활용

 

> 선행

생활코딩 Javascript #8 배열과 반복문

 

 

 

22. 배열과 반복문 하이브리드

1) 배열 안의 원소들을 불러와서 반복문으로 리스트 태그에 넣기

① 배열 생성하기

var coworkers = ['ramin', 'choi', 'dana', 'udin']

 

② 반복문 기본 형태

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

- i 가 0에서 3 일 때 반복문 실행

- 문서에 li 태그를 불러온다.

  초기화를 안 해놓은 상태에서 li 의 기본 스타일이 적용되어 화면에 표시될 것.

- 반복문을 실행하면 i 는 1씩 증가한다.

 

③ 배열 불러오기

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

- 태그는 ' ' 로 감싼다.

- 태그와 변수를 연결하기 위한 기호 → +

- 문제점 1 : coworkers 전체(4명 전부 다)를 4번 불러온다.

- 문제점 2 : 동료가 추가될 때마다 조건 부분을 수정해야 한다.

 

④ 로직화

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

- coworkers 의 길이(length)를 숫자 대신 입력하면 목록에 동료들이 추가될 때마다 조건을 수정하지 않아도 된다.

- coworkers 뒤에 [i] 를 붙이면 해당 조건의 배열만 불러올 수 있다.

 

 

 

23. 배열과 반복문 활용

1) querySelector

콘솔

- querySelector 라는 메소드(=함수 =명령)는 태그의 첫번째 하나만 가져오는 특성을 가지고 있다.

 

 

2) querySelectorAll

콘솔

- querySelectorAll 이라는 메소드는 배열을 가져온다.

-즉, a 태그 객체 전부를 검색해서 배열로 가져옴

(완벽한 배열은 아니고 노드 리스트라는 배열)

 

 

2) 변수에 담아서 로그를 콘솔창에 출력

콘솔

- console.log(); → 로그 안의 결과가 콘솔창에서 출력된다.

 

 

3) while 문을 이용해 태그들을 하나씩 꺼내서 스타일 지정하기

콘솔

- 모든 태그를 화면에 출력할 수 있다.

 

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

결괏값

- alist : a 태그들을 모아놓은 배열

- a 태그들을 전부 powderblue 색상으로 변경