[자바스크립트] 내장 객체

내장 객체란?

• 사용자가 가져다 쓸 수 있도록 미리 만들어진 객체
• 웹 브라우저에 웹 문서가 열리면 가장 먼저 window 객체가 만들어지고 하위에 웹 브라우저 요소에 해당하는 객체들이 만들어짐
• window 객체를 비롯해 하위에 연결된 객체들은 모두 HTML 웹 API에 만들어진 객체들

---

window 객체

• Window 객체는 웹 브라우저 창의 상태를 제어하는 객체
• 자바스크립트 객체 중 최상위이자 기본이 되는 객체
• 자바스크립트의 모든 객체는 Window 객체에 포함됨
• Window 객체에는 웹 브라우저 창과 관련된 여러 가지 속성이 있음
• Window 객체의 속성과 메서드에 접근할땐 마침표(.)를 사용함

 

window 객체의 주요 프로퍼티(속성)

프로퍼티(속성)	설명
document	브라우저 창에 표시된 웹 문서에 접근할 수 있음
frameElement	현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환함. 포함되어 있지 않으면 null을 반환함
innerHeight	내용 영역의 높이를 나타냄
innerWidth	내용 영역의 너비를 나타냄
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환함
location	window 객체의 위치/현재 URL을 나타냄
name	브라우저 차으이 이름을 가져오거나 수정함
outerHeight	브라우저 창의 바깥 높이를 나타냄
outerWidth	브라우저 창의 바깥 너비를 나타냄
pageXOffset	스크롤했을 때 화면이 수평으로 이동하는 픽셀 수, scrollX와 같음
pagaYOffset	스크롤했을 때 화면이 수직으로 이동하는 픽셀 수, scrollY와 같음
parent	현재 창이나 서브 프레임의 부모 프레임을 나타냄
screenX	브라우처 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리를 나타냄
screenY	브라우처 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리를 나타냄
scrollX	스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냄
scrollY	스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냄
sessionStorage	웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환함

 

window 객체의 주요 메서드(함수)

• 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등
• 웹 브라우저 창 자체와 관련된 것이 대부분
• window.를 생략할 수도 있음

메서드	설명
alert()	알림창을 표시함
blur()	창에서 포커스를 제거함
close()	현재 열려있는 (브라우저) 창을 닫음
confirm()	[확인], [취소] 버튼이 있는 확인창을 표시함
focus()	현재 창에 포커스를 부여
moveBy()	현재 창을 지정한 크기만큼 이동
moveTo()	현재 창을 지정한 좌표로 이동
open()	새로운 창(팝업창)을 염 window.open(경로, 창 이름, 창 옵션) - 경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소) - 창 이름 : 팝업 창의 이름. 이름을 지정하지 않으면 팝업 창이 계속 새로 나타남 - 창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정할 수 있음 (위치 미지정 시 화면의 맨 왼쪽 위에 나타남)
postMessage()	다른 창으로 메세지를 전달함
print()	현재 문서를 인쇄함
prompt()	프롬프트 창에 입력한 텍스트를 반환함
resizeBy()	지정한 크기만큼 현재 창 크기를 조절함
resizeTo()	동적으로 브라우저 창의 크기를 조절함
scroll()	문서에서 특정 위치로 스크롤함
scrollBy()	지정한 크기만큼씩 스크롤함
scrollTo()	지정한 위치까지 스크롤함
setCursor()	현재 창의 커서를 변경함
showModalDialog()	모달 창을 표시함
sizeToContent()	내용에 맞게 창 크기를 맞춤
stop()	로딩을 중지함

 

---

screen 객체

• 사용자의 화면 크기나 방향 등의 정보를 담고 있는 객체

구분		설명
프로퍼티	availHeight	UI 영역(예를 들어 윈도우의 작업 표시줄이나 Mac의 독)을 제외한 영역의 높이를 나타냄
	availWidth	UI 영역을 제외한 내용 표시 영역의 너비를 나타냄
	colorDepth	화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냄
	height	UI 영역을 포함한 화면의 높이를 나타냄
	orientation	화면의 현재 방향을 나타냄
	pixelDepth	화면에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타냄
	width	UI 영역을 포함한 화면의 너비를 나타냄
메서드	lockOrientation()	화면 방향을 잠금
	unlockOrientation()	화면 방향 잠금을 해제함

 

---

history 객체

• history 객체에는 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장됨
• 브라우저 히스토리는 보안 문제 때문에 읽기 전용임

구분		설명
프로퍼티	length	현재 브라우저 창의 history 목록에 있는 항목의 개수(방문한 사이트 개수)가 저장됨
메서드	back()	history 목록에서 이전 페이지를 현재 화면으로 불러옴
	forward()	history 목록에서 다음 페이지를 현재 화면으로 불러옴
	go()	history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴 history.go(1) : 다음 페이지 history.go(-1) : 이전 페이지

 

 

---

location 객체

• 현재 문서의 URL 주소와 관련된 정보가 들어 있음

구분		설명
프로퍼티	hash	URL 중에서 #으로 시작하는 해시 부분의 정보를 담고 있음
	host	URL의 포스트 이름과 포트 번호를 담고 있음
	hostname	URL의 호스트 이름이 저장됨
	href	전체 URL. 이 값을 변경하면 해당 주소로 이동할 수 있음
	pathname	URL 경로가 저장됨
	port	URL의 포트 번호를 담고 있음
	protocol	URL의 프로토콜을 저장함
	password	도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에 password 정보를 저장함
	search	URL 중에서 ?로 시작하는 검색 내용을 저장함
	username	도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username정보를 저장함
