hye-log

step1. 유저가 이름을 제출하면 form을 없애기 1) HTML 요소 자체를 없애기 2) CSS 이용해서 숨기기 CSS에 hidden 정의하고 app.js에서 classList에 hidden 추가한다. step2. HTML 요소 추가 h1 으로 greeting을 새롭게 정의한다. 초기 상태를 hidden으로 하고, form이 숨겨지면 greeting이 보여지는 형태로 바꾼다. greeting이 보여지려면 classname에서 hidden을 삭제하면 된다. app.js에서 #11 처럼 두 개의 string을 합칠 때 +를 사용하는 것보다 `(백틱)과 ${}를 사용하는 것이 좋다.

우리는 button의 클릭 여부가 아니라 form의 submit의 기본 동작을 막고 싶다. 필드에 username을 입력하고 엔터를 누르거나 버튼을 클릭하면, console 창에 입력 값은 뜨지만 바로 웹페이지가 재시작되어서 알아볼 수 없다. 따라서 submit의 기본 동작인 웹페이지 재시작을 못하게 해보자. preventDefault : event의 기본 행동이 발생되지 않도록 막는다. event의 기본 행동은 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작을 말한다. function에서 첫 번째 argument를 받아 방금 일어난 event에 대한 정보를 가져온다. 이 argument가 결국 submit이 되고, submit의 기본 기능을 막기 위해서 preventDefault를 사용..

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