nomadcoder - Javascript | login form 만들기

Project/Mini Project

nomadcoder - Javascript | login form 만들기

dearsuhyun 2024. 8. 8. 08:19

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를 사용하면 요소의 모든 자식 요소를 포함한 텍스트 내용을 읽거나 변경할 수 있다. 텍스트를 설정할 때는 원하는 문자열을 입력할 수 있으며, 해당 문자열은 요소의 텍스트 콘텐츠로 반영된다.