JavaScript정리 6일차(preventDefault(), localStorage, 문자열보간)

preventDefault() (Function과 Event의 동작)

• 공통점 : 실행시 EventArgument Object를 넣어줘서 실행시킨다.
• 차이점 : 넣어주는 타이밍이 다르다. Function은 브라우저가 즉시 EventArgument Object를 ( )에 넣어 줘서 자동으로 실행하고 Event는 동작활성화 때 EventArgument Object를 ( )에넣어 줘서 실행시킨다.

예시

// HTML 일부
<form id="login-form" class="hidden">
	<input required maxlength="15" type="text" placeholder="What is your name?" />
    <input type="submit" vale="Log In" />
</form>
<h1 id="greeting" class="hidden"></h1>

 

/* JS */
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
const savedUsername = localStorage.getItem(USERNAME_KEY);

function onLoginSubmit(event){
	const username = loginInput.value;
    event.preventDefault();	//form의 기본submit 기능을 멈춘다
    //console.dir(event);
    
    loginForm.classList.add(HIDDEN_CLASSNAME);
    paintGreeting(username);
    
    localStorage.setItem(USERNAME_KEY, username); //localStorage라는 DB를 활용
}


//onLoginSubmit();

if(savedUsername === null){
	loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
}else{
	paintGreeting(savedUsername);
}

function paintGreeting(name){
	greeting.innerText = `Hello ${name}`;	//c#에서는 $"Hello {name}"로 사용
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

 

 

localStorage

• 브라우저에 기억할 수 있게 하는 API / 미니 DB같은 느낌
• 예시는 위에 같이
• 자주 사용하는 함수 : localStorage.getItem(KEY) / localStorage.setItem(KEY, value)

 

 

문자열보간(C#과 비교)

`Hello ${name}`;  <==>  $"Hello {name}";

  - 문자열보간을 쓰고 싶을 때 `(물결표시와 같이 있는 문자/그레이브)를 사용

 

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN