JS (8)

목차

0.1 Event

0.2 form 관련 이벤트

0.3 Element 생성

0.4 키 값 입력받기

0.1 Event

스크립트 위치는 바디에서 사용한 객체 아래라고 이야기 했다. 이 이유는 html은 위에서 아래로 내려오면서 읽는 순서기 때문에 중간에 js파일을 만날 경우 html을 다 읽고 시작하는 것이 아닌 JS를 실행시키고, 끝낸 다음에 html 파일로 돌아가기 때문이다.

따라서 이러한 문제를 해결하기 위해서 메서드 하나가 등장하게 된다.

바로 DOMComtentLoaded이다. 이 메서드 명만보고 그러면 지연시키거나, 느리게 하는건가?

라고 생각할 수 있다. 하지만 우리가 JS 머신의 가동원리를 다시 생각해보자

처음에 시작할 때 함수들의 위치는 전부 어디인가? 바로 힙에 들어가 있다.

또한 지난 시간에 addEventListener의 경우 어떻게 처리를 하는가? 바로

DOMContentLoaded가 발생해야지 함수를 호출하는 것이다. 따라서 DOMContenLoaded가 실행되기 전까지는 콜스택에 JS가 들어올일이 없다는 것을 이해할 수 있을 것이다

이 부분이 이해가 안되는 분들은 함수와, 함수호출시 어떤 작용이 일어나는지 확인할 필요가 있다.

그러면 여기서 또 궁금해야할 부분이 생길 수 있다.

왜 도대체 밑에서 안쓰고, 이렇게 씁니까?

그 이유는 바로

html 로드에는 50초, js에는 100초가 걸린다고 생각해보자

사용자가 화면을 볼 수 있을때는 바로 html 로드가 끝났을 때다

따라서 html 로드가 js의 위치에 따라서 시간이 바뀔수 있기 때문에 이렇게 두가지 방식을 알아둬야 하는 것이다. 본인의 생각으로는 js파일을 여러개로 나누기 때문에 보통 header부분에 작동하는 방식을 이렇게 사용하지 않을까 생각은 해본다.

 

0.2 form 관련 이벤트

form은 중요한 html element중 하나이다. form은 보통 html에서 가지고 있는 정보를 다른 곳으로 전달하기 위해서 form 태그를 많이 사용하는 편이다.

우리가 input 박스에 정해놓은 정보들은 프로퍼티의 키, 값으로 전달이 된다.

즉 만드는 값이 프로퍼티의 값으로, name은 키로 전달되며 이때 전달되는 방식은 쿼리스트링이다.

<form method="get" id="loginForm" action="./">
  <input type="text" id="uid" name="userid" value="web7722" />
  <input type="password" id="upw" name="userpw" value="1234" />
  <button type="submit">로그인</button>
</form>

form 관련 이벤트의 주요 내용을 하기 전에 html의 내용을 조금만 더 파악해보자

우선 알아둬야할 내용으로는 input에서 value 값은 기본적으로 설정될 디폴트 값을 가진다는 것이다. (input 상자안에 기본적으로 적히는 부분)

다음으로 위의 코드를 보면 submit은 누를 경우 url이 바뀌는 기본 기능을 가지고 있다.

또한 url 바뀌는 값은 form의 action에 적혀있다는 사실을 기억하자.

자 그럼 우리가 지금 하고싶은 것은 js를 통해 이 동작들을 조작하는 것이다.

function submitHandler() {
  alert("!!!");
}

function init() {
  const form = document.querySelector("#loginForm");
  // console.log 찍는 연습하기
  form.addEventListener("submit", submitHandler);
}
document.addEventListener("DOMContentLoaded", init);

 

이와 같은 코드를 실행시켜 보면 홈페이지가 바뀌기 전에 submitHandler가 실행되는 것을 볼 수 있다. 왜냐하면 submit이라는 것이 실행 되서 뒤의 함수를 호출해야 하기 때문이다.

 

다음은 기본기능을 막는 메서드가 존재하는데 간단하다.

이벤트리스너의 이벤트 객체를 이용해 이벤트객체.preventDefault()작성하면 된다.

 

그리고 다음으로 멈춘 submit의 기능을 다시하고 싶다면

이벤트객체.target.submit()을 작성하면 된다.

 

0.3 Element 생성하기

우리가 js에서 html요소를 만들 수 있을까? 가능하다.

그 기능을 하는 메서드는 바로

document.createElement(“엘리먼트이름”)이다.

 

기본적으로 어디 안에 넣을지는 알아야 한다. 따라서 userList(ul)를 불러와서 안에 넣는데

넣는 방식은

const userList = document.querySelector("#userList")
const liElement = document.createElement("li")
userList.append(liElement)
liElement.innerHTML = "hello world"s

와 같다.

 

0.4 키 값 입력받기

우리가 보통 비밀번호를 입력받고 비교하는 방식은

3개의 메서드가 존재한다.

keyup: 누르고 땟을 때 한번 실행하는 것

keydown: 키보드를 누를 때 실행하는 것

keypress: 누르고 있을때는 이벤트를 받는다. 한글 인식이 안되며, 방향키를 사용한다.

보통 우리는 keyup을 사용한다.