WEB/JavaScript
Js - 조건문, 반복문
jomericano
2022. 6. 8. 19:52
<!DOCTYPE html>
<html lang="ko">
<meta charset="UTF-8">
<title>자바스크립트 조건문</title>
</head>
<body>
<h1>자바스크립트 조건문</h1>
<h2>개요</h2>
<p>특정 조건에 대한 만족 여부에 따라 실행할 코드를 결정하는 기능</p>
<p>자바스크립트는 2가지의 조건문 제공 - if, switch </p>
<h2> 블럭(문) block statement </h2>
<p>0개 이상의 명령문을 중괄호로 묶은 것 </p>
<p>블럭은 단독으로 사용할 수 있으나, 일반적으로 제어문이나 함수/ 객체 선언시 주로 사용</p>
<script>
{
document.write('<b>Hello, World</b>');
} // 코드 블럭
</script>
<h2> if 문 </h2>
<p>조건을 만족할때만 코드블럭을 실행함</p>
<script>
let avg = 68.5;
//평균이 60점 이상이면 '시험합격'을 출력
if (avg >= 60) {
document.write('시험합격!');
}
</script>
<h2> if ~ else 문 </h2>
<p>조건을 만족하면 코드블럭 실행하고 만족 안할경우 else코드블럭 실행 </p>
<script>
//평균이 60점 이상이면 '시험 합격'을 출력
//평균이 60점 미만이면 '시험 불합격'을 출력
avg = 50;
if (avg >= 60 ) {
document.write('시험 합격!');
} else {
document.write('시험 불합격!');
}
</script>
<h2> if ~ else if ~ else 문 </h2>
<p>조건이 3개 이상인 다중 조건에 대한
만족 여부에 따라 코드블럭 실행하려면 if ~ else 사이에
else if를 추가함</p>
<script>
//평균점수를 수우미양가 조건에 따라 학점을 출력
if (avg >= 90 ) {
document.write('수');
} else if (avg >= 80 ) {
document.write('우');
} else if (avg >= 70 ) {
document.write('미');
} else if (avg >= 60 ) {
document.write('양');
} else {
document.write('가<br>');
}
</script>
<hr>
<script>
// 버스 기본요금 부과하기 - 나이를 입력받음
// 미취학 아동 (7세 이하): 0원
// 어린이 (8~13): 450원
// 청소년 (14~19): 720원
// 일반 (20~): 1200원
// 노인 (70~): 0원
// let age = parseInt(prompt('나이를 입력하세요'));
let pay = 0;
if (age >=70) {
pay=0;
} else if (age >=20) {
pay=1200;
} else if (age >=14) {
pay=720;
} else if (age >=8) {
pay=450;
} else pay=0;
document.write(`나이가 ${age}세 라고요? 버스요금은 ${pay} 원 입니다 `)
// if (age <= 7 ) {
// document.write('미취학 아동 0원');
// } else if (age <= 13 ) {
// document.write('어린이 450원');
// } else if (age <= 19 ) {
// document.write('청소년 720원');
// } else if (age <= 70 ) {
// document.write('일반 1200원');
// } else if (age > 70 ) {
// document.write('노인 0원');
// }
</script>
<h2>조건식을 거짓으로 취급하는 값</h2>
<p>false, 0, undefined, null, NaN, 빈문자열 등은 조건식에서 참이 아닌 거짓취급</p>
<script>
// if (undefined) {
// if (null) {
// if (NaN) {
if ('') {
document.write('이 글이 보이나요?');
} else {
} document.write('아니면 이 글이 보이나요?');
</script>
<h2>switch </h2>
<p>다중 조건 if문을 가독성있게 작성한 조건문</p>
<p>switch 의 표현식을 평가하여 그 값의 일치 여부에 따라
case 문 아래의 코드 블럭을 실행하는 구조 </p>
<p>표현식의 평가값과 일치하는 case가 없는 경우
default 문의 코드블럭을 실행함</p>
<p>단, 표현식의 평가값과 일치하는 case 문이 실행되더라도
break 문이 없으면 switch 문이 중단되지 않고 나머지 case문을 실행하게 됨
- full through </p>
<script>
// 월 을 입력하면 영어로 변환해서 출력
let month = parseInt(prompt('"월"을 숫자로 입력하세요'));
let name = '';
switch (month) {
case 1: name = 'January'; break;
case 2: name = 'February'; break;
case 3: name = 'March'; break;
case 4: name = 'April'; break;
default:name='잘못 입력하셨습니다'; //break 안스면 풀스루, 끝에걸 실행하게됨
}
if (month >= 1 &&month <=12)
document.write(`${month}월은 ${name}입니다.<br>`);
else
document.write(name);
</script>
<hr>
<script>
//월, 윤년여부(y/n)을 입력하면 해당 월의 마지막 날을 출력
// 1,3,5,7,8,10,12 - 31일
// 4, 6, 9, 11 - 30일
// 2 윤년 여부에 따라 28일 or 29일
month = parseInt(prompt('월 을 숫자로 입력하시오'));
let yun = null;
if (month == 2) yun = prompt('윤년 (Y/N)');
endDay = 0;
switch (month) {
case 1:case 3:case 5: case 7: case 8: case 10: case 12 :endDay=31; break;
case 4: case 6:case 9:case 11 : endDay=30; break;
case 2 : if (yun=='Y') endDay =29;
else endDay = 28; break;
}
document.write(`${month}월은 마지막 날이 ${endDay}일 입니다.`)
</script>
<hr>
<script>
//평균점수를 수우미양가 조건에 따라 학점을 출력
avg = parseInt(prompt('평균점수를 입력하시오')/10);
grade = '';
switch (avg) {
case 10 : case 9: grade = '수'; break;
case 8: grade = '우'; break;
case 7: grade = '미'; break;
case 6: grade = '양'; break;
default:grade ='가';
}
document.write(`${grade}`)
</script>
<p>자바스크립트 한정으로 switch 의 case 문에 비교연산자를 이용한 범위를 검사하는 코드를
작성할 수도 있음 </p>
<h2>if vs switch </h2>
<p>if문의 경우 조건식 검사는 위에서 아래로 순차적으로 진행됨</p>
<p>운이 나빠서, 만족하는 조건식이 맨 아래에 있다면 위의 조건식 모두를
비교한 뒤에야 비로소 도달, 범위찾기 </p>
<p>switch문의 경우 해당 값을 바로 찾음. 정수값의 경우 성능 향상</p>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바크스립트 반복문 </title>
</head>
<body>
<h1>자바스크립트 반복문 </h1>
<h2>개요</h2>
<p>조건을 만족하는 동안 코드를 반복적으로 수행하는 문장</p>
<p>자바스크립트에서 기본적으로 3가지 반복문 (for, while, do-while)
이 지원되고 그 외 for-in 과 ES6에서 추가된 for-of 등이 있음</p>
<p>for</p>
<p>조건식이 거짓으로 판별될 때까지 코드블럭 반복실행
즉, 참의 범위에 있을때까지 반복실행</p>
<script>
// 1~ 10까지 정수 출력
// 초기식 조건식 증감식
for (let i = 1; i <= 10; ++i ) {
//조건식이 참일 경우 실행할 코드들
document.write(i, ' ');
}
document.write(' <br> ');
// 1~100까지 정수 중 짝수만 출력
for(let j = 1; j<=100; ++j ) {
if (j % 2 ==0) {
document.write(j, ' ');
}
}
document.write(' <br> ');
for(let j = 2; j<=100; j+=2 ) {
document.write(j, ' ');
}
</script>
<hr>
<script>
// 단을 입력받아 구구단 출력
dan = parseInt(prompt('단을 입력하시오'));
for(let i = 1; i<=10; ++i) {
document.write(`${dan} x ${i} = ${dan * i} <br>`);
}
</script>
<hr>
<script>
// 중첩 반복문을 이용해서 구구단을 출력
document.write('<table cellpadding="15">');
for (let i=1; i<=9; ++i) {
document.write('<tr>');
for (let dan=1; dan<=9; ++dan) {
document.write('<td>')
document.write(`${dan} x ${i} = ${dan * i} `);
document.write('</td>')
}
document.write('</tr>');
}
</script>
<p>무한 반복문</p>
<p>for문의 경우 초기식, 조건식, 증감식을 비워두면 끊임없는 반복 실행하는 무한반복문이 됨</p>
<h2>while </h2>
<p>조건식이 참일동안 코드블럭 실행하는 제어문 </p>
<p>만일, 조건식이 처음부터 거짓이면 코드블럭은 한번도 실행되지 않음</p>
<script>
let i = 1;
while (i <= 10) {
document.write(`${i} `);
i += 1;
}
</script>
<h2>do - while</h2>
<p>while문과 다르게 먼저 코드블럭을 실행하고 조건식을 검사함 </p>
<p>따라서, 코드블럭은 최소 1번은 실행됨</p>
<script>
//1~10까지 정수 출력
i=1;
do {
document.write(`${i} `);
i +=1;
} while (i<=10);
</script>
<h2>무한반복문 - while , do-while </h2>
<p>반복문의 조건식을 true로 설정하면
해당 반복문이 무한 반복문이 됨</p>
<!-- <script>-->
<!-- while(true) {-->
<!-- alert('헤헤헤헤');-->
<!-- }-->
<!-- </script>-->
<h2>break</h2>
<p>원하는 시점에 반복문이나 코드블럭에서 벗어나려면 break 사용</p>
<script>
//임의의 정수를 계속 입력하면
// 그것의 합을 구함
let sum=0;
while (true){
let val = parseInt(prompt('숫자 하나 입력'));
if (val == 0) break ;
sum+=val;
}
document.write('지금까지 총합 : ', sum);
</script>
<h2>continue</h2>
<p>반복문의 코드실행을 현 지점에서 중단하고
반복문의 증감식이나 조건식으로 제어를 이동시킴</p>
<p>즉, 반복을 일시적으로 건너뛰어 다음 반복으로 넘어감</p>
<script>
//1~100사이의 총합을 구함
// 단, 4의 배수나 7의 배수 제외
sum=0;
for (let i = 1; i<=100; ++i) {
if (i% 4==0 || i%7==0 ) continue;
sum +=i; //sum = sum + i
document.write(sum, ' ')
}
</script>
<hr>
<script>
//단 입력 후 구구단 출력 - while
let o = parseInt(prompt('단을 입력하세요 '));
i = 1
while (i <= 9) {
document.write(`${o} * ${i} = ${o*i} <br>`);
i += 1;
}
//중첩 반복문 이용 구구단 출력 - while
let k = 1;
while (k <= 9) {
let j = 1;
while (j <= 9) {
document.write(`${k} * ${j} = ${k*j} <br>`);
j += 1;
}
document.write('<br>')
k += 1;
}
</script>
<hr>
</body>
</html>