[모던 JavaScript] 4.6 ~ 5.3 과제 정리!

    SMALL
    • 4.6 옵셔널 체이닝 '?.'
    • 4.7 심볼형
    • 4.8 객체를 원시형으로 변환하기
    • 5.1 원시값의 메서드
    • 5.2 숫자형
    • 5.3 문자열

    5.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 str = "Hello";

        str.test = 5;

        alert(str.test);

        // **엄격모드: undefined
        // 엄격모드에선 래퍼객체 수정 시, error 발생
        // **비엄격모드: An error
        // 비엄격모드에선 래퍼객체 수정 시, error 발생 X
        // 래퍼객체에 프로퍼티 test 추가
        // but 래퍼 객체는 바로 삭제 
        // -> 마지막 줄 실행 시, 프로퍼티 test 찾을 수 X
    </script>
</body>
</html>

    5.2(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 = +prompt("숫자 a 입력: ", 0);
        let b = +prompt("숫자 b 입력: ", 0);

        alert("두 수의 합은 " + (a+b) +"입니다.")
    </script>
</body>
</html>

    5.2(2) 6.35.toFixed(1) == 6.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>6.35.toFixed(1) == 6.3인 이유는 무엇일까요?</title>
</head>
<body>
    <script>
        alert( 1.35.toFixed(1) ); // 1.4
        alert( 6.35.toFixed(1) ); // 6.3
        // 6.3인 이유? => *정밀도 손실* 발생
        // 6.35.toFixed(20) => 6.34999999999999964473
        // 3.5보다 작음 -> 버림됨 -> 6.3
        // ** 6.4로 수정 방법
        // (6.35 * 10).toFixed(20) -> 63.50000000000000000000
        // Math.round( (6.35*10) / 10 ) -> Math.round(6.35) -> 6.4
    </script>
</body>
</html>

    5.2(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>
        // ****
        function readNumber(){
            let num;

            do{
                num = prompt("숫자 입력", 0);
            } while (!isFinite(num));

            //*(핵심코드)*
            if(num === null || num ==="") return null;
            //*

            return +num;
        }

        alert(`Read: ${readNumber()}`)
        // ****
    </script>
</body>
</html>

    5.2(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 i = 0;
        while (i != 10) {
        i += 0.2;
        }

        // 무한한 루프인 이유?
        // i의 값이 계속 더해지며 "정밀도 손실 발생"
        // 완벽하게 10.00000이 되는 경우가 발생 X
        // 무한으로 돈다.
    </script>
</body>
</html>

    5.2(5) 최소에서 최대까지 임의의 숫자

    <!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>
        function random(min, max) {
            return min + Math.random() * (max-min);
        }

        alert( random(1, 5) ); 
    </script>
</body>
</html>

    5.2(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>
        function random(min, max) {
            let rand = min + Math.random(max + 1 - min);
            return Math.floor(rand)
        }

        alert( random(1, 5) ); 
    </script>
</body>
</html>

    5.3(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>
        function ucFirst(str) {
            if(!str) return str; //*

            return str[0].toUpperCase() + str.slice(1); 
        }

        alert( ucFirst("john") );
    </script>
</body>
</html>

    5.3(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>
        function checkSpam(str) {
            str = str.toLowerCase();
            if(str.includes("viagra")||str.includes("xxx")){
                return true
            }
            return false
        }

        /* function checkSpam(str) {
            let lowerStr = str.toLowerCase();

            return lowerStr.includes('viagra') || lowerStr.includes('xxx');
        } */

        alert(checkSpam('buy ViAgRA now')); 
        alert(checkSpam('free xxxxx')); 
        alert(checkSpam("innocent rabbit")); 
    </script>
</body>
</html>

    5.3(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>
        function truncate(str, maxlength) {
            strLength = str.length;

            let result = (strLength > maxlength-1)? str.slice(0, maxlength) + "...": str;
            
            return result
        }

        alert(truncate("What I'd like to tell on this topic is:", 20)); // "What I'd like to te…"
        alert(truncate("Hi everyone!", 20)); // "Hi everyone!"
    </script>
</body>
</html>

    5.3(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>
        function extractCurrencyValue(str){
            return +str.slice(1);
        }

        alert( extractCurrencyValue('$120') === 120 )
    </script>
</body>
</html>
    728x90
    저작자표시

    'JavaScript' 카테고리의 다른 글

    [모던 JavaScript] 5.6~ 5.8 과제 정리!  (2) 2022.12.08
    [모던 JavaScript] 5.4~ 5.5 과제 정리!  (0) 2022.12.04
    [모던 JavaScript] 4.5 과제 정리  (0) 2022.11.25
    [모던 JavaScript] 4.1 ~ 4.4 과제 정리  (0) 2022.11.22
    [모던 JavaScript] 3.3 ~ 3.6 과제 정리  (0) 2022.11.20

    관련글

    댓글

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

    티스토리툴바