387 lines
17 KiB
Markdown
387 lines
17 KiB
Markdown
# 브라우저 내장 객체
|
|
브라우저 내장 객체는 브라우저 환경에서 기본적으로 제공되는 객체들로, 웹 애플리케이션을 작성할 때 사용됩니다. 이 객체들은 DOM(Document Object Model), BOM(Browser Object Model), 그리고 웹 API를 통해 제공됩니다.
|
|
|
|
* window
|
|
- document
|
|
- navigator
|
|
- location
|
|
- history
|
|
- screen
|
|
|
|
|
|
## window
|
|
window 객체는 브라우저의 전역 객체로, 브라우저 창 또는 탭 자체를 나타냅니다.
|
|
모든 브라우저 환경에서 window는 최상위 객체로 존재하며, 전역 변수와 함수는 기본적으로 window 객체의 속성으로 등록됩니다.
|
|
```javascript
|
|
console.log(window); // window 객체 출력
|
|
console.log(window === this); // true (전역 컨텍스트에서는 this가 window를 참조)
|
|
```
|
|
|
|
* 브라우저 전역 객체 : 모든 브라우저에서 제공되며, DOM, BOM, 그리고 자바스크립트 핵심 기능을 포함합니다.
|
|
* 전역 변수와 함수 관리 : 전역으로 선언된 변수와 함수는 window 객체의 속성으로 자동 추가됩니다.
|
|
* 다양한 내장 메서드 및 속성 제공 : 사용자 상호작용, DOM 조작, 타이머 설정, 브라우저 제어 등을 수행할 수 있는 메서드와 속성을 제공합니다.
|
|
|
|
### 브라우저 정보
|
|
* window.navigator : 브라우저와 사용자의 정보 제공
|
|
* window.location : 현재 URL 정보와 관련된 작업을 수행
|
|
* window.history : 브라우저의 방문 기록을 제어
|
|
|
|
### 화면 및 디바이스 정보
|
|
* window.screen : 화면 해상도와 관련된 정보를 제공
|
|
* window.innerWidth / window.innerHeight : 브라우저 뷰포트(viewport)의 크기를 반환
|
|
* window.devicePixelRatio : 디바이스 픽셀 밀도를 나타냄
|
|
* window.scrollX / window.scrollY
|
|
|
|
### 사용자 상호작용
|
|
* window.alert() : 경고창을 표시
|
|
* window.confirm() : 확인 및 취소 버튼이 있는 대화 상자를 표시
|
|
* window.prompt() : 사용자로부터 입력을 받을 수 있는 대화 상자 표시
|
|
|
|
### 타이머 메서드
|
|
* window.setTimeout() : 일정 시간이 지난 후 함수를 실행
|
|
* window.setInterval() : 일정 시간 간격으로 함수를 반복 실행
|
|
* window.clearTimeout()
|
|
* window.clearInterval()
|
|
|
|
```javascript
|
|
window.setTimeout(() => {
|
|
console.log("3초 후 실행");
|
|
}, 3000);
|
|
```
|
|
```javascript
|
|
const intervalId = window.setInterval(() => {
|
|
console.log("1초마다 실행");
|
|
}, 1000);
|
|
|
|
// 5초 후 반복 종료
|
|
window.setTimeout(() => {
|
|
window.clearInterval(intervalId);
|
|
}, 5000);
|
|
```
|
|
### DOM 조작
|
|
* window.document : 현재 HTML 문서를 나타내는 객체로 DOM 조작의 핵심
|
|
|
|
### 이벤트 처리
|
|
* resize 이벤트 : 브라우저 창 크기 변경 시 실행
|
|
* scroll 이벤트 : 사용자가 페이지를 스크롤할 때 실행
|
|
* load 이벤트 : 페이지가 완전히 로드된 후 실행
|
|
```javascript
|
|
window.addEventListener("resize", () => {
|
|
console.log(`너비: ${window.innerWidth}, 높이: ${window.innerHeight}`);
|
|
});
|
|
|
|
window.addEventListener("scroll", () => {
|
|
console.log(`스크롤 위치: ${window.scrollY}`);
|
|
});
|
|
|
|
window.addEventListener("load", () => {
|
|
console.log("페이지가 로드되었습니다!");
|
|
});
|
|
```
|
|
|
|
## document
|
|
document 객체는 현재 HTML 문서를 나타내는 객체로, DOM(Document Object Model)을 통해 웹 페이지의 콘텐츠를 조작하고 구조에 접근할 수 있도록 합니다.
|
|
브라우저가 HTML 코드를 파싱하여 트리 형태로 변환한 DOM의 루트 객체이며, 자바스크립트를 사용하여 페이지를 동적으로 변경할 수 있게 합니다.
|
|
|
|
### HTML 요소 선택
|
|
* getElementById() : id 속성을 기준으로 특정 요소를 선택
|
|
* getElementsByClassName() : 클래스 이름을 기준으로 요소 집합을 선택
|
|
* getElementsByTagName() : 태그 이름을 기준으로 요소 집합을 선택
|
|
* querySelector() : CSS 선택자를 기반으로 첫 번째 요소를 선택
|
|
* querySelectorAll() : CSS 선택자를 기반으로 모든 요소를 선택
|
|
|
|
### 문서 정보 확인
|
|
* document.title : 문서의 제목을 반환하거나 수정
|
|
* document.URL : 현재 문서의 URL을 반환
|
|
* document.domain : 문서의 도메인을 반환
|
|
* document.lastModified : 문서가 마지막으로 수정된 날짜와 시간
|
|
|
|
### 콘텐츠 조작
|
|
* innerHTML : 요소의 HTML 콘텐츠를 가져오거나 설정
|
|
* textContent : 요소의 텍스트 콘텐츠를 가져오거나 설정
|
|
* createElement() : 새로운 HTML 요소를 생성
|
|
* appendChild() : 부모 요소에 자식 요소를 추가
|
|
* removeChild() : 특정 자식 요소를 제거
|
|
|
|
```javascript
|
|
const div = document.querySelector("#container");
|
|
div.innerHTML = "<p>새로운 콘텐츠</p>";
|
|
|
|
const heading = document.querySelector("h1");
|
|
console.log(heading.textContent); // 텍스트 출력
|
|
heading.textContent = "새로운 텍스트"; // 텍스트 변경
|
|
|
|
const list = document.querySelector("ul");
|
|
const newItem = document.createElement("li");
|
|
newItem.textContent = "새 항목";
|
|
list.appendChild(newItem);
|
|
const firstItem = list.firstElementChild;
|
|
list.removeChild(firstItem);
|
|
```
|
|
|
|
### 문서 구조 탐색
|
|
* document.body : 문서의 `<body>` 요소를 반환
|
|
* document.head : 문서의 `<head>` 요소를 반환
|
|
* parentNode: 부모 노드
|
|
* childNodes: 자식 노드 리스트
|
|
* firstChild, lastChild: 첫 번째/마지막 자식 노드
|
|
* previousSibling, nextSibling: 이전/다음 형제 노드
|
|
|
|
```javascript
|
|
const container = document.getElementById("container");
|
|
console.log(container.parentNode); // 부모 노드
|
|
console.log(container.childNodes); // 자식 노드 리스트
|
|
|
|
const firstItem = document.querySelector("li");
|
|
console.log(firstItem.nextSibling); // 다음 형제 노드
|
|
console.log(firstItem.previousSibling); // 이전 형제 노드
|
|
```
|
|
|
|
### 클래스 조작
|
|
* classList : 요소의 클래스를 추가, 제거, 토글, 확인
|
|
```javascript
|
|
const element = document.querySelector("div");
|
|
element.classList.add("highlight"); // 클래스 추가
|
|
element.classList.remove("highlight"); // 클래스 제거
|
|
element.classList.toggle("hidden"); // 클래스 토글
|
|
console.log(element.classList.contains("hidden")); // 클래스 포함 여부
|
|
```
|
|
### 이벤트 처리
|
|
* addEventListener() : 요소에 이벤트 리스너를 추가
|
|
* removeEventListener() : 요소에서 이벤트 리스너를 제거
|
|
```javascript
|
|
const button = document.querySelector("button");
|
|
button.addEventListener("click", () => {
|
|
alert("버튼 클릭!");
|
|
});
|
|
```
|
|
|
|
### 폼 및 입력 요소
|
|
* forms : 문서의 모든 `<form>` 요소를 반환
|
|
* elements : 특정 폼의 모든 입력 요소를 반환
|
|
```javascript
|
|
const form = document.forms[0];
|
|
console.log(form.elements["username"].value); // 이름이 "username"인 입력값
|
|
```
|
|
|
|
### 이벤트
|
|
* DOMContentLoaded : 문서의 HTML이 모두 로드된 후 실행
|
|
* readystatechange : 문서의 준비 상태가 변경될 때 실행
|
|
```javascript
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
console.log("DOM이 완전히 로드되었습니다!");
|
|
});
|
|
```
|
|
|
|
## navigator
|
|
navigator 객체는 브라우저 및 사용자 디바이스에 대한 정보를 제공하는 브라우저 내장 객체입니다.
|
|
|
|
### 브라우저 및 사용자 정보
|
|
* navigator.userAgent : 브라우저 및 운영 체제에 대한 정보를 포함한 문자열
|
|
* navigator.platform : 사용자의 운영 체제를 나타냄
|
|
|
|
### 네트워크 상태 및 연결
|
|
* navigator.onLine : 디바이스의 온라인 상태를 나타냄. (인터넷 연결이 되어 있으면 true, 그렇지 않으면 false)
|
|
* navigator.connection : 네트워크 연결 속성(타입, 대역폭 등)을 제공. 일부 브라우저에서만 지원됨.
|
|
|
|
### 사용자 설정
|
|
* navigator.language : 사용자가 설정한 기본 언어를 반환
|
|
* navigator.languages : 브라우저에서 지원하는 언어 배열
|
|
|
|
### 디바이스 및 하드웨어 정보
|
|
* navigator.geolocation : 사용자의 위치 정보를 제공. GPS와 같은 기술을 활용
|
|
* navigator.hardwareConcurrency : 사용자의 CPU 논리 프로세서 코어 수를 반환
|
|
* navigator.deviceMemory : 디바이스의 RAM 용량(GB 단위, 일부 브라우저만 지원)
|
|
* navigator.maxTouchPoints : 디바이스에서 지원하는 최대 터치 포인트 개수를 반환
|
|
|
|
```javascript
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
console.log(`위도: ${position.coords.latitude}, 경도: ${position.coords.longitude}`);
|
|
},
|
|
(error) => {
|
|
console.error("위치 정보를 가져오지 못했습니다.", error);
|
|
}
|
|
);
|
|
```
|
|
### 보안 관련 정보
|
|
* navigator.cookieEnabled : 브라우저에서 쿠키가 활성화되어 있는지 확인
|
|
* navigator.credentials : 사용자 인증 정보를 관리하는 API. 패스워드 관리자나 인증 토큰 관련 작업에 사용
|
|
* navigator.permissions : 브라우저 권한 상태를 확인
|
|
```javascript
|
|
navigator.credentials.get({
|
|
password: true,
|
|
federated: { providers: ["https://accounts.google.com"] },
|
|
});
|
|
|
|
navigator.permissions.query({ name: "geolocation" }).then((result) => {
|
|
console.log(result.state); // "granted", "denied", "prompt"
|
|
});
|
|
```
|
|
|
|
### 미디어 및 브라우저 기능
|
|
* navigator.mediaDevices : 디바이스의 카메라, 마이크, 스피커 등 미디어 장치에 접근
|
|
* navigator.clipboard : 클립보드에 텍스트를 복사하거나 읽기
|
|
```javascript
|
|
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
|
|
.then((stream) => {
|
|
console.log("미디어 스트림:", stream);
|
|
})
|
|
.catch((error) => {
|
|
console.error("미디어 장치 접근 실패:", error);
|
|
});
|
|
|
|
navigator.clipboard.writeText("클립보드에 복사할 내용").then(() => {
|
|
console.log("클립보드에 복사 완료!");
|
|
});
|
|
|
|
navigator.clipboard.readText().then((text) => {
|
|
console.log("클립보드에서 읽은 내용:", text);
|
|
});
|
|
```
|
|
|
|
### 설치 및 실행 환경 정보
|
|
* navigator.serviceWorker : 서비스 워커를 등록하거나 관리
|
|
* navigator.standalone : 웹 앱이 독립 실행형 모드로 실행 중인지 여부를 나타냄. (iOS에서만 사용 가능)
|
|
```javascript
|
|
if ("serviceWorker" in navigator) {
|
|
navigator.serviceWorker.register("/service-worker.js").then((registration) => {
|
|
console.log("서비스 워커 등록 완료:", registration);
|
|
});
|
|
}
|
|
```
|
|
### 이벤트
|
|
* online / offline : 인터넷 연결 상태가 변경될 때 발생
|
|
```javascript
|
|
window.addEventListener("online", () => {
|
|
console.log("온라인 상태입니다.");
|
|
});
|
|
|
|
window.addEventListener("offline", () => {
|
|
console.log("오프라인 상태입니다.");
|
|
});
|
|
```
|
|
|
|
## screen
|
|
screen 객체는 **사용자의 화면(디스플레이)**에 대한 정보를 제공하는 브라우저 내장 객체입니다.
|
|
이 객체를 통해 사용자의 디바이스 화면 크기, 가로·세로 해상도, 색상 깊이 등과 같은 정보를 얻을 수 있습니다.
|
|
|
|
* screen.width / screen.height : 사용자의 화면(디스플레이)의 전체 너비 / 높이(픽셀 단위)
|
|
* screen.availWidth / screen.availHeight : 사용 가능한 화면 너비/ 높이(픽셀 단위). 브라우저 인터페이스(UI) 요소(예: 작업 표시줄)가 차지하는 영역을 제외한 크기입니다.
|
|
* screen.devicePixelRatio : 물리적 픽셀과 CSS 픽셀의 비율. 고해상도 디스플레이에서는 이 값이 1보다 큽니다.
|
|
* screen.colorDepth : 디스플레이의 색상 깊이(컬러 비트 수). 일반적으로 24(16,777,216 색상) 또는 32비트입니다.
|
|
* screen.pixelDepth : 픽셀 깊이를 반환. colorDepth와 동일한 값을 반환합니다.
|
|
* screen.orientation : 화면의 현재 방향(가로 또는 세로)에 대한 정보를 제공. type 속성을 사용하여 방향 정보를 확인할 수 있습니다.
|
|
* screen.orientation.lock() / screen.orientation.unlock() : 화면 방향을 특정 방향으로 고정/해제. 브라우저가 이를 지원하는 경우 사용 가능합니다.
|
|
|
|
```javascript
|
|
if (screen.width < 768) {
|
|
console.log("모바일 화면 레이아웃 적용");
|
|
} else {
|
|
console.log("데스크톱 화면 레이아웃 적용");
|
|
}
|
|
```
|
|
|
|
```javascript
|
|
screen.orientation.addEventListener("change", () => {
|
|
console.log("현재 화면 방향:", screen.orientation.type);
|
|
});
|
|
```
|
|
|
|
```javascript
|
|
if (window.devicePixelRatio > 1) {
|
|
console.log("고해상도 디스플레이입니다.");
|
|
} else {
|
|
console.log("표준 해상도 디스플레이입니다.");
|
|
}
|
|
```
|
|
|
|
## location
|
|
location 객체는 브라우저의 현재 URL 정보를 읽거나 수정할 수 있는 객체입니다.
|
|
주로 웹 페이지의 URL을 확인, 변경하거나 리다이렉트(페이지 이동)를 수행하는 데 사용됩니다.
|
|
|
|
* location.href : 현재 페이지의 전체 URL을 문자열로 반환하거나 변경합니다.
|
|
* location.protocol : URL의 프로토콜 부분(http: 또는 https:).
|
|
* location.host : 도메인 이름과 포트 번호를 포함한 URL의 호스트 부분.
|
|
* location.hostname : 도메인 이름만 반환. 포트 번호는 제외됩니다.
|
|
* location.port : URL의 포트 번호를 반환. 포트가 명시되지 않으면 빈 문자열("")을 반환.
|
|
* location.pathname : URL의 경로 부분을 반환.
|
|
* location.search : URL의 쿼리 문자열(물음표 ? 이후 부분)을 반환.
|
|
* location.hash : URL의 해시 값(샤프 기호 # 이후 부분)을 반환
|
|
* location.origin : URL의 원본(origin)을 반환. (프로토콜 + 호스트 + 포트 번호로 구성)
|
|
* location.assign() : 지정된 URL로 이동.
|
|
* location.replace() : 지정된 URL로 이동하되, 히스토리에 기록되지 않음(뒤로 가기 불가).
|
|
* location.reload() : 현재 페이지를 다시 로드.
|
|
- 기본 동작은 캐시된 데이터를 사용하여 리로드.
|
|
- true를 전달하면 서버에서 최신 데이터를 다시 로드.
|
|
|
|
```javascript
|
|
console.log("전체 URL:", location.href);
|
|
console.log("프로토콜:", location.protocol);
|
|
console.log("호스트:", location.host);
|
|
console.log("경로:", location.pathname);
|
|
console.log("쿼리 문자열:", location.search);
|
|
console.log("해시:", location.hash);
|
|
```
|
|
```javascript
|
|
// 새로운 페이지로 이동
|
|
location.href = "https://example.com/new-page";
|
|
|
|
// 히스토리를 남기지 않고 이동
|
|
location.replace("https://example.com/replace-page");
|
|
|
|
// 3초 후 다른 페이지로 이동
|
|
setTimeout(() => {
|
|
location.assign("https://example.com/delayed-page");
|
|
}, 3000);
|
|
```
|
|
```javascript
|
|
const queryString = location.search; // 예: "?query=123&name=John"
|
|
const params = new URLSearchParams(queryString);
|
|
|
|
// 쿼리 매개변수 읽기
|
|
console.log(params.get("query")); // "123"
|
|
console.log(params.get("name")); // "John"
|
|
|
|
// 모든 매개변수 출력
|
|
for (const [key, value] of params.entries()) {
|
|
console.log(`${key}: ${value}`);
|
|
}
|
|
```
|
|
|
|
## history
|
|
history 객체는 브라우저의 세션 히스토리를 관리하는 객체입니다.
|
|
사용자가 브라우저의 뒤로 가기, 앞으로 가기, 새로운 페이지 추가 같은 탐색 기록과 관련된 동작을 프로그래밍적으로 제어할 수 있습니다.
|
|
|
|
* history.length : 현재 세션 히스토리의 길이(기록된 페이지 수)를 반환합니다.
|
|
* history.back() : 사용자의 브라우저에서 "뒤로 가기" 동작을 실행합니다.
|
|
* history.forward() : 사용자의 브라우저에서 "앞으로 가기" 동작을 실행합니다.
|
|
* history.go() : 히스토리에서 특정 위치로 이동합니다.
|
|
- history.go(-1)은 뒤로 가기와 동일.
|
|
- history.go(1)은 앞으로 가기와 동일.
|
|
- history.go(0)은 현재 페이지를 다시 로드합니다.
|
|
* history.pushState() : 세션 히스토리에 새 기록을 추가합니다. 페이지를 이동하지 않고도 브라우저의 URL을 변경할 수 있습니다.
|
|
- state (object): 상태 데이터(저장할 객체).
|
|
- title (string): 페이지의 제목(현재 대부분 무시됨).
|
|
- url (string): URL(상대 경로나 절대 경로).
|
|
* history.replaceState() : 세션 히스토리의 현재 기록을 변경합니다.
|
|
|
|
## console
|
|
console 객체는 자바스크립트에서 디버깅과 로깅을 위한 강력한 도구입니다.
|
|
주로 브라우저의 개발자 도구(Developer Tools)에 접근해 로그를 출력하거나, 디버깅 정보를 확인하는 데 사용됩니다.
|
|
|
|
* console.log() : 일반적인 메시지 또는 데이터를 출력. 가장 기본적인 출력 메서드입니다.
|
|
* console.info()
|
|
* console.warn()
|
|
* console.error()
|
|
* console.table() : 객체나 배열 데이터를 표 형태로 출력. 데이터의 구조를 한눈에 파악할 수 있어 유용합니다.
|
|
* console.dir() : 객체의 속성과 프로퍼티를 트리 형태로 출력. DOM 요소나 복잡한 객체의 구조를 확인할 때 유용합니다.
|
|
* console.assert() : 특정 조건이 거짓일 경우에만 메시지를 출력. 테스트용으로 많이 사용.
|
|
* console.trace() : 현재 코드의 호출 스택(Call Stack)을 출력. 코드 실행 경로를 추적하는 데 유용.
|
|
* console.time() / console.timeEnd() : 코드 실행 시간을 측정. 성능 테스트에 유용합니다.
|
|
* console.group() / console.groupEnd() : 로그 메시지를 그룹화하여 출력. 중첩된 그룹도 생성 가능.
|
|
* console.groupCollapsed() : console.group()와 동일하지만, 그룹이 축소된 상태로 시작.
|
|
* console.clear() : 콘솔 내용을 모두 지웁니다.
|
|
* console.count() : 특정 메시지가 호출된 횟수를 카운트.
|
|
* console.countReset() : console.count()의 카운터를 초기화.
|