ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • javascript
      JAVASCRIPT 2022. 1. 13. 12:25

      속성노드

      (1) basic

      <body>
      <input type="text" id="name" value="kim" class="user-name">
      <script>
      const $input = document.querySelector('input');
      console.log($input.attributes);
      console.log($input.attributes[0].value);
      console.log($input.attributes.type.value);
      console.log($input.attributes.id.value);
      console.log($input.attributes.value.value);
       
      $input.attributes.value.value = 'lee';
      $input.attributes.type.value = 'password';
       
      console.log($input.attributes.value.value);
      console.log($input.attributes.type.value);

      이런 식으로 value, type을 변경할 수 있다.

      </script>
       
      </body>
       
      (2) set, getAttribute
      <body>
      <div class="box"></div>
      <input type="text" id="name" value="kim" class="user-name">
      <p id="text">Hello</p>
       
      <script>
      const $input = document.querySelector('input[type="text"]');
      //input의 value 속성의 값을 얻으려고 합니다.
      const inputValue = $input.getAttribute('value');
      console.log(inputValue);
      //value 속성의 값을 변경
      // $input.attributes.value.value = '메렁';
      $input.setAttribute('value', '안녕하세요~');
      //p태그에 title 속성 추가
      const $paragraph = document.querySelector('#text');
      $paragraph.setAttribute('title', '메롱');
      console.log($input.hasAttribute('class'));
      console.log($paragraph.hasAttribute('maerong'));
      if(!$input.hasAttribute('class')){
      //없으면 클래스를 부여합니다. (setAttribute)
      }else{
      //있다면 클래스를 제거합니다.
      $input.removeAttribute('class');
      }
       
      $paragraph.removeAttribute('title');
      </script>
      </body>

      (3)data-attr

      <body>
      <ul id="users">
      <li id="1" data-user-id="kim1234" data-role="common">Kim</li>
      <li id="2" data-user-id="park4321" data-role="admin">Park</li>
      </ul>
      <script>
      const $users = document.querySelector("#users");
      //배열 디스트럭처링
      const[$user1, $user2] = [...$users.children];
      console.log($user1.getAttribute('data-role'));
      console.log($users.dataset);
      console.log($users.dataset.role);
      console.log($users.dataset.userId);
      $user2.dataset.role = 'anonymous';
      $user2.dataset.userTelNumber = '010-1234-5678';
       
      //body를 얻는 법
      const $body = document.body;
      console.log($body);
      //html 태그를 얻는 법
      const $html = document.documentElement;
      console.log($html);
      </script>
      </body>
       
      (4) 인라인 스타일 조작
      <body>
      <div id="h" style="color: red; font-size: 3rem;">Hello</div>
      <script>
      const $h = document.getElementById('h');
      $h.style.color = 'orange';
      $h.style.background = 'skyblue';
      $h.style.fontSize = 50;
      </script>
       
      </body>
       
      (5) 클래스 조작
      <style>
      .box{
      width: 100px;
      height: 100px;
      background: lightgray;
      margin: 0 auto;
      text-align: center;
      line-height: 100px;
      }
      .red{
      color: red;
      }
      .blue{
      color: blue;
      }
      .circle{
      border-radius: 50%;
      }
      </style>
      </head>
      <body>
      <div class="box red">Hello</div>
      <script>
      const $box = document.querySelector('.box');
      console.log($box.attributes.class.value);
      console.log($box.getAttribute('class'));
      console.log($box.className);
      // $box.setAttribute('class', 'blue');
      $box.className = 'box blue';
      console.log($box.classList);
      //요소에 클래스를 추가
      // $box.className = 'box red circle';
      $box.classList.add('circle');
      $box.classList.add('abc', 'def', 'ghi');
       
      //요소에 특정 클래스를 교체
      $box.classList.replace('red','blue');
       
      //요소에 특정 클래스를 삭제
      $box.classList.remove('circle');
      $box.classList.remove('abc', 'def', 'ghi');
      //요소에 특정 클래스가 존재하는지 확인
      console.log($box.classList.contains('red'));
      //toggle(): 해당 클래스가 존재하면 삭제, 존재하지 않으면 추가
      $box.classList.toggle('circle');
      $box.classList.toggle('blue');
      </script>
      </body>
       
      이벤트 객체
      (1) basic
      <body>
      <button id="btn" onclick="greeting()">클릭</button>
      <button id="btn2" onmouseenter="greeting()">마우스를 올리세요!</button>
      <button id="btn3" onmouseleave="greeting()">마우스를 치우세요!</button>
      <script>
      //이벤드 핸들러 (브라우저에게 전해 줄 콜백 함수) 정의
      function greeting(){
      alert('안녕하세요!');
      }
      </script>
       
      </body>

       

      (2) 프로퍼티 방식

      <body>
      <button id="btn">클릭</button>
      <button id="btn2">마우스를 올리세요!</button>
      <button id="btn3">마우스를 치우세요!</button>
       
      <script>
      //이벤트 핸들러 정의
      function hello(){
      alert('hello');
      }
      const $btn = document.getElementById('btn');
      const $btn2 = document.getElementById('btn2');
      const $btn3 = document.getElementById('btn3');
      // $btn.onclick = hello;
      $btn.onclick = function(){
      alert('안녕하세요~');
      }
      $btn.onclick = function(){
      alert('안녕안하세요~');
      }
      $btn2.onmouseenter = function(){
      alert('메롱');
      }
      $btn3.onmouseleave = () => alert('안녕~');
      //핸들러 제거
      $btn3.onmouseleave = null;
      </script>
      </body>
       
      (3) addEventListener
      <body>
      <button id="btn">클릭!</button>
      <script>
      const $btn = document.getElementById('btn');
      function hello(){
      alert('hello');
      }
       
      $btn.addEventListener('click', hello);
      $btn.addEventListener('click', function() {
      alert('world');
      });
       
       
      $btn.addEventListener('click', () => {
      alert('bye~');
      });
       
      //이벤트 핸들러 제거
      $btn.removeEventListener('click', hello);
       
      </script>
       
      </body>

       

      이벤트 객체와 전파

      (1) 기초

      <body>
      <p>아무 곳이나 클릭하세요</p>
      <em class="message"></em>
      <script>
      const $em = document.querySelector('.message');
      //문서 전체에 이벤트 핸들러 등록
      document.addEventListener('click', (e) => {
      console.log(e);
      $em.textContent = `x: ${e.clientX}, y: ${e.clientY}`;
      });
      홈페이지 흰 부분 아무 곳이나 클릭하면 좌표가 뜬다.
      </script>
      </body>

       

      (2) 마우스 이벤트

      <style>
      .box{
      width: 100px;
      height: 100px;

       

      background: #fff700;
      border: 5px solid orange;
      position: absolute;
      left: 0;
      top: 0;
      }
      </style>
      </head>
      <body>
      <div class="box"></div>
      <script>
      //드래그 대상 요소 취득
      const $box = document.querySelector('.box');
      //드래그 시작 지점의 마우스 포인터 위치
      const initialMousePos = {
      x: 0,
      y: 0
      };
       
      //오프셋: 이동할 거리
      const offset = {
      x: 0,
      y: 0
      };
      //이벤트 핸들러 정의
      const move = function(e){
      //오프셋 =
      //현재(드래그하는 시점) 마우스 포인터 좌표 - 드래그 시작 시점의 좌표
      offset.x = e.clientX - initialMousePos.x;
      offset.y = e.clientY - initialMousePos.y;
      console.log(`x: ${offset.x}, y: ${offset.y}`);
      $box.style.left = offset.x + 'px';
      $box.style.top = offset.y + 'px';
      }
       
      //mousedown(마우스 버튼을 눌렀을 때) 이벤트가 발생하면
      //드래그 시작점의 마우스 포인터를 저장하도록 하겠습니다.
      $box.addEventListener('mousedown', function(e){
      /*이동거리를 계산하기 위해 mousedown 이벤트가 발생합니다. (드래그를 시작하면)
      드래그 시작 지점의 마우스 포인터 좌표 (clientX/Y)를 저장해 둡니다.
      한 번 이상 드래그로 이동한 경우 move에서 left, top만큼 이동한 상태이므로
      offset.x, offset.y만큼 빼 줍니다.*/
      initialMousePos.x = e.clientX;
      initialMousePos.y = e.clientY;
      console.log('드래그 시작 지점 x: ' + initialMousePos.x);
      console.log('드래그 시작 지점 y: ' + initialMousePos.y);
      //마우스 이동이 시작된다면 따로 선언한 move 함수를 호출합니다.
      document.addEventListener('mousemove', move);
      });
      //mouseup 이벤트가 발생하면 mousemove 이벤트를 제거해서 이동을 멈추게 합니다.
      document.addEventListener('mouseup', function(){
      document.removeEventListener('mousemove', move);
      });
      </script>
      </body>
       
      (3) 키보드 이벤트
      <body>
      <input type="text">
      <p class="msg"></p>
       
      <script>
      const $input = document.querySelector('input');
      const $msg = document.querySelector('.msg');
      $input.addEventListener('keyup', e =>{
      //console.log(e.key);
      if(e.key === 'Enter'){
      $msg.textContent = e.target.value;
      e.target.value = '';
      }else if(e.key === 'Escape'){
      $msg.textContent = '';
      }
      });
       
      </script>
      </body>
       
      (4) 이벤트 전파
      <style>
      #fruits{
      padding: 50px;
      border: 2px solid red;
      }
      #fruits > li{
      background: yellow;
      margin-bottom: 10px;
      }
      </style>
      </head>
      <body>
      <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
      <li>Grape</li>
      </ul>
      <script>
      const $fruits = document.getElementById('fruits');
      $fruits.addEventListener('click', e => {
      console.log('ul에 클릭 이벤트가 발생!');
      console.log('이벤트 핸들러가 붙은 타겟: ' + e.currentTarget);
      console.log('실제 이벤트가 발생한 요소: ' + e.target);
      });
      $fruits.firstElementChild.addEventListener('click', e => {
      console.log('apple에 클릭 이벤트 발생!');
      //버블링을 방지. (이벤트 전파를 중단합니다.)
      // e.stopPropagation();
      });
      </script>
       
      </body>
       
      (5) 이벤트 전파2
       
      <style>
      #fruits{
      list-style: none;
      padding: 0;
      }
      #fruits li{
      width: 100px;
      cursor: pointer;
      }
       
      #fruits .active{
      color: red;
      text-decoration: underline;
      }
      </style>
      </head>
      <body>
      <ul id="fruits">
      <li id="apple" class="active">Apple</li>
      <li id="banana">Banana</li>
      <li id="grape">Grape</li>
      </ul>
      <div>선택된 과일: <em class="msg">apple</em></div>
      <br>
      # 새로운 과일 추가:
      <input type="text" class="text-box">
      <button id="add">추가</button>
      <script>
      const $fruits = document.getElementById('fruits');
      const $msg = document.querySelector('msg');
      const $liList = [...$fruits.children]; //유사배열 -> 순수배열 동작
      //이벤트 핸들러 함수
      function activate(e){
      //이벤트 발생 타겟이 특정 요소인지를 검증
      if(e.target.matches('#fruits > li')){
      //console.log('이곳은 이벤트가 발생하는 곳이 아닙니다.');
      return;
      }
      //console.log('여기는 이벤트 발생하는 곳입니다.');
      for(let $target of $liList){
      /*
      toggle 메소드의 두번째 매개값으로 논리값을 전달할 수 있는데,
      해당 논리값이 true로 판명나면 지정한 클래스를 추가하며,
      false로 판명나면 지정한 클래스를 삭제합니다.
      */
      $target.classList.toggle('active', $target === e.target);
      }
      $msg.textContent = e.target.id;
      }
      //ul에 이벤트 등록
      $fruits.addEventListener('click', activate);
      //동적으로 과일 추가 기능
      const $btn = document.getElementById('add');
      const $textBox = document.querySelector('.text-box');
      //버튼에 이벤트 등록
      $btn.addEventListener('click', e => {
      const $newLi = document.createElement('li'); //<li></li>
      $newLi.textContent = $textBox.value; //<li>Orange</li>
      $newLi.setAttribute('id', $textBox.value.toLowerCase());
      $fruits.appendChild($newLi);
      $textBox.value = '';
      //새롭게 추가된 li에 이벤트를 부여하기 위해 배열에 추가합니다.
      $liList.push($newLi);
      // $newLi.addEventListener('click', activate);
      });
      </script>
      </body>

      'JAVASCRIPT' 카테고리의 다른 글

      javascript  (0) 2022.01.17
      javascript  (0) 2022.01.14
      javascript  (0) 2022.01.12
      javascript  (0) 2022.01.12
      javascript  (0) 2022.01.11

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바