본문 바로가기
front-end/JavaScript

자바스크립트, 배열과 반복문의 활용

by Dreaming Coder 2021. 1. 30. 15:10

 


이 포스팅은 PC로 작성되었습니다.

모바일로 보시는 분들에게는 가끔

줄 바꿈이 어색하게 보일 수 있습니다.

 


 

 

 

지난 포스트

 

자바스크립트, 배열과 반복문

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트, 중복되는 코드 제거 이 포스팅은 PC로 작성되었습니다.

gogogameboy.tistory.com

드디어 오늘은 지난번에 공부한 배열과 반복문을 이용해서 실제로 써먹을 수 있는 예를 하나 공부해보겠습니다.

 

 

 

역시 이번 생활코딩 강의 영상에서도 이고잉 님은 검색의 중요성을 언급하십니다.

하지만.. 그것도 영어를 어느정도 알아야 가능하겠죠. ㅎㅎ

아직 저에게는 영어로 원하는 코드를 검색하는 게 어렵네요.

 

 

 

 

document.querySelectorAll

 

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

 

 

 

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

let i = 0;

while(i < alist.length){

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

i++;

}

 

라는 소스 코드가 추가되었습니다.

(i = i + 1; 대신에 왜 i++; 를 썼는지에 대해서는 지난 포스트에 설명을 했습니다.)

 

먼저, 변수를 선언하는 let을 써준 뒤에 모든 <a> 태그를 가져옵니다.

지금까지 써왔던 document.querySelector로는 처음 나오는 <a> 태그 하나밖에 가져오지 않기 때문에

document.querySelectorAll('a'); 로 써줍니다.

 

그리고 지난번에 배운 반복문을 이용해서 모든 <a> 태그들에 style.color를 powderblue로 해줍니다.

 

 

0011 - ex_11.html
0.00MB

위의 소스 코드로 완성된 파일을 올려두겠습니다.

 

 

 

 

 

 

다음 포스트

 

자바스크립트, 함수 1

이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 자바스크립트, 배열과 반복문의 활용 이 포스팅은 PC로 작성되었습니

gogogameboy.tistory.com

 

 

 


이 글이 도움이 됐다면 하단의 공감 버튼을 꾹 눌러서
빨간 하트로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 


 


댓글