라라리라

2023.08.28 / Step 1 [DOM_기초문법_기타] - 코딩 40 일차 본문

코딩/2023 JavaScript DOM

2023.08.28 / Step 1 [DOM_기초문법_기타] - 코딩 40 일차

헤실 2023. 8. 28. 21:43

_0023_수학_Math클래스.html

 

<!DOCTYPE html>
<html lang="ko">
<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>Math클래스</title>
</head>
<body>

    <script>

        /*
            [개념] Math 클래스
        */
        let num = 2.6234;

        let maxNum = Math.max(10, 5, 8, 30),
            minNum = Math.min(10, 5, 8, 30),
            absNum = Math.abs(-3),          // 절대값
            roundNum = Math.round(num),     // 반올림
            floorNum = Math.floor(num),     // 내림
            ceilNum = Math.ceil(num),       // 올림
            randNum = Math.random(),        // 랜덤은 소수점으로 나오기 때문에 곱하기 숫자로 범위를 정함
            piNum = Math.PI;

        document.write(maxNum, "<br>");
        document.write(minNum, "<br>");
        document.write(absNum, "<br>");
        document.write(roundNum, "<br>");
        document.write(floorNum, "<br>");
        document.write(ceilNum, "<br>");
        document.write(randNum, "<br>");
        document.write(piNum, "<br>");
        document.write(piNum.toFixed(2), "<br>");

    </script>
   
</body>
</html>

 

Math클래스

 

_0024_window객체.html

 

<!DOCTYPE html>
<html lang="ko">
<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>window객체</title>
</head>
<body>

    <script>

        /*
            [개념] window 객체의 다양한 메서드
                (1) alert() : 경고 창을 나타낼 때 사용한다.
                (2) prompt() : 질의응답 창을 나타낼 때 사용한다.
                (3) confirm() : 확인/취소 창을 나타낼 때 사용한다.
        */

        while(true) {
            let age = prompt("당신의 연령은?", "18세");
   
            // isNaN함수 : 문자이면 true를 반환한다.
            if(isNaN(age) == false) {
                document.write(`당신의 나이는 ${age}세 이군요!`);
                break;
            } else {
                alert("잘못 입력했습니다.");

                let answer = confirm("다시 입력하시겠습니까?");
                if(answer == false) {
                    break;
                }
            }
        }
    </script>
   
</body>
</html>

 

window객체

 

_0025_변수.html

 

<script>

    /*
        var, let, const

        (1) var는 함수 스코프
            - 함수 내에서 선언된 변수만 그 지역변수
        (2) let, const는 블록 스코프(함수, if, for, while, try-catch 등)
            블록 스코프는 모든 코드 블럭 내에서 선언된 변수는
            코드 블록 내에서만 유효
            외부에서는 접근 불가능
            즉 코드 블록 내부에서 선언한 변수는 지역 변수

            1) 값 변경을 위해서는 let
            2) 값 변경하지 않을때는 const를 사용(상수)
    */

    // 1. const 는 상수이므로 선언과 동시에 할당해야한다.
    //    한번 할당하면 값을 변경할 수 없다.  
    const SIZE = 5;
    // SIZE = 100;       // 오류발생
   
    // 2. var는 함수 스코프로 블록 스코프에서 선언하더라도 외부에서 접근이 가능하다.
    let age = 30;
    if (age > 19) {
        var txt = '성인';
    }
    console.log(txt); // '성인'

    // 3. var는 함수 스코프로 함수 내에서 선언되면 함수 밖에서 사용할 수 없다.
    //    유일하게 벗어날 수 없는 스코프가 함수이다.
    function add(num1, num2) {
        var result = num1 + num2;
    }
    add(2, 3);
    // console.log(result);     // 오류발생

    // 4. var는 한번 선언된 변수를 다시 선언 가능
    var name = 'Mike';
    console.log(name); // Mike
    var name = 'Jane'
    console.log(name); // Jane
   
    // 5. 반면 let은 같은 상황에서 에러발생
    let msg = 'Hi';
    // let msg = 'hello' // 오류발생

</script>

 

 

_0026_반복문.html

 

