[JavaScript] BOM(Browser Object Model)
window 객체
- window 객체는 자바스크립트의 최상위 객체이며 BOM과 DOM으로 나뉜다.
BOM(Browser Object Model) : location 객체, navigator 객체, history 객체, screen 객체
DOM(Document Object Model) : document 객체
window 객체
- 브라우저 창에 대한 설정을 하는 객체
window.open('주소', '이름 또는 open 방식', '형태');
<button onclick="test1();">13_문서수정</button>
<button onclick="test2();">네이버</button>
<script>
function test1(){
window.open('13_문서수정.html', 'popup1', 'width=1080, height=800');
}설정한 크기로 창이 뜬다.
창의 이름을 지정하면 동일한 이름으로 다시 open 했을 때 기존에 열린 창의 내용이 변경된다.
이름을 다르게하면 두 개의 창 모두 열린다.
window.open('12_주요노드프로퍼티.html', 'popup1', 'width=1080, height=800');
- 네이버 새로운 창에서 열기
_blank : 새 창으로 열림. 기본 값.
_self : 현재 페이지를 대체
function test2(){
window.open("https://www.naver.com", "_self");
} <button onclick="test3();">실행확인</button>setTimeout(func, delay)
func : 실행 함수, delay : 대기 시간(밀리세컨단위)
<script>
function test3(){
let myWindow = window.open();
setTimeout(function(){
myWindow.close();
}, 3000);
}실행확인 버튼을 누르면 제목없음 창이 나왔다가 3초뒤에 사라진다.
setInterval
setInterval(func, interval)
func : 실행 함수, interval : 반복할 시간
<button onclick="test4();">실행확인</button>
<div id="area1" class="area"></div> <script>
function test4(){
let area1 = document.getElementById('area1');
setInterval(function(){
let date = new Date();
area1.innerHTML = date.getHours() + " : "
+ date.getMinutes() + " : "
+ date.getSeconds();
}, 1000);
}1초 뒤에 시간이 나타남
clearInterval
- setInterval, clearInterval을 통해 타이머를 만든다. (1/100초마다)
<button onclick="test5();">start</button>
<button onclick="test5_2();">stop</button>
<div id="area2" class="area"></div> <script>
let timer;
function test5(){
let area2 = document.getElementById('area2');
let count = 0;
timer = setInterval(function(){
area2.innerHTML = parseInt(count/100/60%60)
+ " : "
+ parseInt(count/100%60)
+ " : "
+ (count % 100);
count++;
}, 10);
}
function test5_2(){
clearInterval(timer);
}
근데 start를 여러 번 누르면 현재 인터버가 여러 개가 있어서 이상하게 동작된다. stop을 눌러도 멈추지 않는다.
정의된적이 없으면 스탑워치를 돌린다는 if문을 설정 후 안에서 동작시켜준다.
=> 수정된 코드
<script>
let timer;
function test5(){
let area2 = document.getElementById('area2');
let count = 0;
if(timer === undefined){
timer = setInterval(function(){
area2.innerHTML = parseInt(count/100/60%60)
+ " : "
+ parseInt(count/100%60)
+ " : "
+ (count % 100);
count++;
}, 10);
}
}
function test5_2(){
clearInterval(timer);
timer = undefined;
}BOM(Browser Object Model)
screen 객체
- 웹 브라우저 화면이 아닌 운영체제 화면의 속성을 가지는 객체
<button onclick="test6();">실행확인</button> <script>
function test6(){
console.log("화면 너비 : " + screen.width);
console.log("화면 높이 : " + screen.height);
console.log("실제 화면에서 사용 가능한 너비 : " + screen.availWidth);
console.log("실제 화면에서 사용 가능한 높이 : " + screen.availHeight);
console.log("사용 가능한 색상 수 : " + screen.colorDepth);
console.log("한 픽셀 당 비트 수 : " + screen.pixelDepth);
}
</script>화면 높이랑 실제 화면에서 사용 가능한 높이가 다른 이유는 작업표시줄 여부에 따라 다름
location 객체
- 브라우저 주소 표시줄과 관련된 객체
<button onclick="test7();">실행확인</button>
<div id="area3" class="area-big"></div>
<script>
function test7(){
let area3 = document.getElementById('area3');
let html;
for(let key in location){
html += (key + " : " + location[key] + "<br>");
}
area3.innerHTML = html;
}
</script>
<button onclick="location.href = 'https://www.naver.com'">네이버로 이동</button>
<button onclick="location = 'https://www.naver.com'">네이버로 이동</button>
<br><br>
<button onclick="location = location">새로고침</button>
<button onclick="location.href = location.href">새로고침</button>
<!-- reload는 현재 위치에서 새로고침을 한다 -->
<button onclick="location.reload();">현 위치에서 새로고침</button>
<br><br>
<!-- replace는 뒤로가기 사용할 수 없다 -->
<button onclick="location.replace('https://google.com')">구글로 이동</button>
navigator 객체
- 웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가지는 객체
<button onclick="test8();">실행확인</button>
<div id="area4" class="area-big"></div>
<script>
function test8(){
let area4 = document.getElementById('area4');
let html = '';
html += '브라우저의 코드명 : ' + navigator.appCodeName + '<br>';
html += '브라우저의 이름 : ' + navigator.appName + '<br>';
html += '브라우저 전체 정보 : ' + navigator.userAgent + '<br>';
html += '브라우저 언어 : ' + navigator.language + '<br>';
html += '사용중인 운영체제 : ' + navigator.platform + '<br>';
area4.innerHTML = html;
}
history 객체
<button onclick="test9();">실행확인</button>
<div id="area5" class="area-big"></div>
<script>
function test9(){
//히스토리 객체의 길이 출력
let area5 = document.getElementById('area5');
area5.innerHTML = 'history.length : ' + history.length;
//뒤로가기
//history.back();
//history.go(-2);
//앞으로 가기
//history.forward();
history.go(1);
}