웹언어 공부/JS
[JS] 반복문 - do-while문, for문
코밍이
2021. 8. 10. 14:28
1. 개발환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS, JS |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) do-whlie문
- 반드시 한 번은 코드를 실행하고 조건식을 검사
| 기본형 |
| var 변수=초깃값; do{ 자바스크립트 코드; 증감식; }whlie(조건식) |
2) for문
- 조건식을 만족할 때까지 특정 코드를 반복하여 실행
| 기본형 |
| for(초깃값; 조건식; 증감식){ 자바스크립트 코드; } |
3. 소스 코드 및 실행 결과
1) do-while문
- do_while_1_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> do while문 </title>
<script>
var i = 10;
do {
document.write("hello!");
} while(i < 3)
</script>
</head>
<body>
</body>
</html>
2) for문
- for_1_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> for문 </title>
<script>
for(var i=1; i<=10; i++){
document.write("반복" + i, "<br>");
}
</script>
</head>
<body>
</body>
</html>
- for_2_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> for문 </title>
<style>
*{margin: 0;}
.red{color: #f00;}
.green{color: #00f;}
.aqua{color: #0ff;}
</style>
<script>
for(var i = 1; i<=100; i++){
if(i % 5 == 0 && i % 7 != 0) {
document.write("<p class='red'>"+i+"</p>");
} else if (i % 7 == 0 && i % 5 != 0) {
document.write("<p class='green'>"+i+"</p>");
} else if (i % 7 == 0 && i % 5 == 0) {
document.write("<p class='aqua'>"+i+"</p>");
}
}
</script>
</head>
<body>
</body>
</html>