<제어문>
- 코드의 방향을 제어
- 일반적인 코드방향 (왼쪽 > 오른쪽, 위>아래)
1. 선택문(코드를 선택하면 실행되고 선택하지 않으면 실행되지 않음)
① if, else-if, else ★ > 예약어
② switch(break)
2. 반복문(코드라인을 반복)
① for(break, continue) ★
② while(do while : 거의 잘 안씀)
3. for문
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제어문->반복문->for문</title>
</head>
<body>
<h3>for문</h3><hr>
<script>
//1~10까지 합을 구하시오
var sum = 0;
for(var i=1; i<11; i++){
sum = sum + i;
}
document.writeln("sum : "+sum+"<br>");
//1에서 10까지의 합을 구하시오.(식 포함)
sum = 0;
for(var i=1;i<11;i++){
sum+=i;
if(i!=10) document.writeln(i+"+");
else document.writeln(i+"=");
}
document.writeln(sum+"<br>");
//1~30에서 짝수의 합을 구하시오.
sum = 0;
for(i=1;i<=30;i++){
if(i%2==0){
document.writeln(i);
sum+=i;
}
}
document.writeln(sum+"<br>")
//1~20에서 3의 배수의 합을 식과 함께 구하시오.
sum = 0 ;
for(var i=1;i<=20;i++){
if(i%3==0){
document.writeln(i)
sum+=i;
}
}
document.writeln(sum+"<br>")
//강사님 답
sum = 0;
for(i=1;i<=20;i++){
if(i%3==0){
sum+=i;
if(i<18)document.writeln(i+"+");
else document.writeln(i+"=");
}
}
document.writeln(sum+"<br>")
//1~20에서 3,6,9 게임의 합을 식과 함께 출력하시오.
sum = 0;
for(var i=1;i<20;i++){
if(i%10==3||i%10==6||i%10==9){
document.writeln(i)
sum+=i;
}
}
document.writeln(sum+"<br>")
//강사님 답
sum = 0;
for(i=1;i<=20;i++){
j = i%10;
//n = j%3;
if(j==3||j==6||j==9){
document.writeln(i);
sum+=i;
}
}
document.writeln(sum+"<br>")
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>for문으로 10px~35px 크기 출력하기</h3><hr>
<script>
for(var size=10;size<=35;size+=5){
document.writeln("<p style='font-size:"+size+"px'>");//<p style='font-size;5px'>size+px</p>
document.writeln(size+"px</p>")
}
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
4.while문
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while문</title>
</head>
<body>
<h3>while문으로 0에서 n까지 합</h3>
<script>
var n = prompt("0보다 큰 정수를 입력하세요.","1");
n = parseInt(n);//문자열이 정수로 변경
i = 0;sum = 0;
while(i<=n){
sum+=i;
i++;
}
document.writeln("0에서"+n+"까지의 합은"+sum);
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
5. do-while문
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while문</title>
</head>
<body>
<h3>do-while문</h3>
<script>
//1에서 10까지 합을 do-while문 구현
sum = 0;
i = 1;
do{
sum+=i
i++;
}while(i<11);
document.writeln("sum:"+sum)
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
6. 반복문 내의 break 문과 continue 문
break문
- 가장 안쪽 반복문 하나만 벗어나도록 제어한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break문</title>
</head>
<body>
<h3>break문</h3><hr>
<script>
//1에서 얼마까지 더해야 3000을 넘는가?
sum=0;
flag = true;
for(i=0;flag;i++){
sum+=i;
if(sum>3000){
flag=false;
document.writeln("i:"+i+"<br>");
}
}
document.writeln("sum:"+sum)
document.writeln("<br>========================<br>")
//break : 반복문을 벗어나는 기능
sum = 0;
for(i=1;true;i++){
sum+=i;
if(sum>3000){
document.writeln(i+"<br>");
break;//for문은 중지되고 31라인을 빠져나옴
}//if문
}//for문
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
continue문
- 반복 코드 실행 중단, 다음 반복으로 점프
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>continue문</title>
</head>
<body>
<h3>1~10사이의 3으로 나눈 나머지가 1인 수만 더하기</h3><hr>
<script>
//continue 사용하지 않고
sum = 0;
for(i=1;i<=10;i++){
if(i%3==1){
document.writeln(i);
sum+=i;
}
}
document.writeln("="+sum);
document.writeln("<br>")
//break문
sum = 0;
for(var i=1;i<11;i++){
if(i%3!=1){
continue;//증감식으로 이동한다.
}
sum+=i;
}
document.writeln("sum:"+sum+"<br>")
</script>
</h3>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
7. 중첩 for문
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>중첩 for문</title>
</head>
<body>
<h3>중첩 for문</h3><hr>
<script>
for(i=1;i<3;i++){
for(j=1;j<4;j++){//바깥 for문이랑 안쪽 for문이랑 변수가 달라야함
document.writeln("i:"+i+",j:"+j+"<br>");
}
document.writeln("<br>");
}//for1
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'화면구현' 카테고리의 다른 글
| (Javascript) 함수 (0) | 2020.03.11 |
|---|---|
| (Javascript) 구구단만들기 (0) | 2020.03.10 |
| (Javascript)제어문 - 선택문 (0) | 2020.03.10 |
| (Javascript) 연산 (0) | 2020.03.09 |
| 자바스크립트, 변수(전역변수, 지역변수), 상수 (0) | 2020.03.09 |
rss