웹 10일 (23.03.15)

Jane·2023년 3월 15일
JavaScripthtml
0

IT 수업 정리

목록 보기
72/124

1. DOM 객체 (이어서)

1-1. 자식 노드 지우기

        window.onload = function () {
            var str = "";
            str += "<p id='jsTitle'> javascript & node.js </p>";
            str += "<img id='logoImg', src='./logo.png',";
            str += "width='170', height='67'>";
            document.body.innerHTML = str;

            var titleNode = document.getElementById("jsTitle");
            titleNode.parentNode.removeChild(titleNode);
            // jsTitle이라는 ID를 가진 걸 찾고, 부모 노드(body)에 가서 자식 노드를 지운다.

            var logoNode = document.getElementById("logoImg");
            logoNode.parentNode.removeChild(logoNode);
            // logoImg이라는 ID를 가진 걸 찾고, 부모 노드(body)에 가서 자식 노드를 지운다.
        }
  • 디버깅 하는데 이미지가 안 나오는 이유? : 웹 브라우저가 이미지를 관리하고 있다. (관리하는 방법은 일반 사용자에게 공개되지 않음.) / 브라우저가 이미지를 그리는 중에 멈춘 상태

1-2. style 적용하기

        window.onload = function () {
            var str = "";
            str += "<p id='jsTitle'> javascript & node.js </p>";
            str += "<img id='logoImg', src='./logo.png'>";
            document.body.innerHTML = str;

            var titleNode = document.getElementById("jsTitle");
            titleNode.style.fontSize = "1.2em";
            titleNode.style.border = "1px solid #FFFF00";

            var logoNode = document.getElementById("logoImg");
            logoNode.style.width = "170px";
            logoNode.style.height = "67px";
        }

2. 이벤트 처리하기

  • 이벤트 : 사건이 일어나는 것

2-1. 인라인 모델 방식

  • html 안에 온클릭을 제어하는 함수를 쓰고, 함수의 기능은 js에 쓴다.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function headerClick() {
            console.log("click");
        }

    </script>
    <style>
        #cEvent {
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 1.2em;
            background-color: #FF0000;
            color: #FFFFFF;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="cEvent" onclick="headerClick();">
      <!-- ondblclick : 더블클릭 -->
        click event
    </div>
</body>

</html>

  • 이벤트 제거하기
        function headerClick() {
            console.log("click");

          // 3줄 추가
            var ce = document.getElementById("cEvent");
            console.log(ce);
            ce.onclick = null;
        }

2-2. 기본 모델

  • html 태그에 함수를 선언하지 않고, script로 모든 이벤트 제어를 구현한 코드
    동작은 인라인 모델이든 기본 모델이든 똑같이 움직인다.
<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        window.onload = function () {
            var ce = document.getElementById("cEvent");

      	// 익명 함수로 만든 버전
            ce.onclick = function () {
                console.log("click");

            }
        }

    </script>

</head>

<body>
    <div id="cEvent">
        click event
    </div>
</body>

</html>
  • 명시적 함수로는 이렇게 선언할 수도 있다.
		// 명시적 함수로 선언한 클릭 이벤트
            ce.onclick = clickEventHandler;
            function clickEventHandler() {
                console.log("click");
              // ce.onclick = null;
            }

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>Document</title>
    <script>
        window.onload = function () {
            function addHandler() {
                console.log("click");
            };

            function removeHandler() {
                console.log("remove");
                ceA.removeEventListener("click", addHandler, false);
            };

            var ceA = document.getElementById("cEventAdd");
            ceA.addEventListener("click", addHandler, false);
            var ceR = document.getElementById("cEventRem");
            ceR.addEventListener("click", removeHandler, false);
        }

    </script>
    <style>
        div {
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 1.2em;
            font-weight: bold;
        }

        #cEventAdd {
            background-color: #FF0000;
            color: #FFFFFF;
        }

        #cEventRem {
            background-color: #00FF00;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div id="cEventAdd">
        add event
    </div>
    <div id="cEventRem">
        remove event
    </div>
</body>

</html>

  • div를 누르면 콘솔에서 동작
  • addEventListener, removeEventListener

2-4. MS 핸들러 동작

  • IE8 이하 브라우저에서 동작 (최신 브라우저에서는 잘 쓰지 않는다)
  • attachEvent - detachEvent로 제어

3. 이벤트 객체 제어

3-1. this

  • Java의 this : 자기 자신
  • JavaScript의 this : 너무나도 많다!
    (생성자의 this는 자기 자신, 이벤트 제어의 this는 호출한 것)

3-2. event

  • 이벤트 객체
    - 사용자가 직접 만들지 않아도 기본적으로 제공
    - 속성과 메소드가 존재
    - ex) 마우스 클릭시 클릭한 좌표값, 이벤트를 발생시킨 객체가 어떤 것인지

  • console.log(event); (브라우저가 가지고 있는 정보 출력)

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript</title>

    <script>

        window.onload = function () {
            function addHandler() {
                console.log("click");
                console.log("this : " + this);
                this.style.backgroundColor = "#333333";
            };


            var objD = document.getElementById("objDiv");
            objD.addEventListener("click", addHandler, false);

            var objP = document.getElementById("objPar");
            objP.addEventListener("click", addHandler, false);

            function divHandler(event) {
                console.log("click");
                console.log("this : " + this);
                console.log(event);
                this.style.backgroundColor = "#333333";
            };


            var objE = document.getElementById("divEvent");
            objE.addEventListener("click", divHandler, false);
        }
    </script>

    <style>
        div,
        p {
            width: 200px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 1.2em;
            font-weight: bold;
        }

        #objDiv {
            background-color: #FF0000;
            color: #FFFFFF;
        }

        #objPar {
            background-color: #00FF00;
            color: #FFFFFF;
        }

        #divEvent {
            background-color: #0000FF;
            color: #FFFFFF;
        }
    </style>
</head>

<body>

    <div id="objDiv">D1</div>
    <p id="objPar">P1</p>
    <div id="divEvent">D2</div>

</body>

</html>

4. 마우스 이벤트 모음

            var me = document.getElementById("mouseEvent");

		// 클릭 이벤트
            me.addEventListener("click", function () {
                console.log("click event!!");
            }, false);

		// 마우스 오버 이벤트
            me.addEventListener("mouseover", function () {
                console.log("mouseover event!!");
            }, false);

		// 마우스 아웃 이벤트
            me.addEventListener("mouseout", function () {
                console.log("mouseout event!!");
            }, false);

		// 마우스 무브 이벤트
            me.addEventListener("mousemove", function (e) {
                console.log("mousemove event!!");
                //console.log("x : " + e.clientX + ", y : " + e.clientX);
            }, false);

		// 마우스 다운 이벤트
            me.addEventListener("mousedown", function (e) {
                console.log("mousedown event!!");
            }, false);

		// 마우스 업 이벤트
            me.addEventListener("mouseup", function (e) {
                console.log("mouseup event!!");
            }, false);

		// 더블클릭 이벤트
            me.addEventListener("dblclick", function (e) {
                console.log("dblclick event!!");
            }, false);

5. 폼 이벤트

  • uID와 uPW의 value가 비어있으면 팝업창으로 알리기
  • submit 버튼 : submit()
  • reset 버튼 : reset()
profile
Jane
velog, GitHub, Notion 등에 작업물을 정리하고 있습니다.
이전 포스트

웹 9일 (23.03.14)

다음 포스트

JavaScript 연습문제 모음

0개의 댓글