코딩일기: 노마드 코더로 공부 1일차

앞으로 하루에 공부한 것들을 일기처럼 기록해보려고 한다😀

이런 식으로 연속된 강의를 통째로 들을 경우라든가, 따로 포스팅하기에는 애매한, 일기형식으로 적는 게 나을 것 같은 내용을 담아  쓰려고 한다.

 

 

https://nomadcoders.co/javascript-for-beginners

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

이 강의로 공부하였다

 

다 들은 후에는

 

https://nomadcoders.co/javascript-for-beginners-2

바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders

이것을 들을 것이다!

 

 

 

 

 

console.dir(title)

 

console.dir를 이용하면 객체에 담긴 모든 자바스크립트 데이터를 확인할 수 있다.

 

이와 같이

여기서

style을 찾으면 우리가 사용할 수 있는 모든 style속성 나타난다.

 

property이름 앞에 on이 붙어있으면 event listener이다. 사용할 때는 on을 붙이지 않아야 한다. (ex: onclick => click)

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

여기서도 확인할 수 있다.

 

 

title을 파란색 글자로 바꾸고 싶으면

title.style.color = "blue";

와 같이 입력해주면 된다.

 

 

이벤트리스너

const title = document.querySelector("#title");

function handleTitleClick(){

  console.log("title was clicked!");

}

title.addEventListener("click",handleTitleClick); //괄호쓰면 안됨

 

getElementById와 getElementByTagName등 대신 querySelector를 사용하는 것을 권장한다. (어떤 것이든 선택할 수 있기 때문에)

 

 

addEventListener라는 함수를 통해 특정 이벤트가 발생하면 특정 이벤트를 실행할 수 있다.

 

위의 코드는 title을 "click"하면 handleTitleClick 함수가 실행된다.

이때 주의할 점은, 함수에 괄호()를 붙이면 안 된다. ()를 붙인다는 것은 함수를 실행한다는 의미인데, ()를 버튼이라고 생각하면 된다. ()를 붙인 건 실행 버튼을 눌렀다는 의미이다.

위 코드는 click했을 때 자바스크립트가 handleTitleClick 함수를 대신 실행할 수 있게 하려고 한다. 만약 ()를 붙이고 넣었다면 클릭의 여부와 상관없이 바로 함수가 실행되게 된다. 따라서 ()를 붙이지 않은 함수 자체를 넘겨줘야 한다.

 

 

이와 같이  여러가지의 다른 이벤트들을 불러올 수 있다.

title.onclick = handleTitleClick;

title.onmouseenter = handleMouseEnter;

title.onmouseleave = handleMouseLeave;

이와 같이 바꿔 쓸 수도 있다

 

노마드코더는 addEventListener를 더 선호한다고 하는데, 그 이유는 .removeEventListener를 이용해 이벤트를 제거할 수 있어서라고 한다.

 

EX)

title.removeEventListener("click",handleTitleClick)

 

 

윈도우 이벤트

https://developer.mozilla.org/ko/docs/Web/API/Window

Window - Web API | MDN

 

 윈도우 관련 이벤트

 

 

function handleWindowResize(){

  document.body.style.backgroundColor = "tomato"

}

 

window.addEventListener("resize", handleWindowResize);

 

resize이벤트를 이용하여 윈도우를 resize할 때 배경색이 tomato로 변경되게 하였다.

잘 변경된다.

 

 

 

document.title, document.head, document.body 는 존재하지만, h1, div는 따로 쿼리셀렉터를 이용하여 불러와야 한다.

 

 

 

function handleWindowCopy(){

  alert("copier!")

}

window.addEventListener("copy", handleWindowCopy);

copy 이벤트

 

 

 

 

function handleWindowOffline(){

  alert("SOS no WIFI")

}

function handleWindowOnline(){

  alert("ALL GOOD")

}

 

 

window.addEventListener("offline", handleWindowOffline);

window.addEventListener("online", handleWindowOnline);

컴퓨터가 오프라인인지 온라인인지의 여부에 따른 이벤트

 

 

 

 

 

기존에 알았던 내용들이 대부분이기는 하지만 새롭게 배워가는 것도 있었다.