[js] 7. BOM(Browser Object Model) | window | screen | navigator | location | document

BOM(Browser Object Model)

• BOM : 브라우저를 기반으로 제공받는 자바스크립트 내장 객체
• window 객체
• screen 객체
• navigator 객체
• location 객체
• document 객체

1. window 객체

30_window.html

• window 객체 : 브라우저를 객체로 표현하여 프로퍼티와 메소드 제공

alert(window); //[object Window]

window 객체의 메소드

//1.
//💛window.alert(message) : 메세지창(경고창)을 이용하여 메세지를 출력하는 메소드
// => window 객체를 생략해도 메소드 호출 가능 - 함수
// => 웹프로그램을 만들 때 보다는 디버깅할 때 사용
// => 요즘 비권장
//window.alert("메세지창(경고창)을 이용하여 메세지를 출력하는 메소드");
alert("메세지창(경고창)을 이용하여 메세지를 출력하는 메소드");


//2.
//💛window.prompt(message[, value]) : 입력창을 이용하여 사용자로부터 값을 입력받아 반환하는 메소드
// => window 객체를 생략해도 메소드 호출 가능 - 함수
// => 요즘 비권장


//3.
//💛window.confirm(message) : 확인창을 이용하여 사용자로부터 선택값을 반환하는 메소드
// => window 객체를 생략해도 메소드 호출 가능 - 함수
// => 확인창에서 취소를 선택하면 [false] 반환 , 확인을 선택하면 [true] 반환
// => 요즘 비권장
if(confirm("정말로 삭제 하시겠습니까?")){
	alert("게시글을 삭제 하였습니다.");
}else{
	alert("게시글 삭제를 취소 하였습니다.");
}


//4.
//💛window.open(url[,name][,option]) : 자식 브라우저(팝업창)를 생성하여 
//웹프로그램(웹문서)을 요청하여 처리결과를 응답받아 출력하는 메소드
// => url : 자식브라우저의 URL 주소
// => name : 자식브라우저의 이름 (주의: 띄어쓰기하지말기)
// => option : 자식브라우저의 형태
// => width(폭) ,height(높이) ,top(출력위치) ,left(출력위치) → 써야함
// => menubar ,toolbar ,resizable(크롬불가능) 등 → 기본값이 있어서 사실 안써도됨
// => 이벤트로 팝업창 이용 , ex) 주소검색할 때
// => 요즘은 팝업창 대신 박스모델로 ..
// => 크롬에서는 기본적으로 팝업을 차단함
window.open("<https://www.daum.net>","popup","width=1000,height=640,top=100,left=200,menubar=true");


//5.
//💛window.close() : 브라우저를 종료하는 메소드
if(confirm("브라우저를 종료 하시겠습니까?")){
	window.close();
}

1. alert

2. prompt

3. confirm

4. open

5. close

 

 

 

 

 

 

 

 

2. screen 객체

31_screen.html

• screen 객체 : 브라우저가 출력될 출력장치(모니터)를 객체로 표현하여 프로퍼티와 메소드 제공

alert(screen); //[object Screen]

screen 객체의 메소드

//1.
//브라우저가 출력될 출력장치의 폭과 높이 : 폭과 높이(해상도)가 높으면 높을수록 선명함 1920 , 1080
//💛screen.width : 브라우저가 출력될 출력장치(모니터)의 폭을 저장한 프로퍼티
var width = screen.width;
alert("width = " +width); //width = 1920
//💛screen.height : 브라우저가 출력될 출력장치(모니터)의 폭을 저장한 프로퍼티
var height = screen.height;
alert("height = " +height); //height = 1080



//2.
//(자식)브라우저의 출력위치와 크기 설정 : window = 부모브라우저 , win = 자식브라우저로 설정함
var win = window.open("","","width=400,height=300,top=100,left=400");//자식 브라우저를 생성하여 변수에 저장
alert(win); //[object Window]
//💛Window.moveTo(x,y) : 브라우저의 출력좌표를 변경하는 메소드 - 출력위치 이동
win.moveTo(0,0); //어디에 있던 무조건적으로 절대적으로 이동
//💛Window.resizeTo(width,height) : 우저의 폭과 높이를 변경하는 메소드 - 크기 변경
win.resizeTo(width,height);



