안녕하세요
local저장소 복습해보겠습니다.
저는 노마드코더 니코쌤의 무료강좌를 보고 공부하였습니다.
변수 설정하는거 어떤걸로 해야하는지 너무 고민돼요 ㅜㅜ 일단 저만 대충 알아볼 수 있게 하는데 어렵네요..
그리고 주석도 제 맘대로 그때 그때 제가 이해한 대로 다는 거라 알아보시기 힘들 수 있어요..
일단 html
<!DOCTYPE html>
<html>
<head>
<title>something</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<form class="js-name form" >
<input type="text" placeholder="이름을 입력하세요">
</form>
<h1 class="js-greeting greeting"></h1>
<script src="greeting.js"></script>
</body>
</html>그리고 css
.form,
.greeting{
display: none;
}
.showing{
display: block;
}
보시면 처음에
.form과 .greeting은 기본 display가 none으로 보이지 않는 상태입니다.
local저장소에 값이 있냐 없냐에 따라 두가지를 보이게,안보이게 해볼 거에요.
일단 js 코드 보시고 제가 따로 찾아본 부분 설명하겠습니다.
const form = document.querySelector(".js-name"), //js-name 첫번째 요소 가져오기
input = form.querySelector("input"), //form의 첫 input 요소 가져오기
greeting = document.querySelector(".js-greeting"); //greeting 첫번째 요소 가져오기
function saveName(name){//입력된 값 가져와서
localStorage.setItem("currentUser",name);// local 저장소에 저장
}
function handleSubmit(event){//이벤트를 변수로 받고
event.preventDefault(); //기본동작막아주기
const currentValue = input.value; //현재 입력되어져있는 값 가져오기
appearGreeting(currentValue);
saveName(currentValue);
}
function askName(){ //이름 물어보는
form.classList.add("showing"); //class에 showing 추가
form.addEventListener("submit",handleSubmit); //submit 이벤트 발생하면 콜백함수 실행
}
function appearGreeting(currentValue){//입력된 값 가져와서
form.classList.remove("showing");//form의 showing없애주고
greeting.classList.add("showing"); //greeting의 showing해주고
greeting.innerText = `Welcome ${currentValue}` //이름 넣어주면서 안뇽~
}
function loadName(){ //이름 가져오기
const name = localStorage.getItem("currentUser"); //local저장소에서 key: currentUser 가져오기
if(name===null){//비었다면 실행
askName();
}else{//값이 있으면 실행
appearGreeting(name);
}
}
function init(){ //시작하는 함수
loadName();
}
init();
preventDefault()
이벤트에서의 동작을 막아 줄 수 있습니다.
여기에서는 submit 되었을 때 창이 새로고침 되는것을 막아주는거에요.
addEventListener(event,callback)
이벤트가 발생했을 때 실행하고싶은 동작이 있다면 사용합니다.
이벤트에는 [change,click,focus]등이 있습니다.
innerText와 innerHtml
둘은 써있듯이 사용하는 element가 뭔지에 따라 다릅니다.
text는 text그대로를 사용하고
html은 text에 있는 html을 읽습니다.
이렇게 하면
이렇게 돼요ㅎㅎ
오늘은 여기까지 하겠습니다.
태클은 언제나 환영!
틀린게 많을 거 같아요 태클 마구마구 걸어주세요
:)
'자바스크립트()' 카테고리의 다른 글
| javascript#3 백그라운드 이미지 랜덤으로 채우기 (0) | 2021.05.27 |
|---|---|
| javascript#1 시간 출력 (0) | 2021.05.25 |
