Javascript input, Values

정유영·2022년 1월 25일
0

Js 입문기

목록 보기
8/11
post-thumbnail

Input, Values

빨간박스

const loginInput = document.querySelector('.login-form input');
const loginButton = document.querySelector('.login-form button');
class를 불러올 때 css에서 불러오는 것 처럼 .login-form input 이렇게 불러오면 된다.

파란박스

function loginButtonClick() {consol.log("hello", loginInput.value);
loginButton.addEventLitener("click", loginButtonClick)
전에 배웠던 내용이지만 한번 더 복습하자면 addEventLitener에 function을 넣을때 ()을 넣으면 자동실행이 되기 때문에 항상 빼고 넣는 걸 인지해야 한다.

js를 쓰는것도 나쁘지 않다. 하지만
HTML에 이미 구현된 기능(인풋의 유효성검사)이 있으니 그걸 쓰자
근데 HTML에서 input의 유효성검사를 하기위해서는, input이 form 태그 안에 들어가있어야 한다.

따라서 div를 form으로 수정

노란색 박스

formdivform으로 바꾼것이다. input의 유효성 검사를 작동시키기 위해 input이 form안에 있어야 된다.

보라색 박스

required maxlength="15" 는 글자수 15자로 제한 한다는 함수이다.


위 사진처럼 로그인을 클릭하면 브라우저가 도와주고있다.

(<input> type="submit" value="로그인"이랑 <button>로그인</button>와 같은 코드이다.)
하지만 저대로 두면 이름을 입력하고 로그인을 클릭하면 브라우저가 새로고침이 된다.
문제는 form이 submit되면서 내용이 날라가서 user정보를 저장할 수가 없게 된다.

form submit

function onLoginSubmit(event){event.preventDefault();
브라우저가 기본 동작을 실행하지 못하게 막기 event objectpreventDefault함수를 기본적으로 갖고 있음
console.log(event);}

loginForm.addEventListener("submit", onLoginSubmit);
submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미 // JS는 onLoginSubmit함수 호출시 인자를 담아서 호출함. 해당 인자는 event object를 담은 정보들

중요

form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아님!
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다. ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

중요하니 다시 예를들어 보면서 복습하자

이렇게 링크 하나를 달아주고

자바스크립트에 alert, addEventListner 코드를 넣어주면

이렇게 뜰 것이다.
정보를 얻기 위해 전에 배웠던 preventDefault 를 넣어주면 어떻게 될까?preventDefault();를 넣어주고 정보를 보기 위해 console.dir(event);를 넣어 주면 다음과 같이 정보가 나온다.

결과는 alert창만 뜨고 링크를 걸었던 사이트로 이동하지 않는다.

profile
안녕하세요.

0개의 댓글