<script>

    // 1. for
    console.log(">>> 1번");
    for (let i = 0; i < 10; i++){
        console.log(i); // 0~9까지 출력
    }
    console.log("---------------------------")

    // 2. for in : json 출력 시 사용
    console.log(">>> 2번");
    let obj = { name : "홍길동", age : 20, gender : "남성"};
    for (let key in obj){
        console.log(`${key} : ${obj[key]}`);
    }
    console.log("---------------------------")

    // 3. for of : 바로 값 출력
    console.log(">>> 3번");
    let arr = [10, 20, 30];
    for (let item of arr){
        console.log(item); // 10, 20, 30 출력
    }
    console.log("---------------------------")

    // 4. 배열.forEach(value, index, array)
    console.log(">>> 4번");
    arr.forEach((value) => {
        console.log(value);
    });
    arr.forEach((value, index) => {
        console.log('Index: ' + index + ' Value: ' + value);
    });
    let arr2 = ["이민수", "김철수", "신정민", "유재석"];
    arr2.forEach((value, index, array)=>{
        console.log(value, index, array);  
    })
    console.log("---------------------------")

    // 5-1. 배열.map( (value, index, array)=>{...반복 수행 코드...} )
    console.log(">>> 5-1번");
    let arr3 = [10, 20, 30, 40];
    let map_reuslt = arr3.map((value, index, array)=>{
        console.log(value); // 10, 20, 30, 40 출력
        return value*10;    // 각 요소에 10을 곱한 값을 배열로 반환
    })
    console.log(map_reuslt);
    console.log(arr3);      // 원본은 그대로 유지된다  
    console.log("---------------------------")

    // 5-2 배열.filter( (value, index, array)=>{...반복 수행 코드...} )
    let filter_result = arr3.filter((value, index, array)=>{
        console.log(value);     // 10, 20, 30, 40 출력
        return value % 2 == 0 // value가 짝수인 값들을 배열로 반환
        // true를 반환하면 값을 추가하고, false를 반환하면 버림
    })
    console.log(filter_result);

</script>

 

 

_0027_배열.html

 

<script>

    // 1-1. 배열.indexOf(value) : value가 있으면 value의 인덱스 반환, 없으면 -1 반환
    console.log(">>> 1번");
    let arr = [1, 2, 3, 4, 5, 1, 2, 3];
    console.log(arr.indexOf(3));     // 2
    console.log(arr.indexOf(100));   // -1
   
    // 1-2. 배열.indexOf(value, index) : index위치부터 value탐색 후, 인덱스 반환
    console.log(arr.indexOf(3, 3));  // 7

    // 1-3. 배열.lastIndexOf(value) : 끝에서부터 value의 인덱스 반환
    console.log(arr.lastIndexOf(3)); // 7

    // 2. 배열.includes(value) : value가 있으면 true, 없으면 false 반환
    console.log(">>> 2번");
    let arr2 = [1, 2, 3];
    console.log(arr2.includes(2)); // true
    console.log(arr2.includes(8)); // false

    // 3-1. 배열.find(fn)
    // indexOf처럼 찾는다는 의미는 동일하지만 보다 복잡한 연산이 가능하도록 함수 연결 가능
    // 첫 번째 true값만 반환하고 끝남
    console.log(">>> 3-1번")
    let arr3 = [1, 2, 3, 4, 5];
    let result = arr3.find((value) => {
        // 리턴 값이 true일 때 멈추고 해당 요소를 알려줌
        return value % 2 === 0;
    });
    console.log(result); // 2

    let userList = [
        {name: "Mike", age: 30},
        {name: "Jane", age: 27},
        {name: "Tom", age: 10},
        {name: "anna", age: 5}
    ];

    // 3-2. 배열.find는 없으면 undefined를 반환
    console.log(">>> 3-2번");
    let result2 = userList.find((i) => {
        return i.age < 3;
    });
    console.log(result2); // { name: "Tom", age: 10 }

    // 3-3. 배열.findIndex(fn) 조건이 true이면 해당 인덱스를 반환. 없으면 -1을 반환
    console.log(">>> 3-3번");
    let result3 = userList.findIndex((a) => {
        return a.age < 19;
    });
    console.log(result3); // 2

    // 4. 배열.filter(fn) : 만족하는 모든 요소를 배열로 반환
    // find와 달리 조건을 만족하는 모든 요소를 알고 싶을 때 사용
    console.log(">>> 4번");
    let arr4 = [1, 2, 3, 4, 5 , 6 , 7];
    let result4 = arr4.filter((a, b, c) => {
        return a % 2 == 0;
    });
    console.log(result4); // [2, 4, 6]

    // 5. Array.isArray() : 배열인지 아닌지 확인
    console.log(">>> 5번");
    let user = {
        name: "Mike",
        age: 30,
    }
    let userList3 = ["Mike", "Jane", "Tom"];
    console.log(typeof user);     // object
    console.log(typeof userList3); // object // 타입은 object 지만 배열이다.
    console.log(Array.isArray(user));       // false
    console.log(Array.isArray(userList3));  // true

