[TIL]20220528 노마드코더 바닐라JS

6일차(2022-05-28)

• 주말

노마드코더 바닐라JS 챌린지 시작

• 3장부터 시작
• querySelector()
  • class 내부의 특정 태그를 1개만 리턴한다
  • document.querySelector(“.hello h1”);
  • = “hello” 라는 classname을 가진 태그 안에서 h1를 가져온다.

  강의내에서 자주 사용할 것으로 외워둘것

  • document.querySelector(“#hello”) = 동일한 기능
  • document.getElementById(“hello”) = 동일한 기능

이벤트

• 특정 오브젝트의 프로퍼티 중 “on”이 붙어있는 경우 대부분 이벤트이다.
  • mouseenter eventlistener 제작
  • mouseleave eventlistener 제작
• window 객체의 이벤트
  • resize 이벤트
  • copy 이벤트
  • offline 이벤트

• CSS는 CSS파일에서 건드는게 좋다.

• classlist 함수
• toggle function
  • className 이 존재하는지 확인 후 있다면 삭제 없다면 추가
  • 아래 두 개의 코드는 동일하다

    function handleTitleClick() {
    const clickedClass = "clicked";
    if(h1.classList.contains(clickedClass))
    {
        h1.classList.remove(clickedClass);
    }
    else
    {
        h1.classList.add(clickedClass);        
    }
    }
    

  const clickedClass = "clicked";
  h1.classList.toggle(clickedClass)
  

4장

• html 자체의 required, maxlength 를 쓰기위해서는 input 태그를 form 안에 넣어주어야한다.

• 이 경우, input type이 자동으로 submit이 되므로 이를 방지하기 위한 JS를 작성한다

• preventDafault() 함수

백준