성장을 위한 기록

자바스크립트 객체(2) 본문

FE (Front End) (구)/javascript

자바스크립트 객체(2)

B_Tae 2022. 2. 8. 23:13

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

브라우저랑 관련된 객체

브라우저와 관련된 객체를 이용하면 새 탭을 여는 등 여러 효과를 낼 수 있다
웹 브라우저가 열리면 window라는 최상위 객체가 만들어지고 밑으로 하위 객체가 만들어지는 계층 구조를 지니고 있다.

내장 객체
종류 설명
window 최상위 객체이며 브라우저 창이 열릴 떄마다 하나씩 만들어진다
document 문서마다 하나씩 만들어지며 <body>태그를 만나 만들어진다
navigator 브라우저의 정보가 담겨져 있다
history 사용자의 방문 기록을 저장한다
location 현재 페이지에 URL정보가 있다
screen 화면 정도를 다룬다

window 객체

프로퍼티

주로 웹 브라우저 창의 정보를 가져오거나 값을 변경할 때 사용한다.
프로퍼티 이름 앞에 window.을 붙여 사용한다.

/가 나타나있는 부분은 둘 중 하나만 작성
종류 설명
document 브라우저에 표시된 웹 문서에 접근
frameElement 현재 창이 다른 요소에 포함되면 그 요소를 반환, 포함됮 않으면 null을 반환
innerHeight/Width 내용 영역에 높이나 너비를 나타냄
localStorage 데이터를 저장하는 로컬 스토리지를 반환
location window객체 위치나 현재 URL을 나타냄
name 창의 이름을 가져오거나 수정
outerHeight/Width 브라우저 창의 바깥 높이나 너비를 나타냄
pageXOffset 스크롤 했을 때 X축으로 이동하는 픽셀수 = scrollX
pageYOffset 스크롤 했을 때 Y축으로 이동하는 픽셀수 = scrollY
parent 현재 창이나 서브 프레임의 부모
screenX,Y 모니터 왼쪽이나 위쪽 테두리 기준으로 브라우저 창이 떨어져 있는 거리
scroolX,Y 스크롤 했을 때 X, Y축으로 이동하는 픽셀 수
sessionStorage 데이터를 저장하는 세션 스토리지를 반환

메서드

대화 창을 표시하거나, 브라우저 창의 크기나 위치를 알아내고 지정하는 등 창과 관련된다.
마찬가지로 앞에 window.를 붙여야 하지만, window 객체는 기본 객체이기 때문에 생략하여 window.alert() = alert()로 사용할 수 있다.

종류 설명
alert 알림 창을 표시
blur 현재 창에서 포커스를 제거
close 현재 창 닫기
confirm 확인, 취소 버튼이 있는 창을 표시
focus 현재 창의 포커스를 부여
moveBy 지정한 크기만큼 이동
moveTo 지정한 좌표로 이동
open 새로운 창 열기
postMessage 메시지를 다른 창으로 전달
print 현재 문서를 인쇄
prompt 프롬프트 창에 입력한 텍스트를 반환
resizeBy 지정한 크기만큼 창을 조절
resizeTo 동적으로 브라추저 창의 크기를 조절
scroll 문서에 특정 위치로 스크롤
scrollBy 지정한 크기만큼 스크롤
scrollTo 지정한 위치까지 스크롤
sizeTocontent 내용에 맞게 창의 크기를 맞춤
stop 로딩을 중지

open 메서드

open메서드는 링크나 문서를 열 때 새 창으로 뜨게 할 수 있어 주로 팝업창을 띄울때 자주 사용한다.


window.open(경로, 창 이름, 창 옵션)

경로 - 팝업 창에 표시할 문서나 사이트 경로
창 이름 - 이름을 지정하면 같은 창에 팝업 내용이 나타난다. 지정하지 않았을 경우 계속 새로운 창이 나타난다.
창 옵션 - left, top, width, height 속성을 사용해 위치나 크기를 지정할 수 있다.


예를 들어 왼쪽과 위에서 100px 떨어진 500px크기에 팝업창을 띄운다면

window.open("sample.html", "pop" "width = 500 height= 500, left = 100, top= 100")

만약 사용자가 팝업을 차단했다면 해당 문서가 나타나지 않는다. 이럴 때 값은 null을 반환하기 때문에
if문을 통해 차단했을 때 공지할 수 있는 함수를 만들 수 있다.

navigator 객체

웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온,오프라인 등의 여러 정보가 담겨져 있다. 이 정보는 사용자가 수정이 불가능하고 가져와 볼 수만 있다.

다양한 웹 브라우저가 있고 모든 사용자가 똑같이 동작하는 웹 브라우저를 만들기 위해서는 렌더링 엔진을 가장 먼저 생각해야한다. 그 이유는 html이나 css를 해석하는 엔진이 달라 다르게 나타나기 때문이다. 또한 내장된 자바스크립트 엔진도 다르다.

history 객체

브라우저에서 방문한 사이트 주소가 배열 형태로 저장된다. 또한 브라우저 히스토리는 보안 문제로 읽기 전용이다.

프로퍼티

종류 설명
length 방문한 사이트 개수가 저장

메서드

종류 설명
back 이전 페이지를 현재 화면으로 불러온다
forward 다음 페이지를 현재 화면으로 불러온다
go 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 불러온다. 예를 들어 history.go(1)은 다음페이지 -1은 이전 페이지이다.

location 객체

현재 문서의 URL 주소 정보가 들어있고 이를 편집하면 현재 브라우저 창에서 열어야 할 사이트를 지정할 수 있다.

프로퍼티

종류 설명
hash URL중 #로 시작하는 부분의 정보를 담는다
host 호스트 이름과 포트 번호를 담는다
hostname 호스트 이름이 저장된다
href 전체 URL, 이 값을 변경하면 해당 주소로 이동 가능
pathname URL경로가 저장된다
port URL의 포트 번호를 담는다
protocol URL의 프로토콜을 저장한다
password 도메인 앞에 username과 password를 함께 입력해 접속하는 사이트의 경우 password 정보를 저장한다
search ?로 시작하는 검색 내용을 저장한다
username 도메인 앞에 username을 함께 입력해 접속하는 사이트의 경우 username 정보를 저장한다

메서드

종류 설명
assign 현재 문서에 새 문서 주소를 할당해 가져온다
reload 현재 문서를 다시 불러온다
replace 현재 문서의 URL을 지우고 다른 URL 문서로 교체한다
toString 현재 URL을 문자열로 반환한다.

screen 객체

사용자의 화면 크기나 정보를 알아 낼 때 사용한다.

프로퍼티

종류 설명
availHeight UI 영역(작업표시줄 등)을 제외한 높이
avaiWidth UI 영역을 제외한 너비
colorDepth 픽셀을 렌더링 할 때 사용하는 색상 수
heigh UI 영역을 포함한 화면 높이
orientation 화면의 현재 방향
pixelDepth 화면에서 픽셀을 렌더링할 때 사용하는 비트 수
width UI 영역을 포함한 화면 너비

메서드

종류 설명
lockOrientation 화면 방향을 잠금
unlockOrientation 화면 방향 잠금을 해제
저작자표시 (새창열림)

'FE (Front End) (구) > javascript' 카테고리의 다른 글

js. slideimage (슬라이드 이미지)  (0) 2022.02.15
문서 객체 모델 DOM  (0) 2022.02.10
자바스크립트 객체(1)  (0) 2022.02.08
자바스크립트 이벤트와 처리기  (0) 2022.02.07
자바스크립트 다양한 함수 식  (0) 2022.02.05
'FE (Front End) (구)/javascript' Related Articles more
Comments