vanilla JS Challenges 2022/03/07~2022/03/21

<2022.03.10>

 

객체 안에 메서드 선언하기

const object = {
	handleMousEnter: function(){
    ///
    },
    handleMouseLeave: function(){
    ///
    }
};

사용한 Event

- mouseenter, mouserleave, resize, contextmenu

h2.addEventListener("mouseenter", superEventHandler.handleEnter);
h2.addEventListener("mouseleave", superEventHandler.handleLeave);
window.addEventListener("resize", superEventHandler.handleResize);
window.addEventListener("contextmenu", superEventHandler.handleContext);

이벤트를 리스너하는 두가지 방법

h2.addEventListener("mouseenter", superEventHandler.handleEnter);

또는

h2.onmouseenter = superEventHandler.handlerEnter;

 

<2022.03.11>

 

js 파일에서 css를 건드리고 싶지 않아, class를 할당하여 css를 변경해보자.

 

className으로 전체 className으로 변경해버리면 원래 가지고 있던 class를 유지할 수 없게 되므로

classList를 사용해 className을 add remove하자.

 

const body = document.querySelector("body");

function handleWindowResize() {
  const windowSize = window.innerWidth;
  const bodyClassName = body.classList;

  if (windowSize < 600) {
    bodyClassName.add("short");
    bodyClassName.remove("long", "medium");
  } else if (windowSize < 800) {
    bodyClassName.add("medium");
    bodyClassName.remove("long", "short");
  } else {
    bodyClassName.add("long");
    bodyClassName.remove("short", "medium");
  }
}

window.addEventListener("resize", handleWindowResize);

 

<2022.03.14>

 

- and로 한줄 정렬

      <h3>Generate a number between 0 and

      <input required min="0" type="number" placeholder="" />

 

- 최솟값, type

<input required min="0" id="guess-input" type="number" />

 

- preventDefault() - > 태그의 기본 동작을 막음 

 

- Math

round: 반올림

ceil: 올림

floor: 내림

 

- submit event

form 태그를 적용되는 

form의 정보를 서버로 전송하는 명령

 

 

<2022.03.16>

- new Date();

날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수 

• 아무런 인자를 전달하지 않으면 현재 날짜와 시간을 가지는 인스턴스 리턴

 

- getTime()

1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초 단위로 환산한 값을 숫자로 반환

 

- padStart(Length, String)

현재 문자열의 시작을 String으로 채워 주어진 Length에 맞는 문자열을 반환

 

- setInterval(function, ms)

일정 시간 간격을 두고 계속해서 함수 반복 실행 

 

- setTimeout(functiom, ms)

의도적으로 함수 실행을 지연시켜 일정 시간후에 실행하고 싶을 때 사용하는 함수