#1.6 Online IDE
프로그램 설치할 수 없는 상황이라면 Replit 사용하면 된다.
브라우저에서 무엇이든 코딩 가능.
프록램 설치 가능한 상황이라면 vscode설치
========================================================
#1.7 VS code에서 프로젝트 시작하기
Documents 에 mkdir momentum 이라고 입력한다.
걍 문서나 바탕화면에 momentum 이라는 이름의 폴더를 만든 후 비주얼코드에서 만든 파일을 연다.
#4.0
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum App</title>
</head>
<body>
<div id="login-form">
<input type="text" placeholder="what is your name?">
<button>Log In</button>
</div>
<script src="app.js "></script>
</body>
</html>
[app.js]
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick() {
console.log("hello", loginInput.value);
}
loginButton.addEventListener("click", onLoginBtnClick);
========================================================
#4.1 username의 유효성 검사
<input required maxlength="15" type="text" placeholder="what is your name?">
required : <input>태그를 필수입력 항목으로 만들려면 input 태그 안에 required 작성!
maxlength : <input>태그 자체적으로 최대 입력 가능 글자수 조절
input의 유효성 검사를 작동시키기 위해서는 input 태그가 form 태그 안에 위치해야 한다.
========================================================
#4.2 form 이 submit 되는 것 고치기
submit은 엔터를 누르거나 버튼을 클릭할 때 발생!
브라우저는 엔터를 누를 때 form을 submit하고 새로고침하도록 기본 프로그래밍되어있다.
preventDefault() 이 함수를 호출하면 브라우저의 기본 동작을 막을 수 있음. 즉 새로고침을 막을 수 있다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event) {
event.prevenDefault();
console.log(loginInput.value);
}
loginForm.addEventListener("submit", onLoginSubmit);
========================================================
#4.3
========================================================
#4.4
유저가 이름을 제출하면 화면에서 로그인 양식 사라지게 만들기
<style.css>
.hidden {
display: none;
}
<app.js>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event) {
event.prevenDefault();
console.log(loginInput.value);
loginForm.classList.add("hidden");
}
loginForm.addEventListener("submit", onLoginSubmit);
loginForm.classList.add("hidden")
loginForm에 클레스 이름 중 추가하는 classList.add("클래스이름") 붙이면 된다.
hidden이라는 클래스이름에 사라지는 css효과를 주었기 때문에 사라지게 된다.
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum App</title>
</head>
<body>
<form id="login-form">
<input required maxlength="15" type="text" placeholder="what is your name?">
<button>Log In</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js "></script>
</body>
</html>
<app.js>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector(".greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event) {
event.prevenDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
"Hello " + username;
'Hello ${username};
둘 다 string과 변수를 합쳐주지만 두번째 방법을 선호한다. 후자가 더 새로운 방법.
`` ${변수명}
따옴표 아니고 숫자 1 앞에 있는 키 물결표시 아래 백틱 이라는 표시다.
========================================================
#4.5 Saving Username
localStorage
마치 작은 미니 DB와 같다. key와 value만 준비하면 된다.
기억, 저장하기
localStorage.setItem("키", "값")
저장한 값 가져오기
localStorage.getItem("키")
저장한 값 삭제하기
localStorage.removeItem("키")
<app.js>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector(".greeting");
const HIDDEN_CLASSNAME = "hidden";
function onLoginSubmit(event) {
event.prevenDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem("username", username);
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);
========================================================
#4.6 Loading Username
<app.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.prevenDefault();
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);
}
========================================================
#4.7
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.prevenDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const usernameThatTheUserWorte = loginInput.value;
localStorage.setItem(USERNAME_KEY, usernameThatTheUserWorte);
paintGreetings(usernameThatTheUserWorte);
}
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);
}
========================================================