//3.
//💛
//(자식) 브라우저의 출력위치와 크기 변경
//0.5초 마다 출력위치와 크기 변경하는 intervalId 함수
var intervalId = setInterval(function() {
	//🧡Window.moveBy(x,y) : 브라우저의 현재 위치를 기준으로 출력좌표를 변경하는 메소드 - 출력위치 이동
	win.moveBy(50,50); //현재위치를 기준으로
	//🧡Window.resizeBy(width,height) : 브라우저의 현재 크기를 기준으로 폭과 높이를 변경하는 메소드 - 크기 변경
	win.resizeBy(-100,-100);
}, 500)
//0.5초 마다 출력위치와 크기 변경하는 intervalId 함수가 반복실행되다가 -> 5초 뒤에 intervalId함수 종료
setTimeout(function() {
	clearInterval(intervalId);
}, 5000)

 

 

 

 

 

 

 

 

3. navigator 객체

32_navigator.html

• navigator 객체 : 브라우저 엔진을 객체로 표현하여 프로퍼티와 메소드 제공

alert(navigator); //[object Navigator]

• 모든 브라우저에는 엔진이 있으며, 엔진이 HTML,CSS,JS 해석해서 실행시켜줌
• 브라우저 엔진에 따라 CSL이 달라짐, 특히 자바스크립트가 브라우저 엔진에 따라 많이 달라짐
• 브라우저가 어떤 엔진을 쓰는지 알아야지 엔진에 맞게 JS를 선택 실행할 수 있도록 만들어주기 위해 navigator 객체 사용

navigator 객체의 메소드

//1.
//💛navigator.appName : 브라우저 엔진의 이름을 저장한 프로퍼티
alert("브라우저 엔진의 이름 = "+navigator.appName);
//브라우저 엔진의 이름 = Netscape


//2.
//💛navigator.appVersion : 브라우저 엔진의 버전을 저장한 프로퍼티
alert("브라우저 엔진의 버전 = "+navigator.appVersion);
//브라우저 엔진의 버전 = 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36


//3.
//💛navigator.userAgent : 브라우저 엔진을 저장한 프로퍼티
alert("브라우저 엔진 = "+navigator.userAgent);
//브라우저 엔진 = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

 

 

 

 

 

 

4. location 객체

33_location.html

• location 객체 : 브라우저에서 URL 주소를 입력하는 영역을 객체로 표현하여 프로퍼티와 메소드 제공

alert("location = "+location);
//location = <http://localhost:8000/web/js/33_location.html>

navigator 객체의 메소드

//1.
//💛location.toString() : 브라우저 주소 입력영역의 URL 주소를 문자값으로 반환하는 메소드
//=> toString() 메소드 자동 호출
alert("location.toString() = "+location.toString());
alert("location = "+location); //location = <http://localhost:8000/web/js/33_location.html>



//2.
//💛location.href : location 객체의 URL 주소를 저장한 프로퍼티
// => location.href 프로퍼티의 저장값을 변경하면 브라우저 주소 입력영역의 URL 주소 변경
// => 브라우저 주소 입력영역의 URL 주소가 변경되면 브라우저는 
//해당 URL 주소의 웹프로그램(웹문서)을 요청하여 처리결과를 응답받아 출력 - 페이지 이동
setTimeout(function() {
	location.href = "<https://www.daum.net>";
}, 3000)
//많이 사용함
//<a>태그의 같은 기능 = 박스모델에서 이벤트 발생 시 location.href를 이용해  사용 가능


//3.
//💛location.reload() : 브라우저가 현재 요청한 URL 주소의 웹프로그램(웹문서)을 재요청하는 메소드
setInterval(function() {
	location.reload();
}, 1000)

 

 

 

 

 

 

5.  document 객체

34_document.html

• document 객체 : 웹프로그램의 요청 결과를 응답받아 브라우저에 출력하는 영역을 객체로 표현하여 프로퍼티와 메소드 제공
• document 객체의 자식으로 element 객체가 있음

document 객체의 메소드

alert(document); //[object HTMLDocument]

 

//1.
//💛document.write(html) : HTML 태그를 전달받아 응답출력 영역에 출력하는 메소드
document.write("<p>document.write() 메소드에 의해 출력된 내용입니다.</p>");