📖 제어문이란?
프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 제어하거나 반복시키는 문장
| 분류 | 제어문 |
| 조건문 | if, switch |
| 반복문 | while, do while, for |
| 중지, 건너뛰기 | break, continue |
1. 조건문
주어진 조건식에 따라 실행문을 실행하거나 실행하지 않음
조건식의 결과가 true 이면 내부의 실행문을 실행, false 이면 실행문을 실행X
| 조건문의 종류 | 설명 |
| if 문 | 조건식의 결과가 참(true)이면 실행문을 실행, 거짓(false)이면 실행X |
| if / else 문 | if 문과 함께 사용하는 else 문은 if 문과는 반대로 조건식의 결과가 거짓(false)이면 실행문을 실행함 |
| if / else if / else 문 | 두 개의 if / else 문이 연달아 나온 것 |
| switch 문 | if / else 문과 마찬가지로 주어진 조건식의 결과에 따라 다른 명령을 수행하도록 함 |
1) if 문
① if 문 형식
- if (조건식) {실행문;}
var age = 10;
var admissionFee = '';
if(age < 13) { /* age < 13 이라면 */
admissionFee = '2,000원';
}
console.log(admissionFee); //2,000원
=====[TIP] .innerHTML 사용하기=====
<html>
<body>
<div id = "btn"></div>
<script>
let id = prompt("아이디를 입력하십시오");
if(id == "admin"){
// 입력된 id가 "admin"일 경우, 웹 페이지의 HTML 내용을 수정
document.getElementById("btn").innerHTML = "<button>관리자 작성</button>";
}
</script>
</body>
</html>
/*<html></html>내에 존재하는 요소(ex : <div>)를 <script></script>에서 호출하여 다른 내용으로 바꿔 출력하게 만듦.
이 때 html 요소에 접근하려면 document.getElementById 메소드를 함께 사용해야함 */- if (조건식) {실행문1;} else {실행문2;}
var age = 20;
var addmissionFee = '';
if (age < 13) { /* age < 13 이라면 */
admissionFee = '2,000원';
} else { /* age < 13 이 아니라면 */
admissionFee = '4,000원';
}
console.log(admissionFee); //4,000원- if (조건식1) {실행문1;} else if(조건식2){실행문2;} else{실행문3;}
var age = 20;
var admissionFee = '';
if (age < 13) { /* age < 13 이라면 */
admissionFee = '2,000원';
} else if (age >= 13 && age < 20) { /* age 13 ~ 19 라면 */
admissionFee = '4,000원';
} else { /* age >= 20 이라면 */
admissionFee= '6,000원';
}
console.log('admissionFee'); //6,000원
② if 문 안에 또 다른 if문 중첩
- if (조건식1) {if (조건식2) {실행문;}}
prompt( ) : 숫자로 입력한 데이터를 문자 데이터로 처리함. 따라서 '+' 연산자 사용시 연결 연산으로 인식(더하기X). 이를 해결하기 위해 숫자 변환 명령어 Number( ) 사용.
<head>
<script>
var html = Number(prompt('html 점수입력', ''));
var css = Number(prompt('css 점수입력', ''));
var javascript = Number(prompt('javascript 점수입력', ''));
var avg = (html + css + javascript) / 3;
var comment;
if (avg >= 60) { /* avg >= 60 이라면 */
if (html < 40) { /* html < 40 이라면 */
comment = 'HTML' + '40점 미만 불합격';
} else if (css < 40) { /* css < 40 이라면 */
comment = 'CSS' + '40점 미만 불합격';
} else if (javascript < 40) { /* javascript < 40 이라면 */
comment = 'JAVASCRIPT' + '40점 미만 불합격';
} else {
comment = '평균 ' + avg + '점 합격';
}
} else { /* avg < 60 이라면 */
comment = '평균 ' + avg + '점 불합격';
}
document.write(comment);
</script>
</head>
2) switch 문
① switch 문 형식
- switch (값) { case 값1 : 실행문; break; case 값2 : 실행문; break; default : 실행문; }
- switch (값) 의 값과 case의 값들을 하나씩 비교하여 일치하는 case를 실행시킴
- if 문과 다르게 switch 문은 특정조건에 만족 했을 때 블록({ })을 스스로 빠져나가지 못함. 따라서 명령어 break를 통해 switch 문의 블록({ })을 빠져 나가게 함
- default는 switch의 값과 일치하는 값이 없을 때 실행함
var subject = 'javascript';
switch (subject) {
case 'html' :
subject += '은 1학점입니다.';
break;
case 'css' :
subject += '는 1학점입니다.';
break;
case 'javascript' :
subject += '는 3학점입니다.';
break;
default :
subject = '해당과목이 없습니다.';
}
console.log(subject); //javascript는 3학점입니다.
출처 :⎡반응형 웹 실전 프로젝트 가이드 (김광수, 조혜경)⎦
'javascript > 04. 제어문' 카테고리의 다른 글
| 중지, 건너뛰기 (0) | 2024.05.12 |
|---|---|
| 반복문 (0) | 2024.05.12 |