자바스크립트 브라우저 객체 이어서 설명하도록 하겠습니다.
1. 브라우저 객체 사용법
(5) History 객체
History 객체는 브라우저의 세션 히스토리를 조작하는 데 사용되는 자바스크립트 객체입니다. 이 객체는 window.history를 통해 접근할 수 있습니다. History 객체를 사용하면 브라우저의 이전 및 다음 페이지로 이동하거나, 히스토리 스택을 조작할 수 있습니다.
back() : 브라우저의 히스토리에서 한 페이지 이전으로 이동합니다.
forward() : 브라우저의 히스토리에서 한 페이지 다음으로 이동합니다.
go(delta) : 히스토리에서 delta에 지정된 페이지 수만큼 이동합니다. delta가 양수면 앞으로, 음수면 뒤로 이동합니다.
pushState(state, title, url) : 새로운 상태를 히스토리 스택에 추가하며, 현재 페이지의 URL을 변경합니다.
replaceState(state, title, url) : 현재 상태를 히스토리 스택에서 교체하며, 현재 페이지의 URL을 변경합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>History 객체 사용 예제</title>
</head>
<body>
<script>
// 이전 페이지로 이동
function goBack() {
window.history.back();
}
// 다음 페이지로 이동
function goForward() {
window.history.forward();
}
// 히스토리에서 특정 페이지로 이동
function goToPage(delta) {
window.history.go(delta);
}
// 새로운 상태를 히스토리에 추가
function addHistory() {
const state = { page: "newPage" };
const title = "새로운 페이지";
const url = "/new-page";
window.history.pushState(state, title, url);
}
// 현재 상태를 히스토리에서 교체
function replaceHistory() {
const state = { page: "replacedPage" };
const title = "교체된 페이지";
const url = "/replaced-page";
window.history.replaceState(state, title, url);
}
</script>
<button onclick="goBack()">이전 페이지로</button>
<button onclick="goForward()">다음 페이지로</button>
<button onclick="goToPage(-2)">두 페이지 뒤로</button>
<button onclick="addHistory()">새로운 상태 추가</button>
<button onclick="replaceHistory()">현재 상태 교체</button>
</body>
</html>
(6) XMLHttpRequest 객체
XMLHttpRequest 객체는 웹 페이지와 웹 서버 간에 데이터를 주고받기 위해 사용되는 자바스크립트 객체입니다. 이 객체를 사용하면 비동기적으로 서버와 통신하여 데이터를 가져오거나 전송할 수 있습니다. 주로 AJAX (Asynchronous JavaScript and XML) 기술에서 사용되며, 최근에는 Fetch API가 더 표준적이고 강력한 대안으로 사용되기도 합니다.
open(method, url, async) : 요청을 초기화합니다.
method : HTTP 메서드 (GET, POST 등)
url : 요청을 보낼 URL
async : 비동기 여부를 나타내는 불리언 값
send(data) : 서버로 요청을 전송합니다.
data : 요청에 포함될 데이터 (POST 요청 시)
setRequestHeader(header, value) : HTTP 헤더를 설정합니다.
header : 헤더의 이름
value : 헤더의 값
onreadystatechange : 요청 상태가 변경될 때 호출되는 이벤트 핸들러를 설정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest 객체 사용 예제</title>
</head>
<body>
<script>
// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();
// 요청을 초기화
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
// 요청 상태가 변경될 때의 이벤트 핸들러 설정
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 요청이 완료되고 성공적으로 처리된 경우
const responseData = JSON.parse(xhr.responseText);
console.log('서버 응답:', responseData);
}
};
// 요청 헤더 설정 (선택 사항)
// xhr.setRequestHeader('Content-Type', 'application/json');
// 요청 전송
xhr.send();
</script>
</body>
</html>
(7) Console 객체
Console 객체는 자바스크립트에서 콘솔(console)에 메시지를 출력하고 디버깅을 위한 다양한 도구 및 메서드를 제공하는 객체입니다. 이 객체는 웹 브라우저의 개발자 도구 콘솔에 로그를 출력하거나 디버깅 정보를 표시하는 데 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Console 객체 사용 예제</title>
</head>
<body>
<script>
// 간단한 로그 출력
console.log("일반 로그 메시지");
// 정보 메시지 출력
console.info("이것은 정보 메시지입니다.");
// 경고 메시지 출력
console.warn("경고! 이 작업은 조심해야 합니다.");
// 오류 메시지 출력
console.error("에러 발생!");
</script>
</body>
</html>'#IT 개발노트' 카테고리의 다른 글
| 원격 서버 자원(CPU/MEM/DISK) 모니터링 (0) | 2024.05.23 |
|---|---|
| [DB] MSSQL 기본 쿼리 (테이블, 컬럼, 인덱스, 프로시저, DB Lock 조회) (0) | 2024.04.04 |
| JavaScript(자바스크립트) 브라우저 객체 1탄 (0) | 2024.02.02 |
| 자주 사용되는 자바스크립트 이벤트 (0) | 2024.01.29 |
| 가장 많이 사용하는 HTML Tag (0) | 2024.01.17 |