메서드	assign()	현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옴
	reload()	현재 문서를 다시 불러옴
	replace()	현재 문서의 URL을 지우고 다른 URL의 문서로 교체함
	toString()	현재 문서의 URL을 문자열로 반환함

 

---

Date 객체

• 자바스크립트 내장 객체 중에서 Date객체는 날짜와 시간에 대한 정보를 조절할 수 있는 객체

객체와 인스턴스
- 자바스크립트에 정의된 내장 객체를 사용할 때에는 객체의 프로퍼티와 메서드를 가진 새로운 객체를 만든 후 여기에 식별자를 붙여 프로그래밍에서 사용함
→ Date객체를 사용하려면 자바스크립트의 Date객체를 똑같이 만들어서 그것을 사용
→ 이렇게 내장 객체와 똑같은 모양으로 찍어낸 객체를 인스턴스(instance)객체라고 함

---

Date 객체의 인스턴스 만들기

1) 현재 날짜를 기준으로 인스턴스 만들기

let today = new Date();

 

• today 변수에 Date 객체의 인스턴스가 저장됨
• today 변수는 Date 객체의 프로퍼티와 메서드를 사용할 수 있음

 

2) 특정 날짜를 기준으로 인스턴스 만들기

let today = new Date("2025-02-25");			// 2025년 2월 25일
let today = new Date("2025-02-25T18:00:00")	// 2025년 2월 25일 18:00:00

 

---

자바스크립트의 날짜/시간 입력 방식

1) YYYY-MM-DD : ‘연도-월-일’ 형태로 지정. 연도(YYYY)나 월까지만(YYYY-MM) 사용할 수도 있음

new Date(“2025-02-25”)
new Date(“2025-02”)
new Date(“2025”)

 

2) YYYY-MM-DDTHH:MM:SS : ‘연도-월-일-T-시:분:초’의 형태로 지정

new Date(“2010-02-25T18:00:00”)

 

3) MM/DD/YYYY : 슬래시를 사용해서 월/일/연도 순으로 지정

new Date(“02/25/2010”)

 

4) 전체 형식 : 월과 요일 이름은 전체 이름이나 줄여쓴 이름 모두 사용할 수 있음

new Date("Thu Aug 17 2017 15:00:41 GMT+0900 (대한민국 표준시)")

---

Date 객체의 메서드

• 메서드 이름 앞에 get이 붙어 있으면 날짜나 시간 정보를 가져오는 메서드

메서드	설명
getFullYear()	현지 시간을 기준으로 연도값을 가져옴
getMonth()	월값을 가져오며, 0~11 사이 숫자 반환(0:1월, 11:12월)
getDate()	일값을 가져오며, 1~31 사이 숫자 반환
getDay()	요일값을 가져오며 0~6사이의 숫자 반환(0:일요일, 6:토요일)
getTime()	1970년 1월 1일 00:00 이후의 시간을 밀리초로 표시
getHours()	시값을 가져오며 0~23 사이의 숫자 반환
getMinutes()	분값을 가져오며 0~59 사이의 숫자 반환
getSeconds()	초값을 가져오며 0~59 사이의 숫자 반환
getMiliseconds()	밀리초값을 가져오며 0~999 사이의 숫자 반환

 

• 메서드 이름 앞에 set이 붙어 있으면 날짜나 시간 정보를 설정하는 메서드

메서드	설명
setFullYear()	현지 시간을 기준으로 연도를 설정
setMonth()	현지 시간을 기준으로 월을 설정
setDate()	현지 시간을 기준으로 일을 설정
setTime()	1970년 1월 1일 00:00부터 지난 시간을 밀리초로 설정
setHours()	현지 시간을 기준으로 시를 설정
setMinutes()	현지 시간을 기준으로 분을 설정
setSeconds()	현지 시간을 기준으로 초를 설정
setMiliseconds()	현지 시간을 기준으로 밀리초를 설정

 

 

• 메서드 이름 앞에 to가 붙어 있으면 국제 표준 형식으로 된 날짜 표시를 다른 형식으로 바꿔 주는 메서드

메서드	설명
toGMTString()	'요일 일 월 연도 시:분:초 UTC' 형식으로 표시
toLocaleString()	'월/일/연도 시:분:초' 형식으로 표시
toString()	'요일 일 월 연도 시:분:초 UTC+대한민국 표준시' 형식으로 표시
toDateString()	Date에서 날짜 부분만 표시
toTimeString()	Date에서 시간 부분만 표시

 

* 참고 : 자바스크립트 시간 단위
- 자바스크립트에서 시간 정보를 계산 하기 위해서 밀리초를 사용

기존 시간 단위와 밀리초간의 변환
- 1밀리초 = 1/1000초 
- 1초 = 1000밀리초 
- 1분 = 60초 (60 * 1000 = 60,000밀리초) 
- 1시간 = 60분 (60 * 60 * 1000 = 3,600,000밀리초) 
- 1일 = 24시간 (24 * 60 * 60 * 1000 = 86,400,000밀리초)

 

---

Math 객체

• 삼각 함수나 로그 함수를 비롯한 수학 연산 함수를 가지고 있는 내장 객체
• Math 객체는 따로 객체의 인스턴스를 사용하지 않고 프로퍼티, 메서드를 사용함

 

주요 메서드

메서드	설명
abs(x)	숫자의 절댓값을 반환함
cbrt(x)	숫자의 세제곱근을 반환함
ceil(x)	인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환함(숫자의 소수점 이하를 올림)
floor(x)	인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환함(숫자의 소수점 이하를 버림)
random()	0과 1 사이의 무작위 수(난수)를 반환
round(x)	숫자에서 가장 가까운 정수를 반환함(숫자의 소수점 이하를 반올림)

 

주요 프로퍼티

프로퍼티	설명
PI	파이값