요약 및 정리
이 문서는 JavaScript의 `this` 키워드에 대해 설명하는 내용을 포함하고 있습니다. `this` 키워드의 정의, 특징, 그리고 다양한 사용 사례를 다루고 있습니다. 주요 내용은 다음과 같습니다:
1. `this`란 무엇인가?
- 정의:
- `this`는 객체를 가리키는 참조 변수입니다.
- `this`는 호출되는 위치에 따라 다른 값을 출력하기 때문에 혼란을 줄 수 있습니다.
- 기본 원칙:
- 메서드로 호출하면 `this`는 그 메서드가 속한 객체를 가리킵니다.
- 단독 함수 호출 시, `this`는 전역 객체(window, node는 global)를 가리킵니다.
- 화살표 함수의 경우, `this`는 화살표 함수가 선언된 상위 스코프를 가리킵니다.
- 생성자 함수 또는 클래스의 경우, `this`는 생성된 인스턴스를 가리킵니다.
2. `this`의 특징
- 실행 시점에 결정:
- `this`는 함수가 만들어질 때가 아닌 '실행'될 때 그 값이 결정됩니다.
- 이는 함수가 호출되는 문맥에 따라 `this`의 값이 달라진다는 의미입니다.
3. `this`의 다양한 사례
메서드로 호출한 경우
- 설명:
- 객체의 메서드로 함수를 호출하면 `this`는 그 메서드가 속한 객체를 가리킵니다.
- 예제:
```javascript
let myObj = {
val1: 100,
func1: function () {
console.log(this); // `this`는 myObj를 가리킴
}
};
myObj.func1(); // myObj를 가리킴
```
함수로 호출한 경우
- 설명:
- 단독으로 함수를 호출하면 `this`는 전역 객체(window, node는 global)를 가리킵니다.
- 예제:
```javascript
function a() {
console.log(this); // `this`는 window (전역 객체)를 가리킴
}
a(); // window (전역 객체)를 가리킴
```
화살표 함수의 경우
- 설명:
- 화살표 함수는 `this`를 정의하지 않으며, 상위 스코프의 `this`를 가리킵니다.
- 예제:
```javascript
let obj = {
count: 10,
func: () => {
console.log(this.count); // `this`는 상위 스코프를 가리킴
}
};
obj.func(); // undefined (상위 스코프를 가리킴)
```
생성자 함수 또는 클래스의 경우
- 설명:
- 생성자 함수나 클래스를 통해 객체를 생성할 때, `this`는 생성된 인스턴스를 가리킵니다.
- 예제:
```javascript
function Person(name) {
this.name = name; // `this`는 생성된 인스턴스를 가리킴
}
let john = new Person('John');
console.log(john.name); // John
```
4. HTML과의 상호작용 예제
설명
- HTML 문서에서 버튼을 클릭할 때 `this`가 어떻게 다르게 동작하는지 보여줍니다.
- `button1`은 `myObj.func1`을 이벤트 핸들러로 사용하고, `button2`는 `test` 변수를 이벤트 핸들러로 사용합니다. 이로 인해 `this`의 값이 달라집니다.
예제
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
</head>
<body>
<button id="btn1">클릭해봐요!</button>
<button id="btn2">클릭해봐요!</button>
<script>
let myObj = {
val1: 100,
func1: function () {
console.log(this); // `this`는 버튼을 가리킴
},
};
let test = myObj.func1;
let button1 = document.getElementById("btn1");
button1.addEventListener("click", myObj.func1); // myObj.func1의 `this`는 버튼을 가리킴
let button2 = document.getElementById("btn2");
button2.addEventListener("click", test); // `this`는 상위 스코프의 `this`를 가리킴
</script>
</body>
</html>
```
5. 다양한 상황에서의 `this` 값
설명
- 함수 호출 방식에 따라 `this`가 가리키는 대상이 어떻게 달라지는지 보여줍니다.
예제
- 전역 호출: `this`는 전역 객체(window)를 가리킴
```javascript
function sayName(){
console.log(this.name);
}
var name = 'Hero';
sayName(); // 'Hero'
```
- 객체 메서드 호출: `this`는 해당 객체를 가리킴
```javascript
let peter = {
name: 'Peter Parker',
sayName: sayName
}
let bruce = {
name: 'Bruce Wayne',
sayName: sayName
}
peter.sayName(); // 'Peter Parker'
bruce.sayName(); // 'Bruce Wayne'
```
- 생성자 함수 호출: `this`는 생성된 인스턴스를 가리킴
```javascript
function Person(name) {
this.name = name;
}
let john = new Person('John');
console.log(john.name); // John
```
- 화살표 함수 호출: `this`는 상위 스코프를 가리킴
```javascript
let obj = {
count: 10,
func: () => {
console.log(this.count); // undefined
}
}
obj.func(); // undefined
```
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
DOM(Document Object Model)이란?
DOM(Document Object Model)은 HTML, XML 문서의 구조화된 표현을 나타내며, 프로그래밍 언어가 문서의 구조, 스타일, 내용에 접근하고 변경할 수 있도록 하는 인터페이스입니다. DOM은 문서를 계층적인 트리 구조로 표현하며, 각 요소를 객체로 나타냅니다. 이를 통해 프로그래머는 자바스크립트를 사용하여 웹 페이지의 콘텐츠와 구조를 동적으로 변경할 수 있습니다.
DOM 구조
1. 문서(Document): 최상위 객체로, 전체 HTML 또는 XML 문서를 나타냅니다.
2. 요소(Element): HTML 태그를 나타내며, 요소는 다른 요소를 자식으로 가질 수 있습니다.
3. 속성(Attribute): 요소의 속성으로, 태그의 추가 정보를 제공합니다.
4. 텍스트(Text): 요소 내의 텍스트를 나타냅니다.
DOM 이벤트와 이벤트 제어
DOM 이벤트는 사용자가 웹 페이지에서 상호작용할 때 발생하는 사건을 나타냅니다. 이벤트는 사용자 입력(클릭, 키보드 입력 등) 또는 프로그램적 변화에 의해 발생할 수 있습니다.
주요 이벤트 제어 명령어
1. 이벤트 리스너 추가
`addEventListener` 메서드를 사용하여 요소에 이벤트 리스너를 추가할 수 있습니다.
```javascript
element.addEventListener(event, function, useCapture);
```
- `event`: 이벤트 유형(예: 'click', 'mouseover')
- `function`: 이벤트가 발생했을 때 호출할 함수
- `useCapture`: 이벤트 캡처링을 사용할지 여부(옵션, 기본값은 `false`)
예제:
```javascript
document.getElementById("myButton").addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
```
2. 이벤트 리스너 제거
`removeEventListener` 메서드를 사용하여 요소에서 이벤트 리스너를 제거할 수 있습니다.
```javascript
element.removeEventListener(event, function, useCapture);
```
예제:
```javascript
function handleClick() {
alert("버튼이 클릭되었습니다!");
}
let button = document.getElementById("myButton");
button.addEventListener("click", handleClick);
// 나중에 이벤트 리스너 제거
button.removeEventListener("click", handleClick);
```
3. 이벤트 객체 사용
이벤트 리스너 함수는 이벤트 객체를 매개변수로 받을 수 있으며, 이를 통해 이벤트에 대한 자세한 정보를 얻을 수 있습니다.
```javascript
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("이벤트 유형:", event.type);
console.log("이벤트 대상:", event.target);
});
```
4. 기본 이벤트 동작 방지
`preventDefault` 메서드를 사용하여 기본 이벤트 동작(예: 링크 클릭 시 페이지 이동)을 방지할 수 있습니다.
```javascript
document.getElementById("myLink").addEventListener("click", function(event) {
event.preventDefault();
alert("기본 링크 동작이 방지되었습니다.");
});
```
5. 이벤트 전파 중단
`stopPropagation` 메서드를 사용하여 이벤트가 더 이상 상위 요소로 전파되지 않도록 할 수 있습니다.
```javascript
document.getElementById("myButton").addEventListener("click", function(event) {
event.stopPropagation();
alert("이벤트 전파가 중단되었습니다.");
});
```
예제 코드
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 이벤트 예제</title>
</head>
<body>
<button id="myButton">클릭하세요!</button>
<a href="https://example.com" id="myLink">이동</a>
<script>
document.getElementById("myButton").addEventListener("click", function(event) {
alert("버튼이 클릭되었습니다!");
});
document.getElementById("myLink").addEventListener("click", function(event) {
event.preventDefault();
alert("기본 링크 동작이 방지되었습니다.");
});
</script>
</body>
</html>
```
요약
- DOM: HTML, XML 문서의 구조화된 표현으로, 문서를 트리 구조로 표현하여 프로그래밍 언어가 문서의 구조, 스타일, 내용을 변경할 수 있도록 합니다.
- 이벤트: 사용자 입력 또는 프로그램적 변화에 의해 발생하는 사건입니다.
- 이벤트 제어: `addEventListener`, `removeEventListener`를 사용하여 이벤트를 제어하며, `preventDefault`, `stopPropagation`을 통해 기본 동작을 방지하거나 이벤트 전파를 중단할 수 있습니다.
'html' 카테고리의 다른 글
| html 언어_태그_링크 (0) | 2024.07.04 |
|---|---|
| css 배경속성(background,position(좌표)) (0) | 2024.07.04 |
| 24. 07.02 7일차. git기초 , js자바배열 (0) | 2024.07.02 |
| 24.07.01>6일차.js)함수연습 (0) | 2024.07.01 |
| 24.06.27> css4일차. display,postition (0) | 2024.06.27 |