[ JS ] 바닐라JS로 크롬앱 만들기 #4.0 ~ #4.7

결·2023년 8월 15일

CSS JavaScript html

[ JS ] 바닐라JS로 크롬앱 만들기

목록 보기

3/6

📍 HTML - form

💁‍♀️ WHY 웹사이트 창에 ?가 붙을까?

form 이 submit 되고 있기 때문에 웹사이트를 재시작하고 있다. 따라서 input 안의 button을 누르거나 type이 submit 인 input 을 클릭시 내가 작성한 form이 submit 된다.
즉, form 안에서 엔터 누르고 input 이 더 존재하지 않는다면 자동으로 submit 된다.
input 의 유효성 검사 작동시키기 위해서는 input이 form 안에 있어야함

📍 querySelector() - getElementById()

🔎 querySelector : classname, tagname 모두 검색 가능 -> 대상이 id인지 class인지 명확할 것
🔎 getElementById : ID 만 가져옴

모두 같은 코드임

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");

📍 preventDefault()

: 어떤 이벤트의 기본 행동이든지 발생되지 않도록 막는 것

const link = document.querySelector("a");
function handleLinkClick(event){
    event.preventDefault(); // event는 멈추게 되고 아무것도 진행되지 않을 것
};
link.addEventListener("click", handleLinkClick);

🌻 전체코드

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momemtum</title>
</head>

<body>
    <form id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="Whar is your name?">
        <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
</body>

</html>

.hidden {
    display: none;
}

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

const HIDDEN_CLASSNAME = 'hidden';
const USERNAME_KEY = "username"

function OnLoginSubmit(evnt) {
    evnt.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
};

function paintGreetings(username) {
    greeting.innerText = `Hello, ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUserName = localStorage.getItem(USERNAME_KEY);
if (!savedUserName) {
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", OnLoginSubmit);
} else {
    // show the greetings
    paintGreetings(savedUserName);
};