15. 브라우저 객체 모델 (BOM, Browser Object Model)
: 브라우저에 내장된 객체가 계층적 구조로 이루어져있는 것을 말함
1) window 객체
# 메서드
*open("URL", "새창 이름", "새창 옵션들") : 팝업창
* 새창 옵션들 *
width : 창 너비
height : 창 높이
left : 창 x 축 좌표
top : 창 y 축 좌표
scrollbars : 스크롤바 숨김 / 노출 설정. no/yes
location : url 주소 입력하는 영역 숨김/노출 설정
status : 상태 표시줄 영역 숨김/ 노출 설정
toolbars : 도구 상자 영역 숨김/ 노출 설정
alert(data) : 경고창에 data 보여주기
confirm("질문") : 질문 확인/취소. 확인 : true 리턴, 취소 : false 리턴
prompt("질문", "기본 답변") :입력창
moveTo(x,y) : 지정한 새창의 위치를 이동
resizeTo(width, height) : 창크기 변경
*setIntervar(funtion(){}, 시간간격) : 지속적으로 지정한 시간간격을 두고 함수실행
*clearInterval() : 인터벌 삭제
*setTimeout(funtion(){...}, 시간간격) : 지정한 시간 이후 함수 한번 실행
*clearTimeout() : 타임아웃 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="window.clearInterval(inter)"> 정지 </button>
<button onclick="window.clearTimeout(out)"> 타임아웃 취소 </button>
<script> //15 - 1
// 5초후 타임아웃 콘솔창에뜸
let out = window.setTimeout(function(){
console.log("타임아웃!!!!");
}, 5000);
/*
// 콘솔창에 1초마다 숫자만들기
let num = 0;
let inter= window.setInterval(function(){
num++;
console.log(num);
},1000);
*/
/* // 네버버어라는 네이버창을 해당 크기에 맞게 띄움
window.open("http://naver.com","네버버어","width=350, height=400, left=50, top 50, location=no, scrollbars=no,status=no");
*/
/* // 미리만들어둔 js22pop 파일을 popup이란 이름으로 해당 크기에 맞게 띄움
window.open("js22pop.html","popup", "width=300, height=300, left=100,top=100, location=no ");
*/
/* // 지금 배고픈가요라는 질문창을 띄움
let result = window.confirm("지금 배고픈가요?");
console.log(result);
*/
</script>
</body>
</html>2) 스크린 객체
: 사용자의 모니터 정보를 제공하는 객체
screen.속성;
width : 화면 너비값 리턴
height : 화면 높이값 리턴
availWidth : 작업표시줄 제외한 화면 너비값
availHeight : 작업표시줄 제외한 화면 높이값
colorDepth : 사용자 모니터가 표현 가능한 컬러bit리턴
3) location 객체
(브라우저 주소창 관련)
# 속성과 메서드
**href** : 주소 영역의 주소를 설정하거나 리턴
hostname : url의 호스트이름을 설정하거나 리턴
host : url의 호스트이름과 포트번호를 리턴
protocol : 프로토콜 리턴
search : url의 쿼리스트링 리턴 (쿼리스트링 = 주소의 ? 뒷부분)
reload() : 브라우저 새로고침
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <button onclick="location.href='js22pop.html'"> 새로고침 </button>
<script> // 15 -2
console.log(screen.width); // 1920
console.log(screen.height); // 1080
console.log(screen.availWidth); //1920
console.log(screen.availHeight); //1040
console.log(screen.colorDepth); //24
//15 -3
let hrefval = location.href;
console.log(hrefval); //http://127.0.0.1:51856/Js/js23.html
console.log(location.hostname); // ip
console.log(location.host); //ip + 포트
console.log(location.protocol); //http(s)
console.log(location.search); //주소창? 뒤 리턴
let tout = setTimeout(function(){
//location.href = "js22pop.html";
location.reload();
},3000); // 3초마다 새로고침
</script>
</body>
</html>'P-Language > [Javascript]' 카테고리의 다른 글
| [Javascript] 16 - 문서 객체 모델 (DOM, Document Object Model) : DOM 트리 (0) | 2022.06.09 |
|---|---|
| [Javascript] 15 (2) - 브라우저 객체 모델 (BOM, Browser Object Model) (history, navigator object) (0) | 2022.06.09 |
| [Javascript] 14 - 내장 객체 (Built-in Object) (0) | 2022.06.09 |
| [Javascript] 13 - 자바스크립트 객체 (Object) (0) | 2022.06.08 |
| [Javascript] 12. 자바스크립트 변수 선언 방식 (0) | 2022.06.08 |