JS, Login Part-1

1. Input Values

2. form submit의 유효성 체크

3. event part-1(preventDefault function)

4. event part-2(link의 기본 동작)

1. Input Values

1-1) Javascript

const loginFrom = document.getElementById("login-form");
const loginInput = document.querySelector("input");
const loginButton = document.querySelector("button");

const loginInput = document.querySelector("#login-form input");
cosnt loginButton = document.querySelector("#login-form button");

function onLoginBtnClick() {
	console.log("click!!!!!");
}

loginButton.addEventListener("click", onLoginBtnClick);

Console

1-2) HTML

<div id="login-form" >
	<input type="text" placeholder="What is your name?" />
	<button>Login</button>
</div>

2. form submit의 유효성 체크

새로고침이 일어나는 건 form submit의 기본 동작임.
브라우저가 그러도록 프로그래밍 되어 있음.
브라우저는 엔터를 누를 때마다 새로고침을 하고 form을 submit하도록 되어 있음.
브라우저는 이 버튼을 누를 때도 같은 행동을 하도록 프로그램밍 되어 있음.

2-1) required

JS에서 if else에서 처리하는 것보다 input 태그에 속성을 주는 게 효율적임.

<body>
<form id="loing-form">
	<input required maxlength="15" type="text" placeholder"What is your name?"/>
	<button>Login</button>
	<input type="submit" value="Login" />
</form>
<script src=app.js"></script>
</body>

form 안에서 엔터를 누르고 input이 더 존재하지 않는다면 자동으로 submit된다는 규칙
submit은 엔터를 누르거나 버튼을 클릭할 때마다 발생한다는 사실을 기억하기 !!!!

3. event part-1(preventDefault function)

어떤 Event의 기본 행동이든지 발생되지 않도록 막는 거임.
preventDefault function을 통해 기본 동작을 막고 있는 거임.
event.preventDefault()로 이렇게 작성하는 게 관행임.

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

function onLoginSubmit(event) {
	event.preventDefault();        // 새로고침 멈추기
	console.log(event);            // app.js:7
	console.log(loginInput.value); // app.js:8
}

loginForm.addEventListener("submit", onLoginSubmit);

Console

4. event part-2(link의 기본 동작)

가끔은 뭐가 클릭됐는지 어디가 클릭됐는지 정보를 알고 싶을 때가 있음.

그럴 때 JS는 단순히 함수를 실행시키만 하는 게 아니라

함수를 실행시키는 동시에 그 함수에 첫 번째 인자로 object를 넣어줄 거임.

4-1) HTML

<body>
	<form id="login-form">
		<input required maxlength="15" type"text" placeholder="What is your name?" />
		<input type="submit" value="Login" />
		<a href="<https://nomadcoders.co>">Go to courses</a>
	</form>
</body>

4-2) Javascript

document.body
- body는 특별해서 이렇게 body를 호출할 수 있음.
Q : document.div는 가져올 수 없을까?
- 가져올 수 없음.
- document의 body, head, title 이런 것들이 중요하기 때문에 이렇게 존재하는 거임.
- 나머지 elements들은 querySelector나 getElementById 등으로 찾아와야 함.

const loginForm = document.querySelector(#login-form);
const loginInput = document.querySelector(#login-form input);
const link = document.querySelector("a");

function onLoginSubmit(event) {
	event.preventDefault();
	console.log(loginInput.value);
}

function handleLinkClick(event) {
	event.preventDefault();
	console.log(event);
	// dir() 세부사항을 볼 수 있음.
	console.dir(event);
}

loginForm.addEventListener("submit", onLoginSubmit);
/* link.addEventListener("click", handleLinkClick());
	 ()를 추가하면 한 번만 실행되고 그걸로 끝임.
	 *** 절대 넣지 말기!!! ***	
*/
link.addEventListener("click", handlerLinkClick);

4-2)-1. Console

내가 클릭한 위치의 x, y 좌표를 보여주고 있음.
유저가 어디를 클릭했는지 알아야할 때가 있기도 함.

Untitled

4-2)-2. console.dir()

Untitled