사용자에게 이름 입력 받기

1. input 생성

• 사용자에게 이름을 입력하라고 요청 한다.
• button을 통해 입력값을 전송할 수 있게 한다.

<div id="login-form"><!--왜 div안에 넣을까? : Division의 약자로, 레이아웃을 나누는데 쓰인다. 입력 기능을 가진 구역끼리 묶어놓기 위해서 div 태그 안에 입력 태그들을 생성했다.--> 
  <input type="text" placeholder="What is your name?" />
  <button>Log In</button>
</div>

input과 button을 변수를 통해 찾을 수 있게 한다.

const loginForm = document.getElementById("login-form"); //HTML element
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
//login을 생성하지 않은 경우에는, 
//const loginInput = document.querySelector("#login-form input");
//이렇게 document를 통해 검색이 가능하다.

button을 클릭할 때 감지(콘솔에 출력)하는 방법

input안에 있는 속성인 value를 통해 값을 알아낸다.

function onLoginBtnClick(){
  console.log(loginInput.value);
  //console.dir(loginInput);으로 알아낸 value를 이용한다.
}
loginButton.addEventListener("click", onLoginBtnClick);