nomadcoder - Javascript | login form 만들기

const loginForm = document.querySelector("#login-form");

 

document에서 id가 login-form인 요소를 찾아 loginForm이라는 변수에 할당

 

const loginButton = document.querySelector('.login-form');
const loginButton = loginForm.querySelector("button");

 

위 두 코드는 같은 의미를 지니는데

1) document에서 class가 login-form인 요소를 찾아 lodginButton이라는 변수에 할당

2) loginForm에서 button을 찾아 loginButton이라는 변수에 할당

 

--> html을 보면 <form>안에 <button>이 있는 구조를 가지고 있음

 

💡 _______.querySelector에서 _______ 부분에는 document만 들어갈 수 있는 것이 아니고

    '어디'에서 찾는다는 정보를 넣는 것이라는 것을 알게 되었다 ! (loginForm에서 찾을 땐 그걸 넣어주는 것 처럼)

 

document.getElementById
document.getElementsByClassName
document.getElementsByTagName
document.querySelector
document.querySelectorAll

 

💡 getElementId와 querySelector, querySelectorAll만 알고 있었는데 더 다양한 것들이 있었다

 

 

addEventListener로 submit 이벤트가 발생할 때 onLoginSubmit 함수가 호출되도록 만든 로직

여기서 onLoginSubmit 함수에 event parameter를 넣어준 뒤 console 에서 확인해보자

 

--> 현재 event에 대한 정보를 담은 객체데이터를 볼 수 있다 !

 

💡 자바스크립트는 함수를 실행시킴과 동시에 첫 번째 인자로 객체를 넣어준다

그 객체에는 방금 일어난 event에 대한 여러 정보가 담겨 있다.

 

loginForm.addEventListener("submit", onLoginSubmit());

 

--> 이런 식으로 ()를 넣어 함수를 바로 실행시키는 방식을 사용하면 안됨 !

 

 

<a>의 기본 동작은 그 링크로 이동하는 것인데 event.preventDefault()를 사용해서 기본 행동을 막아서

a태그 부분을 클릭해도 이동하지 않는 모습 !

<a href="https://nomadcoders.co/">Go to courses</a>

 

 

.hidden {
  display: none;
}

 

 

input에 값을 입력하고 엔터를 누르면 form요소는 사라지게 만들고 h1 요소가 나타나게 만들기

 

💡 classList 객체는 여러 가지 유용한 메서드를 제공하여 요소의 클래스 목록을 쉽게 추가, 제거, 토글 및 확인할 수 있다. 이 프로퍼티는 Element 인터페이스의 표준 프로퍼티로 모든 HTML 요소에서 사용할 수 있다.

주요 메서드와 사용 예제

1. add: 하나 이상의 클래스를 추가합니다.
2. remove: 하나 이상의 클래스를 제거합니다.
3. toggle: 클래스가 존재하면 제거하고, 존재하지 않으면 추가합니다.
4. contains: 클래스가 존재하는지 여부를 확인합니다.
5. replace: 특정 클래스를 다른 클래스로 교체합니다.

 

💡 innerText 프로퍼티는 HTML 요소의 텍스트 콘텐츠를 설정하거나 가져오는 데 사용된다. innerText를 사용하면 요소의 모든 자식 요소를 포함한 텍스트 내용을 읽거나 변경할 수 있다. 텍스트를 설정할 때는 원하는 문자열을 입력할 수 있으며, 해당 문자열은 요소의 텍스트 콘텐츠로 반영된다.

 

 

--> onLoginSubmit 함수가 실행되면 form에는 hidden 추가, a에는 hidden 삭제

innerText로 텍스트 콘텐츠 설정한 것이 들어가는 것이 잘 보이고 있음

 

 

💡 local storage는 브라우저에 무엇인가를 저장할 수 있다. 정보를 저장하고 불러오고 삭제하는 브라우저의 작은 DB 같은 API ! 개발자도구의 application에서 볼 수 있다. local storage에 없는 값을 불러오려고 하면 null이 나온다.

 

key, value를 줘서 setItem하면 local storage에 저장됨

 

예제

 

input에 값을 넣고 엔터를 누르면 submit 이벤트가 발생한다. 이때 onLoginSubmit 함수가 실행된다

--> event.preventDefault()로 브라우저의 기본 동작을 막아주고

--> loginForm에 hidden class 추가해서 숨겨준다

--> 입력받은 값을 userName에 저장해주고 로컬 스토리지에 저장한다

--> greeting에 hidden class를 삭제하고 innerText로 문장을 넣어준다.

 

 

 

 

전체 코드

 

 

 

 

 

 

 

 

---

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN