노마드 코더님의 자바스크립트 강의를 보고 정리한 글입니다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1></h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
<script src="clock.js"></script>
<script src="greeting.js"></script>
</body>
</html>index.css
.form, .greetings {
display:none;
}
.shwoing {
display: block;
}greeting.js
- querySelector는 조건에 맞는 첫 번째 selector를 가져오고
- querySelectorAll은 조건에 맞는 모든 selector를 가져온다. 단, 리턴값이 Array이다.
- local storage : 자바스크립트 정보가 유저 컴퓨터에 저장된 곳.
- 크롬 개발자 도구 > Application 탭 > Storage > Local Storage를 보면 무언가 저장되어 있는 것을 확인할 수 있다.
localStorage.setItem("Phillip", true);: Key가 "Phillip"이고 value가 true인 데이터를 저장.localStorage.getItem("Phillip");: key의 value를 찾아 리턴한다. 여기서 리턴값은 true이다.
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting = document.querySelector(".js-greetings");
const USER_LOCAL_STORAGE = "currentUser",
SHOWING_CLASS_NAME = "showing";
function saveName(text){
localStorage.setItem(USER_LOCAL_STORAGE, text);
}
function handleSubmit(event){
event.preventDefualt();
const currentValue = input.value;
paintGreeting(currentValue);
saveName(currentValue);
}
function askForName(){
form.classList.add(SHOWING_CLASS_NAME);
form.addEventListener("submit", handleSubmit);
}
function paintGreeting(text){
// 유저 이름을 보여줄거면, 폼을 display:none처리
form.classList.remove(SHOWING_CLASS_NAME);
greeting.classList.add(SHOWING_CLASS_NAME);
greeting.innerText = `Hello ${text}`;
}
// local storage에 유저이름이 있으면, 불러와서 서식에 맞게 출력.
function loadName(){
const currentUser = localStorage.getItem(USER_LOCAL_STORAGE);
if (currentUser === null){
askForName();
} else {
paintGreeting(currentUser);
}
}
function init(){
loadName();
}
init();
모빌리티 스타트업에서 데이터를 다루고 있습니다.