[자바스크립트] 정리3

JavaScript

[자바스크립트] 정리3

재키재키 2022. 1. 18. 18:16

HTML에서 input의 유효성 검사를 하기위해서는 form tag 안에 넣어주어야 한다.
form 내부에서
input 안에 있는 button 또는 enter을 누루거나 type이 submit인 input을 클릭하면 자동으로 input이 submit 된다.
이 경우 Javascript에서 clickevent를 따로 정의 해주지 않아도 괜찮다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>
<body>
    <form id="login-form">
        <input 
            required 
            maxlength="15" 
            type="text" 
            placeholder="What is your name?""
        />
        <!-- <button>Log In</button> -->
        <input type="submit" value="Log In" />
    </form>
   
    <script src="app.js"></script>
</body>
</html>

2. 누군가 form을 submit하면 브라우저는 default로 페이지를 새로고침을 하도록 되어있다..

3. addEventListenr 의 첫번째 argument는 항상 발생된 event에 대한 정보를 제공한다. 따라서 event.preventDefault()를 해주어야 한다.

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

function onLoginSubmit(event){
    event.preventDefault(); // 새로고침 되는 것을 방지 
    console.dir(event); // submitEvent
    
    const userName = loginInput.value;
    console.log(userName);
}

loginForm.addEventListener("submit", onLoginSubmit);

4. form의 경우 submitEvent를 anchor의 경우 pointerEvent를 각각 전달한다.

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

function handleLinkClcik(event){
    event.preventDefault();
    console.dir(event); // pointerEvent
}

link.addEventListener("click", handleLinkClcik);

5. HTML element를 숨기고 싶다면 CSS에서 hidden class를 정의하고 해당 element의 calssList에 추가해준다.

6. only string으로만 이루어진 변수는 중요하지 않기에 대문자로 표기하는게 관습이다.

- 여러번 반복해서 사용할 문자열들은 대문자인 변수로 따로 만들어두자(오타시 오류가 나도록 코딩)

7. `(백틱)과 ${변수}를 사용한 템플릿 문자열을 사용할 수 있다. (파이썬의 f문자열과 동일)

.hidden{
    display: none;
}

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

const HIDDEN_CLASSNAME = "hidden"; // string만 포함된 변수는 대문자로 표기하는게 관습

function onLoginSubmit(event){
    event.preventDefault(); 
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;

    greeting.innerText = "Hello " + username;
    greeting.innerText = `Hello ${username}`; // 템플릿 문자열
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);