4.0 Input Value

loginInput.value

// loginForm을 정의할 필요가 있을 때,
const loginForm = document.querySelector("#login-form");
const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginBtn = loginForm.querySelector("button");

// loginForm을 정의할 필요가 없을 때,
const loginInput = document.querySelector("#login-form input");
const loginBtn = document.querySelector("#login-form button");

function handlebtnClick(){
    console.log(loginInput.value); // input에 입력 된 값을 콘솔에 출력
}

loginBtn.addEventListener("click", handlebtnClick);

username의 유효성 검사

1. if 작성할떄, [false, "", !==] 등을 먼저 고려함

2. input의 유효성 검사(required, maxlength 등)을 작동시키기 위해서는 input이 form안에 있어야 한다.

// html
<div id="login-form">
      <input type="text" placeholder="What is your name?" />
      <button>Log In</button>
    </div>

// jvs
const value = loginInput.value;
    if(value === "") {
        alert("Please Write your name");
    } else if ( value.length > 15){
        alert("Your name is too long");
    }

코드를 input의 유효성 검사로 대체하자.

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

// jvs
function handlebtnClick(){
    const username = loginInput.value;
    console.log(username);
}

>> 자동으로 15개 미만 입력, 미입력시 알럿등의 기본 기능 포함됨
>> input을 입력하고 엔터를 누르거나, button을 누르면 자동으로 `submit`된다.

4.4 Getting Username

${} 사용법

greeting.innerText = "hello " +`${username}`;
greeting.innerText = `hello ${username}`;
> 둘다 결과적으로 같다.

---

4.6 Loading Username

내가 풀어본 코드

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();
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `hello ${username}`;
    
}

loginForm.addEventListener("submit", onLoginSubmit);

// 내가 만든코드
로컬스토리지에 저장된 username이 있으면 form 숨기기
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){ // 저장된 username이 없다.
    // show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);

} else { // 저장된 username이 있다.
    // show the greeting
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `hello ${savedUsername}`;
}

니꼬 코드

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();
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `hello ${username}`;
    
}

loginForm.addEventListener("submit", onLoginSubmit);

// 니코 코드
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
} else {
    // loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${savedUsername}`;
}

두 코드 비교 > 결과값이나 효율성에 차이없음!

---