코딩 노트
04 객체 본문
4장 목표: 다양한 객체의 종류와 각 객체에 내장된 기능(메서드) 및 속성을 이해하기
04-1 객체
▶ 객체란?
자바스크립트는 객체(Object) 기반 언어이다.
객체는 기능과 속성을 가지고 있다.
ex)
객체 - TV ▷ 기능(Method) - 켜다(); 끄다(); , 볼륨을 높이다(); , 볼륨을 줄이다(); 속성(Property) - 너비;, 높이;, 색상;, 무게;
// 기본형
객체.메서드(); // 객체의 메서드를 실행
객체.속성; // 객체의 속성값을 가져옴
or
객체.속성=값; // 객체의 속성값을 바꿈▶ 객체의 종류
내장 객체, 브라우저 객체 모델(BOM, Browser Object Model), 문서 객체 모델(DOM, Document Object Model)
- 내장 객체
자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용 가능
문자(String), 날짜(Date), 배열(Array), 수학(Math), 정규 표현 객체(RegExp Object) 등이 있다.
- 브라우저 객체 모델
브라우저에 계층 구조로 내장되어 있는 객체를 말한다.
브라우저 객체로는 window, screen, location, history, navigator 객체 등이 있다.
브라우저(window)는 document와 location 객체의 상위 객체이다.
ex) 자바스크립트를 이용해 현재 열려 있는 사이트에서 다른 사이트로 이동하려면 location 객체에 참조 주소(href) 속성을 바꾸면 된다.
window.location.href = "사이트 URL"
- 문서 객체 모델
HTML 문서 구조를 말한다. HTML 문서의 기본 구조는 최상위 객체로 <html>이 있으며,
그 하위 객체로는 <head>와 <body>가 있다.
ex) 자바스크립트를 이용해 이미지의 src 속성을 바꾸고 싶다면 지정된 <img>를 선택해 src 속성을 바꿔야 한다.
이렇게 문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)를 적용할 수도 있다.
하지만 자바스크립트의 문서 객체 모델은 IE 8 이하 버전에서는 호환성이 떨어지기 때문에 사용하기 힘들다는 단점이 있어 이러한 점을 극복하기 위해 제이쿼리 문서 객체 모델을 많이 사용한다.
04-2 내장 객체
▶ 내장 객체 생성하기
객체를 생성할 때는 new라는 키워드와 생성 함수를 사용한다.
참조 변수(인스턴스 이름) = new 생성 함수()▶ 날짜 정보 객체
날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성한다.
참조 변수 = new Date();
참조 변수 = new Date("연/월/일"); // 특정 날짜 정보 객체를 만들어야 할 때| 날짜 정보를 가져올 때(get) | 날짜 정보를 수정할 떄(set) | ||
| getFullYear() | 연도 정보를 가져옴 | setFullYear() | 연도 정보만 수정함 |
| getMonth() | 월 정보를 가져옴(현재 월-1) | setMonth() | 월 정보만 수정함(월 - 1) |
| getDate() | 일 정보를 가져옴 | setDate() | 일 정보만 수정함 |
| getDay() | 요알 정보를 가져옴(일:0~토:6) | '요일'은 날짜를 바꾸면 자동으로 바뀌므로 setDay()는 없음 | |
| getHours() | 시 정보를 가져옴 | setHours() | 시 정보만 수정함 |
| getMinutes() | 분 정보를 가져옴 | setMinutes() | 분 정보만 수정함 |
| getSeconds() | 초 정보를 가져옴 | setSeconds() | 초 정보만 수정함 |
| getMilliseconds() | 밀리초 정보를 가져옴(1/1,000초 단위) | setMilliseconds() | 밀리초 정보만 수정함 |
| getTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 표기함 |
setTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 수정함 |
| toGMTString() | GMT 표준 표기 방식으로 문자형 데이터로 반환함 |
toLocaleString | 운영 시스템 표기 방식으로 문자형 데이터로 반환함 |
원래 날짜부터 특정 날짜까지 며칠이 남았는지 구하는 형식은 다음과 같다. 이때 남은 일 수는 밀리초(1/1000초) 단위로 계산한다.
남은 일 수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체다음은 밀리초로 계산한 시간값을 나타낸 것이다.
1초 = 1,000(msc)
1분(60초) = 1,000 * 60 //6,000(msc)
1시간(60분) = 1,000 * 60 * 60 //3,600,000(msc)
1일(60분*24) = 1,000 * 60 * 60 * 24 //86,400,000(msc)
'JavaScript' 카테고리의 다른 글
| Javascript03 - 회원가입 검사 코드, 체크박스 (0) | 2023.09.04 |
|---|---|
| Javascript02 - 게시글 작성 (0) | 2023.09.01 |
| Javascript02 - 정규표현식 (0) | 2023.09.01 |
| Javascript01 - 시작 (0) | 2023.08.31 |
| 02 자바스크립트 기초 문법 (0) | 2022.11.08 |
