DOM[EventListener, querySelector, 매개변수.target.value 사용하기]

🗃️javascript/이론정리

DOM[EventListener, querySelector, 매개변수.target.value 사용하기]

하얀성 2023. 3. 27. 20:55

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다.

웹페이지 만들 때 필요한 인터페이스가 DOM임.

우리는 누군가 만든 DOM 위에서 EventListener, querySelector 등을 사용해서 웹페이지를 만들게 되는것.

#은 id,
.변수명은 class
한칸 띄운 것은 자손
>은 바로 밑의 자손만 의미하는 자식.
콜백함수(리스너 함수, 익명함수) : 어떠한 동작을 하고나서 곧바로 뒤이어 실행되는 함수

태그.addEventLister(문자열, 함수자리)

onClickButton 같은 함수가 리스너 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>끝말잇기</title>
  <style>
 
  </style>
</head>
<body>
  <div><span id="order">1</span>번째 참가자</div>
  <div>제시어: <span id="word"></span></div>
  <input type="text">
  <button>입력</button>
  <script>
    const number = parseInt(prompt('몇 명이 참가하나요?'),10)
    alert(number)
    const yesOrNo = confirm('맞음?');
 
    document.querySelector('input').addEventListener('input',function() {
      console.log('글자입력')
    });
    document.querySelector('button').addEventListener('click',function() {
      console.log('버튼 클릭')
    })
  </script>
</body>
</html>
Colored by Color Scripter

cs

아래처럼 function() 대신 ' () => ' 화살표 함수 사용 ok

리스너 함수 또한 상수를 통해 지정선언 가능(단, 상수인 변수에 괄호 붙이면 안됨.)

코드를 아래와 같이 event 라는 매개변수에. console.log(event.target.value); 를 통해 event라는 매개변수의 값이 어떻게 생성되고 있는가 지속적으로 확인 가능하다.

아래와 같이 직접 매개변수 event를 통해 값을 받아 console에 전달하니 값이 콘솔에 출력된 모습을 확인할 수 있다.

소감:

html, css, js 전부 이해하고 나서 배우니까 무슨말인지 이해가 하나하나 잘 된다.

11월 달이었나? 그때는 html, css 배우기 전이고, js도 기본 메서드 사용도 잘 못하던 때라 무슨 말이지 싶었는데 드디어! 드디어! 작게나마 프로젝트(계산기 만들기 등)을 할 수 있는 기반이 갖추어졌다.