카테고리 없음
브라우저 객체 모델
깡출깡충
2024. 7. 24. 09:43
목차
- 브라우저 객체 모델(Browser Object Model : BOM)
- window객체
- window객체의 메서드
- 일정한 시간 간격으로 코드 실행하기
- setinterval()의 반복 실행을 멈추고 싶을 때
- setTimeout()의 반복 실행을 멈추고 싶을 때
브라우저 객체 모델(Browser Object Model : BOM)
웹 브라우저가 창에 문서가 표시되는 순간 브라우저는 html소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어냅니다.
웹 브라우저가 열리면 가장 먼저 window객체가 만들어지고 밑으로 하위요소에 해당하는 객체들이 생성됩니다. 이 하위객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하는 하위 객체를 가리킨다.
(종류)
1. window : 브라우저 창이 열릴때마다 하나씩 만들어집니다. 브라우저 창 안의 요소중 최상위(부모) 객체 입니다.
2. document : 웹 문서마다 하나씩 있고 <body> 태그를 만나면 만들어집니다. html문서의 정보가 담겨있습니다.
3. navigator : 현재 사용하는 브라우저의 정보가 들어있습니다.
4. history : 현재 창에서 사용자의 방문기록을 저장합니다.
5. location : 현재 페이지의 URL정보가 담겨있습니다.
6. screen : 현재 사용하는 화면의 정보가 담겨있습니다.
window객체
window객체는 웹 브라우저의 상태를 제어하고 자바스크립트의 최상위에 존재합니다.
그래서 자바스크립트의 모든 객체는 window객체 안에 포함됩니다.
window객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용합니다.
프로퍼티를 사용하려면 아래 기본형을 사용합니다.
(기본형)
window.프로퍼티(속성)명;
(프로퍼티의 종류)
1. document : 브라우저 창에 표시 된 웹 문서에 접근할 수 있습니다.
2. frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고,
반대로 포함되어 있지 않다면 null을 반환합니다.
3. innerHeight : 내용 영역의 높이를 나타냅니다.★
4. innerWidth : 내용 영역의 넓이를 나타냅니다.★
5. localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환합니다.
데이터가 반영구적으로 저장되어 브라우저를 종료해도 정보가 남아있습니다.★
6. location : window객체의 위치 또는 현재 url을 나타냅니다.
7. name : 브라우저 창의 이름을 가져오거나 수정합니다.
8. outerHeight : 브라우저 창의 바깥 높이를 나타냅니다.
9. outerWidth : 브라우저 창의 바깥 넓이를 나타냅니다.
10. pageXoffset : 스크롤했을때 수평으로 이동하는 픽셀수를 나타냅니다. scrollX와 같습니다.☆
11. pageYoffset : 스크롤했을때 수직으로 이동하는 픽셀수를 나타냅니다. scrollY와 같습니다.☆
12. parent : 현재 창이나 서브 프레임의 부모를 뜻합니다.
13. screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다.☆
14. screenY : 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냅니다.☆
15. sessionStorage : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환합니다.
휘발성 저장 공간으로 브라우저를 종료하면 저장된 데이터가 모두 사라집니다.
window객체의 메서드
window객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련됩니다. window객체의 메서드들은 window.alert(); 이런식으로 써야 하지만 window는 기본 객체라서 생략할 수 있습니다.
(종류)
1. alert() : 알람창을 표시합니다. 확인 버튼을 누르면 다음줄의 코드를 실행합니다.
2. blur() : 현재 창에서 포커스를 제거합니다.
3. close() : 현재 창을 닫습니다.
4. confirm() : 확인, 취소 창으로 확인을 누르면 true를 반환하고 취소를 누르면 false를 반환합니다.
5. focus() : 현재 창에 포커스를 부여합니다.
6. moveBy( x, y ) : 현재 창을 지정한 크기만큼 이동시킵니다. 보통 파업 작업에서 많이 씁니다.
7. moveTo( x, y ) : 현재 창을 지정한 좌표로 이동시킵니다.
8. open( 경로, 창 이름, 창 옵션 ) : 새로운 창을 엽니다.
- 창 이름 : 팝업창의 이름을 나타냅니다. 이름을 지정하지 않으면 팝업창이 계속 새로 나타납니다.
- 옵션 : left, top속성을 이용해 위치를 지정하거나 width,height속성을 이용해 크기를 지정할 수 있습니다.
만약 위치를 지정하지 않으면 팝업창을 화면의 맨 왼쪽 위에 나타냅니다.
9. postMessage() : 메세지를 다른 창으로 전달합니다.
10. print() : 현재 문서를 인쇄합니다.
11. prompt() : 질의 응답창. 사용자로부터 입력받은 내용을 문자열로 반환합니다.
12. resizeBy() : 지정한 크기 만큼 현재 창의 크기를 조절합니다.
13. resizeTo() : 동적으로 브라우저 창의 크기를 조절합니다.
14. sizeToContent() : 내용에 맞게 창의 크기를 맞춥니다.
15. scroll() : 문서에서 특정 위치로 스크롤 합니다.★
16. scrollBy() : 지정한 크기 만큼씩 스크롤 합니다.★
17. scrollTo() : 지정한 위치까지 스크롤 합니다.★
18. stop() : 로딩을 중지합니다.
팝업창 만들어보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>팝업</title>
</head>
<body>
<h1>팝업창입니다.</h1>
<p>sdsdsdfdsfdgdgd</p>
</body>
</html>
일정한 시간 간격으로 코드 실행하기
일정한 시간 간격으로 코드를 실행하는 함수로 setInterval()메서드와 setTimeout()메서드가 있습니다.
setInterval() 은 일정한 시간 간격으로 코드를 반복실행하고, setTimeout() 은 일정한 시간이 흐른 후 코드를 한 번 실행하고 자동으로 종료합니다.
(기본형)
1. var 참조 변수 : setinterval(function(){ 자바스크립트코드 }, 시간간격(ms) );
2. var 참조 변수 : setTimeout(function(){ 자바스크립트코드 }, 시간간격(ms) )
setinterval()의 반복 실행을 멈추고 싶을 때
setInterval()의 반복실행을 멈추고 싶을때에는 메서드를 이용합니다.
clearInterval() 의 소괄호 안에 setInterval() 메서드를 참조하고 있는 변수의 이름을 넣으면 setInterval()을 종료할 수 있습니다.
setTimeout()의 반복 실행을 멈추고 싶을 때
setTimeout()은 원래 정해진 시간 이후에 한번 코드를 실행하고 자동 종료하지만 조금만 응용하면 원하는 횟수만큼 재귀호출하여 반복 실행하게 만들 수 있습니다.
이 때 횟수를 충족했을 경우 setTimeout()을 멈추고 싶다면 clearTimeout()메서드를 이용합니다.
setInterval()메서드와 clearInterval() 사용해보기
setInterval()메서드와 clearInterval() 입력 예시
<script>
var addNum = 0;
var subNum = 1000;
// 1초마다 addNum을 1씩 증가시킵니다.
var auto1 = setInterval(function () {
addNum++;
console.log("addNum : " + addNum);
}, 1000);
// 1씩 감소 시킵니다.
var auto2 = setInterval(function () {
subNum--;
console.log("subNum : " + subNum);
}, 1000);
</script>
<button type="button" onclick="clearInterval(auto1)">증가 정지</button>
<button type="button" onclick="clearInterval(auto2)">감소 정지</button>
setTimeout()메서드 사용해보기
setTimeout()메서드 입력 예시
var addNum2 = 0;
//3초 후에 addNum2을 1 증가시킨다.
var auto3 = setTimeout(function () {
addNum2++;
console.log("addNum2 : " + addNum2);
}, 3000);