4일차 JavaScript(2023-03-15)

권단비·2023년 3월 15일

JavaScript

목록 보기

3/4

[Dom]

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

        //부모객체를 찾은 다음 부모객체에서 자식객체를 삭제한다.
        var titleNode = document.getElementById("jsTitle");
        titleNode.parentNode.removeChild(titleNode);

        var logoNode = document.getElementById("logoImg");
        logoNode.parentNode.removeChild(logoNode);
      };

      //style속성을 이용한 CSS적용
      window.onload = function(){
        var str = "";
        str += "<p id='jsTitle'> javascript &node.js </p>";
        str += "<img id='logoImg' src='./img/logo.png'>";
        document.body.innerHTML = str;

        var titleNode = document.getElementById("jsTitle");
        titleNode.style.border = "1px solid #ff0000";

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

[결과값]

[Event]

웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것

click : 요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick : 요소에 마우스를 더블클릭했을 때 이벤트가 발생

- 인라인 모델
- 기본 모델
- MS 핸들러 모델
-표준 핸들러 모델

[인라인모델 click]

[계산]
<!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>
      function headerClick() {
        console.log("click!");

        // // //이벤트 제거 ⇒ 한 번 클릭하고 지워짐
        // var ce = document.getElementById("cEvent");
        // console.log(ce);
        // ce.onclick=null;
        // ce.ondblclick=null;
      }
    </script>
    <style>
      #cEvent {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #f00;
        color: #fff;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <!-- <div id="cEvent">click event</div> -->
    <div id="cEvent" onclick="headerClick();">click event</div>
    <!-- <div id="cEvent">click event</div> // 더블 클릭 -->
  </body>
</html>

[결과값]

[계산]
<!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 () {
        var ce = document.getElementById("cEvent");
        //방법1
        ce.onclick = function () {
          console.log("click!");
          //이벤트 제거
          //cd.onclick=null;
        };
        //  //방법2
        //  ce.onclick=clickEventHandler;
        //  function clickEventHandler(){
        //   console.log("clickEventHandler!");
        //   //이벤트 제거
        //   //ce.onclick=null;
        //  }
      };
    </script>
    <style>
      #cEvent {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #f00;
        color: #fff;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <div id="cEvent">click event</div>
  </body>
</html>

[결과값]

[계산]
<!DOCTYPE html>
<html lang="en">
  <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>
  #cEventAdd {
    width: 200px; height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 1.2em;
    background-color: #f00;
    color: #fff;
    font-weight: bolder;
}

#cEventRem {
    width: 200px; height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 1.2em;
    background-color: #0f0;
    color: #fff;
    font-weight: bolder;
}
</style>
<script>  
  window.onload = function() {

    function addHandler(){
        console.log("click!!");
    };

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

    var ceA = document.getElementById("cEventAdd");
    ceA.addEventListener("click",function addHandler(){
        console.log("click!!");
    });

      var ceR = document.getElementById("cEventRem");
      ceR.addEventListener("click", removeHandler);
  };
</script>
</head>
<body>
  <div id="cEventAdd">click event</div>
  <div id="cEventRem">remove event</div>
</body>
</html>

[결과값]

[this 이벤트가 발생한 객체]

[계산]
<!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 () {
        /*   자바에서의 this. 객체 자기 자신
            자바스크립에서의 this = 자기를 호출하는 놈(객체)
         */
        function addHandler(e) {
          console.log("click!!");
          console.log("this : " + this); // ⇒ 호출한 objD 나 objP 가 this가 된다.
          //java의 this : 자기 자신
          //js의 this : 상황에 따라 다르다.
          // new this : 자기자신
          // 생성자 외 다른 this : 호출한 놈

          console.log(e);

          //IE8 이전버전을 고려
          var event = e || window.event;
          for (var key in event) {
            console.log(key + " : " + event[key]);
          }

          this.style.backgroundColor = "#0000ff";
        }

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

        var objP = document.getElementById("objPar");
        objP.addEventListener("click", addHandler);
      };
    </script>
    <style>
      #objDiv {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #f00;
        color: #fff;
        font-weight: bolder;
      }
      #objPar {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #0f0;
        color: #fff;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <div id="objDiv">Object Division</div>
    <p id="objPar">Object Paragraph</p>
  </body>
