navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체이다. 이 객체의 이름은 넷스케이프(Netscape)의 초기 웹 브라우저였던 네비게이터(Navigator)에서 유래되었다.
과거에는 방문자의 웹 브라우저의 종류를 미리 파악하여 조치함으로써, 브라우저 간의 호환성을 유지하였다. 이렇게 호환성을 유지하는 방법을 브라우저 스니핑(browser sniffing)이라고 한다.
navigator 객체는 이러한 브라우저 스니핑에서 사용할 수 있는 다양한 표준 프로퍼티 및 비표준 프로퍼티를 제공한다. 하지만 현재는 이 방법보다 필요한 프로퍼티만을 간단하게 테스트하는 기능 테스팅 방법을 더 많이 사용한다.
navigator 객체의 appName과 appCodeName 프로퍼티는 현재 사용하고 있는 브라우저의 전체 이름을 반환한다. 하지만 브라우저 간의 호환성을 위해 스니핑 코드로 대부분의 브라우저가 브라우저 이름을 "Netscape"로 사용한다. 또한, 대부분의 브라우저가 브라우저 코드명을 "Mozilla"로 사용한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Navigator Object</title>
</head>
<body>
<h1>현재 브라우저의 이름</h1>
<script>
document.write("현재 사용 중인 브라우저의 이름은 " + navigator.appName + "입니다.<br>");
document.write("또한, 해당 브라우저의 코드명은 " + navigator.appCodeName + "입니다.");
</script>
</body>
</html>
실행결과
익스플로러 11 버전, 크롬, 파이어폭스와 사파리는 모두 브라우저의 이름을 "Netscape"로 사용한다.
익스플로러 10 이하 버전, 크롬, 파이어폭스, 사파리와 오페라 모두 브라우저 코드명을 "Mozilla" 로 사용한다.
💡 TIP ? 이 프로퍼티는 웹 표준에서 제외되었으므로 될 수 있으면 사용하지 않는 것이 좋다.
navigator 객체의 appVersion과 userAgent 프로퍼티는 현재 사용하고 있는 브라우저의 버전 정보를 문자열로 반환한다.
이 프로퍼티의 결과로 반환되는 문자열에 대한 표준 형식은 따로 명시되어 있지 않다. 따라서 브라우저마다 약간씩 다른 형식의 문자열로 결과를 반환한다. 또한, userAgent 프로퍼티의 결과값은 appVersion 프로퍼티의 정보뿐만 아니라 상세 정보를 추가로 포함한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Navigator Object</title>
</head>
<body>
<h1>현재 브라우저의 버전</h1>
<script>
document.write("현재 사용 중인 브라우저의 버전 정보는 " + navigator.appVersion + "입니다.<br><br>");
document.write("userAgent 프로퍼티로 알 수 있는 추가 정보는 " + navigator.userAgent + "입니다.");
</script>
</body>
</html>
실행 결과
💡 TIP ? 이 프로퍼티는 웹 표준에서 제외되었으므로, 될 수 있으면 사용하지 않는 것이 좋다.
navigator 객체의 platform 프로퍼티는 현재 브라우저가 실행되고 있는 운영체제를 식별하는 문자열을 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Navigator Object</title>
</head>
<body>
<h1>현재 브라우저가 실행되고 있는 운영체제</h1>
<script>
document.write("현재 브라우저가 실행되고 있는 운영체제는 " + navigator.platform + "입니다.");
</script>
</body>
</html>
실행 결과
navigator 객체의 language 프로퍼티는 현재 사용 중인 브라우저의 기본 언어 설정을 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Navigator Object</title>
</head>
<body>
<h1>현재 브라우저의 기본 언어 설정</h1>
<script>
document.write("현재 브라우저의 기본 언어 설정은 " + navigator.language + "입니다.");
</script>
</body>
</html>
실행 결과
navigator 객체의 javaEnabled() 메소드는 현재 사용 중인 브라우저가 자바 애플릿을 실행할 수 있는지를 검사하는 비표준 메소드이다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Navigator Object</title>
</head>
<body>
<h1>자바 애플릿 실행 여부</h1>
<script>
document.write("현재 브라우저는 자바 애플릿를 ");
if (navigator.javaEnabled()) {
document.write("실행할 수 있습니다.");
} else {
document.write("실행할 수 없습니다.");
}
</script>
</body>
</html>
실행 결과
navigator 객체의 cookieEnabled 프로퍼티는 현재 사용 중인 브라우저가 쿠키를 사용할 수 있는지를 검사하는 비표준 프로퍼티이다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Navigator Object</title>
</head>
<body>
<h1>쿠키(cookie) 사용 여부</h1>
<script>
document.write("현재 브라우저는 쿠키를 ");
if (navigator.cookieEnabled) {
document.write("사용할 수 있습니다.");
} else {
document.write("사용할 수 없습니다.");
}
</script>
</body>
</html>
실행 결과
사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 다음과 같은 메소드를 제공한다.
window 객체의 alert() 메소드는 사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다린다.
문법
window.alert("간단한 메시지");
사용자는 대화 상자의 확인 버튼을 눌러야만 다른 작업을 진행할 수 있다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Dialog Box</title>
</head>
<body>
<h1>alert() 메소드</h1>
<button onclick="alertDialogBox()">alert 대화 상자</button>
<script>
function alertDialogBox() {
alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
}
</script>
</body>
</html>
실행 결과
💡 TIP ? window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사를 생략할 수 있다.
window 객체의 confirm() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언 값으로 반환한다.
문법
window.confirm("간단한 메시지");
사용자가 확인을 누르면 true를 반환하고, 취소를 누르면 false를 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Dialog Box</title>
</head>
<body>
<h1>confirm() 메소드</h1>
<button onclick="confirmDialogBox()">confirm 대화 상자</button>
<p id="text"></p>
<script>
function confirmDialogBox() {
var str;
if (confirm("확인이나 취소를 눌러주세요!") == true) {
str = "당신은 확인을 눌렀습니다!";
} else {
str = "당신은 취소을 눌렀습니다!";
}
document.getElementById("text").innerHTML = str;
}
</script>
</body>
</html>
실행 결과
window 객체의 prompt() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 입력한 문자열을 반환한다.
문법
window.prompt("간단한 메시지" + "입력란의 기본 메시지");
사용자가 대화 상자에 입력한 텍스트를 문자열 타입으로 반환한다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Dialog Box</title>
</head>
<body>
<h1>prompt() 메소드</h1>
<button onclick="promptDialogBox()">prompt 대화 상자</button>
<p id="text"></p>
<script>
function promptDialogBox() {
var inputStr = prompt("당신의 이름을 입력해 주세요 : ", "홍길동");
if (inputStr != null) {
document.getElementById("text").innerHTML = "당신의 이름은 " + inputStr + "입니다.";
}
}
</script>
</body>
</html>
실행 결과
위에서 살펴본 대화 상자 이외에도 showModalDialog() 메소드를 이용하면, 좀 더 복잡한 대화 상자를 만들 수 있다. 하지만 이러한 대화 상자는 모두 사용자의 응답이 있을 때까지 브라우저의 실행을 강제로 중단시킨다. 따라서 사용자 측면에서 보면 불편할 수도 있으므로, 대화 상자는 될 수 있으면 자주 사용하지 않는 것이 좋다.
window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공한다.
또한, 이렇게 설정된 함수의 호출을 취소할 수 있도록 다음 메소드를 제공한다.
setTimeout() 메소드는 명시된 시간이 지난 뒤에 지정된 함수를 호출한다.
문법
window.setTimeout(호출할 함수, 지연시간);
이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환한다.
이 메소드는 밀리초(milliseconds) 단위로 지연 시간을 설정할 수 있다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Timer</title>
</head>
<body>
<h1>setTimeout() 메소드</h1>
<button onclick="startTimeout()">2초 뒤에 현재 시간을 표시합니다!</button>
<p id="date"></p>
<script>
function startTimeout() {
setTimeout(printCurrentDate, 2000);
}
function printCurrentDate() {
document.getElementById("date").innerHTML = new Date();
}
</script>
</body>
</html>
실행결과
setInterval() 메소드는 지정된 시간 간격마다 지정된 함수를 반복적으로 호출한다.
문법
window.setInterval(호출할 함수, 지연시간);
이 메소드가 성공적으로 호출되면, 설정된 timeoutID를 반환한다.
이 메소드는 밀리초(milliseconds) 단위로 시간 간격을 설정할 수 있다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Timer</title>
</head>
<body>
<h1>setInterval() 메소드</h1>
<button onclick="startInterval()">2초마다 현재 시간을 표시합니다!</button>
<p id="date"></p>
<script>
function startInterval() {
setInterval(printCurrentDate, 2000);
}
function printCurrentDate() {
document.getElementById("date").innerHTML += new Date() + "<br>";
}
</script>
</body>
</html>
실행 결과
setTimeout() 메소드의 반환값을 clearTimeout() 메소드의 인수로 전달하면, 계획된 함수의 호출을 취소할 수 있다.
문법
window.clearTimeout(timeoutID);
이 메소드는 setTimeout() 메소드에 의해 함수가 호출되기 전에 실행되어야 호출을 취소할 수 있다.
함수가 호출된 이후에 이 메소드를 호출하면 아무런 동작도 하지 않는다.
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Timer</title>
</head>
<body>
<h1>clearTimeout() 메소드</h1>
<button onclick="startTimeout()">2초 뒤에 현재 시간을 표시합니다!</button>
<button onclick="cancelTimeout()">시간 표시 취소!</button>
<p id="date"></p>
<script>
var timeoutId;
function startTimeout() {
timeoutId = setTimeout(printCurrentDate, 2000);
}
function cancelTimeout() {
clearTimeout(timeoutId);
}
function printCurrentDate() {
document.getElementById("date").innerHTML += new Date() + "<br>";
}
</script>
</body>
</html>
실행 결과
setInterval() 메소드의 반환값을 clearInterval() 메소드의 인수로 전달하면, 반복되는 함수의 호출을 취소할 수 있다.
문법
window.clearInterval(timeoutID);
🔔 예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript BOM Timer</title>
</head>
<body>
<h1>setInterval() 메소드</h1>
<button onclick="startInterval()">2초마다 현재 시간을 표시합니다!</button>
<button onclick="cancelInterval()">시간 갱신 중지!</button>
<p id="date"></p>
<script>
var timeoutId;
function startInterval() {
timeoutId = setInterval(printCurrentDate, 2000);
}
function cancelInterval() {
clearInterval(timeoutId);
}
function printCurrentDate() {
document.getElementById("date").innerHTML += new Date() + "<br>";
}
</script>
</body>
</html>
실행 결과
| [JavaScript] 예외 처리 / Strict 모드 (0) | 2018.10.23 |
|---|---|
| [JavaScript] 이벤트 (0) | 2018.10.22 |
| [JavaScript] Location 객체 / History 객체 / Screen 객체 (0) | 2018.10.22 |
| [JavaScript] Window 객체 (0) | 2018.10.22 |
| [JavaScript] 노드의 조작 (0) | 2018.10.22 |