window 라는 기능을 이용하여 event 내부를 살펴보고, event를 listening 하는 또 다른 방법을 알아보자. addEventListener() : event를 listen할 수 있고, onEventName property에 event listener를 할당함으로써 event를 listen할 수 있다. addEventListener(title, handleTitleClick)은 title.onclick = handleTitleClick; 과 같은 동작을 한다. property를 정의하는 방식으로 event를 정의할 수 있지만, addEventListener로 정의하면 removeEventListener를 사용할 수 있기 때문에 addEventListener를 사용하는 것이 좋다. #16, ..

event 종류를 찾는 방법은 두 가지가 있다. 1) WebAPI에서 찾기 https://developer.mozilla.org/ko/docs/Web/API/HTMLElement 2) console.dir(element)를 통해서 on~ 인 property 찾기 onmouseenter : click 하지 않고 그냥 위에 위치할 때의 event onmouseleave : 마우스가 위에 위치하지 않을 때의 event

object로 표시한 element 중에서 on~ 으로 시작하는 element는 events를 나타낸다. 이것들은 모두 object이고, object는 property 값을 변경할 수 있다. Javascript에서 대부분 하는 일은 event를 listen 하는 것이다. 예를 들어서 내가 click을 하는 것, 입력을 끝내는 것, 이름을 적거나, enter를 누르는 것이 event이다. event를 하기 전에, title.style.color를 이용하여 title의 색상을 변경할 수 있다. queryselector를 이용하여 html에서 title을 찾아, click 했을 때 발생하는 event를 정의해보자. #1 에서 querySelector를 이용하여 h1을 찾아온다. #4~#8 에서 handleTi..

TypeError가 발생하는 이유는 app.js #1 에서 something 이라는 id를 가져와야 하는데, index.html을 보면 something 이라는 id가 없으므로 innerText를 바꿀 수 없다고 오류가 뜨는 것이다. index.html에서 getElementByClassName("hello")를 사용하면 여러 개의 h1을 HTMLCollections로 불러온다. index.html에서 div 안에 h1으로 정의한 후 app.js에서 불러올 수 있다. getElementByTagName("h1")을 사용하면 h1을 가진 tag를 불러온다. tag는 anchor, div, section, button을 의미한다. 가장 추천하는 방법은 querySelector, querySelectorAll..

Javascript로 정보를 가져오기 위해서 document의 object와 element를 가져오는 수많은 함수들을 이용할 수 있다. 먼저 index.html의 에 태그를 이용하여 title을 id로 가지도록 정의한다. title은 console 창이나 app.js에서 불러올 수 있다. 1) console 창에서document.getElementById("title") 로 불러오기 getElementById는 id를 통해 element를 찾아오는 기능을 한다. 2) app.js 에서 document.getElementById("title")로 불러와서 변수에 저장한 뒤 console에 출력하기 이때, console.dir 를 사용하면 element를 더 자세하게 보여준다. 만약 Grab me! 라고 정..