Fairy ' s

[JavaScript] 내장 객체 본문

Study/JavaScript

[JavaScript] 내장 객체

berafairy 2023. 4. 2. 19:31

내장 객체

사용자가 손쉽게 가져와서 사용할 수 있도록 미리 만들어진 객체

  • 웹 브라우저 창에서 웹 문서를 열면 가장 먼저 window라는 객체가 만들어지고,
  • 하위에 웹 브라우저 창의 각 요소에 해당하는 객체들이 만들어진다.
  • 하위 객체들은 웹 브라우저 창의 각 요소(웹 문서, 주소 표시줄)에 해당하는 객체들이며 각 또 다른 하위 객체를 가지고 있다.

웹 브라우저 창의 내장 객체


window 객체

웹 브라우저 창과 관련된 정보를 가지고 있으며, 웹 브라우저 창을 관리한다.
window.프로퍼티이름 (프로퍼티 종류 ↓)

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

window 객체의 메서드

  • alert() : 알림 창 표시
  • blur() : 창에서 포커스 제거
  • close() : 창 닫기
  • confirm() : 확인, 취소 버튼이 있는 확인 창 표시
  • focus() : 현재 창에 포커스를 맞추기
  • moveBy, To() : 현재 창을 지정한 크기, 좌표만큼 이동한다.
  • open(경로, 창 이름, 창 옵션) : 새로운 창 열기
  • postMessage() : 다른 창으로 메시지 전달
  • print() : 현재 문서를 인쇄
  • prompt() : 프롬프트 창에 입력한 텍스트 반환
  • resizeBy() : 지정한 크기만큼 현재 창의 크기 조절
  • resizeTo() : 브라우저 창의 크기를 지정한 크기만큼 조절
  • scroll() : 특정 위치로 스크롤
  • scrollBy() : 지정한 크기만큼 스크롤
  • scrollTo() : 지정한 위치까지 한 번에 스크롤
  • setCursor() : 현재 창의 커서 변경
  • showModalDialog() : 모달 창(웹 페이지 또는 애플리케이션의 기본 콘텐츠 위에 표시되는 GUI 요소) 열기
  • sizeToContent() : 내용에 맞게 창의 크기를 맞춘다.
  • stop() : 웹 문서 가져오기를 멈춘다.

Date 객체

날짜와 시간에 대한 정보를 조절할 수 있다.

let today = new Date()

today // 오늘 날짜, 시간
>> Sat Apr 1 2023 19:00:00 GMT+0900 (한국 표준시)

today.getFullYear() // 현재 연도
>> 2023

today.getMonth() // 현재 월 값
>> 3 // 0(1월)~ 11(12월)

today.getDate() // 현재 날짜
>> 1 // 1 ~ 31 사이의 숫자

today.getDate() // 현재 요일 값
>> 6 // 0(일요일) ~ 6(토요일)

today.getTime() // 현재 시간
>> 19:00:00

today.getHours() // 현재 시 값
>> 19 // 0 ~ 23 사이의 숫자

today.getMinutes() // 현재 분 값
>> 0 // 0 ~ 59 사이의 숫자

today.getSeconds() // 현재 초 값
>> 0 // 0 ~ 59 사이의 숫자

today.getMilliseconds() // 현재 밀리초 값
>> 0 // 0 ~ 999 사이의 숫자

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

날짜와 시간 형식을 바꾸는 메서드

  • toUTCString() : '요일 일 월 연도 시:분:초 UTC' 형식
  • toLocaleString() : '월/일/연도 시:분:초' 형식
  • toString() : '요일 월 날짜 시:분:초 UTC+대한민국 표준시' 형식
  • toDateString() : Date에서 날짜 부분만 표시
  • toTimeString() : Date 에서 시간 부분만 표시

Math 객체

수학적인 계산과 관련된 메서드들이 포함되어 있다.

Math 객체 프로퍼티

  • E : 오일러 상수
  • PI : 원주율(π)
  • SQRT2 : 루트 2
  • SQRT1_2 : 1 루트 2
  • LN2 : loge 2
  • LN10 : loge 10
  • LOG2E : loge e
  • LOG10E : log10 e

Math 객체 메서드

  • abs() : 절댓값
  • sqrt() : 매개변수에 대한 제곱근
  • random() : 0과 1사이 무작위 수
  • ceil() : 매개변수의 소수점 이하 부분을 올린다.
  • floor() : 매개변수의 소수점 이하 부분을 버린다.
  • round() : 매개변수의 소수점 이하 부분
  • exp() : 지수 함수
  • cos() : 코사인 값
  • sin() : 사인 값
  • tan() : 탄젠트 값
  • acos() : 아그코사인 값
  • asin() : 아크사인 값
  • atan() : 아크탄젠트 값 (범위 : -π/2 ~ π/2).
  • atan2() : 아크탄젠트 값 (범위 : -π ~ π)
  • log() : 매개변수에 대한 로그 값
  • max() : 매개변수 중 최댓 값
  • min() : 매개변수 중 최솟 값
  • pow() : 매개변수의 지숫 값

 

'Study > JavaScript' 카테고리의 다른 글

[JavaScript] 객체 만들기  (0) 2023.04.03
[JavaScript] DOM 객체  (0) 2023.04.02
[JavaScript] Event 객체  (0) 2023.03.26
[JavaScript] 함수  (0) 2023.03.24
[JavaScript] 기초  (0) 2023.03.22
Comments