자바스크립트에서 브라우저 객체는 웹 브라우저 환경에서 제공되는 객체들을 가리킵니다. 이 객체들은 웹 페이지의 구조, 동작, 사용자와의 상호 작용을 다루는 데 사용됩니다. 주요한 브라우저 객체에는 다음과 같은 것들이 있습니다:
1. 브라우저 객체의 종류
(1) Window 객체
자바스크립트 코드가 실행되는 전역 객체입니다.
브라우저 창을 나타내며, 창의 속성과 메소드를 다룰 수 있습니다.
(2) Document 객체
현재 페이지의 내용을 나타내는 객체입니다.
웹 페이지의 구조를 조작하고, 요소를 선택하고, 변경할 수 있습니다.
(3) Navigator 객체
브라우저의 정보를 제공합니다.
브라우저의 이름, 버전, 운영 체제 등의 정보를 얻을 수 있습니다.
(4) Location 객체
현재 페이지의 URL 정보를 다루는 객체입니다.
URL을 조작하거나 파싱할 수 있습니다.
(5) History 객체
브라우저의 세션 히스토리를 조작하는 객체입니다.
사용자가 이전 또는 다음 페이지로 이동하도록 할 수 있습니다.
(6) XMLHttpRequest 객체
비동기적으로 서버와 통신할 수 있는 객체입니다.
AJAX 요청을 보내거나 서버로부터 데이터를 받을 때 사용됩니다.
(7) Console 객체
브라우저의 개발자 도구 콘솔에 메시지를 출력하는 데 사용됩니다.
디버깅 및 로깅에 유용합니다.
2. 브라우저 객체 사용법
(1) Window 객체
Window 객체는 자바스크립트에서 전역 객체로서, 브라우저 창을 나타내는 객체입니다. 여러 가지 속성과 메서드를 포함하고 있어 웹 페이지의 다양한 측면을 조작하고 관리하는 데 사용됩니다. 아래는 Window 객체의 몇 가지 주요 속성과 메서드, 그리고 간단한 사용 예시들입니다.
window.document : 현재 문서(Document)를 나타내는 Document 객체에 접근합니다.
window.location : 현재 창의 URL 정보를 다루는 Location 객체에 접근합니다.
window.navigator : 브라우저의 정보를 다루는 Navigator 객체에 접근합니다.
window.alert(message) : 경고 창을 띄우는 메서드입니다.
window.confirm(message) : 확인/취소 버튼이 있는 대화 상자를 띄우고 사용자의 응답을 받는 메서드입니다.
window.prompt(message, defaultText) : 입력 필드가 있는 대화 상자를 띄우고 사용자에게 텍스트를 입력받는 메서드입니다.
window.setTimeout(function, milliseconds) : 일정 시간이 지난 후에 함수를 실행하는 메서드입니다.
window.setInterval(function, milliseconds) : 일정 간격으로 함수를 반복 실행하는 메서드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window 객체 함수 예제</title>
</head>
<body>
<script>
// 1. Alert 창 띄우기
window.alert("안녕하세요!");
// 2. Confirm 대화 상자
if (window.confirm("계속 진행하시겠습니까?")) {
console.log("사용자가 확인을 선택했습니다.");
} else {
console.log("사용자가 취소를 선택했습니다.");
}
// 3. Prompt 대화 상자
const userInput = window.prompt("이름을 입력하세요.", "홍길동");
console.log("사용자가 입력한 값:", userInput);
// 4. 현재 창의 URL 정보
const currentURL = window.location.href;
console.log("현재 URL:", currentURL);
// 5. 브라우저 창을 새로고침
window.location.reload();
// 6. 브라우저 창을 새로 열기
window.open("https://www.example.com", "_blank");
// 7. 현재 창 닫기
window.close();
// 8. 브라우저 창의 높이와 너비 가져오기
const windowHeight = window.innerHeight;
const windowWidth = window.innerWidth;
console.log("창의 높이:", windowHeight, "창의 너비:", windowWidth);
// 9. 스크롤바 위치 가져오기
const scrollTop = window.scrollY;
const scrollLeft = window.scrollX;
console.log("세로 스크롤 위치:", scrollTop, "가로 스크롤 위치:", scrollLeft);
// 10. 브라우저의 높이와 너비 가져오기
const screenHeight = window.screen.height;
const screenWidth = window.screen.width;
console.log("화면의 높이:", screenHeight, "화면의 너비:", screenWidth);
// 11. 브라우저가 온라인인지 확인
const isOnline = window.navigator.onLine;
console.log("온라인 여부:", isOnline ? "온라인" : "오프라인");
// 12. 브라우저의 이름과 버전 정보
const browserName = window.navigator.appName;
const browserVersion = window.navigator.appVersion;
console.log("브라우저 이름:", browserName, "버전:", browserVersion);
// 13. 쿠키 설정
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
// 14. 쿠키 가져오기
const usernameCookie = document.cookie;
console.log("쿠키:", usernameCookie);
// 15. setTimeout으로 일정 시간 후에 함수 실행
function greet() {
console.log("안녕하세요!");
}
window.setTimeout(greet, 2000); // 2초 후에 greet 함수 실행
// 16. setInterval로 일정 간격으로 함수 실행
function printTime() {
const currentTime = new Date();
console.log("현재 시간:", currentTime.toLocaleTimeString());
}
window.setInterval(printTime, 1000); // 1초 간격으로 printTime 함수 실행
</script>
</body>
</html>
(2) Document 객체
Document 객체는 웹 페이지의 내용을 나타내며 조작할 수 있는 객체입니다. HTML 문서의 구조를 표현하고, 웹 페이지에 있는 요소들을 선택하고 조작할 때 사용됩니다. 아래는 Document 객체의 주요 종류와 간단한 설명, 그리고 사용 예시를 담은 HTML 파일입니다.
document : 현재 문서를 나타내는 객체로, 기본적인 문서 조작 메서드를 제공합니다.
document.documentElement : <html> 요소를 나타내는 객체로, HTML 문서의 최상위 요소입니다.
document.body : <body> 요소를 나타내는 객체로, 웹 페이지의 본문을 다룰 수 있습니다.
document.head : <head> 요소를 나타내는 객체로, 문서의 헤더 부분을 조작할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document 객체 사용 예제</title>
</head>
<body>
<script>
// 1. 현재 문서의 제목 변경
document.title = "새로운 제목";
// 2. 현재 문서의 내용 변경
document.body.innerHTML = "<h1>Hello, Document 객체!</h1>";
// 3. 새로운 요소 생성 및 추가
const newParagraph = document.createElement("p");
newParagraph.textContent = "이것은 새로운 단락입니다.";
document.body.appendChild(newParagraph);
// 4. 요소 선택 및 스타일 변경
const headerElement = document.querySelector("h1");
headerElement.style.color = "blue";
// 5. 이벤트 리스너 등록
function handleClick() {
alert("클릭 이벤트 발생!");
}
document.body.addEventListener("click", handleClick);
</script>
</body>
</html>
(3) Navigator 객체
Navigator 객체는 브라우저의 정보를 제공하는 객체로, 사용자 에이전트(User Agent)와 관련된 정보, 브라우저의 지원 기능, 언어 설정 등에 대한 정보를 포함합니다. 아래는 Navigator 객체의 주요 속성 중 몇 가지와 사용 예시를 담은 HTML 파일입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigator 객체 사용 예제</title>
</head>
<body>
<script>
// 1. 브라우저의 이름과 버전 정보
const browserName = navigator.appName;
const browserVersion = navigator.appVersion;
console.log("브라우저 이름:", browserName, "버전:", browserVersion);
// 2. 사용자 에이전트 정보
const userAgent = navigator.userAgent;
console.log("사용자 에이전트:", userAgent);
// 3. 브라우저의 언어 설정
const userLanguage = navigator.language || navigator.userLanguage;
console.log("브라우저 언어:", userLanguage);
// 4. 플랫폼 정보
const platform = navigator.platform;
console.log("플랫폼:", platform);
// 5. 쿠키를 지원하는지 여부
const isCookieEnabled = navigator.cookieEnabled;
console.log("쿠키 지원 여부:", isCookieEnabled ? "지원함" : "지원하지 않음");
// 6. 자바스크립트가 활성화되어 있는지 여부
const isJavaScriptEnabled = navigator.javaEnabled();
console.log("자바스크립트 활성화 여부:", isJavaScriptEnabled ? "활성화됨" : "비활성화됨");
// 7. 온라인 여부
const isOnline = navigator.onLine;
console.log("온라인 여부:", isOnline ? "온라인" : "오프라인");
// 8. 웹픽셀 지원 여부
const isWebPEnabled = navigator.mimeTypes["image/webp"];
console.log("WebP 지원 여부:", isWebPEnabled ? "지원함" : "지원하지 않음");
</script>
</body>
</html>
(4) Location 객체
Location 객체는 현재 문서의 URL 정보를 나타내고 조작하는 데 사용되는 자바스크립트 객체입니다. 이 객체는 window.location을 통해 접근할 수 있습니다. Location 객체는 현재 문서의 URL을 분해하고, 프로토콜, 호스트, 경로, 쿼리 매개변수 등의 정보를 제공합니다.
href :전체 URL을 나타냅니다.
protocol : URL의 프로토콜 (예: "http:", "https:")을 나타냅니다.
host : URL의 호스트 이름과 포트 번호를 나타냅니다.
hostname : URL의 호스트 이름을 나타냅니다.
port : URL의 포트 번호를 나타냅니다.
pathname : URL의 경로를 나타냅니다.
search : URL의 쿼리 매개변수를 나타냅니다.
hash : URL의 해시 부분을 나타냅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Location 객체 사용 예제</title>
</head>
<body>
<script>
// 현재 문서의 전체 URL
const currentURL = window.location.href;
console.log("현재 URL:", currentURL);
// 프로토콜 (http, https 등)
const protocol = window.location.protocol;
console.log("프로토콜:", protocol);
// 호스트 이름과 포트 번호
const host = window.location.host;
console.log("호스트:", host);
// 호스트 이름
const hostname = window.location.hostname;
console.log("호스트 이름:", hostname);
// 포트 번호
const port = window.location.port;
console.log("포트 번호:", port);
// 경로
const pathname = window.location.pathname;
console.log("경로:", pathname);
// 쿼리 매개변수
const search = window.location.search;
console.log("쿼리 매개변수:", search);
// 해시 부분
const hash = window.location.hash;
console.log("해시:", hash);
</script>
</body>
</html>
다음 포스팅에서는 (5) History 객체, (6) XMLHttpRequest 객체, (7) Console 객체에 대해 이어서 설명하도록 하겠습니다.
'#IT 개발노트' 카테고리의 다른 글
| [DB] MSSQL 기본 쿼리 (테이블, 컬럼, 인덱스, 프로시저, DB Lock 조회) (0) | 2024.04.04 |
|---|---|
| JavaScript(자바스크립트) 브라우저 객체 2탄 (0) | 2024.02.02 |
| 자주 사용되는 자바스크립트 이벤트 (0) | 2024.01.29 |
| 가장 많이 사용하는 HTML Tag (0) | 2024.01.17 |
| 데이터베이스 설계 방법 (0) | 2024.01.14 |
