-
[JavaScript] BOMVScode/JavaScript 2022. 9. 8. 17:51
-브라우저 객체 모델(BOM: browser object model)
-BOM이란 자바스크립 트내에 내장되어 있는 관련 객체들의 집합을 의미
-웹브라우저를 대상으로 하여 외관으로 보이는 외형이나 내부에 저장된 각종속성들을 조정하고 싶다면 자바스크립트가 제공하는 그에 관련된 객체들을 이용하여 조정하고 컨트롤함
-자바스크립트에서는 윈도우나 웹브라우저 등을 객체로 정의해서 그 안에 여러구성요소들을 멤버변수나 멤버메서드로 접근하고 조정할 수 있게 각종객체를 제공함
-window, screen, location, navigator, history, document등
1. window 객체
-브라우저 기반 자바스크립트 최상위 객체
-alert(), prompt(), confirm() 함수 모두 window 객체의 메서드(함수)임
-원래의 사용은 window.alert() window.prompt()라고 써야 하지만 편의상window.을 생략하고 사용함
-window 중 사용빈도수가 높은 메서드중 대표적: window.open() 팝업창생성메서드
-명령형식: window.open(팝업창에 표시될 페이지 또는 주소, 팝업창 이름, 옵션)
-팝업창에 표시될 페이지 이름(경로포함) 또는 사이트의 주소: '04_Loop.html', 'https://www.naver.com'
-팝업창의 이름: 스크립트 내부에서 팝업창끼리 구분할 이름 - 'child'같은별칭
-옵션: 'width=600, height=480'과 같은 팝업창의 속성들, 가로세로크기등, "" 또는 ''안에 여러요소를 (,)컴마로 구분하여 설정하고자하는 요소를 모두 넣음
width: 팝업창가로길
height: 팝업창세로길이
toolbar=no: 단축도구창(툴바) 표시안함
menubar=no: 메뉴창(메뉴바) 표시안함
location=no: 주소창표시안함
scrollbars=no : 스크롤바표시안함
status=no: 아래상태바창표시안함
resizable=no: 창변형하지않음
fullscreen=no: 전체화면하지않음
channelmode=yes: F11키기능이랑같음
left=0: 위쪽에창을고정(ex.left=30이런식으로조절)
top=0: 위쪽에창을고정(ex.top=100이런식으로조절)
var child=window.open('','child1','width=600, hieght=400, left=100, top=100'); // child 변수: 열린 팝업창을 제어할 래퍼런스 변수를 만들고 // 팝업창의 제어권(주소)을 저장함
setinterval()
-window.setInterval(): 일정시간간격으로지정한동작또는함수를호출실행함
-window.setInterval(동작을담고있는익명함수또는선언적함수이름, 시간간격);
-시간간격: 1000 -> 1초
-Ex) window.setInterval(function(){child.movyBy(50,50)},1000);
작성순서
1.window.setInterval(function(){},1000);
2.window.setInterval(function(){ 익명함수 중괄호 가운데서 엔터 ->
함수 내용 기술 함수의 내용},1000);
window.setInterval(function(){ child.moveBy(50,50); // child 변수에 담긴 창을 가로 50, 세로 50만큼 이동함 },1000); // 익명함수를 이용하여 1초마다 내용을 반복실행 function abc(){ child.moveBy(50,50); } // 선언적 함수를 만들어서 setInterval 안에 익명함수 대신 이름을 넣기도 함 window.setInterval('abc()',1000);모든 멤버 변수 출력
var output=''; for(var key in window){ // hashMap의 key값을 객체 적용하여 반복실행 output+='<h2>'+key+':'+window[key]+'</h2>'; } // 객체안의 모든 멤버 변수(key)가 담고 있는 값(window[key])들을 // 모두 출력할 때 이와 같은 반복실행을 사용함 document.write(output);2. screen 객체
-웹브라우저의 화면이 아니라 운영체제 화면의 속성을 가지는 객체
var output=''; for(var key in screen){ output+='<h3>'+key+':'+screen[key]+'</h3>'; } document.write(output); // 팝업창을 띠우고 팝업창의 크기를 화면의 크기와 일치시킴 var child=window.open('','','width==300, height=200'); // 팝업창의 위치를 왼쪽 최상단에 맞춰 이동함 child.moveTo(0,0); var width=screen.width; // 현재 화면의 가로 크기 저장 var height=screen.height; // 현재 화면의 세로 크기 저장 child.resizeTo(width,height); // 화면의 최대 크기로 팝업창 크기 조절 // setInterval을 사용하여 좌우 상하 크기를 일정 크기로 반복 줄이고 오른쪽 아래로 일정 위치로 이동함 setInterval(function(){ child.resizeBy(-20,-20); // -20씩 가로세로 크기 조절 child.moveBy(20,20) // 오른쪽 아래로 20씩 이동 },1000);3. location 객체
-브라우저 주소 표시줄과 관련된 객체
-프로토콜의 종류, 호스트이름, 문서 위치 등의 정보를 가짐
-페이지를 링크나 주소창을 이용하지 않고 이동할 때 많이 사용
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BOM.html</title> <script type="text/javascript"> var output=''; for(var key in location){ output+='<h3>'+key+':'+location[key]+'</h3>'; } document.write(output); // -페이지 이동 방법 4가지 // location='http://www.daum.net'; // location.href='http://www.daum.net'; // 가장 많이 사용 // location.assign('http://www.daum.net'); // location.replace('http://www.daum.net'); // 뒤로 가기 버튼 사용 불가 // -현재 페이지 새로 고침 // location=location; // location.href=location.href; // location.assign(location); // location.replace(location); // location.reload(); function moveNaver(){ location.href="https://www.naver.com"; } </script> </head> <body> <input type="button" value="다음으로 이동" onclick="location.href='https://www.daum.net'"> <input type="button" value="네이버로 이동" onclick="moveNaver();"> </body> </html>'VScode > JavaScript' 카테고리의 다른 글
[JavaScript] vaildation, select tag, visibility, check (0) 2022.09.08 [JavaScript] Image (0) 2022.09.08 [JavaScript] function (0) 2022.09.08 [JavaScript] if, loop (0) 2022.09.08 [JavaScript] Basic (0) 2022.09.08