자바 실습

자바스크립트를 활용해 실질적으로 웹이 동작하는 방식에 대해 익숙해져가고 있다.
아직까지 완벽하게 이해하지 못하지만, 어려운 것이 아니라 낯선 것이라 생각한다.

모르면 익숙해질때까지 반복하고 보면 될 것이다.
늘 그래온 것처럼, 암튼 이번 시간에는 html에서 정보를 가져와 실질적으로 데이터를 검증해가며 코딩해가는 법을 배웠다.

const 변수 지정 후, document.querySelector(.클래스이름)으로 정보를 지정한 후 console.log를 통해 결과값을 살펴보자.

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

function onLoginSubmit(event){
    event.preventDefault();
    const userName = loginInput.value;
    loginForm.classList.add(HIDDEN_CLASSNAME);
    userH1.innerText = `Hello ${userName}`;
    userH1.classList.remove(HIDDEN_CLASSNAME);
}

submit했을 때, refresh, 이름을 입력한 값이 사라짐
event.preventDefault();
이를 막기위해 해당 코드를 사용하면 리프레쉬를 방지한다.

인풋 값을 콘솔로 반환하고, 이를 다른 userH1이 받아서 h1 태그를 화면에 출력하고,
기존에 있던 input placeholder를 css에서 display none으로 처리해 화면엔
hello + 유저 이름만 뜨게 된다.

해당 값에 이름을 넣는다면

이런식으로 등장한다