반복문
2023. 1. 12. 12:57
대표적인 for와 while을 살펴본다.
자바스크립트에서 for는 c에서 for와 매우 비슷하게 사용한다.
for ([초기문]; [조건문]; [증감문];) {
...
}
<!--예시-->
<script>
for (var i = 0; i < 10, i++) {
console.log(i)
}
</script>
while의 경우는 다른 프로그래밍 언어와 동일하게 사용한다.
while(조건문) {
...
}
<!--예시-->
<script>
var i = 0;
while (i < 5) {
console.log(i)
i++;
}
</script>
추가로 예제를 살펴보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i++;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = 'blue';
i++;
}
}
">
<ol>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javascript</a></li>
</ol>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
</p>
</body>
</html>버튼을 클릭하면 a태그들의 폰트색이 변경되도록하였다.
querySelectorAll()로 괄호 안에 있는 선택자에 해당하는 모든 요소들을 가져올 수 있다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs124
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
'공부 > JavaScript' 카테고리의 다른 글
| 객체 (0) | 2023.01.26 |
|---|---|
| 함수 (0) | 2023.01.26 |
| this와 리팩토링 (0) | 2023.01.12 |
| 조건문 (0) | 2023.01.12 |
| querySelector() (0) | 2023.01.11 |
