[모던 JavaScript] 2.7~2.11 과제 정리

SMALL

2.8 (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 a = 1, b = 1;

        let c = ++a; 
        let d = b++; 
        // a = 2, b = 2 , c = 2 , d = 1 

        alert("a: "+ a)
        alert("b: "+ b)
        alert("c: "+ c)
        alert("d: "+ d)
    </script>
</body>
</html>

2.8 (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>
        let a = 2;

        let x = 1 + (a *= 2);

        alert("a: " + a + " , x: " + x)
        // a: 4, x: 5
    </script>
</body>
</html>

2.8 (3) 형 변환

<!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>
        alert("" + 1 + 0) // 1
        alert("" - 1 + 0) // -1
        alert(true + false) // 1
        alert(6 / "3") // 2
        alert("2" * "3") // 6
        alert(4 + 5 + "px") // 9px
        alert("$" + 4 + 5) // $45
        alert("4" - 2) // 2
        alert("4px" - 2) // NaN
        alert(7 / 0) // ** Infinity
        alert("  -9  " + 5) // ** "  -9  5"
        alert("  -9  " - 5) // -14
        alert(null + 1) // 1
        alert(undefined + 1) // NaN
        alert(" \t \n" - 2) // ** -2
    </script>
</body>
</html>

2.8 (4) 덧셈 고치기

<!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 a = prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1); // 기본값은 문자열!
        let b = prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2); // 기본값은 문자열!

        alert(+a + +b); // +를 변수 앞에 붙여줘서 "숫자형"으로 변환
    </script>
</body>
</html>

2.9 비교

<!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>
    alert(5 > 4); // true
    alert("apple" > "pineapple"); // false
    alert("2" > "12"); // ** true
    alert(undefined == null); // true
    alert(undefined === null); // false
    alert(null == "\n0\n"); // ** false
    alert(null === +"\n0\n"); // false
    </script>
</body>
</html>

2.10 (1) if와 문자열 0

<!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와 문자열 0</title>
</head>
<body>
    <script>
        if("0"){
            alert('Hello!');
        }
        // 문자열 0운 true -> 실행
    </script>
</body>
</html>

2.10 (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>
        'use strict'

        let name = prompt("자바스크립트의 '공식'이름은 무엇일까요?", "");
        if (name =="ECMAScript"){
            alert("정답입니다!");
        } else{
            alert("모르셨나요? 정답은 ECMAScript입니다!")
        }
    </script>
</body>
</html>

2.10 (3) 입력받은 숫자의 부호 표시하기

<!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 value = prompt("숫자를 입력하세요.", 0);
        if (value > 0){
            alert(1);
        } else if (value < 0){
            alert(-1);
        }
        else { 
            alert(0);
        }
    </script>
</body>
</html>

2.10 (4) '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>'if'를 '?'로 교체하기</title>
</head>
<body>
    <script>
        let a = prompt("a의 값 입력", 0);
        let b = prompt("b의 값 입력", 0);
        let result = (+a + +b < 4) ? '미만' : '이상';
        alert(result)
    </script>
</body>
</html>

2.10 (5) 'if..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>'if..else'를 '?'로 교체하기</title>
</head>
<body>
    <script>
        let login = prompt("직함을 입력하세요.", "");
        let message = (login == '직원') ? '안녕하세요.' :
                    (login == '임원') ? '환영합니다.' :
                    (login == '') ? '로그인이 필요합니다.':
                    '';
        alert(message)
    </script>
</body>
</html>

2.11 (1) 다음 OR 연산의 결과는 무엇일까요?

<!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>다음 OR 연산의 결과는 무엇일까요?</title>
</head>
<body>
    <script>
        alert( null || 2 || undefined ); 
        // ** 2 (첫번째 truthy 반환)
    </script>
</body>
</html>

2.11 (2) OR 연산자의 피연산자가 alert 라면?

<!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>OR 연산자의 피연산자가 alert 라면?</title>
</head>
<body>
    <script>
        alert( alert(1) || 2 || alert(3) );
        // 결과: alert(1) 실행 후 2 나옴
        // alert 메서드는 값 반환 X : undefined
        // 2가 첫번째 truthy 값
    </script>
</body>
</html>

2.11 (3) 다음 AND 연산의 결과는 무엇일까요?

<!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>다음 AND 연산의 결과는 무엇일까요?</title>
</head>
<body>
    <script>
        alert( 1 && null && 2 );
        // 첫번째 falsy 값인 null 출력
    </script>
</body>
</html>

2.11 (4) AND 연산자의 피연산자가 alert 라면?

<!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>AND 연산자의 피연산자가 alert 라면?</title>
</head>
<body>
    <script>
        alert( alert(1) && alert(2) );
        // 결과: alert(1) 실행 후, undefined 나옴
        // alert메소드는 값 반환 X -> undefined
        // undefined가 첫번째 falsy 값
    </script>
</body>
</html>

2.11 (5) OR AND OR 연산자로 구성된 표현식

<!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>OR AND OR 연산자로 구성된 표현식</title>
</head>
<body>
    <script>
        alert( null || 2 && 3 || 4 );
        // ** null || 3 || 4 (&& 둘다 true일 때 마지막 연산자 출력)
        // 첫번째 truthy 값 -> 3
    </script>
</body>
</html>

2.11 (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>
        const age = 23;
        if(age >=14 && age <=90){
            alert("14세 이상 90세 이하입니다.")
        } else{
            alert("범위에 속하지 않습니다.")
        }
    </script>
</body>
</html>

2.11 (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>
        const age = 7;
        if (age<14 || age>90){
            alert(age+"는 범위에 속하지 않습니다.")
        } else{
            alert(age+"는 범위에 속합니다.")
        }

        const myAge = 11;
        if ( !(myAge>=14 && myAge <=90)){
            alert(myAge+"는 범위에 속하지 않습니다.")
        } else{
            alert(myAge+"는 범위에 속합니다.")
        }
    </script>
</body>
</html>

2.11 (8) " 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>"if"에 관한 고찰</title>
</head>
<body>
    <script>
        if (-1 || 0) alert( 'first' ); 
        // -1 => truthy (실행) **
        if (-1 && 0) alert( 'second' );
        // 0 => falsy (실행X) **
        if (null || -1 && 1) alert( 'third' );
        // null || 1 => 1 => truthy (실행) **
        // OR: 첫번째 truthy    AND: 첫번째 falsy
    </script>
</body>
</html>

2.11 (9) 로그인 구현하기

<!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 login = prompt("Who's there?", "");
        if(login == "Admin"){
            let password = prompt("Password?", "")
            if(password == "TheMaster"){
                alert("Welcome!")
            } else if (login == '' || login == null){
                alert("Canceled")
            } else {
                alert("Wrong password")
            }
        } else if(login == '' || login == null){
            alert("Canceled")
        } else{
            alert("I don't know you")
        }
    </script>

 

728x90
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

[모던 JavaScript] 2.17 ~ 3.2 과제 정리  (0) 2022.11.18
[모던 JavaScript] 2.12 ~ 2.16 과제 정리  (0) 2022.11.17
[모던 JavaScript] 1.1 ~ 2.6 과제 정리!  (0) 2022.11.15
[FrontEnd2] JS 연습문제 (대수의 법칙 _ 주사위)  (0) 2022.06.05
[FrontEnd2] JS 연습문제 (객체)  (0) 2022.06.05

관련글

댓글

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

티스토리툴바