코딩하는 마멋

local storage - 브라우저에 뭔가를 저장할 수 있게 해주고 나중에 가져다 쓸 수 있음 - "localStorage"로 사용 setItem - local storage 정보 저장 localStorage.setItem("username", "marmot") 결과 : Key : username Value : marmot 크롬 기준 : 검사 ➝ Application localStorage에서 확인 getItem - local storage에 저장한 값 가져옴 localStorage.getItem("username") // 'marmot' removeItem - local storage에 저장한 값 삭제 localStorage.removeItem("username")

HTML Log in 결과 자바스크립트에서 HTML 불러오는 방법 const loginForm = document.getElementById("login-form"); id가 "login-form"인 요소를 가져옴으로 자바스크립트 문서내에서 더 편하게 사용 가능 id에 속해있는 요소를 불러오는 방법 const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); /* 위 아래 같은 기능 */ const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelecto..

- 자바스크립트에는 애니메이션 기능을, CSS에는 스타일 기능을 쓰는 게 좋다. - 즉, 구분해서 사용하는 것이 좋음 HTML click me! // JS 파일과 연결 JavaScript에서 조건문 활용한 스타일 변경 const h1 = document.querySelector(".hello:first-child h1"); function handleTitleClick() { const currentColor = h1.style.color let newColor; if(currentColor === "blue") { newColor = "tomato"; } else { newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click..

Event - 클릭 하는 것, 마우스가 특정 위치에 올라가는 것, 이름 적는 것 등 대부분 모든 것이 event - console.dir을 사용해서 코드 내부를 보면 on으로 시작하는 것들이 event listener HTML click me! eventListener addEventListener - 지정하는 이벤트를 감지하고 행동 - .removeEventListener 사용해서 제거 가능 Click, mouse event const title = document.querySelector(".hello:first-child h1"); function handleTitleClick() { console.log("title was clicked!"); } title.addEventListener("cli..