hye-log

user가 이름을 입력했을 때에만 button을 누를 수 있도록 event를 설정해보자. 먼저 username의 유효성 검사를 해보자. username이 비어 있어도 안 되고, 너무 길게 입력해도 안 된다. 우리는 app.js에 다음과 같은 코드로 username의 유효성을 검사할 수 있다. username은 비어 있어도 안되고 너무 길어도 안된다 const username = loginInput.value; if(username === ""){ alert("Please write your name"); } else if(username.length > 15){ alert("Your name is too long."); } username이 비어 있으면 다시 작성하라는 alert 창을 띄우고, usern..

크롬 앱을 만들기 위해서 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