728x90
2) 브라우저 객체(BOM)
이전 시간에 이어서
window 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 창</title>
</head>
<body>
<p>문서를 열면 팝업 창이 표시</p>
<script type="text/javascript">
function win(){
//window.opem("보여주는 소스(경로)", "창 이름(생략 시 계속 창이 열림)","브라우저 창의 구성 요소(높이,폭,...)")
window.open("open_window.html","pop","width=400, height=500");
}
</script>
<button type="button" onclick="win()">열기</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 창1</title>
</head>
<body onload="openPopup()">
<p>문서를 열면 팝업 창이 표시</p>
<script type="text/javascript">
function openPopup() {
let newWin = window.open("open_window.html","pop","width=400, height=500");
//window.open() 메소드는 메인 홈페이지에 찾아가서 팝업 차단이 되어 있으면 null값을 가짐
if(newWin==null){
window.alert("팝업이 차단되었습니다. 팝업 차단 해주세요.");
}
//새로고침 할 때마다 팝업 차단이 해제되어 있으면 가로 100px, 세로 100px 씩 이동
newWin.moveBy(100,100);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>공지사항</title>
</head>
<body>
<h3>공지 사항</h3>
<ol>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
<li>항목5</li>
</ol>
<button type="button" onclick="cls()">닫기</button>
<script type="text/javascript">
function cls() {
//현재 창을 닫는 메소드
window.close();
}
</script>
</body>
</html>
navigator 객체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>navigator 객체</title>
</head>
<body onload="win5()">
브라우저 정보
<script type="text/javascript">
function win5() {
alert(navigator.userAgent);
}
</script>
<!-- <input type="button" value="브라우저 정보" onclick="win5()"> -->
</body>
</html>
history 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history 객체</title>
</head>
<body>
<input type="button" value="방문한 기록 개수" onclick="fun1()">
<input type="button" value="뒤로 한 칸 이동" onclick="fun2()">
<input type="button" value="앞으로 한 칸 이동" onclick="fun3()">
<script type="text/javascript">
function fun1() {
alert(history.length);
}
function fun2() {
alert("한 칸 뒤로 이동");
history.back();
//history.go(-1);
}
function fun3() {
alert("한 칸 앞으로 이동");
history.forward();
//history.go(1);
}
</script>
</body>
</html>
location 객체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>location 객체</title>
</head>
<body>
주소 이동<br>
<hr>
<input type="button" value="현재 페이지 주소 알림" onclick="fun1()">
<input type="button" value="주소 이동" onclick="fun2()">
<input type="button" value="경고창 + 주소 이동" onclick="fun3()">
<input type="button" value="새로고침" onclick="fun4()">
<input type="button" value="현재 문서에 새 문서 주소를 할당해서 새 문서 가져오기" onclick="fun5()">
<input type="button" value="현재 문서의 url을 지우고 다른 url의 문서로 교체" onclick="fun6()">
<input type="button" value="3초후 지정된 문서로 이동" onclick="fun7()">
<script type="text/javascript">
//location.href => 주소 표시줄의 내용을 저장하는 변수(하이퍼링크)
//location.reload() => 새로고침 기능
function fun1() {
alert(location.href);
}
function fun2() {
location.href="https://www.google.com";
}
function fun3() {
alert("history.html로 이동");
location.href="history.html";
}
function fun4() {
alert("새로고침, F5");
location.reload;
}
function fun5() {
//현재 문서에서 새 문서 주소를 할당해서 새 문서를 가져옴
//이전 페이지로 돌아갈 수 없는 구조
location.assign("https://001cloudid.tistory.com/");
}
function fun6() {
//현재 문서의 url을 지우고 다른 url의 문서로 교체
//이전 페이지로 돌아갈 수 없는 구조
location.replace("https://001cloudid.tistory.com/");
}
//3초 후에 지정된 문서로 이동
function fun7(url){
window.setTimeout("location.href=`" + url + "`", 3000);
}
</script>
<hr>
<script type="text/javascript">
document.write("URL : " , location.href ,"<br>");
document.write("프로토콜 : ", location.protocol,"<br>");
document.write("경로 : ", location.pathname,"<br>");
document.write("포트번호 : ", location.port,"<br>");
document.write("호스트 이름, 포트번호 : ", location.host,"<br>");
</script>
</body>
</html>
screen 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>screen 객체</title>
</head>
<body>
<script type="text/javascript">
let ah = screen.availHeight;
let aw = screen.availWidth;
let h = screen.height;
let w = screen.width;
let c = screen.colorDepth;
let p = screen.pixelDepth;
document.write(`사용 가능한 높이 : ${ah} <br>`);
document.write(`사용 가능한 폭 : ${aw} <br>`);
document.write(`전체 높이 : ${h}<br>`);
document.write(`전체 폭 : ${w}<br>`);
document.write(`이미지 비트 심도 : ${c}<br>`);
document.write(`색상 해상도 : ${p}<br><hr>`);
document.write(`전체 나타낼 수 있는 해상도 ${Math.pow(2, p)}가지`);
</script>
</body>
</html>
728x90
'KDT > JavaScript' 카테고리의 다른 글
| 240219 자바스크립트 jQuery (0) | 2024.02.19 |
|---|---|
| 240208 자바스크립트 (0) | 2024.02.08 |
| 240205 자바스크립트 (0) | 2024.02.05 |
| 240201 자바스크립트 (0) | 2024.02.01 |
| 240131 자바스크립트 (0) | 2024.01.31 |