오늘은 유저의 정보를 얻는 로그인 작업을 정리해보겠다.
📖Login
우선 유저에게 유저 정보를 물어본 뒤, 그 정보를 어떻게 받을 것인가에 대해 배울 것이다.
1. input / button
-Javascipt에서 value를 가져오기 위해서는 html에서부터 시작해야한다. 우선 html을 작성한 다음 html에서 element들을 끌고와야 한다.
✍ example
//html
<body>
<div id="login-form">
<input type="text" placeholder="What is your name?"/>
<button>Log in </button>
</div>
</body> ✔ 결과 확인
input태그를 사용하여 유저의 정보를 입력받음.button태그를 이용하여 정보를 입력하고 제출하는 버튼 생성.
-그 다음 유저에게 받은 정보를 사용하기 위해서는 html에 만든 태그를 Javascript로 끌고 와야한다.
✍ example
//javacript
const loginForm=document.querySelector("#login-form")
const loginInput=loginForm.querySelector("input");
const loginButton=loginForm.querySelector("button");loginForm은 html의 element를 Javascirpt로 끌고 온 것.- 따라서
document가 아닌loginForm에서input태그와button태그를 바로 찾을 수 있음. - 로그인창에서 유저에게 받은 정보를 가져오려면
input의value라는 property를 활용해야 함.
2. username의 유효성 검사하기
-로그인 창에서 username이 비어있거나 너무 길지 않도록 username의 유효성을 검사해보자.
✍ example
//javascript
function handleLoginBtnClick(){
const username=loginInput.value;
if(username===""){
alert("Please write your name!");
}else if(username.length>=15){
alert("Your name is too long!");
}
} ✔ 결과 확인
-html의 기본 속성을 이용해서도 유효성 검사를 할 수 있음.
✍ example
//html
<form id="login-form" class="hidden" >
<input
required
maxlength="15"
type="text", placeholder="What is your name?"/>
<button>Log IN</button>
</form>input태그를 이용하여input을 필수입력 항목으로 만들수있고maxlength를 설정할 수도 있음.input의 유효성 검사를 작동시키기 위해서는input이form태그 안에 있어야 함.
👉Javascript로 모든 것을 구현하는 대신 html의 기본 속성을 최대한 이용하는 것이 좋다!!!
3. form의 submit의 새로고침 막기
-submit event를 이용해서 form의 submit의 새로고침을 막아보자. 브라우저는 form이 submit이 될 때 새로고침을 하도록 프로그래밍이 되어 있다.
✍ example
//javascript
function onLoginSubmit(event){
event.preventDefault();
console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit);- event가 발생할 때 브라우저가 function을 호출하게 되는데, 이때
onLoginSubmit()이렇게 인수가 비어있는 상태로 호출하는 것이 아니라 함수의 첫 번째 인수에 추가적인 정보를 가지고 호출하게 됨. - 따라서
onLoginSubmit()함수가 하나의 argument를 받게 하고 이를 Javascript에 넘겨줌. preventDefault()함수는 어떤 event의 기본 행동이 발생되지 않도록 막음.
👉 따라서 form을 submit하면 브라우저가 기본적으로 페이지를 새로고침하는 것을 preventDefault() 함수를 통해 막을 수 있는 것!!!!
✔ 결과 확인
onLoginSubmit()함수가 하나의 event를 argument로 받은 것을 콘솔 창에서 확인 가능.
4. Getting Username
-로그인 창에 정보를 입력하고 나서 나오는 form을 삭제할 것. 방법은 2가지 html요소 자체를 삭제하거나, CSS를 이용하거나.
✍ example
.hidden{
display: none;
}- 어떤 요소에게든
hiddenclassname을 주면, 그 요소를 숨기게 됨.
✍ example
function onLoginSubmit(event){
event.preventDefault();
loginForm.classList.add("hidden");
const username=loginInput.value;
console.log(username);
}preventDefault()로 기본 동작인 새로고침은 실행되지 않도록 막음- event가 실행되면 css에 구현한
hidden을 더해줘서 form을 숨김.
✔ 결과 확인
- form은 사라졌지만 입력값은 console에 기록됨.
-이제 form은 숨기고 username을 가져와서 화면에 보여주는 작업을 해보자.
✍ example
//html에 h1태그 추가
<h1 id="greeting"></h1>//javascript
const greeting=document.querySelector("#greeting");
const HIDDEN_CLASSNAME="hidden";
function onLoginSubmit(event){
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username=loginInput.value;
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}const username=loginInput.value;에서 유저의 이름을 변수에 저장해주고, 그 이름은 h1에 넣음.greeting.innerText = `Hello ${username}`;은 비어있는 h1 코드에 hello +username이라는 텍스트를 넣어주는 것.greeting.classList.remove(HIDDEN_CLASSNAME);h1에서 hidden을 삭제해서 화면에 출력되게 만들어줌. 결국 form만 숨겨지게 됨.
👉`Hello ${username}`는 문자열과 변수를 이을 때 사용. 사용할 때에는 ${변수명}의 형태로 사용. 그 뒤에 뭘 추가해도 상관없고 변수명 값을 스트링으로 바꿔줌 단, 주의할 점!! 따옴표가 아니라 ``(백틱)을 사용해야 한다!!
✔ 결과 확인
✔ 마치며
다음 포스팅에서는 시계를 설정 해보겠습니다. 😊
처음에는 직접 하나씩 해석하며 작성했는데 오류떠서
Document한참 살펴보다
복붙이라도 해봤는데 팝업창이 안뜨는데 혹시 이유를 알려주실 수 있습니까>?!
const loginForm=document.getElementById("#login-form")
const loginInput=loginForm.querySelector("input");
const loginButton=loginForm.querySelector("button");
function handleLoginBtnClick(){
const username=loginInput.value;
if(username===""){
alert("Please write your name!");
}else if(username.length>=15){
alert("Your name is too long!");
}
}