[모던 JavaScript] 2.12 ~ 2.16 과제 정리

    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
    저작자표시

    'JavaScript' 카테고리의 다른 글

    [모던 JavaScript] 3.3 ~ 3.6 과제 정리  (0) 2022.11.20
    [모던 JavaScript] 2.17 ~ 3.2 과제 정리  (0) 2022.11.18
    [모던 JavaScript] 2.7~2.11 과제 정리  (0) 2022.11.16
    [모던 JavaScript] 1.1 ~ 2.6 과제 정리!  (0) 2022.11.15
    [FrontEnd2] JS 연습문제 (대수의 법칙 _ 주사위)  (0) 2022.06.05

    관련글

    댓글

    라이브러리 브랜드 그룹 | 심리학도의 좌충우돌 개발 여행기

    티스토리툴바