HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>valila js</title>
</head>
<body>
<div id="login-form">
<input type="text" placeholder="What is your name?" />
<button>Log in</button>
</div>
<script src="web.js"></script>
</body>
</html>
결과
자바스크립트에서 HTML 불러오는 방법
const loginForm = document.getElementById("login-form");
id가 "login-form"인 요소를 가져옴으로 자바스크립트 문서내에서 더 편하게 사용 가능
id에 속해있는 요소를 불러오는 방법
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");
/* 위 아래 같은 기능 */
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
1. 위에서 "loginForm = (id = login-form)" 이라는 함수를 선언했기 때문에 document에서 찾지 않는 방법
2. 문서에서 바로 찾는 방법
이벤트를 활용해서 value를 가져오는 방법
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function handleLoginClick() {
console.log(loginInput.value)
}
loginButton.addEventListener("click", handleLoginClick);
아이디를 입력하고 로그인 버튼을 누르면 콘솔에 입력한 값을 가져온다.
결과
유효성 검사
- 이벤트를 이용해서 아이디 값을 가져올 때 값이 비어있거나 너무 길면 안되게 설정할 필요가 있다.
- 자바스크립트에서도 할 수 있지만 HTML 기본 속성으로도 가능
자바스크립트 활용
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function handleLoginClick() {
const username = loginInput.value;
if(username === "") {
alert("please write your name");
} else if(username.length > 15) {
alert("name is too long.")
}
console.log(loginInput.value)
}
loginButton.addEventListener("click", handleLoginClick);
username이 비어있다면 : "please write your name" 경고 출력
username이 15자리보다 길다면 : "name is too long" 경고 출력
HTML 활용
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
<button>Log in</button>
</form>
<!--
required : 무조건 값을 입력 해야함
maxlength : 최대 길이
-->
input의 유효성 검사를 하려면 div가 아니라 form 내부에 있어야 한다.
- 값을 비우고 로그인을 누르면 페이지 자체에서 입력창 아래에 경고 문구가 나온다.
- 값을 입력하면 웹사이트가 재시작 됨
➝ 원인 : form의 기본동작은 submit 이기 때문에
문제 해결
- .preventDefault 사용 : event의 기본 동작을 제한
JavaScript
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event) {
event.preventDefault(); // 이벤트의 기본 행동을 작동하지 않게함
console.log(event);
}
loginForm.addEventListener("submit", onLoginSubmit);
/* SubmitEvent {isTrusted: true, submitter: button,
type: 'submit', target: form#login-form,
currentTarget: form#login-form, …} */
- addEventListener 안에 있는 함수는 직접 실행하지 않고 브라우저가 실행
- 추가적으로 함수의 첫 인자에게 해당 이벤트에 대한 정보를 알려준다.
'JavaScript' 카테고리의 다른 글
| [노마드 코더] 로그인 기능 구현 (1) | 2023.11.14 |
|---|---|
| [노마드 코더] local storage (1) | 2023.11.13 |
| [JavaScript] CSS 활용한 스타일 변경(className, classList, .toggle) (0) | 2023.11.11 |
| [JavaScript] Event (0) | 2023.11.10 |