자바스크립트로 시계 만들기

// 00:00:00 이라고 적어 둔 h2태그를 clock 상수에 넣는다. const clock = document.querySelector("h2#clock"); // interval에서 실행 할 함수 function getClock() { const date = new Date(); // 시간을 매번 다시 얻어옴 // 만약 5시 6분 0초이면 5:6:0 이 아닌 05:06:00 이 되게 하기 위한 작업 // padStart()는 문자열에만 적용이 되기 때문에 String으로 문자화 시켜야한다. const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); c..

  • format_list_bulleted Javascript
  • · 2023. 9. 28.
  • textsms

interval, timeout

interval ‘매번’ 일어나야 하는 무언가를 말한다. 예) ‘매 2초’ - 2초 마다 무언가를 함 사용 방법 setInterval(사용 할 function, 밀리 초) function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); timeout 설정해 놓은 시간이 지나면 function이 한 번 실행됨 사용 방법 setTimeout(사용 할 function, 밀리 초) function sayHello() { console.log("hello"); } setTimeout(sayHello, 5000);

  • format_list_bulleted Javascript
  • · 2023. 9. 28.
  • textsms

localStorage

로그인을 하면 우리는 로그인한 정보를 기억하고 있어야 한다. 그럴 때 접근하기 쉽고 좋은 저장소가 localStorage 이다. localStorage.setItem(Key, string); 현재 도메인의 로컬 Storage 객체에 접근한 후, Storage.setItem()을 사용해 항목 하나를 추가한다. localStorage.setItem("myCat", "Tom"); localStorage.getItem(Key, string); 위에서 추가한 localStorage 항목을 읽기 위해 사용한다. const cat = localStorage.getItem("myCat"); localStorage.removeItem(Key, string); 추가한 항목을 제거한다. localStorage.removeI..

  • format_list_bulleted Javascript
  • · 2023. 9. 27.
  • textsms
preventDefault

preventDefault

우선 현재 이 기능을 왜 사용하게 되었냐면 html에서 form-input 을 이용해 로그인 하는 창을 만들었다. 그리고서 여기에 정보를 입력하고 Log In 버튼을 누르면 창이 새로고침 된다. 왜냐하면 브라우저는 버튼을 클릭하거나 엔터를 누르면 form을 submit하면서 새로고침을 하는게 default 값이기 때문이다. 그래서 preventDefault 를 사용해 창이 새로고침 되는 것을 막아야 한다. 그리고 한 가지 알아야 할 정보가 있다. const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); function onLoginSubmit(to..

  • format_list_bulleted Javascript
  • · 2023. 9. 26.
  • textsms

event

event event란? 이벤트에는 다양한 것이 있다. 클릭했을 때 마우스를 가져다 댔을 때 마우스를 땔 때 와이파이 연결을 해제했을 때 드래그 했을 때 등등 여러가지 이벤트가 있다. 그 중 가장 이해하기 쉬운 click 이벤트를 살펴보겠다. Click me! const title = document.querySelector(".hello:first-child h1"); function handleTitleClick() { title.style.color = "blue"; } title.addEventListener("click", handleTitleClick); 세부 내용 const title = document.querySelector(".hello:first-child h1"); title이라는 ..

  • format_list_bulleted Javascript
  • · 2023. 9. 21.
  • textsms