Languages/Java Script

[Js] Browser Object Model | BOM | 전역객체 Window

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

BOM에 대한 수업은 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다.

본 토픽의 하위 수업에서는 Window 객체의 사용법을 알아볼 것이다.

BOM

BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다.

즉 쉽게 말하자면, 웹 브라우저를 제어하기 위해서 브라우저가 제공해주는 객체들을 말한다.

전역객체 Window

콘솔에서 window를 입력 시 윈도우 객체에 접근 할 수 있다.

다른 모든 객체들도 마찬가지로 window. ?? 으로 접근 할 수 있다. 이것은 모든 객체가 window객체 안에 소속되어 있다는 의미이다.

전역 변수, 전역 함수 등을 만드는 것은 사실 window의 객체를 만들게 되는 것이다.

그렇기 때문에 결국 전체적으로 전역 객체는! Window 가 되는 것이다.

사용자와 커뮤니케이션

HTML은 form을 통해서 사용자와 커뮤니케이션할 수 있는 기능을 제공한다.

자바스크립트에는 사용자와 정보를 주고 받을 수 있는 간편한 수단을 제공한다.(alert, confirm, prompt)

경고창(alert)

alert("ok");와 같이 경고창을 띄워주는 역할을 한다. 확인을 눌러야 다음 경고창을 실행 시킬 수가 있어서 조금 불편한 점이 있다. 그래서 요즘은 conole.log와 같이 브라우저에서 제공하는 콘솔창을 이용한다.

확인창(confirm)

confirm("ok?")와 같이 확인창을 띄워주는 역할을 한다. 확인과 취소가 있어서 확인을 누를 시 true가 나오고, 취소를 누르면 false가 나오게 된다. 이 기능은 사용자의 의사표시가 가능하다. 아래와 같은 코드로 이를 확인시켜줄 수 있다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<input type ="button" value="confirm" onclick="func_confirm()" />
	<script>
	    function func_confirm(){
	        if(confirm('ok?')){
	            alert('ok');
	        }else {
	            alert('cancel');
	        }
	    }
	</script>

</body>
</html>

확인을 누를시 ok가 출력되고, 취소를 누르면 cancel이 출력된다.

사용자가 입력한 값을 받아 얻어내는 기능(prompt)

prompt('id?'); 라고 콘솔에 입력을 하면, 사용자에게 어떠한 값을 입력받아 동작하게 된다. 예제는 다음과 같다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<input type ="button" value="check" onclick="func_confirm()" />
	<script>
	    function func_confirm(){
	        if(prompt('id?') === 'haeun'){
	            alert('welcome~~');
	        }else {
	            alert('fail');
	        }
	    }
	</script>

</body>
</html>

'Languages > Java Script' 카테고리의 다른 글

[Js] Navigator 객체 \| 크로스브라우징 \| (0)	2021.02.07
[Js] Location 객체 \| 문서의 주소 정보 \| URL Parsing \| 파싱 (0)	2021.02.07
[Js] Object Model \| 객체화란? \| Core \| BOM \| DOM (0)	2021.02.07
[Js] 자바스크립트 \| html에서 javascript 로드 하는 방법 (0)	2021.02.07

Contents

새소식

인기 검색어

[Js] Browser Object Model | BOM | 전역객체 Window

BOM

전역객체 Window

사용자와 커뮤니케이션

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바