JSP || DAY6 || 브라우저객체모델 BOM
1. 브라우저 객체 모델 BOM ?
: 웹브라우저에 내장된 객체를 뜻한다.
# 계층구조
window - 1) document -1 body
-2 div
-3 img
-4 a
-5 form
-6 input
- 2) screen
- 3) location
- 4) history
- 5) navigator
2. window 객체?
- 웹브라우저객체 BOM의 최상위 객체.
# window객체의 메서드 종류
1. open( ) - 새 브라우저 창을 띄움 / 팝업창 - 기본문법: window.open( 팝업창경로, 팝업창이름 , 옵션 ) ;
* 옵션 종류
width 팝업창 너비 / height 팝업창 높이 / location 팝업창의 url영역 노출여부(숨김 =no, 노출=yes)
scrollbars 스크롤바 유무 (숨김 =no, 노출=yes)
2. alert( "경고메세지" ) : 경고창을 띄울 때 사용
3. prompt( "질의내용" , "기본값" ) : 질의응답창을 띄울때사용.
4. confirm( "묻는 내용") : 확인/취소 버튼이 있는 확인창을 띄울때사용.
5. moveTo( X , Y ) : 브라우저창의 위치를 이동시킬 때 사용. (단, 크롭, 오페라에서는 정상작동X)
ex) moveTo(100,200) // x축 100px, y축 200px만큼 이동시킴
6. resizeTo( 너비 , 높이 ) : 웹브라우저창의 너비와 높이를 바꿀 때 사용
ex) window.resizeTo(200,300) : 창의 너비 200px, 높이 300px로 바꿈.
7. setInterval( "반복할 실행문", 밀리초 )
: 일정한 시간간격으로 자바스크립트 실행문을 반복하여 실행시킬때 사용한다.
ex) 일정시간 간격으로 사진바꾸기, 슬라이드 배너 등
ex) var t = setInterval("i++" , 3000); => 3000밀리초마다 i를 1씩 증가시킴
*** 참조변수 t는 setInterval 메서드를 스택공간에서 제거할때 사용한다
8. clearInterval( setInterval을 사용한 참조변수 );
: setInterval() 실행코드를 취소할 때 사용한다.
ex) var t = setInterval("i++",3000);
clearInterval(t);
9. setTimeout( "실행문", 밀리초 )
: 일정한 시간간격으로 자바스크립트 실행문을 !한번만! 실행시킨다.
하지만, 이 메서드 또한 재귀함수호출을 통해 setInterval( )처럼 반복해서 실행이 가능하다.
ex) var t = setTimeout( "console.log(i++)", 3000 ); => 3초 휴식 후 단 한번만 i를 1증가시켜 콘솔창에 출력.
10. clearTimeout( setTimeout을 사용한 참조변수 )
: setTimeout( )의 실행코드를 취소할때 사용함.
ex) var t = setTimeout( "console.log(i++)", 3000 );
clearTimeout( t );
# 예제1
버튼을 클릭했을 때, moveTo( ) 와 resizeTo( ) 메서드를 적용하여 팝업창의 위치, 너비 바꾸기
<head>
<script type="text/javascript">
var pop = window.open("winpopup.html","POP1","width=300,
height=400, left=300, top=10, location=no, scrollbars=yes")
</script>
</head>
<body>
<p> <!-- 팝업창위치를 변경시키기 -->
<button onclick="pop.moveTo(200,300); pop.focus();"> 브라우저 위치 변경하기 </button>
</p>
<p> <!-- 팝업창너비 바꾸기, focus( ) 메서드 적용하기 -->
<button onclick="pop.resizeTo(200,300); pop.focus();"> 브라우저 크기 변경하기 </button>
</p>
</body># 예제2
setInterval( ) 과 clearInterval( ) 활용하기
<head>
<script type="text/javascript">
// setInterval() 메서드를 이용하여 3초마다 변수 i의 데이터를 1씩 증가시키고, 자바스크립트 콘솔창에 띄우기
var i = 0;
var auto = setInterval("console.log(i++);", 3000);
</script>
</head>
<body>
<!-- 정지버튼 클릭시 auto 변수에 저장된 setInterval() 메서드 삭제하기 -->
<button onclick="clearInterval(auto)">정지</button>
</body># 예제3
1초단위로 업데이트되는 현재 시각정보를 브라우저에 나타내기
<head>
<script type="text/javascript">
// printTime이라는 이름의 함수 만들기
function printTime(){
//현재 날짜와 시간정보를 제공해주는 Date객체메서드를 호출해 현재 날짜와 시간정보를 얻기.
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1; // ***월은 1씩 적게 나옴에 주의
var date = now.getDate();
var day = now.getDay();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
// <body> 태그 사이에 있는 <span> 요소를 선택해서 가져와 clock변수에 저장하기
var clock = document.getElementById("clock")
// 위 clock변수에 저장된 <span> 요소의 텍스트위치에 현재 시각정보를 출력하기 => 요소id.innnterHTML
clock.innerHTML = year + "년 "+ month+ "월 " + date + "일 "
+ hours + "시 " + minutes + "분 " + seconds + "초 !!!";
// 1초간격으로 시간을 업데이트 하고싶다면? => setTimeout() 메서드를 1초단위의 재귀함수로 호출하기.
setTimeout("printTime();", 1000);
}
// 브라우저(window객체)가 win_ob4.html 내부의 모든 html 태그들을 읽어들였을떄, : .onload()
// printTime() 함수를 호출하기
window.onload = function( ){ // 이벤트처리함수를 생성함
printTime();
}
</script>
</head>
<body>
현재 시각은 >> <span id='clock'></span>
</body>2-2. Window - screen 객체
: 사용자의 모니터속성을 반환하는 객체. ( 모니터 너비, 높이, 컬러비트 등)
# 기본문법
screen.속성;
# screen객체 속성의 종류
screen.width : 모니터화면의 너비를 반환
screen.height : 모니터의 높이를 반환
screen.availWidth : 작업표시줄을 제외한 모니터화면의 너비를 반환
screen.availHeight : 작업표시줄을 제외한 모니터화면의 높이를 반환
screen.colorDepth : 사용자의 모니터가 표현가능한 컬러bit를 반환
2-2. Window - location 객체
: 사용자 브라우저의 url 속성과 새로고침 메서드를 제공함.
# 기본문법
location.속성;
location.메서드( );
# location객체 속성의종류
location.href : 주소영역에 주소를 설정하거나, 주소를 받아올 수 있음
location.hash : 주소에 #으로 명시된 값을 반환한다.
location.port : 주소에 작성한 포트번호를 반환.
location.search : 주소의 요청값(aka 쿼리)을 반환받음
location.hostname : 주소에 호스트 이름을 설정 또는 반환.
location.protocol : 주소의 http프로토콜을 반환함.
location.reload( ) : 새로고침
'개발자 양성과정 필기노트 > JavaScript' 카테고리의 다른 글
| 제이쿼리 선택자 (0) | 2021.08.25 |
|---|---|
| History객체, 문서객체모델 ( DOM ) (0) | 2021.08.10 |
| Math메서드, 배열메서드 (0) | 2021.08.03 |
| 재귀함수, 내장객체 (0) | 2021.08.02 |
| 조건문 (0) | 2021.07.29 |
댓글