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>
|
cs |
아래처럼 function() 대신 ' () => ' 화살표 함수 사용 ok
리스너 함수 또한 상수를 통해 지정선언 가능(단, 상수인 변수에 괄호 붙이면 안됨.)
코드를 아래와 같이 event 라는 매개변수에. console.log(event.target.value); 를 통해 event라는 매개변수의 값이 어떻게 생성되고 있는가 지속적으로 확인 가능하다.
아래와 같이 직접 매개변수 event를 통해 값을 받아 console에 전달하니 값이 콘솔에 출력된 모습을 확인할 수 있다.
소감:
html, css, js 전부 이해하고 나서 배우니까 무슨말인지 이해가 하나하나 잘 된다.
11월 달이었나? 그때는 html, css 배우기 전이고, js도 기본 메서드 사용도 잘 못하던 때라 무슨 말이지 싶었는데 드디어! 드디어! 작게나마 프로젝트(계산기 만들기 등)을 할 수 있는 기반이 갖추어졌다.
'🗃️javascript > 이론정리' 카테고리의 다른 글
| js 개발 이론정리(1)[async, defer, 데이터 타입] (0) | 2023.04.02 |
|---|---|
| js 기본 정리 시작 이유 + js 환경 조성 (0) | 2023.04.02 |
| DOM tree , DOMContentLoaded (0) | 2023.03.23 |
| 공부방향 및 각종 용어들의 정의[UI , API, CDN, cache 등] (1) | 2023.03.08 |
| js 객체의 기본(객체 생성, 데이터 불러오기, 데이터 넣기 , this) (1) | 2023.03.08 |