DOM/event

Window(최상위 객체)가 가지고 있는 메서드

• alert

this.alert("나는 window");
      frames.alert("나도 window");
      self.alert("나도 window");
      window.alert("경고");

• confirm

let a = window.confirm("맞으면 확인");
      console.log(a);
      if (a) {
        window.alert("확인을 눌렀습니다.");//확인을 누르면 출력
      } else {
        window.alert("취소를 눌렀습니다.");//취소를 누르면 출력
      }

• prompt

 let b = window.prompt("나의 취미는?", "멍때리기");
      console.log(b);

• open

window.open("https://www.naver.com", "_blank");//새 탭에다가 url연결

      window.open("https://www.naver.com", "_self");//자기 탭에다가 url연결

• parseInt, parseFloat

var num = window.parseInt("1234");
      console.log(typeof num);
      console.log(num);
      let num2 = parseInt("1234");//(window).parseint window는 생략 가능
      console.log(num2);
      console.log(window.parseInt === parseInt);

      let num3 = parseFloat("134.213");
      let num4 = parseInt("134.123");
      console.log(num3);
      console.log(num4);

      // var키워드를 쓸 때, function 키워드를 쓸 때
      // var키워드를 통해 선언한 전역 변수와 function 키워드를 통해 선언한 전역 함수는
      // window의 프로퍼티가 된다.
      
      //암묵적 전역변수 : 선언하지도 않았는데 값을 할당한 변수
      num5=1234;

      console.log(window.num);
      console.log(window.num2);//window.num2는 let으로 선언된 num2이기 때문에 전역변수로 선언되어지지 않아 undefined출력
      console.log(window.num5);
      console.log(window.num3);//window.num3도 역시 let 선언됐기 때문에 전역변수X
      console.log(num4);//일반 num으로는 출력됨.

• setTimeout, clearTimeout

function fun2() {
        console.log("3초후에 호출합니다.");
      }
      
      window.setTimeout(fun2, 3000);
      //
      3초 후에 출력

• setInterval, clearInterval

function fun3() {
        console.log("5초마다 호출합니다.");
      }
      
      window.setInterval(fun3, 5000);
      //
      5초마다 출력이 됨

8번 출력 됐다는 뜻

 

  globalThis : ECMAScript2020(ES11)에서 도입된 전역객체 식별자

      console.log(globalThis === this);
      console.log(globalThis === window);
      console.log(globalThis === self);
      console.log(globalThis === frames);
      // 다 true 뜸

DOM(Document Object Model)

• XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스
• 상단의 document 노드를 통해 접근

문서 접근 방식 이해

• getElementById(String)
  var ele=document.getElementById("a");
  Id가 a를 가진 값을 찾아줌

 <section>
      <h2>테스트</h2>
      <!-- id는 class와 달리 공백 문자로 구분하여 여러 개의 값을 가질 수 없다 -->
      <div id="a" class="a">지역</div>
      <p class="b">서울</p>
      <p name="c">대전</p>
      <div class="d b">광주</div>
      <div name="e">구미</div>
      <p class="e">부울경</p>
    </section>

// HTML 문서 내에 중복된 id를 갖더라도 에러가 발생하지는 않지만
      // getElementById 메서드는 언제나 단 하나의 요소만 반환
      let e = document.getElementById("a");
      console.log(e);
      e.style.color = "blue";
      
      let e2 = document.getElementsByClassName("b");
      console.log(e2);
      // 모든 html 요소 노드는
      // style 프로퍼티가 있어서 inline 스타일에 접근, 수정 가능하다.

      for (let i = 0; i < e2.length; i++) {
        e2[i].style.color = "red";
      }

• querySelector(css selector)
  var ele=document.querySelector("#a");
  Id가 a를 가진 값을 찾아줌
  var ele=document.querySelector("div");
  제일 첫번째 나오는 div를 찾아줌
  
  var ele=document.querySelector(".b");
  클래스가 b인 것들 중 처음에 나온 것을 찾아줌
  var ele=document.qureySelector("[name='c']")
  name(attribute)가 c(value)인 처음 값을 찾아줌

 <section>
      <h2>테스트</h2>
      <!-- id는 class와 달리 공백 문자로 구분하여 여러 개의 값을 가질 수 없다 -->
      <div id="a" class="a">지역</div>
      <p class="b">서울</p>
      <p name="c">대전</p>
      <div class="d b">광주</div>
      <div name="e">구미</div>
      <p class="e">부울경</p>
    </section>

