JS login 창 만들기

querySelector로 id태그를 쓸 때는 #를 써야 한다 하지만 getElementById로 id태그를 쓸 땐 #를 안 써도 된다

예를 들어보면 HTML에 <div id="login=form"></div>로 코딩을 하고

 

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

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

이 둘은 같은 내용을 뜻하는 코드이다.

 

전체 코드를 보면

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


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


loginButton.addEventListener("click", onLoginBtnClick);

이렇게 코드를 짰다.

 

onLoginBtnClick() 함수를 이용해

값이 들어간 것을 출력해주고

클릭을 출력해주는 코드를 짰다.

함수를 실행하기 위해

loginButton.addEventListener("click", onLoginBtnClick)

을 사용하였다.

 

 

---

function onLoginSubmit(event){
event.preventDefault(); 

브라우저가 기본 동작을 실행하지 못하게 막는 함수이다.

event object는 preventDefault함수를 기본적으로 갖고 있다
console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit); 

submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미이다

JS는 onLoginSubmit함수 호출 시 인자를 담아서 호출함. 해당 인자는 event object를 담은 정보들

아주 중요 ★★★★
form을 submit 하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다.

하지만 지금은 우리가 이것을 원하지 않는다.

그래서 사용을 한 게
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다.

첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로) argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다.

ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있다

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

function onLoginSubmit(event) {
    event.preventDefault();
    console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit);

 

---

string과 변수 합치기 , 변수 안에 string 넣는 방법

    greeting.innerText = "Hello " + username;
    
    
    
    greeting.innerText = `Hello ${username}`;

이 두 개의 코드는 같은 것을 의미한다.

위에 있는 코드는 우리가 자주 사용하던 방법

아래에 있는 코드는 이번에 새롭게 알게 된 코드이다.

 

아래 코드를 사용하는 방법은 `````````````````` 이것이다 백 틱!

`~~~~  ${변수명}` 이렇게 사용을 하면 ~~~ 와 변수가 붙여서 출력이 되는 것을 볼 수 있다.