TAB 2021 겨울방학 학회활동 [슬기로운 코딩생활]
1주차 TIL입니다.
작성자 : 38기_조주희
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">
<title>Momentum App</title>
<link rel = "stylesheet" href = "style.css">
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<form class = "hidden" id = "login-form">
<input required maxlength = "15" type = "text" placeholder = "What is your name?"/>
<button>Log In</button>
</form>
<h1 id = "greeting" class = "hidden"></h1>
<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"; //일반적으로 string만 포함된 변수는 대문자로 표기
const USERNAME_KEY = "username"
function onLoginSubmit(e) {
e.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME); // loginForm에 class추가하기
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME); // greeting에 class 제거하기
}
const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME); // loginForm에 class 제거하기
loginForm.addEventListener("submit", onLoginSubmit);
}else {
paintGreetings(savedUsername)
}
preventDefalut
: a태그나 submit 태그는 누르게 되면 href를 통해 이동하거나, 창이 새로고침하여 실행됨
preventDefalut를 통해 이러한 동작을 막을 수 있음
주로 사용되는 경우
- a 태그를 눌렀을 떄도 href 링크로 이동하지 않게 할 경우
- form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우(input type = "submit" or button)
input의 유효성 검사를 작동시키기 위해서는 form태그 필요 (required)
function onLoginSubmit(e) {
e.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기
console.log(loginInput.value);
console.dir(e);
}
function handleLinkClick(e) {
e.preventDefault();
console.dir(e);
}
loginForm.addEventListener("submit", onLoginSubmit); // SubmitEvent 발생
link.addEventListener("click", handleLinkClick); // PointerEvent 발생
localStorage
: 웹스토리지의 한 종류 (다른 것으로는 세션스토리지가 있음)
// 키에 데이터 쓰기
localStorage.setItem("key", value);
// 키로 부터 데이터 읽기
localStorage.getItem("key"); // value
// 키의 데이터 삭제
localStorage.removeItem("key");
// 모든 키의 데이터 삭제
localStorage.clear();
// 저장된 키/값 쌍의 개수
localStorage.length;
주의사항
문자형 데이터 타입만 지원하기 때문에 숫자형 데이터를 쓰지 않도록 주의해야함
모두 문자형으로 반환
localStorage.setItem('num', 1)
localStorage.getItem('num') // "1"
typeof localStorage.getItem('num') //"string"'21 - 2학기 > 슬기로운 코딩생활' 카테고리의 다른 글
| [TIL]2주차: bookmark앱 만들기_2, Blog 앱 (0) | 2022.01.12 |
|---|---|
| [TIL] 노마드코더 JS 5.0 ~ 6.2 (0) | 2022.01.11 |
| [TIL]1주차:장고 개발의 기본사항, bookmark앱 만들기_1 (0) | 2022.01.05 |
| [TIL] 유니티2d로 게임 개발 1주차 (0) | 2022.01.05 |
| [TIL]1주차 모각코_바닐라 JS(1) (0) | 2022.01.05 |