let e3 = document.querySelector("p");
      console.log(e3);
      e3.style.background = "yellow";

      let e4 = document.querySelector("[name='c']");
      console.log(e4);
      e4.style.background = "blue";

      let e5 = document.querySelectorAll("div");
      console.log(e5);

      for (let i = 0; i < e5.length; i++) {
        e5[i].style.backgroundColor = "pink";
      }

• querySelectAll(css selector)
  var ele=document.querySelectorAll("#a");
  id가 a인 모든 값을 찾아줌
  var ele=document.querySelectorAll("div");
  div의 모든 값을 찾아줌
  var ele=document.querySelectorAll("[name='c']";
  name이 c인 모든 값을 찾아줌

문서 조작 방식 이해

 <script>
      let img = document.createElement("img");//엘리먼트 생성
      let parent = document.getElementById("list");//추가할 기존 엘리먼트 접근
      console.log(img);
      console.log(parent);
      parent.appendChild(img);//엘리먼트 추가
      // parent.append(img); 이거보다 appendChild 주로 사용
      
      img.setAttribute("src", "./images/burger.jpg");
      img.setAttribute("width", "200px");
      //생성된 img엘리먼트에 속성 추가하기

      let h1 = document.createElement("h1");
      // let parent=document.getElementById("list");
      let msg = document.createTextNode("안녕하세요.");
      h1.appendChild(msg);
      parent.appendChild(h1);
      h1.innerHTML = "<div>나는 디브 태그</div>";//태그로 인식해서 "나는 디브 태그"만 출력
      h1.innerText = "<div>나는 디브 태그</div>";//일반 텍스트로 인식

      // parent.removeChild(h1);//요소를 삭제할 수 있다.
    </script>

이벤트

• (특히 중요한) 사건[일](브라우저, HTML DOM, 자바 스크립트)
• 웹페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생
• 마우스를 이용했을 때, 키보드를 눌렀을 때 등 많은 이벤트가 존재

이벤트의 종류

키보드를 누르고 때고, 마우스를 움직이고 누르고, 로딩, 폼

고전 이벤트 처리 방식

• 인라인 이벤트 설정-> 엘리먼트에 직접 지정
• 설정하려는 이벤트를 정하고 on이벤트종류의 형식으로 지정
  • 버튼을 클릭 했을 때 경고창을 띄우자
    <button onclick="alert('click')">클릭</button>
  • 실행할 코드가 많다면 함수를 만들고 함수를 호출하자
    <button onclick="doAction();">클릭</button>
• 엘리먼트에서 이벤트를 직접 설정하지 않고 스크립트에서 이벤트 설정

표준 이벤트 처리 방식

// 싸피 실습실 3-2 js코드
// 찜 버튼을 전부 가져오기
const btnList = document.querySelectorAll(".like-btn");
//btnlist라는 변수에 찜 버튼에 클래스이기 때문에 
//.을 붙여 모든 클래스의 찜 버튼을 불러온다.

// 각 요소를 돌면서 해당 버튼에 _________ 처리하기
btnList.forEach((btn) => {//모든 찜 리스트들을 forEach문을 통해 반복
  btn.addEventListener("click", function(handler) {
    // 각각의 버튼이 클릭 되었을때 자동차의 정보를 찾아 console.log 로 출력하기
    let originData = handler//찜을 클릭됐을 때 모든 정보들이 다 나온다.
    let originData = handler.target//찜을 눌렀을 때 그 코드의 타깃에 도달한다.
    let originData = handler.target.parentElement//찜을 눌렀을 때 그 부모의 코드들이 출력
    let originData = handler.target.parentElement.innerText;//그 안에 있는 정보들을 출력
    console.log(originData);
  });
});

이벤트 전파

• 캡쳐링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
• 타깃 단계 : 이벤트가 타깃에 도달
• 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파

고전처리방식 VS 표준처리방식

• 고전 처리 방식 : 타깃 단계와 버블링 단계의 이벤트만 캐치 가능
• 표준 처리 방식 : 타깃 단계와 버블링 단계 뿐만 아니라 캡쳐링 단계의 이벤트도 선별적으로 캐치 가능
• 캡쳐링 단계의 이벤트를 캐치하려면 addEventListener의 3번째 인수로 true를 전달
• 3번째 인수를 생략하거나, false를 전달->타깃 단계와 버블링 단계의 이벤트 캐치