JavaScript의 이해 - array & loop

 

예제.array&loop

 

중점point

while(i < YYB.length){

document.write('<li>'+YYB[i]+'</li>');

}

*배열 안에 있는 원소의 인덱스(순번)을 루프로 돌려서
 배열안에 있는 원소를 한번에 가져오기위해 사용하고 일반적으로 그것을 출력하거나 속성등을 줄 수 있다

예제의 활용

document.write('<li><a href="http://www.a.com/'+YYB[i]+'">'+YYB[i]+'</a></li>');

를 쓰면 각 목록마다 링크를 주고 각각 이름마다의 주소로 링크를 보낼 수 있다.

 

 

*의문..

array편에서

 

var YYB = [~,~,~,~,~]

document.write('YYB',<br>,YYB)

 

에서는 배열 YYB를 가져올때 '+YYB+' 라고 쓰면 인식하지 않고

위 예제에서는 '+YYB[i]+'를 YYB라고 쓰면 인식 하지 않는다.. 차이는??
배열의 원소를 가져올때만 +를 쓰는 것인가?
아니면 html tag과 같은 html 언어 사이에 javascript의 언어를 쓸때 +를 쓰는것인가?  

 

 

 

 

예제2 활용

 

 

 

1.각각의 a링크들에 스타일 속성을 주고 싶다

2.모든 a tag들을 가져온다
3.document.querySelectorAll('a')를 쓰게 되면 모든 a tag들을 배열의 형식으로 가져온다

*이는 console창에서 document.querySelectorAll('a')를 입력했을떄 결과 값이 [a,a,a,a]의 형식으로 나오는 것으로부터
알 수 있다
4.그렇다면 배열안에 있는 모든 원소들에 대하여 한번에 출력하거나 속성을 주고 싶기때문에 array&loop를 사용

*alist[i].style.color='powderblue'에서 alist[i]는 i의 변수가 바뀔때마다 각각의 a tag들을 가져온다는 뜻

 이역시 console창에서

 var alist = document.querySelectorAll('a')
 var i = 0;
 while( i < alist.length){

 console.log(alist[i]);

 i = i +1;

 }

를 입력하면 각각의 a tag들이 출력되는 것을 확인할 수 있다
가져온 alist의 원소들을 에디터에서 출력할땐 document.write()를 쓰는것이고 console창에선
console.log.()를 쓰는 것이다