</html>

[결과값]

[계산]
<!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 () {
        /*  자바에서의 this. 객체 자기 자신
            자바스크립에서의 this = 자기를 호출하는 놈(객체)
            js의 this : 상황에 따라 다르다.
            new this : 자기자신
            생성자 외 다른 this : 호출한 놈
         */
        function addHandler(e) {
          console.log("click!!");
          console.log("this : " + this); // ⇒ 호출한 objD 나 objP 가 this가 된다.

          this.style.backgroundColor = "#0000ff";
        }

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

        event를 개발자가 콜백함수로 등록했을 때, event 객체 → 웹브라우저에게 받는다     
        */
        function divHandler(event) { // event 파라미터명은 정해진 것이 아니지만, e나 event로 사용함
          console.log("divHandler!!");
          console.log("this : " + this);
          console.log(event);

          this.style.backgroundColor = "#000000";
        }  /*=======================================================================================*/

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

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

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

    <style>
      #objDiv {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #f00;
        color: #fff;
        font-weight: bolder;
      }

      #objPar {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #0f0;
        color: #fff;
        font-weight: bolder;
      }

      #divEvent {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: rgb(61, 140, 230);
        color: #fff;
        font-weight: bolder;
      } 
    </style>
</head>
<body>
<div id="objDiv">Object Division</div>
<p id="objPar">Object Paragraph</p>
<div id="divEvent">Object Event</div>
</body>
</html>

[결과값]

[계산]
<!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>
  </head>
  <body>
    <input type ="text" id="num1" /> + <input type ="text" id="num2" />
    <button onclick="sum()">계산</button>
    <h1></h1>
  </body>
  <script>
      var num1 = document.getElementById("num1");
      var num2 = document.getElementById("num2");
      var h1 = document.getElementsByTagName("h1")[0];

      function sum() {
        h1.innerHTML = "Sum : " + Number(num1.value) + Number(num2.value);
      }
  </script>
  <style>
    h1 {
      background-color: rgb(66, 134, 212);
      color: white;
    }
  </style>
</html>

[결과값]

[계산 : onchange 실시간 변경1]
<!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>
  </head>
  <body>
    <input type ="text" id="num1" onchange="sum()" /> + <input type ="text" id="num2" onchange="sum()" />
    <button onclick="sum()">계산</button>
    <h1></h1>
  </body>
  <script>
      var num1 = document.getElementById("num1");
      var num2 = document.getElementById("num2");
      var h1 = document.getElementsByTagName("h1")[0];

      function sum() {
        h1.innerHTML = "Sum : " + (Number(num1.value) + Number(num2.value));
      }
  </script>
  <style>
    h1 {
      background-color: rgb(66, 134, 212);
      color: white;
    }
  </style>
</html>

[결과값]

[계산 : onchange 실시간 변경2]
<!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 sumHandler2() {
          console.log("sumHandler!!"); // 함수 실행 표시
          var v1 = document.getElementById("v1");
          var v2 = document.getElementById("v2");
          console.log(v1.value);

          var sumDiv = document.getElementById("sum");
          sumDiv.innerHTML = "합계: " + (Number(v1.value) + Number(v2.value));
        }

        var v1 = document.getElementById("v1");
        var v2 = document.getElementById("v2");

        v1.addEventListener("change", sumHandler2);
        v2.addEventListener("change", sumHandler2);
      };
    </script>
  </head>
  <body>
    <input id="v1" type="number" onchange="" value="0" /> +
    <input id="v2" type="number" onchange="" value="0" />
    <button id="btn">더하기</button>
    <div id="sum">합계:</div>
  </body>
</html>

[결과값]

