setInterval(fn, 1000)
첫번째 인자로 실행할 함수를 받고,
두번째 인자로 그 함수를 실행하고 싶은 시간(실행할 시간 간격)을 받음. (단위는 millisecond)
Element 반환하기
querySelector: 첫번째 것을 가져온다.
querySelectorAll: 모든걸 가져온다. 클래스명에 따른 모든 엘리먼트들의 배열을 가져옴.
getElementByID: Id로 엘리먼트를 가져온다.
getElementByTagname: 태그로 엘리먼트를 가져온다(input, body, html, div, section..)
local storage
자바스크립트 정보를 유저 컴퓨터에 저장하는 방법!
크롬 Application 창 -> Local Storage
localStorage.setItem("nico", true)
로컬 스토리지에 저장한다.
localStorage.getItem("nico")
로컬 스토리지에서 true값을 얻는다.
localStorage안에서 값을 변경한 후 콘솔창에서 출력해보면 변경된 값이 출력된다.
없는 값을 가져오려 한다면 null 값(존재하지 않음. undefined)이 반환된다.
<index.html>
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.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>
<styles.css>
.form,
.greetings {
display: none;
}
.showing {
display: block;
}
<clock.js>
const clockContainer = document.querySelector(".js-clock"), //js-clock이란 이름의 클래스를 찾아줌
//queryselector는 element의 자식을 탐색한다.
clockTitle =clockContainer.querySelector("h1");
//document로부터 보고싶지 않고 js-clock 클래스의 자식을 보고싶다.
function getTime(){
const date=new Date(); //여기서 Date는 클래스
const minutes=date.getMinutes();
const hours=date.getHours();
const seconds=date.getSeconds();
clockTitle.innerText=`${hours<10 ? `0${hours}` : hours}:${minutes < 10? `0${minutes}`: minutes}:${seconds<10? `0${seconds}` : seconds}`;
}
function init(){
getTime();
setInterval(getTime, 1000); //시간을 매 초마다 받는다.
}
init();
<greeting.js>
const form=document.querySelector(".js-form"),
input=form.querySelector("input"),
greeting=document.querySelector(".js-greetings");
const USER_LS="currentUser",
SHOWING_CN="showing";
function paintGreeting(text){
form.classList.remove(SHOWING_CN); //텍스트를 색칠하려면, 폼을 숨겨야 함
greeting.classList.add(SHOWING_CN);
greeting.innerText = `Hello ${text}`;
}
function loadName(){
const currentUser=localStorage.getItem(USER_LS);
if(currentUser===null){
}else{ //현재 유저가 있으면 로컬스토리지에서 가져온 이름을 paint
paintGreeting(currentUser);
}
}
function init(){
loadName();
}
init();
여기서 showing 클래스가 살짝 헷갈렸는데,
이해한 바로는 이렇다.
showing 이라는 클래스가 할당이 안되어있을때는 css에서 설정해준것과 같이 form클래스와 greeting클래스에서 display는 none으로 설정돼 보이지 않는다.
showing이 적용되었을 때는 display가 block이기 때문에 보인다.
loadName 함수에서는 로컬 스토리지에서 currentUser 값을 가져오고,
입력된 currentUser가 있으면 paintGreeting함수를 호출한다. 인자로는 currentUser를 전달한다.
paintGreeting 함수에서는 텍스트가 뜰려면 입력받는 폼을 숨겨야 하기 때문에 form에 showing클래스를 제거하고,
greeting 텍스트가 보이기 위해 showing 클래스를 추가한다.
이렇게 classList를 쓰는구나!
'FRONT > JAVASCRIPT' 카테고리의 다른 글
| [javascript] LocalStorage에 select option 값 저장하기 (0) | 2021.06.05 |
|---|---|
| [노마드코더] 바닐라 JS로 크롬앱 만들기 6일차(greeting, todo) (0) | 2021.06.04 |
| [노마드코더] 바닐라 JS로 크롬앱 만들기 4일차(classlist, toggle) (1) | 2021.06.03 |
| [노마드코더] 바닐라 JS로 크롬앱 만들기 3일차(getElementById, querySelector) (0) | 2021.06.02 |
| [노마드코더] 바닐라 JS로 크롬앱 만들기 (1)자바스크립트란? (0) | 2021.06.02 |