본문 바로가기
Frontend/JavaScript

[JavaScript] BOM(Browser Object Model) - window 객체

by sukii 2024. 1. 11.
반응형

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

⚫BOM(Browser Object Model) : 브라우저를 기반으로 제공되는 자바스크립트 객체

 

출처: https://cbw1030.tistory.com/46

 

 

🔘window 객체의 메소드 살펴보기

window.alert(message) : 경고창을 생성하여 매개변수로 전달받은 메세지를 출력하는 메소드
=> 두번째 줄과 같이 window 객체를 생략하여 메소드 호출 가능 - 함수

window.alert("경고창을 이용하여 메세지를 출력하는 메소드");

alert("경고창을 이용하여 메세지를 출력하는 메소드");

 

 

window.prompt(message[, value]) : 입력창을 생성하여 사용자로부터 값을 입력받아 문자값으로 반환하는 메소드

=>자바에서 scanner 객체를 써서 콘솔로 입력값 받는거랑 비슷한 느낌

var input=prompt("숫자를 입력해 주세요.",100);

alert("input = "+input);

 

=>value값에 100을 적어놓으니, 경고창이 떴을 때 기본으로 100이 입력되어 있음.

 

 

window.confirm(message) : 확인창을 생성하여 사용자로부터 선택된 값을 반환하는 메소드
=> 확인창에서 [취소]를 선택하면 [false]를 반환하고 [확인]을 선택하면 [true]를 반환

if(confirm("정말로 삭제 하시겠습니까?")) {

alert("게시글을 삭제 하였습니다.");

} else {

alert("게시글 삭제을 취소 하였습니다.");

}

 

 

window.open(url[, name][, option]) : 자식 브라우저(팝업창)를 생성하고 자식 브라우저에서 웹프로그램을 요청해 실행결과를 응답받아 출력하는 메소드

=> option : width, height, top, left, menubar, toolbar, resizable 등

window.close() : 현재 사용중인 브라우저를 종료하는 메소드 

window.open("https://www.daum.net", "popup", "width=1000, height=640, top=100, left=200");

 

if(confirm("브라우저를 종료 하시겠습니까?")) {

window.close();

}

 

 

 

실습예제 전체 코드👩‍💻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<script type="text/javascript">
	//alert(window);//[object Window]
	
	//window.alert(message) : 경고창을 생성하여 매개변수로 전달받은 메세지를 출력하는 메소드
	// => window 객체를 생략하여 메소드 호출 가능 - 함수
	window.alert("경고창을 이용하여 메세지를 출력하는 메소드");
	alert("경고창을 이용하여 메세지를 출력하는 메소드");
	

	//window.prompt(message[, value]) : 입력창을 생성하여 사용자로부터 값을 입력받아 문자값으로
	//반환하는 메소드
	var input=prompt("숫자를 입력해 주세요.",100);
	alert("input = "+input);
	

	//window.confirm(message) : 확인창을 생성하여 사용자로부터 선택된 값을 반환하는 메소드
	// => 확인창에서 [취소]를 선택하면 [false]를 반환하고 [확인]을 선택하면 [true]를 반환
	if(confirm("정말로 삭제 하시겠습니까?")) {
		alert("게시글을 삭제 하였습니다.");
	} else {
		alert("게시글 삭제을 취소 하였습니다.");
	}

	
	//window.open(url[, name][, option]) : 자식 브라우저(팝업창)를 생성하고 자식 브라우저에서
	//웹프로그램을 요청해 실행결과를 응답받아 출력하는 메소드
	// => option : width, height, top, left, menubar, toolbar, resizable 등	
	//window.open("https://www.daum.net", "popup", "width=1000, height=640, top=100, left=200");
	
	if(confirm("브라우저를 종료 하시겠습니까?")) {
		//window.close() : 현재 사용중인 브라우저를 종료하는 메소드
		window.close();
	}	
	</script>
</body>
</html>

참고:

https://opentogether.tistory.com/110

 

전역객체 Window와 BOM, DOM의 정의

Window 객체 Window 객체는 모든 객체가 포함된 최상위 객체이며, 브라우저의 창이나 프레임을 의미합니다. 다시말해서 Window 객체는 전역객체로, 전역변수와 전역스코프에서 선언된 함수는 Window 객

opentogether.tistory.com

https://cbw1030.tistory.com/46

 

[Javascript] Window, DOM, BOM이란?

나는 자바스크립트 언어를 Window, DOM, BOM이 정확히 무엇을 의미하는지도 모른채 사용해왔다. 사실 Window, DOM과 BOM을 이해하기 위해 과거에 여러 문서를 보고 구글링도 했었지만 와닿지가 않았고

cbw1030.tistory.com

 

반응형

'Frontend > JavaScript' 카테고리의 다른 글

SPA(Single Page Application)란?  (0) 2025.04.10
[JavaScript]JSON 클래스 함수  (0) 2024.01.09
[JavaScript]Math 클래스 함수  (0) 2024.01.08
[JavaScript]Date 클래스 함수  (0) 2024.01.08
[JavaScript] String 클래스 함수  (1) 2024.01.08