노마드 코더 바닐라 JS 챌린지 4일차

오늘은 브라우저에서 쓰이는 자바스크립트 강의 3.0 ~ 3.6 7개 강의에 드디어 코드 챌린지가 있는날이다.

코드챌린지는 처음인디...정리하는게 미숙할 수도 있지만 열심히 해야지....

 

노마드코더 바닐라 JS로 크롬 앱 만들기 - https://nomadcoders.co/javascript-for-beginners/lectures/2890

Lecture – 노마드 코더 Nomad Coders

 

---

#3.0 The Document Object

-console창에서 document를 입력하면 document는 정의되어있는 이미 존재하는 object이기 때문에 작성한 HTML을 보여준다

-consoole.dir(document)을 호출하면 document가 많은 데이터를 갖고있는 object인 것을 확인할 수 있다

※메서드 console.dir()는 지정된 JavaScript 개체의 속성에 대한 대화형 목록을 표시합니다

-consoole.dir(document)을 입력하면 javascript에서 해당 요소들을 정의한적 없지만 javascript의 관점으로 object를 보여준다

-자바스크립트에서 HTML을 읽어올 뿐 아니라 HTML을 변경할 수도 있다(document.title = "" 등과 같이 사용)

 

#3.1 HTML in Javascript

-document의 함수 중getElementById("아이디이름") 함수로 해당 아이디의 태그를 가져와서 자바스크립트에서 사용할 수 있다(document.getElementById("아이디이름"); 의 형태로 사용)

-위 코드를 변수에 담아서 console.log에 호출하면 HTML의 코드를 확인할 수 있다.

const title = document.getElementByID("title");

console.log(title)
//<h1 id="title">Grab me!</h1>

-위 코드의 title을 console.dir(title)로 정보를 확인하면 h1태그 하나에서 가져올 수 있는 많은 것들을 가져올 수 있다

-자바스크립트는 HTML element를 가지고 오지만, HTML자체를 보여주지는 않고 element의 object를 보여준다. 자바스크립트에서 object의 요소들을 가져올수도, 변경할 수도 있다

※title.innerText = "Hi"와 같이 title object의 요소를 변경하면 HTML상에서도 변경된다

ㅇㅇ

#3.2 Searching For Elements

-대부분의 경우에는 id보다는 className을 많이 사용하는데 많은 element를 한번에 가지고와야하는 경우에 많이 사용한다

-클래스이름을 가져와서 자바스크립트에서 사용할 때는 이전 강의에서 아이디 사용하던 방법과 같이 HTML태그의 class와 같은 이름을 가져와서 getElementByClassName() 함수를 사용한다

-class의 요소가 여러개인 경우 배열로 취급되기 때문에 const hello = document.getElementByClassName("hello")라고 hello클래스를 가져왔을때 hello. 으로 뭔가를 가져올 수 없다.

 

-element를 가져올 수 있는 가장 좋은방법은 querySelector()와 querySelectorAll() 두가지이다

-querySelector는 element를 CSS방식으로 검색할 수 있다. (일반 텍스트는 태그, .class는 클래스, #id 는 id를 가져올 수 있다)

클래스, 아이디를 사용시 뒤에 태그를 같이 붙여 사용할 수도 있다. ex) querySelector('.title h1');-querySelector는 하나의 element를 return 해준다. 클래스를 사용시 가져올 요소가 여러개면 첫번째 것을 가져온다. 여러개를 다 가져오고 싶을 떄는 querySelectorAll()을 사용하면 된다(여러개의 태그가 들어있는 배열을 가져옴)

 

#3.3 Events

-Javscript object내부에 있는 요소들을 console.dir()로 확인했을 때 on이 붙은 것들은 event이다. 이 것들로 해당 오브젝트의 property를 변경할 수 있다(특정 property는 불가능하다)

-우리가 Javascript에서 대부분 작업할 일은 event를 listen 하는 것이다

-클릭하는 것 (onClick), 어떤 태그로 마우스가 올라가는 것(onMouseenter), 입력을 끝내는것, 이름을 적는것, enter를 누르는 것 등의 동작들이 이벤트로 취급된다

-어떤 태그에 이벤트를 추가 할때는 addEventListener() 함수를 사용하는데 (이벤트, 호출할 함수) 두가지의 매개변수를 받아서 아래 코드와 같이 작성한다

const title = document.querySelector("div.hello:first-child h1");

title.addEventListener("click", () => {
	//실행할 코드	
)
//함수를 addEventListener 밖에서 선언하고 화살표 함수 자리에 넣기도 한다

#3.4 Events part Two

-listen하고 싶은 event를 찾는 가장 좋은 방법은 구글에 찾고 싶은 element의 이름을 Mozilla Developer Network인 MDN에 검색해서 Web API를 찾는 것이다.  https://developer.mozilla.org/en-US/

MDN Web Docs

 

-마우스가 해당 title 올라갈 때 이벤트를 만들 때는 title.addEventLister("mouseenter", 함수); 와 같이 작성해준다

-마우스가 해당 title에서 떠날 때 이벤트를 만들 떄는 title.addEventLister("mouseleave", 함수);

 

#3.5 More Events

-window란 우리가 사용하고 있는 인터넷 창을 뜻한다

-event는 방법으로는 addEventListener()를 통해서 event를 listen할 수 있고, oneventname property에 event listener를 할당함으로써 사용할 수 있다

fuction handleClick(){
	title.innerText="click";
}

title.addEventListener("click", handleClick);

//위와 같이 이벤트를 사용하는 방법은 다음과 같다
title.onClick = handleClick;

-resize()는 창의 크기를 바꿨을 때 생기는 이벤트 (노마드코더가 좋아한다고함)

funciton handleWindowResize(){
	document.body.style.backgroundColor="tomato";
}

window.addEventListener("resize", handleWidnwResize);
//화면 사이즈를 바꿀때 배경색이 토마토색으로 바뀐다

-body/head/title 태그는 document.body/head/title로 가지고 올 수 있지만 나머지 태그들은 getElementById(), getElementByClassName(), querySelector()로 가져와야 한다

-copy는 복사 이벤트가 일어났을때, offline은 인터넷 연결이 끊어졌을 때, online은 인터넷이 다시 연결되었을 때 등 여러가지 이벤트들이 많다