조금씩 꾸준히 완성을 향해

실시간으로 시간이 흐르는 시계를 만들기 위해서는 interval에 대한 개념을 알아야 한다. interval은 매번 일어나야 하는 어떤 행위의 간격을 말한다. setInterval() 함수를 이용하면 이를 구현할 수 있다. setInterval(function, 호출 간격) 첫번째 인자에는 실행할 함수를, 두번째 인자에는 호출되는 간격을 milliseconds 단위로 적어준다. 예시를 살펴보자. function sayHello(){ console.log("hello"); } setInterval(sayHello, 5000); //5초마다 콘솔에 "hello"를 출력 5초마다 sayHello 함수가 호출된다. 즉, 5초마다 콘솔에 "hello"가 출력된다. 이렇게 hello가 쌓이는 것을 볼 수 있다. s..

입력받은 username을 저장하고 지속적으로 보여주기 위해서 Web API인 Local Storage를 사용해 보자. Local Storage는 브라우저에 값을 저장하고 가져다 쓸 수 있게 해주는 유용한 API이다. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Window.localStorage - Web APIs | MDN The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessi..

Username을 입력받고 저장해서 보여주기 위해서는 먼저, input의 값을 가져와야 한다. 그것을 위해 value라는 속성을 사용한다. const loginInput = document.querySelector("#login-form input"); const username = loginInput.value; input에 입력되는 값을 받아서 username이라는 변수에 저장 완료! 여기서 체크해 봐야 할 게 & 의 관계이다. input 태그는 반드시 form 태그 안에 있어 유효성 검사를 작동시킬 수 있다. LogIn 죽, form 태그 안에 있어야 이런 식으로 내재돼 있는 유용한 기능들(required, maxlength 등)을 사용할 수 있다. 그리고 form 태그 안에 있는 input은 자동..

CSS in JavaScript 자바스크립트에서 직접적으로 CSS 변경이 가능하다. style 이라는 method를 사용한다. const h1 = document.querySelector(".hello h1"); function handleTitleClick(){ const currnetColor = h1.style.color; let newColor; if(currnetColor === "blue"){ newColor = "tomato"; } else{ newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click", handleTitleClick); 이렇게 h1 태그의 글자 색을 변경가능하다. 그러나 이것은 권장되는 방식은 아..