clear_uncertainty

자바스크립트 입문[Javascript] - 자바스크립트로 로그인 기능을 구현하기 - (2) 본문

언어/자바스크립트(Javascript)

자바스크립트 입문[Javascript] - 자바스크립트로 로그인 기능을 구현하기 - (2)

SOidentitiy 2021. 7. 25. 20:19
728x90

2021-07-25

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

[Login  - (2) ] 

 

저번 포스팅에서는 submit의 기본동작인 새로고침을 preventDefault를 통해 제어하는 방법을 배웠습니다.

이번 시간에는 링크의 기본동작인 페이지 이동을 막아보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<a href="https://naver.com">Go to naver</a>
	<script src="javascript.js"></script>
</body>
</html>

먼저 HTML에서  <a href="https://naver.com"> Go to naver </a>을 통해 링크를 생성해 줍시다.

 

const link = document.querySelector("a");

function handleLinkClick() {
	alert("clicked!")
}

link.addEventListener("click", handleLinkClick);

위와 같이 JS를 작성하면 alert("clicked")가 브라우저에 뜨며 기본동작(링크로 이동)이 제어되긴하지만

확인을 누르면 기본동작이 실행됩니다.

 

const link = document.querySelector("a");

function handleLinkClick(evnet) {
	event.preventDefault();
	console.log(event);
}

link.addEventListener("click", handleLinkClick);

submit의 새로고침을 제어하는 방법과 같이 preventDefault를 사용해 기본동작을 제어할 수 있습니다.

이에따라, console.log(event)를 통해 다양한 property를 console을 통해 제공받을 수 있습니다.

 

주의

 

취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.

이벤트의 취소가능 여부는 event.cancelable을 통해 확인할 수 있습니다.

bool = event.cancelable;

이벤트의 기본동작을 제어할 수 있는가의 가능여부에 따라서 bool은 true 또는 false가 됩니다.

 

Getting Username

 

이번에는 Username을 submit 했을때, form이 사라지도록 만들어봅시다.

이는 CSS와 JS로 구현할 수 있습니다.

.hidden {
	display: none;
}

↑css

위의 CSS를 통해 hidden이란 클래스를 가지면 사라지게됩니다. (정확하게는 숨기는 것입니다.)

 

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const loginSubmit = document.querySelector("#login-form button");


function onLoginSubmit(event) {
	event.preventDefault();
	const username = loginInput.value;
	loginForm.classList.add("hidden");
	console.log(username);
}

loginSubmit.addEventListener("click",onLoginSubmit);

위와 같이 JS에서 구현하면 username을 입력할때, 새로고침이 되지않고, cosole에 username이 기록되면서, 

loginForm은 사라지게 됩니다.

 

이제 사용자가 username을 입력하면 loginForm은 사라지고 Hello, username이 출력되는 것을 구현해봅시다.

 

먼저 HTML에 hidden 클래스를 가진 <h1>을 만들어줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<form id="login-form">
		<input type="text" required maxlength="15" placeholder="What is name?"/>
	<button>Login</button>
	</form>
	<h1 id="greeting"></h1>
	<script src="javascript.js"></script>
</body>
</html>

 

그리고 JS에서 user가 username을 submit할 때 <h1>안에 username을 입력하고 loginForm을 사라지게합시다.

동시에 h1의 hidden 클래스는 제거되어야 할 것입니다.

 

이때 HIDDEN_CLASSNAME이 대문자로만 표기된 이유는 관행때문인데, 일반적으로 string으로만 포함된 변수는 대문자를 표기하고 string을 저장하고 싶을때 사용합니다.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const loginSubmit = document.querySelector("#login-form button");
const greeting = document.querySelector("#greeting")

const HIDDEN_CLASSNAME = "hidden"

function onLoginSubmit(event) {
	event.preventDefault();
	const username = loginInput.value;
	loginForm.classList.add(HIDDEN_CLASSNAME);
	console.log(username);
	greeting.innerText = "Hello! " + username;
	greeting.classList.remove(HIDDEN_CLASSNAME)
}

loginSubmit.addEventListener("click",onLoginSubmit);

 

Tip!

 

greeting.innerText = "Hello! " + username ; 의 방식으로 텍스트를 합칠때 띄어쓰기의 간격을 기억해야하고 보기에도 좋지않습니다. 

똑같은 동작을 수행하지만 다른 방식으론,

greeting.innerTexxt = ` Hello ${username} ` 가 있습니다. ( '  ' 가 아닌 `  ` 입니다!)

 

출처

 

 

노마드 코더 Nomad Coders

코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!

nomadcoders.co

 

728x90
저작자표시

'언어 > 자바스크립트(Javascript)' 카테고리의 다른 글

자바스크립트 입문[Javascript] - 자바스크립트로 시계를 구현하기 - setIntervals / Date / padStart  (0) 2021.07.26
자바스크립트 입문[Javascript] - 자바스크립트로 로그인 기능을 구현하기 (Local Storage) - (3)  (0) 2021.07.26
자바스크립트 입문 [Javascript] - 자바스크립트로 로그인 기능을 구현하기 - (1)  (2) 2021.07.25
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 3 )  (0) 2021.07.25
자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 2 )  (0) 2021.07.24
'언어/자바스크립트(Javascript)' Related Articles more