1. Log in 화면 (Input Values)

- HTML -

로그인 form에

input과 버튼을 넣어줌.

 

js파일도 연결해줌.

 

 

 

- JS -

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

loginInput 라는 변하지 않는 변수에 

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

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

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

loginButton 라는 변하지 않는 변수에 

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

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

function onLoginBtnClick() {
console.log("hello", loginInput.value);

} 를 하여

"hello"와 loginInput.value인 사용자가 input에 작성한 text를 보여주는 function을 만듬

(loginInput.value 는 loginInput에 작성된 text를 말함)

 

loginButton.addEventListener("click", onLoginBtnClick); 를 하여

loginButton을 click하면 onLoginBtnClick 라는 function을 실행하도록 함.

 

 

 

- 화면 -

hello 와 작성한 ahha가 같이 보여짐.