3. Login 화면 (Getting Username)

- HTML -

<h1 id="greeting" class="hidden"></h1> 를 추가함.

 

 

 

- CSS -

.hidden {
 display: none; 를 하여

hidden 라는 class를 가진 요소를

display: none; 하여 보여지지 않도록 함.

 

 

 

- JS -

const loginForm = document.querySelector("#login-form"); 를 하여

loginForm 라는 변하지 않는 변수에 

document.querySelector("#login-form")를 하여

login-form라는 id를 가진 요소를 찾아와 저장함.

 

const loginInput = document.querySelector("#login-form input"); 를 하여

loginInput 라는 변하지 않는 변수에 

document.querySelector("#login-form input")를 하여

login-form input라는 id를 가진 요소를 찾아와 저장함.

const greeting = document.querySelector("#greeting"); 를 하여

greeting 라는 변하지 않는 변수에 

document.querySelector("#greeting")를 하여

greeting라는 id를 가진 요소를 찾아와 저장함.

const HIDDEN_CLASSNAME = "hidden"; 를 하여

HIDDEN_CLASSNAME 라는 변수에 hidden 을 저장함.

"hidden" 이 여러번 사용되기에 오류가 나는 것을 최소화 하기 위하여 변수로 저장하는 것임. 

(string을 변수에 저장 시 변수명은 대문자로 작성해줌. 중요한 변수가 아니기 때문)

function onLoginSubmit(event) { 를 하여

onLoginSubmit인 function을 만드는데

 

event.preventDefault(); 를 하여

enter 나 버튼 클릭 시 sudmit 되는 기본 설정을 막아줌.

loginForm.classList.add(HIDDEN_CLASSNAME); 를 하여

loginForm에 HIDDEN_CLASSNAME라는 class를 추가함.

즉, H1의 class에 HIDDEN_CLASSNAME인 hidden를 추가함.

const username = loginInput.value; 를 하여

username 라는 변수에 loginInput.value되는 값을 저장함.

 

greeting.innerText = `Hello ${username}`; 를 하여

greeting의 innerText에 Hello와 username을 저장함.

즉, H1에 Hello와 작성되는 text를 저장함.

greeting.classList.remove(HIDDEN_CLASSNAME); 를 하여

greeting에 HIDDEN_CLASSNAME라는 class를 제거함.

즉, H1의 class의 HIDDEN_CLASSNAME인 hidden를 제거함.

 

loginForm.addEventListener("submit", onLoginSubmit); 를 하여

loginForm 이 submit 되면 onLoginSubmit를 실행함.

- 화면 -

input에 text를 작성하면

 

Hello 와 작성한 text가 H1으로 브라우저에 나타남.