[바닐라 JS로 크롬 앱 만들기] #4 ~ #6 정리

• 강의 링크: https://nomadcoders.co/javascript-for-beginners/lobby
• 강의 주제: 모멘텀 클론 코딩 with Vanilla Javascript

Login

const loginForm = document.querySelector("#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");

같은 내용

input의 value값을 console에 불러오기

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

function onLoginBtnClick(){
    console.log(loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClick);

username 유효성 검사

1. username이 비어있지 않도록
2. 너무 긴 username X

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

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

loginButton.addEventListener("click", onLoginBtnClick);

그런데 이를 js에서 할 것 없이 이미 html에서 지원하는 기능임

→ input의 유효성 검사를 위해서는 form안에 input이 있어야 함

<form id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?"/>
        <button>Login</button>
    <script src="app.js"></script>
    </form>

유효성 검사는 되나 문제가 생김

→ 버튼을 누르면 refresh되면서 value가 사라짐

→ form 안의 input 버튼이 submit 기능을 하기 때문에

→ 따라서 버튼의 click을 더이상 신경 쓸 필요 X

→ form을 submit하는 것이 중요

loginForm.addEventListener("submit", onLoginSubmit);

Event가 발생할 때 브라우저가 function을 호출하는데, 이때 onLoginSubmit()과 같이 빈 상태가 아닌 onLoginSubmit(something)과 같이 첫 번째 argument로 추가적인 정보를 가진 채로 호출한다

function onLoginSubmit(event){   //event라고 작성하는 것이 관행
    event.preventDefault();  
    const username = loginInput.value;
    console.log(username);
}

→ 발생할 일에 대해 필요로 할만한 정보들을 줌 (지금 막 벌어진 일들에 대한 정보)

• preventDefault(): 어떤 event의 기본행동*이든지 발생되지 않도록 막는 것
  • 기본행동: 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작 (ex. form을 submit하면 브라우저가 자동으로 페이지를 새로고침하도록 되어있음)

---

CSS를 이용하여 내용 숨기기

이름을 입력받은 후에 input을 숨기기 위함

//style.css
.hidden{
    display:none;
}

//javascript
function onLoginSubmit(event){
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add("hidden");
    console.log(username); //just for checking
}

``를 활용하여 변수명 쉽게 불러오기

greeting.innerText = "Hello " + username;
greeting.innerText = `Hello ${username}`;

같은 표현!

Local Storage

브라우저에 무언가를 저장할 수 있게 함

뭐가 들었는지 보고 싶으면 개발자툴(f12) → (>>>의)Application → Local Storage에서 볼 수 있음

• setItem: local storage에 정보 저장 가능

  • localStorage.setItem("username", "nico")

• removeItem: 삭제

  • localStorage.removeItem("username")

• getItem
• localStorage를 활용하여 사용자 이름을 저장하기

  • function onLoginSubmit(event){
        event.preventDefault();
        loginForm.classList.add(HIDDEN_CLASSNAME);
        const username = loginInput.value;
        console.log(username);
        localStorage.setItem("username", username);
        greeting.innerText = `Hello ${username}`;
        greeting.classList.remove(HIDDEN_CLASSNAME);
    }

Loading Username

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
} //위에 반복되는 코드가 있기 때문에 함수로 만들어줌

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

---

setInterval

interval: 매번 일어나야 하는 무언가

setInterval(실행할 function, ms 기준 실행 간격)

setTimeout

setTimeout(호출하려고 하는 function, 기다릴 시간 ms 기준)

Date()

const date = new Date()     //오늘 날짜를 가져옴
date.getDate()    //날짜를 가져옴
date.getDay()    //요일을 (숫자로) 가져옴 (일요일 0 ~ 토요일 6)
date.getHours()
date.getMinutes()
date.getSeconds()

padStart()

string에 쓸 수 있는 function

"1".padStart(2, "0")
//"1"이 2자리로 이루어져 있어야 하는데, 만약 그렇지 않다면 "0"을 추가하기

• 같은 원리로 padEnd()도 사용 가능

---

Math.random()

random()은 0부터 1 사이의 랜덤한 숫자를 제공

ex. 0.993921124

0부터 10 사이의 숫자를 얻고 싶다면?

Math.random() * 10

0부터 10 사이의 정수를 얻고 싶다면?

Math.round()   //반올림
Math.ceil()    //올림
Math.floor()   //버림

위 세 가지 중 하나를 활용한다

Math.floor(Math.random()*10)

 

quotes의 숫자를 직접 세지 않도록 변경

quotes[Math.floor(Math.random() * quotes.length)]

---

배경 이미지 추가하기 (랜덤하게)

createElement()

js에서 html의 element를 생성할 수 있도록 함

appendChild()

body에 append 시키기 위해 사용 (가장 뒤에 추가)

cf. prepend: 가장 위에 추가