[javascript] 브라우저모델 BOM

 

 

window 객체

window 객체의 메서드 종류

종류	설명
open("URL","새창이름","새창옵션")	URL 페이지를 새 창으로 나타냅니다.
alert(data)	경고 창을 나타내고 데이터를 보여줍니다. 방문자가 [확인] 버튼을 누르면 alert()를 사용한 다음 위치의 코드를 수행합니다.
prompt("질문","답변")	질문과 답변으로 질의응답 창을 나타냅니다.
confirm("질문내용")	질문 내용으로 확인이나 취소 창을 나타냅니다. [확인]버튼을 누르면 true를 반환하고, [취소] 버튼을 누르면 false를 반환합니다.
moveTo(x,y)	지정한 새 창의 위치를 이동합니다.
resizeTo(width,height)	지정한 새 창의 크기를 변경합니다.
setInterval(function(){자바스크립트 코드},일정 시간 간격)	지속적으로 일정한 시간 간격으로 함수를 호출하여 코드를 실행합니다.
setTimeout(function(){자바스크립트 코드},일정 시간 간격)	단 한 번 일정한 시간 간격으로 함수를 호출하여 코드를 실행합니다.

 

open() 메서드

지정한 url, img를 새 브라우저창에 팝업창으로 나타나게 합니다.

 

기본형 : open("url","새 창 이름","새 창 옵션")

window.open("https://carina16.tistory.com/","pop1","width=300,height=400,left=300,top=50,location=no");

 새 창의 옵션 종류

 

width - 새 창의 너비를 설정합니다

height - 새 창의 높이를 설정합니다

left - 새 창의 x축 위치를 설정합니다

top - 새 창의 y축 위치를 설정합니다

scrollbars -  스크롤바를 설정합니다 (no-숨김, yes-노출)

location - 새창의 url 주소 입력 영역을 설정합니다(no-숨김, yes-노출)

status - 새 창의 상태 표시줄 영역을 설정합니다

toolbars - 새 창의 도구 상자 영역을 설정합니다

 

alert()

경고창을 나타냅니다.

alert("경고 메시지")

 

prompt()

질의응답 창을 나타냅니다.

prompt("당신의 이름은?","0")

 

confirm()

확인/취소 창을 나타냅니다.

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

 

setInterval() / clearInterval()

setInterval()은 코드를 일정시간 간격으로 반복 실행하고,

clearInterval()은 setInterval()메서드를 취소합니다.

var addNum=0;
var subNum=1000;

var auto_1=setInterval(function(){
	addNum++;
	console.log("addNum:"+addNum);
},3000); //3초 간격으로 값이 1씩 반복 증가

var auto_2=setInterval(function(){
	subNum--;
	console.log("subNum:"+subNum);
},3000); //3초 간격으로 값이 1씩 반복 감소 

<button onclick="clearInterval(auto_1)">증가 정지</button>
//방문자가 해당 버튼을 클릭하면 실행
<button onclick="clearInterval(auto_2)">감소 정지</button>

 

screen 객체

screen 객체의 속성 종류

 

screen.width - 화면의 너빗값을 반환합니다.

screen.height - 화면의 높잇값을 반환합니다.

screen.availWidth - 작업 표시줄을 제외한 화면의 너빗값을 반환합니다.

screen.availHeight - 작업 표시줄을 제외한 화면의 높잇값을 반환합니다.

screen.colorDepth - 사용자 모니터가 표현 가능한 컬러 bit를 반환합니다.

 

lacation 객체

laction.href;
//사용자 브라우저의 url경로 값을 가져옵니다.

laction.href="https://carina16.tistory.com/";
//사용자 브라우저의 url경로를 url 경로를 지정한 주소로 변경합니다.

lacation.reload();
//사용자 브러우저를 새로 고침합니다.

laction 객체의 속성 종류

 

lacation.href - 주소 영역의 참조 주소를 설정하거나 url을 반환합니다.

lacation.hash - url의 해시값(#에 명시된 값)을 반환합니다.

lacation.hostname - url의 호스트 이름을설정하거나 반환합니다.

lacation.host - url호스트 이름과 포트 번호를 반환합니다.

lacation.protocal - url의 프로토콜을 반환합니다.

lacation.search - url의 쿼리(요청값)을 반환합니다.

lacation.reload() - 마치 브라우저에서 f5키를 누른 것처럼 새로 고침합니다.

 

 

history 객체

histoty.속성;
history.메서드();
history.메서드(n);

history.length;
//사용자가 방문한 사이트의 기록을 남긴 총 수량입니다.

history.back();
//사용자가 방문한 사이트 중 바로 이전에 방문한 사이트로 이동합니다.

history.back(2);
//사용자가 방문한 사이트 중 두 단계 이전에 방문한 사이트로 이동합니다.

 

history 객체의 속성 종류

 

history.back() - 이전 방문 사이트로 이동합니다.

history.forward() - 다음 방문 사이트로 이동합니다.

history.go(이동숫자) - 이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동합니다.

history.length - 방문 기록에 저장된 목록의 개수를 반환합니다.

 

 

navigator 객체

 

navigator 객체의 속성 종류

 

navigator.appCodeName - 현재 브라우저 코드명을 반환합니다.

navigator.appName - 현재 브라우저의 이름을 반환합니다.

navigator.appVersion - 현재 브라우저의 버전 정보를 반환합니다.

navigator.language - 브라우저가 사용하고 있는 언어를 반환합니다.

navigator.product - 브라우저의 엔진 이름을 반환합니다.

navigator.platform - 컴퓨터의 운영체제 정보를 제공합니다.

navigator.onLine - 온라인 상태 여부에 대한 정보를 제공합니다.

navigator.userAgent - 브라우저와 운영체제의 종합 정보를 제공합니다.

 

var scr=screen;
var sc_w=scr.width;
var sc_h=scr.height;

document.write("모니터 해상도 너비:" + sc_w + "px","<br>");
document.write("모니터 해상도 높이:" + sc_h + "px","<br>");

위 코드를 실행시키면 해상도에 따라 다르게 출력됩니다.