CLASS/HTLML,CSS,JS

#7-4 / ECMA Script(ES5, ES6)

hingu 2024. 4. 26. 16:59

* ES7번~ 은 완전 새로운 형태임..

⚡  ES에서 가장 큰 변화들
*** querySelector : ES에서 querySelector 사용시 HTML보다 상단에 사용하면 오류 발생

 
<body>
    <input type="button" value="클릭" id="btn">
</body>

<script>
    //-- 1. 인자값을 배열화 하여 데이터를 받음
    function abc(...a){ 
        console.log(a);
    }
    abc("홍길동","강감찬","유관순")

    //-- 2. 하나의 변수에 여러개의 가상 변수 및 함수를 사용
    let data = { //배열 아님
        z : "ECMA",
        z2 : "ECMA2",
        z3 : "ECMA3",
        address:{
            post : "당산동",
        },
    };
    console.log(data.z2) //ECMA2 출력
    console.log(data.address.post) //당산동 출력

     
    //--3. 배열 구조 변경
    var arr1 = [4,2,7];
    var arr2 = [10,20,70];
    var arr3 = [...arr1,...arr2];
    console.log(arr3) // [4, 2, 7, 10, 20, 70] 출력


    //-- 4. ES : 핸들링 id,class로 사용 가능 
    /*
    단, ES에서 querySelector 사용시 HTML보다 상단에 사용하면 오류 발생하는데
    script태그에 <script defer> 사용하면 
    getElementById는 상단에 사용 가능(동기,비동기?)아마두
    */
    document.querySelector("#btn").addEventListener("click",function(){
        console.log('작동되니');
    });
</script>