- JavaScript만 이용하여 Login설정
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
// html에서 element 찾고 Input한 요소 추출
// 공백, 긴 경우 alert
function onLoginBtnClick(){
const username = loginInput.value;
if(username===""){
alert("Please write your name");
}
else if(15 < username.length){
alert("Your name is too long.");
}
// // html에서 form을 사용하여 충분히 조작 가능
// console.log(username);
}
loginButton.addEventListener("click",onLoginBtnClick);- 아무것도 하지 않아도 JS가 정보(argument)를 담은 채로 function 호출함
const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
// submit은 엔터, 버튼 클릭시 발생
function onLoginSubmit(event){
event.preventDefault(); // 브라우저 기본동작 막기
//html에서 form을 사용하여 충분히 조작 가능
console.log(event);
}
loginForm.addEventListener("submit",onLoginSubmit);console
html
<body>
<form id="login-form">
<!-- input안의 버튼을 누르거나 type이 submit인 input을 클릭하면 내가 작성한 form이 submit됨. -->
<input required maxlength="15" type="text" placeholder="What is your name?" />
<button>Log In</button>
</form>
<script src="app.js"></script>
</body>- preventDefault() 사용해서 link이동 막기
const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const link = document.querySelector("a");
// submit은 엔터, 버튼 클릭시 발생
function onLoginSubmit(event){
event.preventDefault(); // 브라우저 기본동작 막기
//html에서 form을 사용하여 충분히 조작 가능
console.log(loginInput.value);
}
function handleLinkClick(event){
// 기본 동작 막음
event.preventDefault(); // 링크를 클릭해도 이동 불가
console.log(event); // MouseEvent로 실행됨, 클릭한 x,y 좌표 보여줌.
alert("clicked");
}
loginForm.addEventListener("submit",onLoginSubmit);
link.addEventListener("click",handleLinkClick);- css의 hidden 클래스를 JS를 이용해서 html을 조작, login버튼 클릭시 사라지는 기능 및 console에 Input
const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME= "hidden";
function onLoginSubmit(event){
event.preventDefault();
//h1과 form 에 hidden class 추가
loginForm.classList.add(HIDDEN_CLASSNAME);
// 변수 저장
const username = loginInput.value;
greeting.innerText=`Hello ${username}`; // string이랑 변수 합치기
//hidden 클래스 명 가지고 있는 건 form만 있도록
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit",onLoginSubmit);- 저장소를 이용한 login, 기록 유무에 따른 class 조작
const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME= "hidden";
const USERNAME_KEY="username";
function onLoginSubmit(event){
event.preventDefault();
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 saveUsername= localStorage.getItem(USERNAME_KEY);
// 저장소에 없으면 form 표시, but 저장소에 존재하면 greeting 표시
if(saveUsername===null){
// form의 hidden 클래스를 삭제하여 보여지게
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit",onLoginSubmit);
}else{
paintGreetings(saveUsername);
}
Develop Process