<제어문>
- 코드의 방향을 제어
- 일반적인 코드방향 (왼쪽 > 오른쪽, 위>아래)
1. 선택문(코드를 선택하면 실행되고 선택하지 않으면 실행되지 않음)
① if, else-if, else ★ > 예약어
② switch(break)
2. 반복문(코드라인을 반복)
① for(break, continue) ★
② while(do while : 거의 잘 안씀)
3. IF문, else if문
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제어문>선택문>예악어</title>
</head>
<body>
<h3>제어문->선택문->if, else if, else</h3><hr>
<script>
gender = "m";
//if문 안에는 반드시 ture, false값이 들어간다.
if(gender=="m"){
document.writeln("당신은 남자입니다.");
}else{
document.writeln("당신은 여자입니다.");
}
document.writeln("<br>");
//제어문 전체에 적용 : 실행되는 코드에 중괄호가 없으면 밑 또는 옆에있는 한 줄만 적용된다.
//실행되는 코드가 두줄이상이면 반드시 중괄호 사용.(한줄일 경우 생략가능)
if(false)
document.writeln("실행1");
document.writeln("실행2");//IF문에 적용안됨
if(false)
document.writeln("실행");
document.writeln("실행4");
document.writeln("<br>")
//초등학교 1~2:저학년, 3~4:중학년, 5~6:고학년
grade = "3";
if(grade==1||grade==2){
document.writeln("저학년입니다.");
}else if(grade==3||grade==4){
document.writeln("중학년입니다.");
}else if(grade==5||grade==6){
document.writeln("고학년입니다.");
}else{
document.writeln("범위를 벗어났습니다.");
}
</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
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if-else</title>
</head>
<body>
<h3>if-else 학점 매기기</h3><hr>
<script>
var grade;
var score = prompt("홍길동님 점수를 입력하세요.",85);
score = parseInt(score);//문자열이 정수로 형변환 함수로 변경된다.(자주 사용하는 함수이다.)
//document.writeln(score+10);
if(score>90)
grade = "A";
else if(score>=80)
grade = "B";
else if(score>=70)
grade = "C";
else if(score>=60)
grade = "D"
else
grade = "F"
document.writeln(score +"는"+grade+"입니다.")
</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
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>과제</title>
</head>
<body>
<h3>1~12월까지 계절 맞추기</h3><hr>
<script>
var month = prompt("당신이 좋아하는 월을 입력하세요.","3")
//12,1,2는 겨울, 3~5 : 봄, 6~8 : 여름, 9~11 : 가을
//출력결과 ex)3월은 봄입니다. or 범위를 벗어나는 경우 : 해당하는 계절이 없습니다.
//if, if-else, else 사용
if(month==12||month==1||month==2)
document.writeln(month+"월은 겨울입니다.")
else if(month==3||month==4||month==5)
document.writeln(month+"월은 봄입니다.")
else if(month==6||month==7||month==8)
document.writeln(month+"월은 여름입니다.")
else if(month==9||month==10||month==11)
document.writeln(month+"월은 가을입니다.")
else
document.writeln("해당하는 계절이 없습니다")
</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. switch문
- 값에 따라 서로 다른 코드를 실행할 때, switch 문이 적합하다.
case 문의 ‘값’은 상수(리터럴)만 가능
- 잘 작성된 case 문
case 문의 ‘값’에 변수나 식은 사용 불가
- 잘못 작성된 case 문
switch 문에서 break 문의 역할
- switch 문 종료
- 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
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>switch문</title>
</head>
<body>
<h3>switch문</h3><hr>
<script>
var price = 0;
var coffee = prompt("무슨 커피를 주문하시겠습니까?", "에스프레소")
switch (coffee) {
case "에스프레소":
price = 2000;
break;//switch 빠져나감
case "espresso":
price = 2000;
break;
case "카푸치노":
price = 3000;
break;
case "카페라떼":
price = 3500;
break;
default://else랑 유사한 기능 (생략해도 문제없음)
document.writeln(coffee+"는 없습니다.");
break;
}
if(price!=0){
document.writeln(coffee+"는"+price+"원 입니다.")
}
document.writeln("<br>")
if(coffee == "에스프레소")
document.writeln(coffee +"는 2000원 입니다.")
else if(coffee == "espresso")
document.writeln(coffee+"는 2000원 입니다.")
else if(coffee == "카푸치노")
document.writeln(coffee+"는 3000원 입니다.")
else if(coffee == "카페라떼")
doxument.writeln(coffee+"는 3500원 입니다.")
else
document.writeln(coffee+"는 없습니다.")
</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.10 |
|---|---|
| (Javascript)제어문 - 반복문 (0) | 2020.03.10 |
| (Javascript) 연산 (0) | 2020.03.09 |
| 자바스크립트, 변수(전역변수, 지역변수), 상수 (0) | 2020.03.09 |
| (JavaScript)프롬프트 다이얼로그, 확인 다이얼로그, 경고 다이얼로그 (0) | 2020.03.09 |
rss