바닐라 JS로 크롬 앱 만들기 - LOGINLanguage/JavaScript2022. 2. 3. 16:35
Table of Contents
알아두어야 하는 것
- querySelector
- preventDefault
- classList
- addEventListener
- localStorage
querySelector
문서 내에서 일치하는 querySelector() 첫 번째 항목을 반환
"#idName" : id 가 idName과 일치하는
".className" : class가 className과 일치하는
"input" : input과 일치하는
preventDefault [여기]
이벤트가 명시적으로 처리되지 않으면 기본 작업이 정상적으로 수행되지 않아야 한다고 사용자에 알려줌
classList
클래스를 조작하는데 사용, add() remove() replace() 그리고 toggle() 메서드가 있다.
addEventListener [여기]
EventTarget 지정된 이벤트가 대상에 전달될 때마다 호출될 함수를 설정
type[여기]의 경우는 Event의 유형 (click, submit ...)
listener의 경우는 Event 지정된 유형의 이벤트가 발생할 때 알림을 받는 개체
localStorage
데이터에 만료 시간이 없지만 페이지 세션이 종료될 때, 즉 페이지가 닫힐 때 데이터가 지워진다
개발자모드-Application-Local Storage 로 들어가게 되면 확인
완성의 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<form id="login-form" classname="hidden">
<input
required
maxlength="15"
type="text"
placeholder="what is your name?"
/>
<button>Log In</button>
</form>
<h2 id="greeting" classname="hidden"></h2>
<script src="app.js"></script>
</body>
</html>
app.js
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
function onSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
localStorage.setItem(USERNAME_KEY, loginInput.value);
paintGreetings();
}
function paintGreetings() {
const username = localStorage.getItem(USERNAME_KEY);
greeting.classList.remove(HIDDEN_CLASSNAME);
greeting.innerText = `Hello ${username}`;
}
loginForm.addEventListener("submit", onSubmit);
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onSubmit);
} else {
loginForm.classList.add(HIDDEN_CLASSNAME);
paintGreetings();
}
'Language > JavaScript' 카테고리의 다른 글
| 바닐라 JS로 크롬 앱 만들기 - API, ToDoList (0) | 2022.02.04 |
|---|---|
| [JavaScript] 내장 객체 & 데이터 타입 (1) | 2021.10.11 |
| [JavaScript] 상속 (1) | 2021.10.10 |
| [JavaScript] 객체지향, new 그리고 this (1) | 2021.10.09 |
| [JavaScript] arguments, apply (3) | 2021.10.09 |
@jaewpark :: 코스모스, 봄보다는 늦을지언정 가을에 피어나다
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
