바닐라 JS로 크롬 앱 만들기 - 3

벌써 chapter4 (ૂ❛ᴗ❛ૂ) !! 앞에서 배운 JavaScript를 활용하여 실제 구현하기 .. 개발 아르바이트를 시작하면서 일이 많아져서 글쓰기 힘들어지기 시작했다ㅠ_ㅠ 그래도 포기하지 말고 홧퉹

🔍 4.0 Input Values

📍value를 기억하는 Javascript

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

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

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

loginButton.addEventListener("click" ,onLoginBtnClick );

🔍4.1 Form Submission

📍유효성 검사
username 값이 필수면서 15자 이하여야 함

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

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

function onLoginBtnClick() {
	const username = loginInput.value
    if(username === "") {
    	alert("이름을 작성해주세요.");
    } else if(username.length > 15) {
   		alert("15자 이하로 작성해주세요");
    }
}

loginButton.addEventListener("click" ,onLoginBtnClick );

📍input 안에서 값 제어
required : 필수값
maxlength : 최대글자수
...등등

🔍 4.2~3 Events 1,2

📍submit 조건
1. form안에 있는 button
2. type이 submit인 input

📍submit 제어

함수의 첫번째 인자는 이벤트에 대한 정보를 담고 있음
preventDefault() : 브라우저의 기본동작을 막아줌

loginForm.addEventListener("submit" , onSubmit);

onSubmit(e) {
	e.prventDefault(); 
}

🔍 4.4 Getting Username

📍변수를 string 안에서 사용할 수 있음

<input type="text" class="name" value="jungho" />
const username = documentquerySelector(".name").value; 
div.innerText = "Hello" + username;
div.innerText = `Hello  ${username}`;

🔍 4.5 Saving Username

📍local storage에 저장
local storage는 브라우저에 무언가 저장할 수 있게함

<input type="text" class="name" value="jungho" />
 const username = documentquerySelector(".name").value; 
 localStorage.setItem("username" , username);


localStorage.getItem("username")

//username 이 없으면 null