nomard crome app 3
link
body 안에
<a href="http://nomadcoders.co">Go to courses</a>
추가
JS
const link = document.querySelector("a");
function handleLinkClick() {
alert("clicked");
}
link.addEventListener("click", handleLinkClick);
릭 이벤트를 이용해서 클릭하면 alert이 뜨고 ok를 누르면 링크로 이동하는 코드
무엇이 클릭했는지 등에 대한 정보를 알고 싶을 때
function handleLinkClick(event) {
event.preventDefault();
console.log(event);
alert("clicked");
}
link.addEventListener("click", handleLinkClick);
console 내용 PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …} 에서 좌표 등을 확인할 수 있다.
hidden
이름을 입력하면 form을 없애는 방법
class=”hidden”
CSS
.hidden {
display: none;
}
HTML
<form id="login-form" class="hidden"></form>
class=”hidden”을 추가하면 form을 숨긴다.
<h1 id="greeting" class="hidden"></h1>
JS
const greeting = document.querySelector("#greeting");
const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const HIDDEN_CLASSNAME = "hidden";
function onSubmit(event) {
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add("hidden");
greeting.innerText = `Hello ${username}`;
greeting.classList.remove("hidden");
}
greeting.addEventListener("submit", onSubmit);
string만 포함된 변수는 대문자로 표기하는 관습이 있다.
username을 입력하면 브라우저에 띄우게 하는 코드
value 저장
브라우저가 기억하게 만드는 방법
localStorage.setItem("myCat", "Tom");
검사 -> application -> localstorage에서 확인가능
localStorage.getItem("myCat"); // Tom
localStorage.removeItem("myCat"); //삭제
따라서
function onSubmit(event) {
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME);
localStorage.setItem("user", username);
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
localStorage.setItem("user", username);
를 추가하여 작동하게 만들었지만 새로고침을 했을 때 form이 계속 표시되고 있다. localStorage가 있으면 form을 보여주지 않고 h1만 표시한다.
localStorage.getItem(user);
을 했을 때 비어있다면 null을 반환
greeting 최종
HTML
<body>
<form class="hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value="Log In" />
</form>
<a href="http://nomadcoders.co">Go to courses</a>
<h1 id="greeting" class="hidden"></h1>
<script src="nomar.js"></script>
</body>
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";
function onSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGretting(username);
}
function paintGretting(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const saveUsername = localStorage.getItem(USERNAME_KEY);
if (saveUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onSubmit);
} else {
paintGretting(saveUsername);
}
로그인을 하면 이름을 저장하고 form을 변환시키면서 새로고침을 눌러도 유지되는 코드
form과 h1 양쪽에 hidden class를 넣고 username이 있는지 없는지로 판단하여 form과 h1 둘 중 하나만 보여주도록 한다.
- const saveUsername = localStorage.getItem(USERNAME_KEY);와 if(saveUsername === null)에 의해 Storage가 null인지 가장 먼저 확인
- null일 경우 loginForm의 hidden class를 삭제하고 form은 submit을 기다린다.
- null이지만 값을 입력할 경우 submit event가 발생 된다.
- event.preventDefault(); 서밋의 기본동작(새로고침)을 막는다.
- loginForm에 hidden class를 추가한다.
- value를 username이라는 변수에 저장한다.
- localStorage에 username이라는 key에 username(value)를 저장한다. {username(key): lalala(value)}의 형태
- paintGretting(username) 함수를 호출
- h1에 Hello username을 추가 <h1 id="greeting" class="">Hello lalala</h1>
- h1의 hidden 제거
- null이 아닌 경우 localStorage에 저장되어 있는 USERNAME_KEY를 getItem해서 paintGretting(saveUsername)함수를 호출
댓글남기기