1. 문제
아래 출력 내용과 같이 학생 성적 프로그램을 작성해보자.
(단, 입력은 prompt 함수를 사용)
[입력]
이름을 입력하세요. 김사과
국어점수를 입력하세요. 100
영어점수를 입력하세요. 90
수학점수를 입력하세요. 80
[출력]
김사과님의 성적표
국어점수 : 100점
영어점수 : 90점
수학점수 : 80점
총점 : 270점
평균 : 90점
** 1_학생성적프로그램.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>학생 성적 프로그램</title>
</head>
<body>
<h2>학생 성적 프로그램</h2>
<script>
"use strict";
const name = prompt('이름을 입력하세요.');
const kor = Number(prompt('국어점수를 입력하세요.'));
const eng = Number(prompt('영어점수를 입력하세요.'));
const math = Number(prompt('수학점수를 입력하세요.'));
const total = kor + eng + math;
const avg = total / 3;
document.write(`${name}님 성적표<br>`);
//document.write(name + '님 성적표<br>');
document.write(`국어점수 : ${kor}점<br>`);
document.write(`영어점수 : ${eng}점<br>`);
document.write(`수학점수 : ${math}점<br>`);
document.write(`총점 : ${total}점<br>`);
document.write(`평균 : ${avg}점<br>`);
</script>
</body>
</html>
** 출력결과
2. 제어문
: 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 의미
1) 조건문 : 프로그램 내에서 주어진 조건문의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문
(1) if문 : 범위에 대한 조건을 줄 때 유리
① if문 : 조건식의 결과가 참(true)이면 주어진 실행문을 실행하고, 거짓(false)이면 아무것도 실행하지 않는 문장
if(조건식) {
조건식의 결과가 참일 때 실행할 문장;
...
}
** 2_if문(1).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if문 - 1</title>
</head>
<body>
<h2>if문 - 1</h2>
<script>
'use strict';
const age = Number(prompt('나이를 입력하세요.'));
//if(age >= 19) {
// console.log('성인입니다.');
//}
if(age >= 19)
console.log('성인입니다.'); // if문 영향
console.log('프로그램을 종료합니다.'); // if 영향 X
</script>
</body>
</html>
** 실행결과
② if ~ else 문 : if문과 같이 사용할 수 있는 else문은 if문의 조건식의 결과가 거짓(false)일 때 실행문을 실행
if(조건식) {
조건식의 결과가 참일 때 실행할 문장;
} else {
조건식의 결과가 거짓일 때 실행할 문장;
}
** 3_if문(2).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if문 - 2</title>
</head>
<body>
<h2>if문 - 2</h2>
<script>
"use strict";
const age = Number(prompt('나이를 입력하세요.'));
if(age >= 19) {
console.log('성인입니다.');
} else {
console.log('미성년입니다.');
}
</script>
</body>
</html>
** 실행결과
③ if ~ else if ~ else 문 : else if문은 if문처럼 조건식을 설정할 수 있으므로 중첩된 if문을 좀 더 간결하게 표현 가능,
하나의 조건문 안에서 if문과 else문은 단 한번만 사용할 수 있다,
하지만 else if문은 여러번 사용하여 다양한 조건을 설정 가능(단, else문은 생략 가능)
if(조건식1) {
조건식1의 결과가 참일 때 실행할 문장;
} else if(조건식2) {
조건식2의 결과가 참일 때 실행할 문장;
} else if(조건식3) {
조건식3의 결과가 참일 때 실행할 문장;
}
...
else {
모든 조건식의 결과가 거짓일 때 실행할 문장;
}
** 4_if문(3).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if문 - 3</title>
</head>
<body>
<h2>if문 - 3</h2>
<script>
'use strict';
const age = Number(prompt('나이를 입력하세요.'));
if(age >= 19) {
console.log('성인입니다.');
} else if(age >= 14) {
console.log('청소년입니다.');
} else if(age >= 7) {
console.log('어린이입니다.');
} else {
console.log('유아입니다.');
}
</script>
</body>
</html>
** 실행결과
[문제] 아래 출력 내용과 같이 학생성적 프로그램을 작성해보자.
조건 1. 입력은 prompt 함수를 사용
조건 2. 학점은 평균을 기준으로
90점 이상이면 A학점, 80점 이상이면 B학점, 70점 이상이면 C학점, 60점 이상이면 D학점,
나머지는 F학점으로 함
[입력]
이름을 입력하세요. 김사과
국어점수를 입력하세요. 100
영어점수를 입력하세요. 90
수학점수를 입력하세요. 80
[출력]
김사과님의 성적표
국어점수 : 100점
영어점수 : 90점
수학점수 : 80점
총점 : 270점
평균 : 90점
학점 : A학점
[내 코드]
** 5_학생성적프로그램2_me.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>학생성적 프로그램2</title>
</head>
<body>
<h2>학생성적 프로그램2</h2>
<script>
"use strict";
// 입력
let name = prompt('이름을 입력하세요.');
let kor = Number(prompt('국어점수를 입력하세요.'));
let eng = Number(prompt('영어점수를 입력하세요.'));
let math = Number(prompt('수학점수를 입력하세요.'));
let total = kor + eng + math;
let avg = parseFloat(total) / 3;
// 출력
document.write(`${name}님의 성적<br>`);
document.write(`국어점수 : ${kor}<br>`);
document.write(`영어점수 : ${eng}<br>`);
document.write(`수학점수 : ${math}<br>`);
document.write(`총점 : ${total}<br>`);
document.write(`평균 : ${avg.toFixed(2)}<br>`);
if(avg >= 90) {
document.write("학점 : A학점");
} else if(avg >= 80) {
document.write("학점 : B학점");
} else if(avg >= 70) {
document.write("학점 : C학점");
} else if(avg >= 60) {
document.write("학점 : D학점");
} else {
document.write("학점 : F학점");
}
</script>
</body>
</html>
[강사님 코드]
** 5_학생성적프로그램2_teacher.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>학생성적 프로그램2</title>
</head>
<body>
<h2>학생성적 프로그램2</h2>
<script>
"use strict";
const name = prompt("이름을 입력하세요.");
const kor = Number(prompt("국어점수를 입력하세요."));
const eng = Number(prompt("영어점수를 입력하세요."));
const math = Number(prompt("수학점수를 입력하세요."));
const total = kor + eng + math;
const avg = total / 3;
let hak = "";
if(avg >= 90){
hak = "A학점";
}else if(avg >= 80){
hak = "B학점";
}else if(avg >= 70){
hak = "C학점";
}else if(avg >= 60){
hak = "D학점";
}else{
hak = "F학점";
}
document.write(`${name}님 성적표<br>`);
// document.write(name + '님 성적표<br>');
document.write(`국어점수 : ${kor}점<br>`);
document.write(`영어점수 : ${eng}점<br>`);
document.write(`수학점수 : ${math}점<br>`);
document.write(`총점 : ${total}점<br>`);
document.write(`평균 : ${avg}점<br>`);
document.write(`학점 : ${hak}`);
</script>
</body>
</html>
(2) switch문 : 특정 값과 일치하는 것을 찾을 때 유리,
if ~ else문과 마찬가지로 주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문,
if ~ else문보다 가독성 및 속도 측면에서 더 유리하다.
switch(비교값) {
case 값1:
비교값이 값1과 일치할 경우 실행할 문장;
break;
case 값2:
비교값이 값2와 일치할 경우 실행할 문장;
break;
...
default:
비교값이 모두 일치하지 않을 경우 실행할 문장;
}
** 6_switch문.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>switch문</title>
</head>
<body>
<h2>switch문</h2>
<script>
"use strict";
let input = prompt('아동, 청소년 성인 중 선택하세요.');
switch(input) {
case "아동":
input += " : 입장료 무료";
// input = input + " : 입장료 무료";
break;
case "청소년":
input += " : 입장료 2000원";
// input = input + " : 입장료 2000원";
break;
case "성인":
input += " : 입장료 5000원";
// input = input + " : 입장료 5000원";
break;
default:
alert('입력 값을 확인하세요.');
input = '입력값을 확인하세요'
}
console.log(input);
</script>
</body>
</html>
** 실행결과
[문제] 기존에 만든 학생 성적 프로그램을 switch문을 이용하여 다시 작성해보자.
** 7_학생성적프로그램3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>학생성적 프로그램3</title>
</head>
<body>
<h2>학생성적 프로그램3</h2>
<script>
"use stric";
const name = prompt("이름을 입력하세요.");
const kor = Number(prompt("국어점수를 입력하세요."));
const eng = Number(prompt("영어점수를 입력하세요."));
const math = Number(prompt("수학점수를 입력하세요."));
const total = kor + eng + math;
const avg = total / 3;
let hak = "";
switch(parseInt(avg/10)){
case 10:
case 9:
hak = "A학점";
break;
case 8:
hak = "B학점";
break;
case 7:
hak = "C학점";
break;
case 6:
hak = "D학점";
break;
default:
hak = "F학점";
}
document.write(`${name}님 성적표<br>`);
// document.write(name + '님 성적표<br>');
document.write(`국어점수 : ${kor}점<br>`);
document.write(`영어점수 : ${eng}점<br>`);
document.write(`수학점수 : ${math}점<br>`);
document.write(`총점 : ${total}점<br>`);
document.write(`평균 : ${avg}점<br>`);
document.write(`학점 : ${hak}<br>`);
</script>
</body>
</html>
2) 반복문
: 프로그램 내에서 같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문
(1) while문
① while문 : 특정 조건식을 만족하는 동안 계속해서 주어진 실행문을 반복
while(조건식) {
조건식의 결과가 참인 동안 반복될 실행문;
}
** 8_while문(1).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while문 - 1</title>
</head>
<body>
<h2>while문 - 1</h2>
<script>
'use strict';
let i = 1;
while(i <= 5) {
console.log('안녕하세요. JavaScript!');
document.write('안녕하세요. JavaScript!<br>');
i++;
}
</script>
</body>
</html>
** 실행결과
** 9_while문(2).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while문 - 2</title>
</head>
<body>
<h2>while문 - 2</h2>
<script>
'use strict';
let i = 1, sum = 0;
while(i <= 10) {
sum += i;
/*
sum = sum + i;
1번째 : sum = 0 + 1; -> sum = 1;
2번째 : sum = 1 + 2; -> sum = 3;
3번째 : sum = 3 + 3; -> sum = 6;
4번째 : sum = 6 + 4; -> sum = 10;
5번째 : sum = 10 + 5; -> sum = 15;
6번째 : sum = 15 + 6; -> sum = 21;
7번째 : sum = 21 + 7; -> sum = 28;
8번째 : sum = 28 + 8; -> sum = 36;
9번째 : sum = 36 + 9; -> sum = 45;
10번째 : sum = 45 + 10; -> sum = 55;
*/
i++;
}
console.log(`1부터 10까지의 총합 : ${sum}`);
</script>
</body>
</html>
** 실행결과
[문제] 1 ~ 100까지 짝수의 총합을 구하는 프로그램을 만들어보자.
** 10_짝수총합프로그램.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>짝수총합 프로그램</title>
</head>
<body>
<h2>짝수총합 프로그램</h2>
<script>
"use strict";
let i = 0, sum = 0;
while(i<100) {
i++;
if(i % 2 == 0) {
sum += i;
//console.log("i : " + i);
}
}
console.log(`1~100까지의 짝수 총합은 ${sum}`);
</script>
</body>
</html>
[문제] 원하는 단을 입력받아 구구단을 출력하시오.
** 11_구구단프로그램.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단 프로그램</title>
</head>
<body>
<h2>구구단 프로그램</h2>
<script>
'use strict';
const dan = Number(prompt('원하는 단을 입력하세요.'));
document.write(`${dan}단<br>`);
/*
입력
7단
출력
7 * 1 = 7
7 * 2 = 14
7 * 3 = 21
...
7 * 9 = 63
*/
let i = 1;
while(i <= 9) {
document.write(`${dan} X ${i} = ${dan * i}<br>`);
i++;
}
</script>
</body>
</html>
② do ~ while문 : while문은 루트에 진입하기 전에 먼저 조건식부터 검사하지만
do ~ while문은 먼저 루프를 한 번 실행한 후에 조건식을 검사한다.
do {
조건식의 결과가 참인 동안 반복될 실행문;
} while(조건식);
** 12_do-while문.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>do-while문</title>
</head>
<body>
<h2>do-while문</h2>
<script>
'use strict';
let i = 1, j = 1;
while(i > 3) {
console.log(`i : ${i++}`);
}
do {
console.log(`j : ${j++}`);
} while(j > 3);
</script>
</body>
</html>
** 실행결과
(2) for문 : for문은 while문과 달리 자체적으로 초기값, 조건식, 증감식을 모두 포함하고 있는 반복문이다,
while문 보다는 간결하게 반복을 표현할 수 있다.
for(초기값; 조건식; 증감식) {
조건식의 결과가 참인 동안 반복할 실행문;
}
** 13_for문(1).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for문 - 1</title>
</head>
<body>
<h2>for문 - 1</h2>
<script>
'use strict';
//for(let i = 1; i <= 5; i++) {
// console.log(`${i}번째 반복`);
//}
//console.log(i); // Uncaught ReferenceError: i is not defined
// 왜? 변수 i는 for문에서만 유효한 지역변수이기 때문에
// 만약 여기서도 값을 출력하고 싶다면 for문 밖에서 선언해줘야 함
let i;
for(i = 1; i <= 5; i++) {
console.log(`${i}번째 반복`);
}
console.log(`현재 i의 값은 : ${i}`);
</script>
</body>
</html>
** 실행결과
** 14_for문(2).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for문 - 2</title>
</head>
<body>
<h2>for문 - 2</h2>
<script>
'use strict';
let sum = 0;
for(let i = 1; i < 10; i++) {
sum += i;
}
console.log(`1 ~ 10까지의 총합 : ${sum}`);
</script>
</body>
</html>
** 실행결과
[문제] while문으로 작성된 구구단 프로그램을 for문을 이용하여 재작성해보자.
** 15_구구단프로그램2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단 프로그램</title>
</head>
<body>
<h2>구구단 프로그램</h2>
<script>
'use strict';
const dan = Number(prompt('원하는 단을 입력하세요.'));
document.write(`${dan}단<br>`);
/*
입력
7단
출력
7 * 1 = 7
7 * 2 = 14
7 * 3 = 21
...
7 * 9 = 63
*/
for(let i = 1; i <= 9; i++) {
document.write(`${dan} X ${i} = ${dan * i}<br>`);
}
</script>
</body>
</html>
3. [강사님 경험담] 일할 때 후임이 만든 대략 8000줄 되는 코드를 반복문을 잘 사용함으로써 3000줄로 줄였다고 한다.
따라서 반복문을 잘 쓰는 것이 매우 중요하다고 한다.
4. 코드를 좀 더 간결하고 효율성있게 만들고 싶다 > 알고리즘의 메커니즘
5. continue문
: 반복중인 루트 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고, 다음 조건식의 판단으로 넘어가게 한다,
보통 반복문 내에서 특정 조건에 대한 처리를 제외하고자 할 때 사용한다.
** 16_continue문.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>continue문</title>
</head>
<body>
<h2>continue문</h2>
<script>
let num = 3;
for(let i=1; i<=100; i++){
if(i % num == 0){
document.write('짝! ');
continue;
}
document.write(`${i} `);
}
</script>
</body>
</html>
** 실행결과
6. break문
: 반복중인 루프 내에서 사용하여 해당 반복문을 완전히 종료시키고
반복문 바로 다음에 위치한 실행문으로 프로그램의 흐름을 이동시킨다,
루프 내에서 조건식의 판단 결과에 상관없이 반복문을 빠져나가고 싶을 때 사용한다.
** 17_break문(1).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break문 - 1</title>
</head>
<body>
<h2>break문 - 1</h2>
<script>
'use strict';
while(true) {
let sel = Number(prompt('원하는 메뉴를 선택하세요. 1.회원등록 2.회원목록 3.회원수정 4.종료'));
if(sel == 1) {alert('회원등록 페이지로 이동합니다.');}
if(sel == 2) {alert('회원목록 페이지로 이동합니다.');}
if(sel == 3) {alert('회원수정 페이지로 이동합니다.');}
if(sel == 4) {
alert('프로그램을 종료합니다.');
break;
}
}
</script>
</body>
</html>
** 실행결과
** 18_break문(2).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break문 - 2</title>
</head>
<body>
<h2>break문 - 2</h2>
<script>
'use strict';
for(;;) {
//console.log('안녕하세요. JavaScrpt!')
let sel = Number(prompt('원하는 메뉴를 선택하세요. 1.회원등록 2.회원목록 3.회원수정 4.종료'));
if(sel == 1) {alert('회원등록 페이지로 이동합니다.');}
if(sel == 2) {alert('회원목록 페이지로 이동합니다.');}
if(sel == 3) {alert('회원수정 페이지로 이동합니다.');}
if(sel == 4) {
alert('프로그램을 종료합니다.');
break;
}
}
</script>
</body>
</html>
** 실행결과
'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글
| 보강(2020.09.12, 2020.09.13) (0) | 2020.09.12 |
|---|---|
| 2020.08.30 (0) | 2020.08.30 |
| 과제-자료를 받아 출력하는 프로그램 (0) | 2020.08.14 |
| 2020.08.09 (0) | 2020.08.12 |
| 2020.08.08 (0) | 2020.08.10 |