본문 바로가기
CLASS/HTLML,CSS,JS

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

by hingu 2024. 4. 26.

* 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>

'CLASS > HTLML,CSS,JS' 카테고리의 다른 글

#9 / html include (by php)  (0) 2024.05.30
#8 / Js-Node,forEach  (0) 2024.05.14
#7-3 / HTML+CSS+JS 외부 로드 및 각종 핸들링  (0) 2024.04.26
#7-2 / HTML 오브젝트에 데이터 출력  (0) 2024.04.26
#7-1 / checkbox,radio 핸들링  (0) 2024.04.26