들어가기 전에
우리는 지금까지 배열과 반복문을 사용해서 유용한 코드를 만들어 보았습니다. 그렇다면 마지막으로 이를 HTML과 함께 활용하는 방법을 살펴보도록 합시다.
학습 목표
배열과 반복문을 활용해서 웹사이트의 특정 태그 스타일을 바꿀 수 있습니다.
핵심 단어
- 반복문과 배열
- querySelectorAll
강의 듣기
23. 배열과 반복문의 활용
반복문과 배열의 활용
이번 강의에서는 night/day 모드 예제에서 하이퍼링크 부분의 색깔이 모드에 따라서 바뀌도록 만들어 봅시다. 지금까지 배운 반복문과 배열을 활용해서 말이죠.
먼저 이 페이지에 있는 모든 a 태그를 가져와야겠죠. 원래 사용하던 querySelector라는 함수는 하나의 태그만 알려주기 때문에 새로운 함수가 필요합니다. 바로 querySelectorAll이라는 함수죠. 다음과 같이 사용하면 됩니다.
var alist = document.querySelectorAll('a');이렇게 하면 querySelectorAll이 찾은 모든 a 태그를 배열 형태로 alist에 저장하게 됩니다.
그렇다면 이제 이렇게 만든 배열과 반복문을 사용해서 각각의 태그의 스타일을 지정해주도록 합시다. while문을 사용해서 스타일을 바꿔주려고 하는데, 이 때 이 반복문은 몇 번 실행되어야 할까요? alist의 길이만큼 실행되면 될 겁니다. 그렇다면 다음과 같이 써 주면 되겠죠.
var i = 0;
while (i < alist.length) {
}이제 이 while문 안에 각각의 스타일을 지정하는 코드를 넣어주도록 합시다. 먼저 alist의 i번째 원소를 가져오면 되겠죠. 그리고 이렇게 가져온 태그의 스타일을 지정해주면 됩니다. 마지막에 i에 1을 더해주는 것도 잊으면 안됩니다.
var i = 0;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}이 코드를 실행해보면 문서 안의 모든 a 태그의 색깔이 powderblue로 바뀌는 것을 볼 수 있을 겁니다.
이렇게 완성한 코드를 if문 안에 넣어주면 됩니다. 물론 night 모드에서 day 모드로 바뀔 때에는 powderblue대신 blue를 써주어야겠죠?
생각해보기
1) 이번 강의에서 배운 코드를 약간 수정해서 첫 번째 하이퍼링크를 제외한 나머지 세 개의 하이퍼링크만 색깔이 바뀌도록 만들어보세요.
comment
var alist = document.querySelectorAll('a');
var i = 1;
while(i<alist.length){
alist[i].style.color='powderblue';
i +=1;
}
var i = 1;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
var i = 0;
while (i < alist.length) {
if (i != 0) {
alist[i].style.color = 'powderblue';
}
i = i + 1;
}
var i = 1;
while (i < alist.length) {
alist[i].style.color = 'blue';
i = i + 1;
}
for (var i = 0; i <alist.length; i++){
if (i == 0){
alist[i].style.color = "";
}
else{
alist[i].style.color = "blue";
}
}
var i = 1;
while (i < alist.length) {
alist[i].style.color = 'blue';
i = i + 1;
}
var alist= document.querySelectorAll('a');
var i = 1;
while(i<alist.length){
alist[i].style.color = 'blue';
i++;
}
let alist =document.querySelectorAll('a');
let i = 1
while (i < alist.length) {
alist[i].style.color = 'powderblue';;
i= i +1
}
<script>
var alist =document.querySelectorAll('a');
console.log(alist);
var i = 1;
while (i < alist.length) {
alist[i].style.color = 'powderblue';;
i= i +1;
}
</script>
var alist = document.querySelectorAll('a');
var i = 1;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
var alist = document.querySelectorAll('a');
var i = 1;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
var alist = document.querySelectorAll('a')
var i = 1;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
var alist = document.querySelectorAll('a)
var i = 1;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
var alist = document.querySelectorAll('a')
var i = 1;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
var alist=document.querySelectorAll('a');
var i=1;
while (i<alist.length)
{ alist[i].style.color='powderblue';
i=i+1;
}
var alist = document.querySelectorAll('a');
var i = 1;
while(i < alist.length) {
console.log(alist[i]);
alist[i].style.color = 'red';
i = i+1;
}
var alist = document.querySelectorAll('a');
var i = 1;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i += 1;
}
<input id="night_day" type="button" value="night"
onclick="
var night_day = document.querySelector('body').style
if(this.value === 'night'){
night_day.backgroundColor = 'beige';
night_day.color ='brown'
this.value = 'day';
let aTag = document.querySelectorAll('a');
let i = 0
while(i<aTag.length){
aTag[i+1].style.color = 'brown';
i = i +1;
};
}
else{
night_day.backgroundColor = 'white';
night_day.color ='black';
this.value = 'night';
let aTag = document.querySelectorAll('a');
let i = 0
while(i<aTag.length){
aTag[i+1].style.color = 'black';
i = i +1;
};
}">
var i = 1;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i = i + 1;
}
https://github.com/JNyum/java_html.git
2_4