hye-log

크롬 앱을 만들기 위해서 user에게 질문을 한 후 정보를 받아와서 화면에 나타내보자. HTML을 작성한 다음 element를 Javascript로 가져와서 구현할 수 있다. const loginForm = document.getElementById("login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); 위 두 코..

title을 클릭했을 때, blue, tomato, blue, tomato 순서대로 바뀌도록 만들어보자. currentColor는 const로 정의하고, newColor는 let으로 정의하여 값을 바꿀 수 있게 선언한다. currentColor가 blue이면 tomato로, blue가 아니면 tomato로 바꾸기 위해서 if-else 문으로 작성한다. step1. element를 찾아라 step2. event를 listen 해라 step3. event에 react 해라 개발자가 정한 이름을 raw value라고 하는데 string으로 작성하므로 오타가 발생해도 Javascript가 알려주지 않는다. 따라서 raw value 대신에 Javascript에서 variable로 선언해서 사용하는 게 좋다. ra..

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..