JavaScript
Javascript의 내장 객체
9tun
2025. 3. 27. 21:58
최상위 객체 window
내장 객체
쉽게 사용할 수 있도록 미리 만들어진 객체
✅ HTML 웹 API
웹 문서나 웹 브라우저용 객체가 내장됨
✅ 에크마스크립트(ECMAScript)
웹 브라우저와 관계 없이 사용하는 객체가 내장됨
웹 브라우저 창(Window) 관리 객체
window 객체 Property
| Property | 기능 |
| document | 웹 문서 접근 |
| frameElement | 현재 창이 다른 요소 안에 포함되어 있으면 해당 요소를 반환, 아니면 null 반환 |
| innerHeight | 내용 영역의 높이 |
| innerWidth | 내용 영역의 너비 |
| localStorage | 웹 브라우저 창에서 데이터를 저장하는 로컬 저장소에 접근 |
| location | window 객체의 위치/현재 URL 표시 |
| name | 웹 브라우저 창 이름을 가져오거나 설정 |
| outerHeight | 웹 브라우저 창 외부 높이 |
| outerWidth | 웹 브라우저 창 외부 너비 |
| pageXOffset | 스크롤 시, 수평으로 이동하는 픽셀 수, scrollX와 동일 |
| pageYOffset | 스크롤 시, 수직으로 이동하는 픽셀 수, scrollY와 동일 |
| parent | 현재 창이나 서브 프레임 부모 |
| screenX | 웹 브라우저 창 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리 |
| screenY | 웹 브라우저 창 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리 |
| scrollX | 스크롤 시, 수평으로 이동하는 픽셀 수 |
| scrollY | 스크롤 시, 수직으로 이동하는 픽셀 수 |
| sessionStorage | 웹 브라우저 창에서 데이터를 저장하는 세션 저장소에 접근 |
window 객체 메서드
| Property | 기능 |
| alert() | 알림 창 표시 |
| blur() | 창에서 포커스 제거 |
| close() | 현재 창 닫기 |
| confirm() | [확인], [취소] 버튼이 있는 창 표시 |
| focus() | 현재 창에 포커스 |
| moveBy() | 현재 창을 지정한 크기만큼 이동 |
| moveTo() | 현재 창을 지정한 좌표로 이동 |
| open() | 새 창 열기 |
| postMessage() | 다른 창으로 메시지 전달 |
| print() | 현재 문서 인쇄 |
| prompt() | 프롬프트 창에 입력한 텍스트 반환 |
| resizeBy() | 지정한 크기만큼 현재 창의 크기 조절 |
| resizeTo() | 웹 브라우저 창 크기를 지정한 크기만큼씩 늘리거나 줄임 |
| scroll() | 문서에서 특정 위치로 스크롤 |
| scrollBy() | 지정한 크기만큼씩 스크롤 |
| scrollTo() | 지정한 위치까지 한 번에 스크롤 |
| setCursor() | 현재 창의 커서를 변경 |
| showModalDialog() | 모달 창 열기 |
| sizeToContent() | 내용에 맞게 창 크기 변경 |
| stop() | 웹 문서 가져오기를 멈춤 |
window 객체 내부
주소창에 "about:blank" 입력해서 전부 지우고, 콘솔 창에 window 입력
✅ window 객체 하위 객체
프로퍼티도 메서드도 아닌, history:History 같은 형식은 window에 포함된 하위 객체
팝업 창 만들기
첫 접속 시, 자동으로 실행되는 창이나 링크 클릭 시, 새로 열리는 창
팝업 창 열기
window.open(경로, 창 이름, 창 옵션)
window.open("notice.html", "", "width=600 height=500")
팝업 창 위치
window.open("notice.html", "이벤트팝업", "width=600 height=500 left=300 top=200")
팝업 창 닫기
window.close()
<button onclick="window.close()">닫기</button>
screen 객체
화면에 대한 정보가 필요한 경우 사용
| Property | 기능 |
| availHeight | UI 영역을 제외한 내용 표시 영역 높이 |
| availWidth | UI 영역을 제외한 내용 표시 영역 너비 |
| colorWidth | 화면에서 픽셀을 렌더링할 때 사용하는 색상 수 |
| pixelDepth | 화면에서 픽셀을 렌더링 할 때 사용하는 비트 수 |
| height | UI 영역을 포함한 화면의 높이 |
| width | UI 영역을 포함한 화면의 너비 |
| orientation | 화면의 현재 방향 |
| method | 기능 |
| lockOrientation() | 화면 방향 잠금 |
| unlockOrientation() | 화면 방향 잠금 해제 |
화면 중앙에 팝업 창 표시
const bttn = document.querySelector("button");
const popWidth = 600; /* 팝업 창 너비 */
const popHeight = 500; /* 팝업 창 높이 */
bttn.addEventListener("click", function() {
let left = (screen.availWidth - popWidth) / 2; /* (화면 너비 - 팝업 창 너비) / 2 */
let top = (screen.availHeight - popHeight) / 2; /* (화면 높이 - 팝업 창 높이) / 2 */
window.open("notice.html", "event", `width = ${popWidth} height= ${popHeight} left = ${left} top = ${top}`);
});
history 객체
✅ history 객체에는 웹 브라우저 창에서 돌아다녔던 사이트 주소가 array에 저장되어 있음.
✅ 보안 문제 때문에 웹 브라우저 히스토리는 읽기 전용임
| Property | 기능 |
| length | 현재 웹 브라우저 창의 history 목록에 있는 항목의 개수 (= 방문했던 사이트 개수) |
| method | 기능 |
| back() | history 목록에서 이전 페이지를 불러옴 |
| forward() | history 목록에서 다음 페이지를 불러옴 |
| go() | history 목록에서 현재 페이지 기준으로 상대적인 위치에 있는 페이지를 불러옴 예) history.go(1): 다음 페이지 history.go(-1): 이전 페이지 |
location 객체
주소 표시줄
| Property | 기능 |
| hash | URL 중 #로 시작하는 해시 부분 정보 저장 |
| host | URL 호스트 이름과 포트 번호 저장 |
| hostname | URL 호스트 이름 저장 |
| pathname | URL 경로 저장 |
| port | URL 포트 번호 저장 |
| protocol | URL 프로토콜 저장 |
| search | URL 중 ?로 시작하는 검색 내용 저장 |
| href | 전체 URL, 이 값을 변경하면 해당 주소로 이동 |
| username | 도메인 이름 앞에 'username'을 함께 입력해서 접속하는 URL일 경우 username 정보를 저장 |
| password | 도메인 이름 앞에 'username'과 'password'를 함께 입력해서 접속하는 URL일 경우 password 정보를 저장 |
| method | 기능 |
| assign | 현재 문서에 새 문서 주소를 할당해서 새 문서를 불러옴 |
| reload | 현재 문서를 다시 불러옴 |
| replace | 현재 문서의 URL을 지우고 다른 URL 문서로 교체 |
| toString | 현재 문서의 URL을 문자열로 반환 |
🎯 replace를 사용하면 현재 문서 주소가 새로운 주소로 대체되므로 [뒤로] 버튼이 활성화되지 않음
Date 객체 활용
날짜와 시간에 대한 정보 조절 객체
객체 인스턴스화
현재 날짜 기준으로 객체 인스턴스화
new Date()
let today = new Date()
today /* 현재 날짜와 시간 표시 */
today.getDate() /* 날짜 확인 */
특정 날짜 기준 인스턴스
new Date("2025-03-29")
new Date("2025-3-29")
new Date(2025, 3, 29)
new Date("2025-03-29T23:18:00")
자바스크립트 날짜와 시간 입력 포맷
/* YYYY-MM-DD */
new Date("2025-03-29")
new Date("2025-03")
new Date("2025")
/* 연도-월-일T시:분:초 */
new Date("2025-03-29T23:29:00")
/* MM/DD/YYYY */
new Date("03/29/2025")
/* 전체 형식 */
new Date("Sat Mar 29 2025 23:22:00 GMT+0900 (대한민국 표준시)")
Date 객체 메서드
메서드 prefix로 객체를 나눌 수 있다.
1. get~ : 시간이나 날짜 얻기
2. set~ : 시간이나 날짜 설정
3. to~ : 국제 표준 형식으로 된 날짜 표시를 다른 형식으로 변경
| method | 기능 |
| getFullYear() | 현지 시간 기준으로 연도값 반환 |
| getMonth() | 월(月) 반환, 0~11 사이 숫자 반환, 0은 1월, 11은 12월 |
| getDate() | 일(日) 반환, 1~31 사이 숫자 반환 |
| getDay() | 요일 반환, 0~6 사이 숫자 반환, 0은 일요일, 6은 토요일 |
| getTime() | 1970년 1월 1일 00:00 이후 시간을 ms로 표시 |
| getHour() | 시(時) 반환, 0~23 사이 숫자 반환 |
| getMinutes() | 분(分) 반환, 0~59 사이 숫자 반환 |
| getSeconds() | 초(秒) 반환, 0~59 사이 숫자 반환 |
| getMiliseconds() | 밀리초 반환, 0~999 사이 숫자 반환 |
| setFullYear() | 현지 시간 기준으로 연도 설정 |
| setMonth() | 현지 시간 기준으로 월 설정 |
| setDate() | 현지 시간 기준으로 일 설정 |
| setTime() | 1970년 1월 1일 00:00부터 지난 시간을 밀리초로 설정 |
| setHours() | 현지 시간 기준으로 시를 설정 |
| setMinutes() | 현지 시간 기준으로 분을 설정 |
| setSeconds() | 현지 시간 기준으로 초를 설정 |
| setMiliseconds() | 현지 시간 기준으로 밀리초를 설정 |
| toUTCString() | '요일 일 월 연도 시:분:초 UTC' 형식으로 표시 |
| toLocaleString() | '월/일/연도 시:분:초' 형식으로 표시 |
| toString() | '요일 월 날짜 시:분:초 UTC+대한민국 표준시' 형식으로 표시 |
| toDateString() | Date에서 날짜 부분만 표시 |
| toTimeString() | Date에서 시간 부분만 표시 |
Math 객체 활용
Math 객체 프로퍼티와 메서드
| Property | 기능 |
| E | 오일러 상수 |
| PI | 원주율 (≒3.141592653589793) |
| SQRT2 | 루트 2 (≒1.1412135623730951) |
| SQRT1_2 | 1/루트2 (≒0.7071067811865476) |
| LN2 | ln2 (≒0.6931471805599453) |
| LN10 | ln10 (≒2.302585092994046) |
| LOG2E | ln e (≒1.4426950408889634) |
| LOG10E | log10 e (≒0.4342944819032518) |
| method | 기능 |
| abs() | 절대값 |
| acos() | arccos |
| asin() | arcsin |
| atan() | arctan (범위: -π/2 ~ π/2) |
| atan2() | arctan (범위: -π ~ π) |
| ceil() | 매개변수의 소수점 이하 부분을 올림 |
| cos() | cos |
| exp() | 지수 함수 |
| floor() | 매개변수의 소수점 이하 부분 버림 |
| log() | 매개변수에 대한 로그값 |
| max() | 매개변수 중 최대값 |
| min() | 매개변수 중 최소값 |
| pow() | 매개변수 지수값 |
| random() | 0과 1사이 무작위 수 |
| round() | 매개변수 소수점 이하 반올림 |
| sin() | sin |
| sqrt() | 매개변수의 제곱근 반환 |
| tan() | tan |
소수점 이하
ceil(), floor(), round()
Math.ceil(): 소수점 이하 올림
Math.floor(): 소수점 이하 내림
Math.round(): 소수점 이하 반올림
소수점 자릿수 시정 - toFixed()
(Math.PI).toFixed(3) /* 3.142 (소수점 3자리까지 표시) */
(Math.PI).toFixed(1) /* 3.1 (소수점 1자리까지 표시) */
무작위 수 추출 - random()
Math.random()
👨🏫 1~100 사이 무작위 수 구하는 방법은?
random 메서드로 0부터 1사이 숫자를 얻은 후, 100을 곱한다.
그럼 0~99까지 얻을 수 있게 된다.
여기에 +1을 하면 1부터 100이 된다.
Math.floor(Math.random() * 100 + 1)
끝