바닐라JS - input values

Input에 입력한 값 받아오기

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

function onLoginBtnClick() {
    console.log(loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClick);

event object

이벤트들은 함수를 실행할 때 argument를 1개 주면 그곳에 event 정보들을 담을 수 있음.
object에는 방금 일어난 event에 대한 여러 정보가 담겨 있음.

preventDefault

기본적으로 제공되는 function
브라우저가 기본 동작을 실행하지 못하게 막아주는 기능

ex)

function onLoginSubmit(event) { //argument에 event object를 넘겨줌
  event.preventDefault();
  console.log(loginInput.value);
} //값을 입력해서 넘겨도 새로고침이 되지 않음
//submit event가 발생할 때 JS는 onLoginSubmit function을 호출하고
//이 때 event object를 argument로 주고 있으며 기본 동작이 실행되는 걸 막아줌

ex)

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

function handleLinkClick(event) {
    event.preventDefault();
  	//link의 기본동작인 클릭시 다른 사이트로 넘어가는 것을 막음
    alert("clicked!");
}

link.addEventListener("click", handleLinkClick);

string이랑 변수를 합치는 방법

1. "Hello " + username;
2. `Hello ${username}`;