Tip. 일반적으로 string만 포함된 변수나 중요한 정보를 담은 게 아닌 경우 변수명을 전부 대문자로 표기
Element 찾기
const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
위와 같이 꼭 document 기준으로 element를 찾지 않아도 된다
Form 자동제출 막기
* form 안에 있는 button을 누르거나, type이 submit인 input을 클릭하면 작성한 form이 submit된다
function onLoginSubmit(event) {
event.preventDefault();
}
addEventListener에 추가한 함수가 실행될 때는 해당 이벤트와 관련된 정보가 인자로 주어지는데, 해당 인자에 preventDefault 함수를 처리하게 되면 default로 지정된 이벤트가 벌어지지 않는다(form의 경우, 자동 제출 후 새로고침되는 동작이 막힌다. 다른 예로, a 태그의 경우, 위와 같은 방법으로 이벤트를 막을 경우 해당 링크로 이동되지 않는다)
문자열에 변수값 넣기
element.innerText = "Hello " + username;
element.innerText = `Hello ${username}`;
첫번째 줄과 같이 + 기호를 사용하여 둘을 합치거나, 두번째 줄과 같이 백틱(`)기호를 활용하여 문자열 내 원하는 부분에 변수를 삽입할 수 있다
정보 저장하기(local storage)
// local storage에 정보 저장
localStorage.setItem("key", "value");
// local storage에 저장된 값 반환
const item = localStorage.getItem("key");
// local storage에 저장된 값 삭제
localStorage.removeItem("key");
* 단, local storage에는 string 형식만 저장할 수 있다
따라서 다른 방식으로 저장하기 위해서는 json 형태로 저장하면 된다
'강의, 책 > [JS] 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글
#7. To Do List (1) | 2024.02.02 |
---|---|
#6. Quotes and Background (0) | 2024.02.02 |
#5. Clock (0) | 2024.02.02 |
#3. JavaScript on the Browser (0) | 2024.02.01 |
#2. Welcome to JavaScript (0) | 2024.01.31 |