1. navigator 객체 프로퍼티 나열
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border : 1px solid yellowgreen;
}
</style>
</head>
<body>
<h3>브라우저에 관한 정보 출력</h3>
아래에 이 브라우저에 관한 여러 정보를 출력합니다.
<hr>
<div></div>
<script>
let div = document.getElementsByTagName("div");
text = div[0].innerHTML;
text+="appCodeName : " + window.navigator.appCodeName + "<br>";
text+="appName : " + window.navigator.appName + "<br>";
text+="appVersion : " + window.navigator.appVersion + "<br>";
text+="platform : " + window.navigator.platform + "<br>";
text+="userAgent : " + window.navigator.product + "<br>";
text+="vendor : " + window.navigator.vendor + "<br>";
text+="language : " + window.navigator.language + "<br>";
text+="onLine" + window.navigator.onLine + "<br>";
text+="cookedEnabled" + window.navigator.cookieEnabled + "<br>";
text+="javaEnabled()" + window.navigator.javaEnabled() + "<br>";
text+="plugins.length : " + window.navigator.plugins.length + "<br>";
text+="plugins : " + "<br>";
for(let i = 0;i<window.navigator.plugins.length;i++){
text += navigator.plugins[i].name + "<br>"
text += "<i>"+navigator.plugins[i].description + "+</i><br>"
text += navigator.plugins[i].filename + "<br>";
}
text+="cookedEnabled" + window.navigator.cookieEnabled + "<br>";
div.innerHTML = text;
</script>
</body>
</html>2. history 객체 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
margin : 10px;
}
</style>
</head>
<body>
<h1>history 객체 활용</h1>
<hr>
<button onclick = "history.back()">back()</button>
<button onclick = "history.go(-1)">go(-1)()</button>
<button onclick = "history.forward()">forward()</button>
</body>
</html>3. 구글 chrome 브라우저 감별기 - navigator 객체 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>구글 chrome 브라우저 감별</h1>
<hr>
<script>
function ifChrome(){
if(self.navigator.vendor == "Google Inc."){
if(self.navigator.userAgent.indexOf("Chrome") != -1 ){
alert("구글 chrome 브라우저입니다");
}
else{
alert("구글 chrome 브라우저가 아닙니다");
}
}
else{
alert("구글 chrome 브라우저가 아닙니다");
}
}
ifChrome();
</script>
</body>
</html>4. 해상도 경고 메시지 출력 - screen 객체 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>screen 객체 활용</h1>
<hr>
안녕하세요오오오
<script>
window.onload = checkResolution;
function checkResolution(){
if(window.outerWidth<1280 || window.outerHeight<1024){
alert("스크린 해상도가 낮습니다!");
document.write(window.outerWidth + "x" + window.outerHeight);
}
}
window.onchange = checkResolution;
</script>
</body>
</html>'CS Study > Javascript' 카테고리의 다른 글
| 11. 쿠키, 웹 스토리지 (0) | 2022.04.08 |
|---|---|
| 10. 캔버스 그래픽 (0) | 2022.04.08 |
| 8. Window 객체 (0) | 2022.04.08 |
| 7. 이벤트 객체(2) - 문서, 이미지 로딩 / 폼 이벤트 (0) | 2022.04.08 |
| 6. 이벤트 객체 (1) - 마우스 핸들링 (0) | 2022.04.08 |