[바닐라 JS] 크롬 앱 만들기 (1)

programming/web

[바닐라 JS] 크롬 앱 만들기 (1)

chanchand 2023. 1. 15. 04:41

Login

form 태그 : required, maxlength

<form id="login-form">
    <input 
        required
        maxlength="15"
        type="text" 
        placeholder="What is your name?" 
        value="name"
    />
    <button>Log In</button>
</form>

input 안에 있는 button을 누르거나, input type이 submit인 input을 누르면 작성한 form이 submit 되고, 페이지가 새로고침 된다.

Login 새로고침을 막기 위해서는?

함수의 괄호를 보게 되면 함수를 바로 실행시키기 때문에, addEventListener("submit", 함수이름)의 함수이름 뒤에 괄호를 붙이지 않는다. submit 이벤트가 발생할 때만, 브라우저가 해당 함수를 실행시키게 하기 위해서이다.

submit 이벤트가 발생하고, 브라우저가 함수를 실행시킬 때, 하나의 인자를 받는다.

모든 EventListener function의 첫번째 인자는 항상 지금 일어난 일들에 대한 정보이며, JS는 이 정보를 사용자에게 제공해준다.

prevenDefault 함수는 EventListener 함수의 첫번째 인자 안에 있는 함수로, 기본적으로 수행하는 동작을 막는 역할을 한다.

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

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

loginForm.addEventListener("submit", onLoginSubmit);

* addEventListener 안에 있는 함수는 직접 실행하지 않으며, 브라우저가 event에 대한 정보를 담아 실행해준다.

이 안에는 여러 함수가 있으며, preventDefault 함수는 event를 막아준다.

Local Storage

- 설정

localStorage.setItem("username",username);

- 확인

존재하지 않으면 null 반환한다.

localStorage.getItem("username");

Login 코드

- HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <form id="login-form" class="hidden">
            <input 
                required
                maxlength="15"
                type="text" 
                placeholder="What is your name?" 
                value="name"
            />
            <input 
                type="submit"
                value="Log In"
            />
        </form>
        <h1 id="greeting" class="hidden"></h1>
        <script src="script.js"></script>
    </body>
</html>

- CSS

.hidden {
    display:none;
}

- JS

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

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

function onLoginSubmit(event){
    event.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===null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
}
else {
    paintGreetings(savedUsername);
}

'programming > web' 카테고리의 다른 글

Data URL Schema (0)	2023.01.21
[CSS] 폰트 적용 (0)	2023.01.17
[바닐라 JS] 크롬 앱 만들기 (3) (0)	2023.01.15
[바닐라 JS] 크롬 앱 만들기 (2) (0)	2023.01.15
HTML, CSS, JS (0)	2023.01.08

현재글[바닐라 JS] 크롬 앱 만들기 (1)

hehehe