<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
</head>
<body>
<form id="loginForm">
<input type="text" id="mid" placeholder="아이디">
<input type="password" id="mpw" placeholder="비밀번호">
<button type="submit">로그인</button>
<!-- <input type="submit" value="로그인"></input> -->
</form>
<script>
const form = document.getElementById('loginForm');
const inputId = document.getElementById('mid');
const inputPw = document.getElementById('mpw');
form.addEventListener('submit', function (event) {
event.preventDefault();
const mid = inputId.value;
const mpw = inputPw.value;
if (mid === 'admin' && mpw === '1234') {
alert('관리자님 환영 합니다.');
} else {
alert('유효 하지 않는 아이디 또는 비밀번호 입니다.');
}
});
</script>
</body>
</html>
1.
<button> 태그를 사용 해서 submit을 해도 되고,
<input> 태그를 사용 해서 submit을 해도 된다.
2.
DOM (Document Object Model)
DOM은 웹 페이지의 구조를 트리 형태로 표현 하는 모델 이다.
웹 페이지의 HTML 요소들을 자바스크립트로 조작할 수 있는 방법이다.
3.
getElementById()
getElementById() 메서드는 주어진 아이디 값을 가진 HTML 요소를 찾아서 반환 한다.
웹 페이지에서 고유한 아이디를 가진 요소를 찾을 때 사용 된다.
위의 경우라면, loginForm, mid, mpw 가 고유한 식별자 == 아이디 이다.
4.
addEventListener('submit', function (event) { ... } )
addEventListener() 메서드는 아래와 같다.
폼 요소에서 제출 (submit) 이벤트가 발생 했을 때,
실행될 함수를 등록 하는 코드 이다.
즉, 이벤트 핸들링에 사용 된다.
위의 경우 라면,
form.addEventListener('submit', function (event) { ... } ); 인데,
폼 요소의 식별자인 loginForm 을 getElementById() 메서드를 사용해서,
form 이라는 변수에 저장 한다.
그래서 form.addEventListener() 이고,
여기서는, 폼이 제출 될 때 상황이라, 'submit' 이다.
이렇게 이벤트 핸들러를 작성해서, submit 이 발생 했을 때,
동적으로 구현 할 수 있다.
5.
event.preventDefault()
preventDefault() 메서드의 주체인 event는 이벤트 객체인 event 이다.
이벤트 객체는 이벤트가 발생 했을 때,
해당 이벤트에 대한 정보와 동작을 포함 하고 있는 객체 이다.
이벤트 핸들러 함수의 첫 번째 매개변수로 전달되고,
일반적으로 매개변수명은 event 로 작성하나, 다른 이름으로도 사용 된다.
preventDefault() 메서드는 이벤트 객체의 메서드 이다.
이벤트의 기본 동작을 막는 역할을 수행 한다.
이벤트의 기본 동작은, 브라우저가 해당 이벤트가 발생 했을 때,
기본적으로 수행하는 동작을 의미 한다.
암튼 이것저것 정보가 콘솔창에 찍혀 있다.
6.
=== 와 == 의 차이점
==
>> 동등 연산자
값만 비교 한다. 자료형이 다르더라도 형 변환 후에 값이 같으면 true를 반환.
===
>> 일치 연산자
값과 자료형 모두 비교 한다. 값과 자료형이 같아야 true를 반환.
사용자가 form 태그 내부에 입력한 값들은 모두 문자열 타입 이고,
mid === 'admin'
mpw === '1234' 라고 되어있을 때,
타입이 문자열로 같을 수 밖에 없는 코드이기에,
값만 같으면 OK.
만약에,
1 == "1" 이면 true가 나온다.
값만 비교해서, 숫자와 문자열 비교시, 숫자로 변환 된다.
근데,
1 === "1" 이면 false가 나온다.
값은 같은데, 자료형이 다르기 때문이다.
'자바스크립트 (JavaScript) > 예제' 카테고리의 다른 글
| [ 함수 ] 콜백 (Callback) 예제 (1) | 2023.12.10 |
|---|---|
| 달력 예제 (1) | 2023.08.27 |
