객체란?
- 자바스크립트는 객체(Object) 기반 언어
- 객체는 기능과 속성을 가지고 있음
예) TV(객체)의 속성(Property)에는 너비, 높이, 색상, 무게 등이 있고 기능(메소드)에는 전원키다, 볼륨높이다 등이 있다.
- 우리는 앞에서 document.write()을 사용해봄 -> 여기서 document가 객체고 write()가 메서드임
객체의 종류
- 종류 : 내장 객체, 브라우저 객체 모델(BOM), 문서 객체 모델(DOM)
1. 내장 객체
- 자바스크립트 엔진에 내장되어 있어서 필요한 경우에 생성해서 사용할 수 있음
- 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있음
- 예) 오늘 날자를 알고 싶다면 Date 객체를 생성하여 getDate() 메서드를 사용한다.
2. 브라우저 객체 모델 (BOM)
- BOM = Browser Object Model
- 브라우저에 계층 구조로 내장되어 있는 객체를 말함
- window, screen, location, navigator 객체 등이 있음
- 브라우저(window)는 document(문서 영역)와 location(주소 창) 객체의 상위 객체임
예) 사이트 이동
- 현재 열려있는 사이트에서 다른 사이트로 이동하려면 location 객체에 참조 주소(href) 속성을 바꾸면 됨
<!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>
</head>
<body>
<script>
window.location.href = "http://www.naver.com";
</script>
</body>
</html>
3. 문서 객체 모델
- DOM = Document Object Model
- 문서 객체 모델은 HTML 문서 구조를 말함
- HTML 문서의 기본 구조는 최상위 객체로 <html>이 있고 그 하위 객체로는 <head>와 <body>가 있다
- DOM 객체는 HTML 문서를 만들고 태그들에 접근이 가능하도록 해줌
- 문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성과 CSS를 바꿀 수 있다.
- 단점 : 자바스크립트의 문서 객체 모델은 IE 8 이하 버전에서는 호환성잉 떨어지기 때문에 사용하기 힘들다
- 이러한 단점을 극복하기 위해 제이쿼리 문서 객체 모델을 많이 사용함
'💻 1. 웹개발_Front end > 1-4 Javascript' 카테고리의 다른 글
| [Javascript] 04-3 브라우저 객체 모델 (0) | 2021.09.12 |
|---|---|
| [Javascript] 04-2 내장 객체 (0) | 2021.09.12 |
| [Javascript] 03-4 반복문 (0) | 2021.09.07 |
| [Javascript] 03-3 선택문 (0) | 2021.09.06 |
| [Javascript] 03-2 조건문 (0) | 2021.09.05 |
댓글