[계산 : 문자열 → 아스키코드로 변경]
<!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 asciiHandler(){
          var char = document.getElementById("ascii-input").value; // char가 들어간다
          var ascii = char.charCodeAt(0); // 문자열을 아스키코드로 변환
          document.getElementById("ascii-value").innerHTML = String(ascii);
        }

        var objAscii = document.getElementById("ascii-input");
        objAscii.addEventListener("keyup",asciiHandler); // input값이 변할 때마다
      };
          /*maxlength : input에 들어가는 숫자를 1개로 제한*/
    </script>
  </head>
  <body>
    <input id="ascii-input" type="text" value="" maxlength="1" />
    <p>아스키코드의 값은 :<span id="ascii-value"></span></p>
  </body>
</html>

[결과값]

[계산 : 문자열카운팅]
<!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 asciiHandler(){
          var char = document.getElementById("ascii-input").value; // char가 들어간다
          var ascii = char.length; // 문자열을 카운팅
          document.getElementById("ascii-value").innerHTML = String(ascii);
        }

        var objAscii = document.getElementById("ascii-input");
        objAscii.addEventListener("keyup",asciiHandler); // input값이 변할 때마다
      };
    </script>
  </head>
  <body>
    <input id="ascii-input" type="text" value=""/>
    <p>문자의 개수 :<span id="ascii-value"></span></p>
  </body>
</html>

[결과값]

[계산 : 문자열카운팅2]
<!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 () {
        areaHandler();
        function areaHandler() {
          console.log("areaHandler!"); // 디버깅 문구
          var count = document.getElementById("area-input").value.length;
          document.getElementById("area-count").innerHTML = String(count);

          var objArea = document.getElementById("area-input");
          objArea.addEventListener("keyup", areaHandler); // input값이 변할 때마다
        }
      };
    </script>
  </head>
  <body>
    <textarea id="area-input"></textarea>
    <p>글자수 :<span id="area-count"></span>/1200</p>
  </body>
</html>

[결과값]

[계산 : 문자열카운팅팝업]
<!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 () {
        areaHandler();
        function areaHandler() {
          console.log("areaHandler!"); // 디버깅 문구
          var count = document.getElementById("area-input").value.length;
          if(count>=30){
            alert("메롱" + "30자까지만 입력하세요.");
            return;
          }

          document.getElementById("area-count").innerHTML = String(count);

          var objArea = document.getElementById("area-input");
          objArea.addEventListener("keyup", areaHandler); // input값이 변할 때마다
        }
      };
    </script>
  </head>
  <body>
    <textarea id="area-input"></textarea>
    <p>글자수 :<span id="area-count"></span>/1200</p>
  </body>
</html>

[결과값]

[유효성검사]

[계산]
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript</title>
    <script>
      window.onload = function () {
        var sbmBtn = document.getElementById("sbmBtn");
        sbmBtn.onclick = function () {
          if (document.getElementById("uId").value == "") {
            alert("user id blank!!");
          } else if (document.getElementById("uPw").value == "") {
            alert("user pw blank!!");
          } else {
            alert("login ok!!");
            document.getElementById("loginForm").submit();
          }
        };

        var resBtn = document.getElementById("resBtn");
        resBtn.onclick = function () {
          alert("reset ok!!");
          document.getElementById("loginForm").reset();
        };
      };
    </script>

<style></style>

USER ID :
USER PW :
``` >>``` [결과값] ``` ![](https://velog.velcdn.com/images/hyphen/post/e4031ede-9da0-438d-be6c-93631dd60437/image.png)

###[click 증감연산]

[계산]
<!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 plus() {
          var num = document.getElementById("num");
          num.value++;
        }

        function minus() {
          var num = document.getElementById("num");
          num.value--;
        }

        document.getElementById("plus").addEventListener("click", plus);
        document.getElementById("minus").addEventListener("click", minus);
      };
    </script>
  </head>
  <body>
    갯수<input id="num" type="text" value="0" />
    <button id="plus">+</button>
    <button id="minus">-</button>
  </body>
</html>

[결과값]

권단비

이전 포스트

3일차 JavaScript(2023-03-14)

다음 포스트