이벤트 (Events)

이벤트는 돔의 요소중 하나입니다.

이벤트는 click을 했을 때, 마우스가 올라가도, 입력을 끝내거나, enter를 누르거나, wifi에서 접속이 해제될 경우가 예가 될 수 있습니다.

이 모든 event는 자바스크립트가 listen할 수 있습니다.

 

event를 listen 하는 법은 두 가지가 있습니다.

첫번째는,

.addEventListener()를 사용하는 것입니다.

 

두번째는,

oneventname property에 event listener를 할당함으로써 event를 listen할 수 있습니다.

 

예시:

function handleMouseLeave() {
  title.innerText = "Mouse is gone!";
}

title.addEventListener("mouseleave", handleMouseLeave);

// 혹은

function handleTitleClick() {
  title.style.color = 'blue';
}

title.onClick = handleTitleClick;

노마드 코더는 addEventListener를 더 선호한다고 합니다. 그 이유는 나중에 .removeEventListener를 통해서 event listener를 제거할 수 있기 때문이라고 합니다.

 

event.preventDefault(); 는 브라우저가 정상적으로 하던 이벤트를 멈춥니다. 

그 것은 바로 새로고침입니다. 이 메소드를 사용하면 브라우저가 새로고침하는 것을 멈출 수 있습니다.

 

document.body / document.head / document.title 

이런 것들이 내장으로 존재하는 것은 중요하기 때문에 있는 것이고 h1 같은 나머지 element들은 querySelector나 getElementById등으로 찾아와야합니다.

 

값을 저장하는 방법은 다양하게 있지만, local storage가 이용하기 가장 쉬운 방법입니다.

localStorage 뒤에 메소드를 붙여주면 사용할 수 있습니다.

localStorage.setItem("username", "mari-mo") 라고 하면 local storage에 username의 키를 가진 mari-mo 값이 생성됩니다.

localStorage.getItem("username")을 하면 "mari-mo"가 나옵니다. 이런식으로 값을 가져올 수도 있습니다.

localStorage.removeItem("username")을 하면 저장한 값을 삭제할 수도 있습니다.

 

setInterval을 사용하면 함수를 원하는 시간마다 실행할 수 있습니다.

예를 들어, sayHello라는 함수를 5초마다 실행하고 싶다면,

setInterval(sayHello, 5000)이라고 자바스크립트에 써주면 5000ms마다 실행할 수 있습니다.

 

setTimeout은 함수를 원하는시간에 한번만 실행하고 싶을 때 사용할 수 있습니다.

setTimeout(sayHello, 5000)

 

"1".padStart(2,"0") -- 스트링 "1"의 길이가 2가 아니라면, 앞에 "0"을 추가해주세요

padStart는 스트링의 길이가 원하는 길이가 아니면 원하는 스트링을 앞에 추가할 수 있는 내장 함수이다.

 

padEnd도 동일하지만 뒤에 추가해주는 함수이다.

 

document.createElement()를 하면 HTML 태그를 만들 수 있다.

나는 이미지 태그를 만들고 싶기에

const bgImage = document.createElement("img");를 할 것이다

그 이후에 src를 넣고 싶기때문에

bgImage.src = `img/${chosenImage}`; 를 해서 넣을 수 있다.

 

이 만들어진 태그는 자바스크립트 내에서만 존재하기 때문에

append를 통해서 HTML에 넣어줘야한다.

 

이것은

document.body.appendChild(bgImage); 로 만들 수 있다.

그렇게 하면 맨 마지막에 img tag가 생성된다.

 

prepend는 맨 처음에 넣어주는 것이다.

 

어떤 타입이든지 스트링으로 바꾸고 싶으면,

JSON.stringify()안에 넣어주면 된다.

 

그리고 이것을 다시 어레이로 만들어주고 싶으면

JSON.parse()를 사용한다. -- 자바스크립트 섹션에 넣어주기