노마드 코더 바닐라 JS 챌린지 7일차

6일차 강의는 중복이라서 정리도 쉬고 코드챌린지가 아닌 퀴즈에 일요일은 휴일이라서

자바스크립트는 주말내리 푹 쉬고 이제 다시 4챕터 강의를 정리한다

월, 화 2일에 걸쳐 8개강의에 코드챌린지가 2일짜리여서 오늘4강을 정리하고 

가능하다면 코드챌린지를 끝내고 내일은 가볍게 3강만 한 후에 리액트 공부를....

---

#4.0 Input Values

-javascript에서 요소를 가져올 때 선택자로 다음과 같이도 사용할 수 있다.

<div class="login-form">
	<input type="text" placeholder="이름이 뭐니?"/>
   	<button>로그인</button>
</div>

다음과 같은 html에 대해 자바스크립트에서 선택할 때 상위 div를 선택자로 변수에 넣은 후 그 변수에 선택자를 또 사용할 수도 있다.

const loginForm = document.getElementClassName("login-form");
const loginInput = loginForm.querySelector("input");
const loginBtn = loginForm.querySelector("button");

//또는
const loginInput = document.querySelector("#login-form input");
const loginBtn = document.querySelector("#login-form button");

-로그인 버튼에 클릭 이벤트를 만들 때는 해당 선택자를 담은 변수에 이벤트리스너를 추가해주고 해당 이벤트,  함수를 넣어준다. input에 입력한 value를 보고 싶을 때는 console.dir(input태그선택자);를 해주면 해당 정보를 알 수 있는데 뒤에 .value property를 붙여주면 input의 value를 자바스크립트에서 가져올 수 있다.

const onLoginBtnClick = () => {
	//object의 정보가 보고싶을때는 dir()을 사용한다
    console.dir(loginInput.value);
    console.log("click!!");
}

loginBtn.addEventListener("click", onLoginBtnClick);

 

#4.1 Form Submission

-위 강의에서 사용한 코드의 유효성 검사를 한다

function onLoginBtnClick(){
	const value = loginInput.value;
    //value값이 비었는지 유효성 검사
    if(value === "") {
    	alert("Please write your name");
    //value값의 길이가 15초과인지 유효성 검사
    } else if(value.length>15){
    	alert("Your name is too long.");
    }
}

-input의 유효성 검사를 작동시키기 위해서는 input태그가 form태그 안에 있어야 된다.

-input 태그 안에서 required로 필수입력, maxlength/minlength로 최대/최소 길이를 정할 수 있다

-form태그 안에서 버튼을 누르거나 input type이 submit인 input을 클릭하면 form이 submit되는데 그때마다 값이 넘어가고 브라우저는 새로고침된다.

#4.2 Events

-form의 submit이 일어날 떄 event가 발생하는걸 중간에 막거나 중간에 개입해서 submit event가 발생한 것을 알고싶을 때는 아래와 같이 submit이벤트가 발생했을때 콘솔에 value를 보여주면 된다. submit되는 동안 스치듯이 console창에 값이 보이는 것을 확인할 수 있다

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

function onLoginSubmit(){
	const username = loginInput.value;
    console.log(username);
}

loginForm.addEventListener("submit", onLoginSubmit);

-addEventListener의 두번째 매개변수 함수에 ()를 붙이지 않는 것은 바로 실행을 하지 않는다는 의미이다. 첫번째 매개변수에 들어간 이벤트가 해당 함수를 실행 시켜주는 것이다

-event가 발생할 때 브라우저가 function을 호출하게 되는데, 어떤 정보를 브라우저가 보여주고 있는지 보여주기 위해서 첫번째 argument로써 추가적인 정보를 가진채로 호출을 한다. 

-함수에 아무 이름으로나 인수를 넣어서 그 이벤트를 console.log하면 해당 함수로 발생한 일에 대해 필요할 만한 정보를 event object로 보여준다.

-모든 EventListener function의 첫번째 argument는 항상 벌어진 일들에 대한 정보가 될 것이다

 

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

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

loginForm.addEventListener("submit", onLoginSubmit);

-preventDefault()함수가 하는 일은 어떤 event의 기본 행동이든지 발생되지 않도록 막는것이다. 위 코드에서는 해당 코드가 submit되지 않도록 기본행동을 막은 것이다

 

 

#4.3 Events part Two

-JS에서 alert()는 태그의 기본 행동을 잠시 막기는 하지만 확인을 누르면 다시 실행된다(사용잘 안함)

-EventListener 함수의 실행 정보에는 마우스 클릭을 한 좌표(x, y)를 알 수 있어 그것으로 많은 것들을 할 수 있다. 이 외에도 이벤트에 대한 많은 이벤트들이 존재한다