반응형
3장 제어문
자바스크립트 제어문은 조건의 따라 실행하는 코드를 달리하는 조건문(if 문, Swtitch 문)과 특정 코드를 반복 실행하는 반복문(For 문, While 문, Do While 문)으로 구성되어있다.
3.1 If 문
If 문은 조건식이 참인지 거짓인지에 따라 특정 코드의 실행을 제어하는 데 사용된다. If 문에는 3가지 유형의 구문이 존재한다.
1. if~ 구문
2. if~ else~ 구문
3. if~ else if~ else~ 구문
3.1.1 if~ 구문
| if(조건식) { 실행문 ... } |
if~ 구문에서느 조건식이 참이면 중괄호({}) 안에 있는 문장들을 실행한다. 그리고, 조건식이 거짓인 경우에는 해당 문장들을 실행하지 않는다.
다음 코드에서는 if~ 구문을 사용해서 나이가 65세 이하인 경우 입장료를 무료로 설정한다.
| 예제 3-1. 65세 이상이면 입장료가 무료 | free.html | 코드 원문 |
<script>
let x =10000; // 입장료 10000원
let age = 20;
if(age>=65){ //65세 이상이면
x = 0; // 입장료 : 0원
}
document.write("입장료: "+ x +"원");
</script>| 예제 3-1. 65세 이상이면 입장료가 무료 | free.html | 코드 분석 |
<script>
let x =10000; // 입장료 10000원
let age = 20;
if(age>=65){ //65세 이상이면
x = 0; // 입장료 : 0원
}
document.write("입장료: "+ x +"원");
// 문자열 연결 연산자를 이용해서 "입장료: "+ x +"원"를 출력한다.
</script>
3.1.2 if~ else~ 구문
if~ else~ 구문은 짝수/홀수, 합격/불합격, 수신/비수신, 회원/비회원 등에서와 같이 두 가지 조건 중 어느 곳에 해당되는지를 판별할때 사용된다.
if~ else~ 구문의 사용 형식은 다음과 같다.
| if (조건식) { 문장; ..... } else { 문장; ... } |
조건식이 참(true)이면 if 다음에 있는 문장들이 실행되고, 그렇지 않고 조건식이 거짓(false)이면 else 다음에 있는 문장들이 실행된다.
다음은 if~ else~ 구문을 이용해서 주어진 정수가 짝수인지 홀수인지를 판별하는 프로그램이다.
| 예제 3-2. 짝수/홀수 판별하기 | even.html | 코드 원문 |
<script>
let num = 8;
if(num%2 == 0) {
document.write(num + "은(는) 짝수입니다.");
}
else {
document.write(num + "은(는) 홀수입니다.");
}
</script>| 예제 3-2. 짝수/홀수 판별하기 | even.html | 코드 분석 |
<script>
let num = 8;
if(num%2 == 0) {
/* 변수 num에 저장된 값을 2로 나눈 나머지가 0이면 if문 안에 있는 문장 실행
아니면 else안의 문장 실행 */
document.write(num + "은(는) 짝수입니다.");
}
else {
document.write(num + "은(는) 홀수입니다.");
}
</script>
3.1.3 if~ else if~ else~ 구문
if~ else if~ else~ 구문은 조건이 3가지 이상일 경우에 사용된다.
if~ else if~ else~ 구문의 사용 형식은 다음과 같다.
| if(조건식1) { 실행문; ... } else if(조건식2) { 실행문; ... } else if(조건식3) { 실행문; ... } ... else { 문장; ... } |
| 예제 3-3. 학점 계산하기 | grade.html | 코드 원문 |
<script>
let score = 85;
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.write("점수: " + score + ", 학점 : " + grade);
</script>| 예제 3-3. 학점 계산하기 | grade.html | 코드 분석 |
<script>
let score = 85;
if (score>=90) {
// 변수 score에 저장된 값이 90 이상이면 중괄호 안의 코드 실행
grade = "A";
}
else if (score>=80) {
// 변수 score에 저장된 값이 80 이상이면 중괄호 안의 코드 실행
grade = "B"
}
else if (score>=70) {
grade = "C";
}
else if (score>=60) {
grade = "D";
}
else {
// 위의 조건 4개가 전부 해당되지 않을 경우 중괄호 안의 코드 실행
grade ="F";
}
document.write("점수: " + score + ", 학점 : " + grade);
// 문자열 연결 연산자를 이용해서 "점수: " + score + ", 학점 : " + grade 출력
</script>
3.2 Switch 문
Switch 문은 if문과 거의 같은 방식으로 동작한다. 코드에 따라 if문 대신 switch문이 더 편리하고 간결하게 작성할 수 있다.
Switch문의 사용 형식은 다음과 같다.
| switch(변수) { case 값1 : 문장; ... break; case 값1 : 문장; ... break; ... default : 문장; ... } |
switch 괄호 안에 있는 변수의 값에 따라 해당 case에 있는 문장들이 실행된다. 그 외 나머지 모든 경우에는 default에 있는 문장들이 실행된다.
간단한 사칙연산을 수행하는 프로그램을 switch 문을 이용하여 작성하면 다음과 같다.
| 예제 3-4. switch 문으로 작성한 사칙연산 프로그램 | switch.html | 코드 원문 |
<script>
let num1 = 10;
let num2 = 20;
let operator = "/";
switch(operator) {
case "+":
result = num1 + num2;
alert(num1 + "+" + num2 + "=" + result);
break;
case "-":
result = num1 - num2;
alert(num1 + "-" + num2 + "=" + result);
break;
case "*":
result = num1 * num2;
alert(num1 + "*" + num2 + "=" + result)
break;
case "/":
result = num1 / num2;
alert(num1 + "/" + num2 + "=" + result)
break;
default:
alert("입력 오류!");
break;
}
</script>| 예제 3-4. switch 문으로 작성한 사칙연산 프로그램 | switch.html | 코드 분석 |
<script>
let num1 = 10;
let num2 = 20;
let operator = "/";
switch(operator) {
// operator 값에 따라 case문 실행
case "+":
// +일 경우 밑의 코드 실행
result = num1 + num2;
alert(num1 + "+" + num2 + "=" + result);
// alert 메서드로 경고 출력
break;
case "-":
// -일 경우 밑의 코드 실행
result = num1 - num2;
alert(num1 + "-" + num2 + "=" + result);
break;
case "*":
result = num1 * num2;
alert(num1 + "*" + num2 + "=" + result)
break;
case "/":
result = num1 / num2;
alert(num1 + "/" + num2 + "=" + result)
break;
default:
alert("입력 오류!");
break;
}
</script>
3.3 For 문
자바스크립트에서 특정 코드를 반복해서 실행하기 위해서는 for 문, while 문, do while문이 사용된다. 이중에서 for문은 문법이 간결하고 편리하기 때문에 많이 사용된다.
3.1.1 For 문의 기본 구조
For 문의 사용 형식은 다음과 같다.
| for (초깃값; 조건식; 증가_감소값;) { 실행식; ... } |
for의 조건식이 참인 동안 문장들을 반복 실행한다. 다음은 For문을 이용하여 화면에 '안녕'을 세 번 반복해서 출력하는 프로그램이다.
| 예제 3-5. For 문으로 '안녕' 세 번 출력하기 | for.html | 코드 원문 |
<script>
for (let i=1; i<=3; i++) {
document.write("안녕<br>");
}
</script>| 예제 3-5. For 문으로 '안녕' 세 번 출력하기 | for.html | 코드 분석 |
<script>
for (let i=1; i<=3; i++) {
// for문 선언하고 몇 번 반복할지 정함 i가 1~3까지 3번 반복하게 된다.
document.write("안녕<br>");
// document.write() 함수로 안녕 출력을 3번 반복한다.
}
</script>
이번에는 for 문을 이용해서 브라우저 화면에 1~10의 정수를 출력하는 프로그램을 작성해보자.
| 예제 3-6. for 문으로 1~10 정수 출력하기 | for_1_10.html | 코드 원문 |
<script>
for (let i=1; i<=10; i++) {
document.write(i + " ");
}
</script>| 예제 3-6. for 문으로 1~10 정수 출력하기 | for_1_10.html | 코드 분석 |
<script>
for (let i=1; i<=10; i++) {
// for문 선언, i가 1~10까지 증가 1로 반복
document.write(i + " ");
// i출력하고 한칸 공백
}
</script>
다음은 for 문을 이용해서 1~10 정수 합계를 구하는 프로그램이다.
| 예제 3-7. For 문으로 1~10 합계 구하기 | for_sum.html | 코드 원문 |
<script>
let sum = 0;
for (let i=1; i<=10; i++){
sum += i; // sum = sum + i와 동일
}
document.write("합계:" + sum);
</script>| 예제 3-7. For 문으로 1~10 합계 구하기 | for_sum.html | 코드 분석 |
<script>
let sum = 0;
// 변수 sum 선언하고 값 0 저장
for (let i=1; i<=10; i++){
// for문 선언하고 i가 1부터 10까지 반복
sum += i; // sum = sum + i와 동일
}
document.write("합계:" + sum);
// "합계:" + sum 문자열 출력
</script>
위의 코드를 약간 수정해서 1~100 정수 중 짝수인 정수들의 합계를 구하는 프로그램을 작성해보자.
| 예제 3-8. For 문으로 1~100 짝수 합계 구하기 | for_sum_even.html | 코드 원문 |
<script>
let sum = 0;
for (let i=1; i<=100; i++) {
if(i%2 == 0)
sum += i; // sum = sum + i와 동일
}
document.write("합계:" + sum);
</script>| 예제 3-8. For 문으로 1~100 짝수 합계 구하기 | for_sum_even.html | 코드 원문 |
<script>
let sum = 0;
// 변수 sum에 값 0 저장
for (let i=1; i<=100; i++) {
// for문 선언, i가 1~100까지 반복
if(i%2 == 0)
// if문 선언 만일 i를 2로 나눈 나머지가 0이라면 밑의 코드 실행
sum += i; // sum = sum + i와 동일
}
document.write("합계:" + sum);
</script>이번에는 for 문, 배열, 템플릿 문자열을 이용해서 웹 페이지 글자에 색을 설정하는 프로그램을 작성해보자.
| 예제 3-9. For 문으로 글자에 색 입히기 | for_color.html | 코드 원문 |
<body>
<script>
const color = ["red", "green", "blue", "pink"];
let text = "";
for (let i=0; i<=3; i++) {
text += `<span style='color:${color[i]}'>안녕</span><br>`;
}
document.write(text);
</script>
</body>| 예제 3-9. For 문으로 글자에 색 입히기 | for_color.html | 코드 분석 |
<body>
<script>
const color = ["red", "green", "blue", "pink"];
// 배열 변수 color 선언 4개의 배열이 선언된다.
let text = "";
// 문자열 변수 text 선언 Null값을 가진다.
for (let i=0; i<=3; i++) {
text += `<span style='color:${color[i]}'>안녕</span><br>`;
/* html 태그를 사용해서 안녕 글자색을 다르게 출력
첫번째는 <span style='color:red'>가 된다. */
}
document.write(text);
</script>
</body>
다음은 For 문을 이용해서 1~50 인치를 센티미터로 환산하는 환산표를 만드는 프로그램이다.
| 예제 3-10. 인치/센티미터 환산표 만들기 | inch_cm.html | 코드 원문 |
<script>
let inch, cm;
document.write("---------------<br>");
document.write("인치 센티미터<br>");
document.write("---------------<br>");
for(inch=1;inch<=50;inch++){
cm = inch * 2.54;
cm = cm.toFixed(2);
document.write(inch + " " + cm + "<br>");
}
document.write("--------------<br>");
</script>| 예제 3-10. 인치/센티미터 환산표 만들기 | inch_cm.html | 코드 분석 |
<script>
let inch, cm;
document.write("---------------<br>");
document.write("인치 센티미터<br>");
document.write("---------------<br>");
for(inch=1;inch<=50;inch++){
// for문 선언, inch가 1~50까지 반복
cm = inch * 2.54;
// 산술연산의 값을 변수 cm에 저장
cm = cm.toFixed(2);
// 변수 cm에 저장된 값을 소수점 셋째 자리에서 반올림해서 그 값을 변수 cm에 저장
document.write(inch + " " + cm + "<br>");
}
document.write("--------------<br>");
</script>
반응형
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 4장 4.1~4.2 (0) | 2023.10.08 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 3장-3.3.2~3.5 (0) | 2023.10.08 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 2장 - 3,4 (0) | 2023.10.07 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 2장-2 (0) | 2023.10.07 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 2장-1 (0) | 2023.10.06 |