1. input
HTML에 다음과 같이 코드 작성 후
JS에서 다음과 같이 login-form id 아래의 input과 button 요소을 가져왔다.
value는 input에 입력한 텍스트 값을 의미한다. 따라서 [ HTML element.value ]와 같이 input 태그에 사용자가 입력한 값을 받아올 수 있다.
이번엔 username(사용자가 입력한 값)의 유효성을 검사해보자. username이 비어있어도, 너무 길어도 안 된다.
아래와 같이 username이 공백이거나 15자를 초과하면 알림창을 띄우도록 설정했다.
이러한 방법을 사용해도 되지만, 브라우저 자체의 기능을 이용할 수도 있다. input 태그 안에 required 값을 넣으면 필수 입력항목이 되고, maxlength=" " 값을 넣으면 최대 글자수를 15로 조절할 수 있다. 하지만 이대로만 하면 Log In을 클릭할 때 HTML에서 확인 작업을 하지 않는다. input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 있어야 한다.
2. form
아래와 같이 HTML에서 input 태그를 form 으로 감싸주고
js에서 함수를 아래와 같이 입력값만 확인할 수 있게 변경해주면
공백상태에서 버튼을 누르면 아래와 같이 알림이 뜨고 15자를 초과해서 작성할 수 없게 된다.
그리고 입력값을 입력 후 Log in을 클릭하면, 페이지가 새로고침되고 URL 뒤에 ? 가 따라붙고 있다. 이는 form 안에 있는 button을 누르거나, input을 form 안에 넣었을 경우 input 안에 있는 button을 누르거나, type이 submit인 input을 클릭하면 form이 submit되기 때문이다.
submit 키워드를 이용하면 submit event가 발생했는지 감지할 수 있다. submit은 엔터를 누르거나 버튼을 클릭할 때 발생한다. 아래와 같은 코드로 form을 submit할 때 입력값을 받아낼 수 있다.
3. event object
event가 발생할 때 브라우저가 function을 호출하는데, onLoginSubmit()처럼 함수를 비어있는 채로 호출하는 게 아니라 어떤 정보를 브라우저가 주고 있는지 보여준다. 예시로 아래와 같이 인자로 tomato란 단어를 입력하고 출력해보겠다. 그러면 브라우저가 우리한테 어떤 정보를 넘겨주는지 console.log로 확인해보자.
위와 같이 코드를 작성한 후 실행해보면 방금 실행된 event에 대한 여러 정보를 확인할 수 있다. submit주체가 누구인가? 대상은 무엇인가? 언제 submit 되었는가? 등.. 방금 실행된 event에 대한 여러 정보를 얻을 수 있다.
JS는 function을 호출할 때 onLoginSubmit 함수의 첫 번째 argument(인자)로, 발생한 일에 대해 내가 필요로 할만한 정보들을 준다. 즉 모든 EventListener function의 첫 번째 argument는 항상 지금 막 벌어진 일들에 대한 정보가 된다. tomato라고 적은 것 처럼 우리는 argument 공간만 제공하면 JS가 알아서 방금 일어난 event에 대한 정보를 지닌 argument를 채워넣을 것이다. 보통은 아래와 같이 event로 작성하는게 관행이다.
preventDefault
위의 코드에서 작성한 preventDefault function은 어떤 event의 기본 행동이 발생되지 않도록 막는다. 기본 행동이란 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작이다.
누군가 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어 있다. 이 function 추가함으로써 그 기본 동작을 막고 있는것이다.
정리해보면 submit event가 발생할 때 JS는 onLoginSubmit function을 호출하고 있고, 이 때 event object를 argument로 주고 있고, preventDefault 함수로 인해 기본 동작이 실행되는 걸 막아주고 있다.
다음과 같이 a 태그를 만들었다.
저번에 form의 기본 동작이 submit이라면 링크의 기본 동작은 클릭시 다른 페이지로 이동이다. 이제 그걸 막아보자.
js에 아래와 같이 function을 만들고 link 요소에 link.addEventListener("click", handleLinkClick); 와 같이 event를 listen해주었다.
그러면 링크를 클릭했을 때, 브라우저의 기본동작인 다른 페이지로 이동이 일어나기 전에, JS에 입력한 event listen 코드에 의해 alert 알림창이 뜬다.
가장 중요한 건 addEventListener 안에 있는 함수는 직접 실행하지 않는다는 것이다. 즉 내가 하는 게 아니라 브라우저가 해주는 것. 브라우저는 실행 뿐만 아니라 event에 대한 정보도 담아 준다. 우리는 자리만 만들어주면 되고(앞서 관행적으로 event로 사용하는) 이정보 안에는 몇 가지 함수도 같이 들어있다. 우리가 사용했던 preventDeafult() 처럼 event를 멈추게 하는 함수도 있다.
'2. Front-end > 2-3. Java Script' 카테고리의 다른 글
JS - [clock 기능 - intervals / timeout / Date object / padStart] (0) | 2022.02.28 |
---|---|
JS - [Login 기능 - localStorage(입력값 저장, 불러오기)] (0) | 2022.02.27 |
JS - [element에 클래스 추가 제거 - classList / toggle] (0) | 2022.02.16 |
JS - [element 가져오기 / Event] (0) | 2022.02.02 |
JS - [Basic / function / conditional] (0) | 2022.01.20 |