반응형
1단계 사용자 이름 저장하기
- 사용자 입력폼 생성
- 사용자의 이름이 로컬 스토리지에 저장되어 있을경우 표시될 수 있도록 영역 추가
- 사용자의 이름이 로컬 스토리지에 저장되어 있을경우 표시
키워드1 HTML내의 javascript 파일의 위치 [async 와 defer]
- 브라우저는 위에서 아래로 한줄씩 읽어 드림
1. head태그 사이에 script를 추가할 경우
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Something</title> <script src="javascript.js"></script> </head> <body> </body> </html>- html parsing
- js 파일 다운로드
- js 파일 실행
- html parsing
단점: JS 파일 이 크거나 인터넷 속도가 느릴경우 html 을 읽어 드리는 시간이 오래걸림
2. body태그 최하단에 script를 추가할 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Something</title>
</head>
<body>
<script src="javascript.js"></script>
</body>
</html>- html parsing
- js 파일 다운로드
- js 파일 실행
단점: html 이 javascript에 의존적경우 정상적으로 페이지가 열리지가 않는다.
3. head태그 사이에 async 속성이 있는 script 파일이 있을경우
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Something</title>
<script async src="javascript.js"></script>
</head>
<body>
</body>
</html>- html parsing
- html parsing + js 파일 다운로드를 동시에 실행 (병렬)
- js 파일 다운로드 완료시 html parsing 일시중단 및 js 실행
- html parsing 진행
단점: DOM 조작시 문제가 발생할수 있음
4. head태그 사이에 defer 속성이 있는 script 파일이 있을경우
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Something</title>
<script defer src="javascript.js"></script>
</head>
<body>
</body>
</html>- html parsing + js 파일 다운로드를 동시에 실행 (병렬)
- html parsing을 계속 진행 (이 단계 언제가 js 파일 다운로드 완료)
- tml parsing이 완료된 후 js 실행
키워드2 localStorage
- 사용자 로컬의 Storage Object 에 접근하게 해줌
- 모든 key와 value는 항상 string으로 저장
- localStorage에 저장되는 데이터는 만료시간이 없음
- 로컬 스토리지 아이템 저장: localStorage.setItem('키', '값');
- 로컬 스토리지 아이템 읽기: localStorage.getItem('키');
- 로컬 스토리지 아이템 삭제: localStorage.remove('키');
- 로컬 스토리지 아이템 전체삭제: localStorage.clear();
키워드3 Element.classList
- element의 클래스 목록을 제어하는 속성임
- IE 에서는 부분적으로 지원 (IE10 에서는 Not supported for SVG elements.)
- .add( String [, String [, ...]] ): 지정한 클레스 추가
- .remove( String [, String [, ...]] ): 지정한 클레스 삭제
- .item( Number ): 해당 인덱스 값을 이용 클레스를 반환
- .toggle( String [, force] ): argument 가 하나일 경우 클래스가 존재하면 삭제, 없으면 추가
- 두번째 argument(true or false): 가 존재할경우 해당 값이 true 일경우 첫번째 argument값을 강제로 추가 false 일경우 강제로 삭제
- .contains( String ): 지정한 문자열이 class 속성에 존재하는지 확인
- .replace( oldClass, newClass ): 존재하는 클래스를 새로운 클래스로 교체
전체코드
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Something</title>
<link rel="stylesheet" href="index.css" />
<script defer src="clock.js"></script>
<script defer src="greeting.js"></script>
</head>
<body>
<div class="js-clock">
<h1 class="js-title">00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
</body>
</html>greeting.js
'use strict';
const USER = 'currentUser';
const SHOW = 'showing';
const form = document.querySelector('.js-form');
const input = form.querySelector('input');
const greeting = document.querySelector('.js-greetings');
function displayGreeting(user) {
form.classList.remove(SHOW);
greeting.classList.add(SHOW);
greeting.innerHTML = `Hello ${user}`;
}
function init() {
const currentUser = localStorage.getItem(USER);
if (currentUser === null) {
// 저장된 정보가 없을경우
} else {
displayGreeting(USER);
}
}
init();index.css
body {
background-color: #ecf0f1;
}
.btn {
cursor: pointer;
}
h1 {
color: #34495e;
transition: color 0.5s ease-in-out;
}
.clicked {
color: #7f8c8d;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}
'javascript' 카테고리의 다른 글
| 14. Momentum 만들기 5 - todolist 만들기1 (0) | 2020.06.26 |
|---|---|
| 13. Momentum 만들기 4 - 사용자 이름 저장하기2 (0) | 2020.06.25 |
| 11. Momentum 만들기 2 - 시간 출력 최적화 (0) | 2020.06.25 |
| 10. Momentum 만들기 1 - 시간 출력 (0) | 2020.06.25 |
| 9. if문(조건문) (0) | 2020.06.24 |