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

우선 현재 이 기능을 왜 사용하게 되었냐면 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

toggle

const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { h1.classList.toggle("clicked"); } h1.addEventListener("click", handleTitleClick); h1.classList.toggle("clicked"); 은 “clicked”가 classList에서 존재하는지 확인 후 없으면 toggle이 “clicked”을 classList에 추가를 해준다. 그러므로 위 toggle 코드는 아래의 긴 코드를 한 줄로 끝내준다. const h1 = document.querySelector("div.hello:first-child h1"); function h..

• 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

조건문

조건문이란? 조건문(Conditional Statement)은 프로그래밍에서 사용되는 제어 구조 중 하나로, 프로그램이 특정 조건에 따라 다른 동작을 수행하도록 하는 데 사용된다. 조건문 연습을 위해 prompt로 사용자의 나이를 묻고 입력받은 나이별로 메세지를 산출하는 코드를 작성해보자. const age = parseInt(prompt("How old are you.")); if (isNaN(age) || age = 18 && age 50 && age 80) { c..

• format_list_bulleted 프론트엔드/Javascript
• · 2023. 9. 19.
• textsms

return

뭔가 시원하게 return을 정의내리기 어렵다.. 강의를 보며 배운것을 천천히 리뷰해보겠다. 코드 리뷰 const age = 95; function calculateKrAge(ageOfForeigner) { return ageOfForeigner + 2; } const KrAge = calculateKrAge(age); console.log(KrAge); 그림 속 순서 1. function 함수인 calculateKrAge가 age라는 변수를 받는다. age는 위에 먼저 선언을 했기때문에 calculateKrAge(95)가 된다. 2. calculateKrAge가 전달받은 변수가 95이기 때문에 function calculateKrAge(ageOfForeigner) 에 95를 다시 전달받는다. 3. fu..

• format_list_bulleted 프론트엔드/Javascript
• · 2023. 9. 19.
• textsms