JavaScript_BOM

BOM(Browser Object Model)

1) navigator객체

: 웹페이지를 실행하고 있는 브라우저에 대한 정보를 갖고 있는 객체

<script>
	function test1(){
		for(var key in navigator){
			console.log(key + " : " + navigator[key]);//오브젝트타입 스트링으로 나옴 " : "(스트링)을 앞에 붙혀서 뒤에꺼 까지 다 스트링이 됨.
														//언어도 사용할 수 있다									
			//브라우저 정보 앱코드네임, 앱네임 으로 어떤 브라우저를 사용할 수 있는지 볼 수 있음-->브라우저에 따라 알림도 줄 수 있음
		}
	}
	
</script>

 

2) screen객체

: 웹브라우저 화면이 아닌 운영체제 화면(모니터)의 정보를 가지는 객체

<button onclick="test2();">실행확인</button>
	<script>
		function test2(){
			for(var key in screen){
				console.log(key + " : " + screen[key]);
			}
		}
</script>

화면크기가 다 다르기때문에 사이즈부분 확인

 

3) location객체

: 브라우저 주소 표시줄과 관련된 객체

<button onclick="test3();">실행확인</button>
	<script>
		function test3(){
			for(var key in location){
				console.log(key + " : " + location[key]);//href :주소
			}
		}
</script>

 

location.href

: 페이지 이동

<p>페이지 이동</p>
	<button onclick="location.href='http://www.naver.com'">네이버로 이동</button>
	<button onclick="location='http://www.naver.com'">네이버로 이동</button>

.href를 넣지않아도 가능하다.

 

reload()

: 페이지를 새로고침하는 메소드

<button onclick="location=location">새로고침</button>
	<button onclick="location.href=location.href">새로고침</button><!-- 위로 올라가서 새로고침 -->
	<button onclick="location.reload()">새로고침</button><!-- 스크롤이 위로 올라가지않고, 위치 유지한 상태에서 새로고침된다.-->

reload()는 위지 유지한 상태에서 새로고침된다.

 

assign()과 replace

: 두 메소드 모두 location의 href를 재지정하는 메소드(페이지 이동)

assign: 설정페이지 이동했다가 뒤로가기하면 다시 그 전페이지가 나온다.

replace: 설정페이지 이동했다가 뒤로가기하면 첫 인덱스페이지가 나온다.

대체하는 기능이기 때문에 기존페이지를 대체해서 나오는 것이기 때문에 기존 페이지 다음에 새로

열리는 게 아니라 그 자리에서 대신해서 열려서 뒤로가기하면 기존페이지가 나오지않고 그 전페이지가

나온다.

 

<button onclick="location.assign('http://www.naver.com')">홈페이지로 이동</button>
<button onclick="location.replace('http://www.naver.com')">홈페이지로 이동</button>

 

history객체

: 브라우저 방문기록과 관련된 객체

history.back() : 뒤로 가기

history.forward : 앞으로 가기

<button onclick="history.back()">back</button><!-- 뒤로가기 -->
	<button onclick="history.forward()">forward</button><!-- 앞으로가기 -->
	<br><br>
	<input type="number" id="num"><button onclick="test4();">go</button>
	<script>
		function test4(){//몇칸씩 앞으로가기/뒤로가기 설정하는 방법
			var num = document.getElementById('num').value;
			history.go(num);
		}
	</script>
	<button onclick="history.go(-1);">go back</button>
	<button onclick="history.go(1);">go forward</button>