hye-log

파일 관리를 용이하게 하기 위해서 css, js 폴더를 만든 다음, 기존에 만들었던 파일들을 분리해서 넣어두었다. 지금까지 만들었던 app.js는 greetings.js로 바꾸고, clock.js를 새로 만든다. 이때, index.html에서 기존 파일들에 대한 경로 설정을 새로 해주어야 한다. 이렇게 파일 관리는 divide and conquer 방식을 사용하는 것이 깔끔하다. interval은 매번 일어나야 하는 무언가를 말한다. 예를 들어, 2초마다 발생하는 알람이라면 interval을 사용한다. setinterval : 첫 번째 argument는 실행하고자 하는 function, 두 번째 argument는 호출되는 function의 간격을 몇 ms로 할건지 정한다 예를 들어, clock.js에서 ..

username을 받아서 저장해보자. 브라우저에서 value를 저장할 수 있는 쉬운 방법 중 하나가 local storage API를 이용하는 것이다. local storage는 setItem, getItem, removeItem을 통해서 접근할 수 있다. console 창에서 local storage에 값을 넣거나 가져올 수 있다. setItem(key, value) : local storage에 key-value를 저장한다. getItem(key) : local storage에서 key에 해당하는 value를 가져온다. removeItem(key) : local storage에서 key에 해당하는 key-value를 삭제한다. local storage는 Application - Storage - Lo..

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