JavaScript
[모던 JavaScript] 2.12 ~ 2.16 과제 정리
보라해바라기
2022. 11. 17. 22:09
SMALL
- 2.12 nullish 병합 연산자 '??'
- 2.13 while 과 for 반복문
- 2.14 switch문
- 2.15 함수
- 2.16 함수 표현식
2.13(1) 반복문의 마지막 값
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반복문의 마지막 값</title>
</head>
<body>
<script>
let i = 3;
while (i) {
alert( i-- );
}
// 얼럿 창에 마지막으로 뜨는 값?
// 1 (i가 0이 되면 false라 함수 종료)
</script>
</body>
</html>2.13(2) while 반복문의 출력값 예상하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while 반복문의 출력값 예상하기</title>
</head>
<body>
<script>
let i = 0;
while (++i < 5) alert( i );
// 1, 2, 3, 4
let j = 0;
while (j++ < 5) alert( j );
// 1, 2, 3, 4, 5
</script>
</body>
</html>2.13(3) for 반복문의 출력값 예상하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>'for' 반복문의 출력값 예상하기</title>
</head>
<body>
<script>
for (let i = 0; i < 5; i++) alert( i );
// ** 0, 1, 2, 3, 4 (i=0 -> i<5 -> alert(i) -> i++)
for (let i = 0; i < 5; ++i) alert( i );
// ** 0, 1, 2, 3, 4 (i=0 -> i<5 -> alert(i) -> ++i)
</script>
</body>
</html>2.13(4) for반복문을 이용하여 짝수 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for 반복문을 이용하여 짝수 출력하기</title>
</head>
<body>
<script>
for (let i = 2; i <= 10; i++) {
if (i%2 == 1) continue;
alert(i)
}
</script>
</body>
</html>2.13(5) for 반복문을 while 반복문으로 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>'for' 반복문을 'while' 반복문으로 바꾸기</title>
</head>
<body>
<script>
let i = 0
while (i<3){
alert(`number ${i}!`);
i++;
}
</script>
</body>
</html>2.13(6) 사용자가 유효한 값을 입력할 때까지 프롬프트 창 띄우기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자가 유효한 값을 입력할 때까지 프롬프트 창 띄우기</title>
</head>
<body>
<script>
let num = prompt("숫자 입력", 0)
while (num<=100){
num = prompt("숫자 입력", 0)
}
// do {
// num = prompt("100 초과 숫자 입력", 0)
// } while (num<=100 && num)
// // num을 조건에 넣어서 빈 문자열인지 확인
</script>
</body>
</html>2.13(7) 소수 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>소수 출력하기</title>
</head>
<body>
<script>
let n = 10;
nextPrime: for(let i=2; i<=n; i++){
for(let j=2; j<i; j++){
if (i%j==0) continue nextPrime;
}
alert(i)
}
//** continue nextPrime으로 넘어가면 i++ 됨
</script>
</body>
</html>2.14(1) switch문을 if문으로 변환시키기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>"switch"문을 "if"문으로 변환하기</title>
</head>
<body>
<script>
let browser = prompt("사용하고 있는 브라우저를 입력하시오.", "");
if (browser == 'Edge'){
alert("Edge를 사용하고 계시네요!")
} else if (browser == 'Chrome' || browser == 'Firefox' || browser == 'Safari' || browser == 'Opera'){
alert('저희 서비스가 지원하는 브라우저를 사용하고 계시네요.')
} else{
alert('현재 페이지가 괜찮아 보이길 바랍니다!')
}
</script>
</body>
</html>2.14(2) if문을 switch문으로 변환시키기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>"if"문을 "switch"문으로 변환하기</title>
</head>
<body>
<script>
let a = +prompt('a?', ''); // +는 숫자 변환을 위한 것
switch (a) {
case 0:
alert( 0 );
break;
case 1:
alert( 1 );
break;
case 2:
case 3:
alert( '2,3' );
break;
}
</script>
</body>
</html>2.15(1) else는 정말 필요한가요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>"else"는 정말 필요한가요?</title>
</head>
<body>
<script>
function checkAge(age) {
if (age > 18) {
return true;
}
else {
return confirm("보호자 동의 받음?");
}
// else 필요한가? => nono (있으나 없으나 똑같음)
}
</script>
</body>
</html>2.15(2) ? 나 || 를 사용하여 함수 다시 작성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>'?'나 '||'를 사용하여 함수 다시 작성하기</title>
</head>
<body>
<script>
// (1) ? 사용
function checkAge(age) {
return (age>18) ? true : confirm('보호자의 동의를 받으셨나요?');
}
checkAge(20);
// (2) || 사용
function checkAge(age) {
return (age>18) || confirm('보호자의 동의를 받으셨나요?'); // **
}
checkAge(20);
</script>
</body>
</html>2.15(3) min(a,b) 함수 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>min(a, b) 함수 만들기</title>
</head>
<body>
<script>
function min(a,b){
return (a<b) ? alert(a) : alert(b)
}
min(2, 5);
min(3, -1);
min(1, 1);
</script>
</body>
</html>2.15(4) pow(x,n) 함수 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pow(x,n) 함수 만들기</title>
</head>
<body>
<script>
function pow(x,n) {
let total = 1;
for (let i=1; i<=n; i++){
total*=x
}
return total;
}
let x = prompt("x?", 0);
let n = prompt("n?", 0);
if (n < 1) {
alert(`${n}은 양의 정수이어야 합니다.`);
} else {
alert(pow(x,n))
}
</script>
</body>
</html>728x90