최종 목표 : 버튼 클릭 시, 어두운 경우엔 밝게, 밝은 경우엔 어두운 컬러로 링크가 표현되도록 한다.
웹페이지에 모든 링크를 style 속성 값을 밝게 바꿔준다. -> 일일이? No!! 반복문을 이용해서
배열
데이터가 많아짐에 따라 연관된 데이터들을 모아서 담아두는 수납상자
반복문
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration
developer.mozilla.org
동료 이름을 나열하려고 한다. 동료가 100명이면...??
- 배열에 서로 연관된 데이터들을 담는다.
- 반복문을 통해 배열에 담긴 데이터를 순차적으로 꺼내서 li 라는 태그로 만들어 준다.
배열에서 각 항목을 '원소(element)' 라고 한다.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<h1>Loop & Array</h1>
<script>
var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];
</script>
<h2>Co workers</h2>
<ul>
<script>
i = 0;
while( i < coworkers.length ){
document.write('<li>'+coworkers[i]+'</li>');
i++;
}
</script>
</ul>
</body>
</html>
데이터가 바뀐다고 해서 로직을 수정한다??? NO!!!
바뀌는 데이터에 따라 유연하게, 다이나믹하게, 일래스틱하게 동작하도록 해야 한다.
예를 들어, while의 조건문에 조건의 값으로 상수가 아닌 배열의 길이 (.length) 가 들어가도록 하면 된다.
배열과 반복문의 활용
목표 : 버튼 클릭 시, 웹페이지에 모든 링크가 어두운 경우엔 밝게, 밝은 경우엔 어두운 컬러로 표현되도록 style 속성값을 바꿔준다.
1. HTML 내의 모든 a 태그를 가져와서 배열로 저장 [JS 문법]
javascript get all html tags
javascript get element by css selector multiple
콘솔창에서 먼저 테스트해보면 된다.
2. a 태그의 style 속성값 설정
<input type="button" value="night" onclick="
var target = document.querySelector('body');
var alist = document.querySelectorAll('a');
if(this.value === 'night'){
target.style.backgroundColor = 'gray';
target.style.color = 'white';
this.value='day';
var i=0;
while( i < alist.length ){
alist[i].style.color = 'orange';
i++;
}
}else{
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value='night';
var i=0;
while( i < alist.length ){
alist[i].style.color = 'black';
i++;
}
}
">
01
'코딩공부 > WEB2 - JavaScript' 카테고리의 다른 글
| [9] 객체 (0) | 2019.09.07 |
|---|---|
| [8] 함수 (0) | 2019.09.06 |
| [6] 리팩토링(refactoring) - 중복의 제거, this 키워드 (0) | 2019.09.06 |
| [5] 조건문 (0) | 2019.09.06 |
| [4] 프로그램, 프로그래밍, 프로그래머 (0) | 2019.09.06 |
