[JS] 노마드코더 - 바닐라JS로 크롬 앱 만들기 (4.0 ~ 4.1)

 

 

- getElementById(”login-form”)

: #을 사용하지 않아도 id 라는 것을 자동으로 인식한다.

 

- querySelector(”#login-form”)

: #으로 정확히 id 인 것을 명시해줘야 한다.

(classname, tagname 모두 검색 가능하기 때문에)

 

[ 순서 ]

1. HTML에서 form을 찾기 - document.getElementById 를 통해서
2. input / button 찾기 - document가 아닌 loginForm에서 찾기

const loginForm = document.getElementById("login-form");

const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

 

cf.) 더 짧게 작성하기

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

 

 

 

- input 안에 값 = value

- string 의 길이 = .length

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

 

 

위의 코드(if문) 대신 브라우저 자체 기능을 사용할 수 있다.

input의 유효성 검사를 작동시키기 위해서는 HTML에서 input이 form 안에 존재해야 한다.

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

 

cf.) 위와 같이 코드를 작성했을 때, 값을 입력하는 즉시 없어져 버림. (*이유: form이 submit 되고 있기 때문)