코드랩 레퍼런스
Javascript - 반복문 본문
반복문
반복되는 부분을 실행할 때 사용하는 제어문입니다.
while문
var 변수 = 초기값
while (조건식){
실행문;
증감식;
}
Sample1 while
1번째 실행
2번째 실행
3번째 실행
4번째 실행
5번째 실행
6번째 실행
7번째 실행
8번째 실행
9번째 실행
10번째 실행
2번째 실행
3번째 실행
4번째 실행
5번째 실행
6번째 실행
7번째 실행
8번째 실행
9번째 실행
10번째 실행
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
var count = 1;
while(true){
count++;
document.write(count + "번째 실행");
document.write("<br />");
if(count > 10){ // 조건
break;
}
}
</script>
</head>
<body>
...
</body>
</html>
Sample2 100보다 작은 숫자에서 4의배수 6의배수 출력하기
12
24
36
48
60
72
84
96
24
36
48
60
72
84
96
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
var i = 1;
while(i<=100){ //i가 100보다 작거나 같을 때 반복 실행합니다.
if( i % 4 == 0 && i % 6 == 0 ){
document.write(i+"<br />");
}
i++;
}
</script>
</head>
<body>
...
</body>
</html>
Sample3 100보다 작은 숫자에서 짝수는 파란색, 홀수는 빨간색 출력하기
1
2
3
4
5
6
7
8
.....
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
var i = 1;
while(i<=100){ //i가 100보다 작거나 같을 때 반복 실행합니다.
if( i % 2 == 0 ){
document.write("<span style='color:blue'>" + i + "</span>","<br />");
} else {
document.write("<span style='color:red'>" + i + "</span>","<br />");
}
i++;
}
</script>
</head>
<body>
...
</body>
</html>
do while문
while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후, 중괄호에 있는 실행문의 실행 여부를 결정합니다. 하지만 do while문은 반드시 한 번은 실행문을 실행하고 조건식을 검사합니다.
var 변수 = 초기값
do {
실행문;
증감식;
}while(조건식)
Sample3 do while문
1번째 실행
2번째 실행
3번째 실행
4번째 실행
5번째 실행
6번째 실행
...
95번째 실행
96번째 실행
97번째 실행
98번째 실행
99번째 실행
2번째 실행
3번째 실행
4번째 실행
5번째 실행
6번째 실행
...
95번째 실행
96번째 실행
97번째 실행
98번째 실행
99번째 실행
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
var count = 1;
do{
count++;
document.write(count + "번째 실행","");
}while(count <100);
</script>
</head>
<body>
...
</body>
</html>
for문
for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다.
for(초기값; 조건식; 증감값){
//반복 코드
}
0~100까지 반복을 한다면, 다음과 같이 표현합니다.
for(var i=0; i<100; i++){
//반복 코드
}
초기값 설정 : var i=0 초기 시작 값을 0으로 설정하고, 초기값은 오직 한 번만 실행되면 이후로는 실행되지 않습니다.
조건식 설정 : i<100 조건에 맞으면 실행됩니다.
증감 설정 : 조건에 맞으면 1씩 증가됩니다.
Example View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for문</title>
<script>
//0~100까지 출력
for (var i=0; i<=100; i++){
document.write("숫자"+i,"<br>");
}
//1~100까지 출력
for (var i=1; i<=100; i++){
document.write("숫자"+i,"<br>");
}
//1~100중에서 짝수만 출력
for (var i=0; i<=100; i+=2){
document.write("숫자"+i,"<br>");
}
//1~100중에서 홀수만 출력
for (var i=1; i<=100; i+=2){
document.write("숫자"+i,"<br>");
}
</script>
</head>
<body>
</body>
</html>
Example2 *표시로 출력하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
/* document.write("result =");
for (var i = 1; i <= 10; i++) {
document.write("*");
} */
var result = "";
for (var i = 1; i <= 10; i++) {
result += "*";
}
document.write("result = " + result);
</script>
</head>
<body>
...
</body>
</html>
Example2 5의 배수는 파란색, 7의 배수는 빨간색, 5와7의 배수는 검은색으로 출력하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
for(var i=1; i<100; i++){
if(i%5==0 && i%7!=0){ //5의 배수이고 7의 배수가 아닌경우
document.write("<span style='color:blue;'>"+i+"</span>","<br>");
}else if(i%7==0 && i%5!=0) { //7의 배수이고 5의 배수가 아닌 경우
document.write("<span style='color:red;'>"+i+"</span>","<br>");
}else if(i%7==0 && i%5==0){ //7의 배수이고 5의 배수인 경우
document.write("<span style='color:black;'>"+i+"</span>","<br>");
}
}
</script>
</head>
<body>
...
</body>
</html>
Example3 for문을 이용한 배열의 합 구하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
var arr4 = new Array(100,200,300,400,500,600,700,800,900);
var sum = 0;
for(var i=0; i<arr4.length; i++) {
sum = sum + arr4[i];
}
document.write(sum);
</script>
</head>
<body>
...
</body>
</html>
다중 for문
for문 안에 for문이 있는 형태입니다.
for(var i=0; i<100; i++){
for(var j=0; j<100; j++){
}
}
Sample3 구구단 만들기
2 X 1 = 2
2 X 2 = 4
2 X 3 = 6
2 X 4 = 8
2 X 5 = 10
2 X 6 = 12
2 X 7 = 14
2 X 8 = 16
....
9 X 4 = 36
9 X 5 = 45
9 X 6 = 54
9 X 7 = 63
9 X 8 = 72
9 X 9 = 81
2 X 2 = 4
2 X 3 = 6
2 X 4 = 8
2 X 5 = 10
2 X 6 = 12
2 X 7 = 14
2 X 8 = 16
....
9 X 4 = 36
9 X 5 = 45
9 X 6 = 54
9 X 7 = 63
9 X 8 = 72
9 X 9 = 81
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
for(var i=0; i<8; i++){
for(var j=0; j<9; j++){
var num1 = i + 2;
var num2 = j + 1;
var sum = num1 * num2;
document.write(num1 + " X " + num2 + " = " + sum);
document.write("
");
}
}
// var i var j
// 2~9 1~9
// num1 * num2 = sum
// 2 * 1 = 2
// 2 * 2 = 4
// 2 * 3 = 6
// 2 * 4 = 8
// 2 * 5 = 10
// 2 * 6 = 12
// 2 * 7 = 14
// 2 * 8 = 16
// 2 * 9 = 18
</script>
</head>
<body>
...
</body>
</html>
Example2 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
for (var i = 0; i < 10; i++) {
for (var j = 0; j < i + 1; j++) {
document.write("*");
}
document.write("<br />");
}
</script>
</head>
<body>
...
</body>
</html>
Example3 피라미드 만들기
<!DOCTYPE html>
Example4 다중for문을 이용한 테이블 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
var num=1;
var t="<table border='1'>"; //테이블 시작 태그
for(var i=1; i<=10; i++){
t+="<tr>"; //행 시작
for(var k=1; k<=10; k++){
t+="<td>"+num+"</td>";
num++;
}
t+="</tr>";
}
t+="</table>";
document.write(t);
</script>
</head>
<body>
...
</body>
</html>
for in 반복문
for (var i in array){
}
=
for (var i=0; i<array.length; i++){
}
}
=
for (var i=0; i<array.length; i++){
}
Example1 View
<!DOCTYPE html>
break문과 continue문
break문과 continue문은 반복문을 제어하는 명령어입니다.
break문 : 코드 실행문을 빠져나갈 때 사용하며, 일반적으로 반복문을 종료할 때 사용합니다.
continue문 : 코드 실행 중에 continue을 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다.
continue문 : 코드 실행 중에 continue을 만나면, 뒷 부분은 실행하지 않고 다음 반복 시퀀스로 넘어갑니다.
Example View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>자바스크립트(JavaScript)</title>
<script type="text/javascript">
var count = 0;
while(true){
count++;
if(count == 3){ /
continue;
}
document.write("" + count + "번째 실행");
document.write("<br />");
if(count > 9){
break;
}
}
</script>
</head>
<body>
...
</body>
</html>
Related Articles
more
Ad
Comments