input에 이름을 쓰고 엔터를 치면 input 입력칸은 사라지고 이름만 출력되는 시스템
이름은 로컬스토리지에도 저장되므로 새로고침해도 이름이 저장되어있음
이름을 지우고 싶으면 F12에 Application에 LocalStorage에 들어가서 key값 오른쪽 마우스 클릭
1) HTML - 화면구성
<body>
<form action="" class="js-form form">
<!-- 이름을 쓸 빈칸 -->
<input type="text" placeholder="what is your name?"/>
</form>
<!-- 이름이 출력되는 곳 -->
<h4 class="js-greeting greeting"></h4>
<script src="index.js"></script>
</body>
2) CSS - 이름이 있는 경우에는 이름을 쓰는 빈칸 input이 사라지도록 설정
.form,
.greeting {
/* form과 h4를 숨겨놓은 상태 */
display: none;
}
/* .showing을 클래스에 추가하면 숨겨놓은 것들이 보임 */
.showing {
display: block;
}
3) JavaScript - HTML과 연결
const form = document.querySelector(".js-form");
const input = form.querySelector("input");
const greetint = document.querySelector(".js-greeting");
4) JavaScript - 로직
① loadName( )
- Local Storage의 value값인 currentUser가 null인지 아닌지 if문 조건에 따라 askForName( )과 paintGreeting( ) 함수 실행
// 따옴표 안에 있는 값은 실제 로컬스토리지에서 보여지는 key값을 의미
const USER_LS = "로컬스토리지의 Key값, 사용자 이름";
// ② init()함수 안에 있는 loadName(); 실행
function loadName(){
// localStorage.getItem(USER_LS)가 localStorage의 value값
// USER_LS가 localStorage의 key값
// 이해 안되면 localStorage.getItem과 localStorage.setItem 공부
const currentUser = localStorage.getItem(USER_LS);
//여기서 currentUser는 loadName()함수 안에 있는 전역변수 currentUser임
if(currentUser === null){
askForName();
}else{
paintGreeting(currentUser);
}
}
// ① 처음 실행되는 것
function init(){
loadName();
}
init();
② askForName( )
- loadName( ) if문 조건이 currentUser === null 인 경우
- form 태그안에 있는 input을 보이게 하고 글을 쓰고 엔터를 눌렀을때 handleSubmit( )함수가 실행됨
//"showing"은 클래스의 이름이고 css에서 display:block;으로 설정되어있음
//클래스에 SHOWING_CN를 추가하면 display:none;인 상태를 block로 바꾸어 보이게 함
const SHOWING_CN="showing";
function askForName(){
//form태그에 SHOWING_CN 클래스 이름을 추가함으로써 form태그 안에 있는 input이 보임
form.classList.add(SHOWING_CN);
//엔터를 누르면 handleSubmit()함수가 실행되도록 하는 이벤트리스너
form.addEventListener("submit", handleSubmit);
}
③ handleSubmit( )
- form 태그 안에 있는 input에 이름을 쓰고 엔터를 눌렀을때 실행되는 함수
function handleSubmit(event) {
/* event.preventDefault : form 태그 디폴트값에 의해 form태그 안에 있는 input에서
엔터를 누르면 자동으로 값이 어딘가로 보내져버리는 데 우리는 이 값을 다른 곳에 저장해
사용해야하기 때문에 디폴트 값인 이벤트를 멈추게 하는 메서드
*/
event.preventDefault;
// input에 쓴 이름을 currentValue에 저장
const currentValue = input.value;
//저장한 이름을 saveName()와 paintGreeting()함수 인자로 보냄
saveName(currentValue);
paintGreeting(currentValue);
}
④ saveName( )
- handleSubmit( )함수 안 지역변수 currentValue를 인자로 받아 로컬스토리지 value값으로 저장하는 함수
function saveName(text) {
localStorage.setItem(USER_LS, text);
}
⑤ paintGreeting( )
- loadName( ) if문 조건이 currentUser === null 이 아닌 경우에는 바로 이 함수로 실행됨
(여기서는 currentUser 즉 로컬스토리지의 value 값이 이미 저장되어 있으므로 그걸 사용해서 이름을 출력)
- handleSubmit( )함수에서 실행될때에는 input의 value값을 저장한 변수 currentValue를 인자로 받아옴
function paintGreeting(text) {
//이름을 출력할꺼니까 이름 적는 input란은 숨기기
form.classList.remove(SHOWING_CN);
//이름을 출력할 h4는 보이기 함
greeting.classList.add(SHOWING_CN);
//인자로 받아온 currentValue 값을 text에 넣어서 출력함
greeting.innerText=`Hello ${text}`;
}
5) 결과
input에 이름을 치고 엔터를 누르면↓↓↓
직접 실행해보세요😀
jina-choi.github.io/coding-with-jina/mini_project/printName/index.html
Document
jina-choi.github.io
'Coding With Jina > JavaScript' 카테고리의 다른 글
| [자바스크립트] Array(배열) 객체의 메서드 forEach (0) | 2021.01.27 |
|---|---|
| [자바스크립트] JSON.stringify( )과 JSON.parse( ) (0) | 2021.01.27 |
| [자바스크립트] NaN인지 아닌지 테스트할때 - isNaN () (0) | 2021.01.20 |
| [자바스크립트] 함수에서 여러개의 값을 리턴하고 싶을때 (0) | 2021.01.20 |
| [자바스크립트] 배열 요소를 추가하는 메서드 - push( ) (0) | 2021.01.18 |