라라리라

2023.09.14 / Step 6 [DOM_이벤트응용] - 코딩 52 일차 본문

코딩/2023 JavaScript DOM

2023.09.14 / Step 6 [DOM_이벤트응용] - 코딩 52 일차

헤실 2023. 9. 14. 17:49

_00_this개념1.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>Document</title>
</head>
<body>
    <button id="btn1" onclick="btn1Function()">onClick의 this</button>
    <button id="btn2">addEventListener의 this</button>

    <script>
        function btn1Function() {
            alert(this);
        }

        document.querySelector("#btn2").addEventListener("click", btn2Function);
        function btn2Function() {
            alert(this);
        }

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

 

Document

 

_00_this개념2.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>Document</title>
</head>
<body>
    <button id="btn1" onclick="btn1Function(this)">onClick의 this</button>
    <button id="btn2">addEventListener의 this1</button>
    <button id="btn3">addEventListener의 this2</button>

    <script>
        // onclick의 경우 this를 인자로 전달받아 해결
        function btn1Function(obj) {
            alert(obj.innerText);
        }

        // addEventListener 방법1)
        btn2.addEventListener("click", btn2Function);
        function btn2Function() {
            alert(this.innerText);
        }
       
        // addEventListener 방법2)
        btn3.addEventListener("click", btn3Function);
        function btn3Function() {
            console.log(this);
              // e.target == this
            alert(this.innerText);
        }
       
        btn3.addEventListener(`click`, (a)=>{
            alert(a.target.innerText);
        })
       
    </script>
</body>
</html>

 

Document

 

_01_노드한개_그리기.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>Document</title>
    <style>
        td {
            border: 1px solid black;
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
   
    <script>

        /*
            [개념] createElement("태그명")
                HTML 요소를 생성한다.
        */

        let body = document.body;
        let node = document.createElement("td");
        body.append(node);
       
    </script>

</body>
</html>

 

Document

 

_02_노드한개_이벤트적용1.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>Document</title>
    <style>
        td {
            border: 1px solid black;
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>

    <script>

        let nodeEvent = function(e) {
            // this.innerText = "눌렀음!";
            e.target.innerText = "눌렀음!";
        }

        let body = document.body;

        let node = document.createElement("td");
        node.addEventListener("click", nodeEvent);

        body.append(node);

    </script>

</body>
</html>

 

Document

 

_03_노드한개_이벤트적용2.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>Document</title>
    <style>
        td {
            border: 1px solid black;
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>

    <script>

        let check = false;
        let nodeEvent = function(e) {
            if(check == false) {
                e.target.innerText = "눌렀음!";
            } else {
                e.target.innerText = "";
            }
            check = !check;
        }

        let body = document.body;
        let node = document.createElement("td");
        node.addEventListener("click", nodeEvent);
        body.append(node);

    </script>

</body>
</html>

 

Document

 

_04_노드여러개_그리기1.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>Document</title>
    <style>
        td {
            border: 1px solid black;
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <script>

        let body = document.body;
        let table = document.createElement("table");
        let tr = document.createElement("tr");

        for(let i=0; i<5; i++) {
            let td = document.createElement("td");
            tr.append(td);            
        }
        table.append(tr);
        body.append(table);

    </script>

</body>
</html>

 

Document

 

_05_노드여러개_이벤트적용1.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>Document</title>
    <style>
        td {
            border: 1px solid black;
            width: 40px;
            height: 40px;
            text-align: center;     /* 가로 중앙정렬 */
            cursor: pointer;
        }
    </style>
</head>
<body>

    <script>

        let num = 1;
        let clickEvent = function(e) {
            if(e.target.innerText == "") {
                e.target.innerText = num;
                num += 1;
            }
        }

        let body = document.body;
        let table = document.createElement("table");
        let tr = document.createElement("tr");

        for(let i=0; i<5; i++) {
            let td = document.createElement("td");
            td.addEventListener("click", clickEvent);
            tr.append(td);            
        }
        table.append(tr);
        body.append(table);

    </script>

</body>
</html>

 

Document

 

_06_노드여러개_이벤트적용2.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>Document</title>
    <style>
        td {
            border: 1px solid black;
            width: 40px;
            height: 40px;
            text-align: center;     /* 가로 중앙정렬 */
        }
    </style>
</head>
<body>

    짝수를 클릭하세요.
    <script>

        let clickEvent = function(e) {
            let value = Number(e.target.innerText);
            if(value % 2 == 0) {
                alert("정답!");
            } else {
                alert("오답!");
            }
        }
       
        let body = document.body;
        let table = document.createElement("table");
        let tr = document.createElement("tr");
       
        for(let i=0; i<5; i++) {
            let td = document.createElement("td");
            td.addEventListener("click", clickEvent);
            td.innerText = i + 1;
            tr.append(td);            
        }
        table.append(tr);
        body.append(table);

    </script>

</body>
</html>

 

Document 짝수를 클릭하세요.

 

저작자표시

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

2023.09.18 / Step 6 [DOM_틱택토] - 코딩 54 일차  (0) 2023.09.18
2023.09.15 / Step 6 [DOM_이벤트응용] - 코딩 53 일차  (0) 2023.09.15
2023.09.13 / Step 5 [DOM_비동기] - 코딩 51 일차  (0) 2023.09.13
2023.09.12 / Step 5 [DOM_비동기] - 코딩 50 일차  (0) 2023.09.12
2023.09.11 / Step 4 [DOM_태그생성] - 코딩 49 일차  (0) 2023.09.11
'코딩/2023 JavaScript DOM' Related Articles more