</script>

 

 

_0028_구조분해할당.html

 

<script>
    /*
        구조 분해 할당(Destructing assignment)
            구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서
            그 값을 변수에 담을 수 있게 하는 표현식
    */

    // 배열 구조 분해
    let [x, y] = [1, 2];
    // let x = 1;
    // let y = 2;
    console.log(x); // 1
    console.log(y); // 2
    console.log("-----------------");

    let users = ['Mike', 'Tom', 'Jane'];
    let [user1, user2, user3] = users;
    // let user1 = users[0];
    // let user2 = users[1];
    // let user3 = users[2];
    console.log(user1);     // Mike
    console.log(user2);     // Tom
    console.log(user3);     // Jane
    console.log("-----------------");

    let str = "Mike-Tom-Jane";
    let [user4, user5, user6] = str.split('-');
    console.log(user4);     // Mike
    console.log(user5);     // Tom
    console.log(user6);     // Jane
    console.log("-----------------");

    let [a, b, c] = [1, 2]; // c에는 undefined가 들어감
    console.log(a);     // 1
    console.log(b);     // 2
    console.log(c);     // undefined
    console.log("-----------------");

    // 배열 구조 분해: 바꿔치기
    console.log("변경 전 a = ", a);
    console.log("변경 전 b = ", b);
    [a, b] = [b, a];
    console.log("변경 후 a = ", a);
    console.log("변경 후 b = ", b);
    console.log("-----------------");

    // 객체 구조 분해
    let user = {name: "Mike", age: 30};
    let {name, age} = user;
    // let name = user.name;
    // let age = user.age;
    console.log(name);
    console.log(age);

</script>

 

 

_0029_나머지매개변수.html

 

<script>
       
    // 나머지 매개변수, 전개 구문
    function add(...nums){
        let result = 0;
        nums.forEach((num) => (result += num));
        console.log(result);
    }
    add(1, 2, 3);
    add(1, 2, 3, 4, 5, 6);

    function sum(...nums){
        let result = 0;
        nums.forEach((value)=>{result+=value});
        document.write(result);
    }
    sum(1, 2, 3, 4);
    sum()
</script>

 

 

_0030_전개구문.html

 

<script>
   
    // 전개 구문: 배열
    let arr1 = [1, 2, 3];
    let arr2 = [4, 5, 6];

    // 예)
    let arr3 = [];
    for(let i=0; i<arr1.length; i++) {
        arr3.push(arr1[i]);
    }
    for(let i=0; i<arr2.length; i++) {
        arr3.push(arr2[i]);
    }
    console.log(arr3);
    // 위 식을 아래와 같이 사용 가능

    let result = [...arr1, ...arr2]; //arr1은 1,2,3, arr2는 4,5,6
    console.log(result); // [1, 2, 3, 4, 5, 6]

    let result2 = [0, ...arr1, ...arr2, 7, 8, 9];
    console.log(result2);

    // 전개 구문: 객체
    let user = {name: 'Mike', weight: 76}
    let mike = {...user, age:30}
    console.log(mike) // {name:"Mike", weight: 76, age:30}

    // 전개 구문: 복제
    let arr11 = [1, 2, 3];
    let arr12 = [...arr11]; // [1, 2, 3]

    let user2= {name:'Mike', age:30};
    let user3 = {...user2};

    console.log(user3.name);
    console.log(user3.age);
   
</script>

 

 

저작자표시

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

2023.08.31 / Step 1 [DOM_태그선택3] - 코딩 43 일차  (0) 2023.08.31
2023.08.30 / Step 1 [DOM_태그선택2] - 코딩 42 일차  (0) 2023.08.30
2023.08.29 / Step 1 [DOM_태그선택1] - 코딩 41 일차  (0) 2023.08.29
2023.08.27 / Step 1 [DOM_기초문법_문자열] - 코딩 39 일차  (0) 2023.08.27
2023.08.26 / Step 1 [DOM_기초문법_배열] - 코딩 38 일차  (0) 2023.08.26
'코딩/2023 JavaScript DOM' Related Articles more