NomardCoder: greeting-3
1. 입력 칸, 버튼 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Momentum App</title>
</head>
<body>
<div id="login-form">
<input type="text" placeholder="what is your name?" />
<button>Log In</button>
</div>
<script src="./project4.js"></script>
</body>
</html>
const loginForm = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function loginbtnclick() {
console.log(loginInput.value);
}
loginButton.addEventListener("click", loginbtnclick);
* 기도라고 입력시 콘솔에 입력값 출력
2. 입력값 유효성 확인(공백 or 글자수 등등)
const loginInput= document.querySelector("#login-form input")
const loginButton = document.querySelector("#login-form button")
function loginbtnclick() {
const username = loginInput.value;
if(username === "") {
alert("Please write your name");
} else if(username.length > 15) {
alert("Your name is too long.")
}
}
loginButton.addEventListener("click",loginbtnclick)
* 입력값이 15자가 넘으면 alert이 뜨게 함
→ alert을 쓰는건 지양! html로도 글자수 제한 및 공백시 user에게 경고 가능!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./project4.css">
<title>Momentum App</title>
</head>
<body>
<form id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="what is your name?"
/>
<input type="submit" value="InPut">
</form>
<script src="./project4.js"></script>
</body> </html>
3.submit한 form의 값 불러오기 (submit event감지) / 새로고침은 여전히 진행중
const loginForm = document.querySelector("#login-form")
const loginInput= document.querySelector("#login-form input")
function onLoginSubmit() {
const username = loginInput.value;
console.log(username);
}
loginForm.addEventListener("submit", onLoginSubmit);
* 클릭시 입력값이 받아지고 바로 새로고침됨(alert으로 하면 확인 가능)
어떤 function에 argument공간을 만들어준다면 event에 대한 정보를 지닌 첫번째 argument를 js에서 우리에게 제공함
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(info) {
info.preventDefault();
// const username = loginInput.value;
console.log(info);
}
loginForm.addEventListener("submit", onLoginSubmit);
* 뭔가 정보를 얻고 있다는 증거임
4. preventDefault
* 어떤 function에 대해(event에 대해)브라우저가 기본적으로 수행하는 기본행동이 발생하는것을 막아줌
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event) {
event.preventDefault();
console.log(loginInput.value);
}
loginForm.addEventListener("submit", onLoginSubmit);
* 새로고침 되지 않음
js는 함수를 실행시키는동시에 그 함수에 첫번째 인자로 object를 넣어줌. 이 object는 방금 실행한 event에 대한 정보가 들어있음
댓글남기기