반응형
브라우저 객체란?
- 브라우저에 내장된 객체를 브라우저 객체라고 한다
- window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있음
- 계층적 구조로 이루어져있으며, 이를 브라우저 객체 모델(BOM)이라고 함
window 객체
1. 의미 : 브라우저 객체의 최상위 객체
2. window 객체의 메서드 종류
3. open() 메서드 이용해 팝업창 나타내기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>윈도우객체 - 팝업</title>
</head>
<body>
<p>
<img src="images/window_object_1.jpg" usemap="#intro">
<map name="intro" id="intro">
<area shape="rect" coords="230, 368, 280, 390" href="#" alt="창 닫기" onclick="window.close();">
</map>
</p>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>윈도우객체 - 팝업</title>
</head>
<body>
<script>
window.open("042. winpopup-001.html", "pop1", "width=300, height=400, \
left=300, top=50");
</script>
</body>
</html>
4. alert()- 경고창, prompt() - 질의응답창, confirm() - 확인/취소창
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>윈도우객체 - 팝업</title>
</head>
<body>
<script>
// 경고 창
// window.alert("잘못 입력했습니다.");
alert("잘못 입력했습니다."); // window 객체 따로 안적어도 사용 가능
// 질의응답 창
// window.prompt("당신의 연령은?", "0");
prompt("당신의 연령은?", "0"); // window 객체 따로 안적어도 사용 가능
// 확인/취소 창 -> [확인] 누르면 true, [취소] 누르면 false 반환
// window.confirm("정말로 삭제하시겠습니까?");
confirm("정말로 삭제하시겠습니까?"); // window 객체 따로 안적어도 사용 가능
</script>
</body>
</html>
일정한 시간 간격으로 코드 실행 - setInterval() / clearInterval()
1. 의미 : setInterval() 메서드는 코드를 일정 시간 간격으로 반복 실행하고, clearInterval() 메서드는 setInterval()을 취소함
2. 기본형
<script>
// setInterval() 기본형
// 방법1. function() 사용
var 참조변수 = setInterval(function() {
코드
}, 3000); // 3초를 의미
// 방법2. function() 사용X
var 참조변수 = setInterval("코드", 3000); // 3초를 의미
// clearInterval() 기본형
clearInterval(참조변수);
</script>
3. 예제 - setInterval() / clearInterval()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
</head>
<body>
<!--clearInterval : 동작 중인 setInterval 중지시킴-->
<button onclick="clearInterval(auto_1);">증가 정지</button>
<button onclick="clearInterval(auto_2);">감소 정지</button>
<script>
var addNum = 0;
var subNum = 1000;
//1초 후부터 1초마다 function안에 작성한 소스코드 실행
//setInterval은 변수에 안 담아서 사용가능하지만 변수에 안담을 경우
//클리어가 불가능해져서 메모리가 계속 누적되는 문제 발생
var auto_1 = setInterval(function() {
addNum++;
console.log("addNum : " + addNum);
}, 1000);
var auto_2 = setInterval(function() {
subNum--;
console.log("subNum : " + subNum);
}, 1000);
</script>
</body>
</html>
<감소 정지 버튼을 누른 후>
일정한 시간 후에 코드 실행 - setTimeout() / clearTimeout()
1. 의미 : setTimeout() 메서드는 일정 시간이 지나면 코드를 실행하고 종료, clearTimeout()는 setTimeout()를 제거
2. 특징 : setTimeout() 메서드를 응용하여 재귀 호출을 하면 setInterval() 메서드처럼 사용이 가능
3. 기본형
<script>
// setTimeout() 기본형
// 방법1. function() 사용
var 참조변수 = setTimeout(function() {
자바스크립트 코드
}, 3000); // 3초를 의미
// 방법2. function() 사용X
var 참조변수 = setTimeout("자바스크립트 코드", 3000); // 3초를 의미
// clearInterval() 기본형
clearTimeout(참조변수);
</script>
4. 예제 - setTimeout() / clearTimeout()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setTimeout</title>
</head>
<body>
<script>
var addNum = 0;
//1초 후에 한 번만 실행되고 멈춤
var auto = setTimeout(function() {
addNum++;
console.log(addNum);
}, 1000);
var auto2;
var addNum2 = 0;
//재귀함수를 이용해 setInterval과 같이 사용가능
function autoFnc() {
if(auto2 != null && auto2 != '') {
//auto2에 setTimeout이 담겨있으면 초기화
clearTimeout(auto2);
}
addNum2++;
console.log(addNum2);
auto2 = setTimeout(function() {
autoFnc();
}, 1000);
}
autoFnc();
</script>
</body>
</html>
screen 객체
1. 의미 : 사용자 모니터 정보(속성)을 제공하는 객체 예) 모니터의 너비나 높이 또는 컬러 표현 bit를 반환
2. 기본형
screen.속성;
예) screen.width; // 모니터의 너빗값을 반환
3. screen 객체의 속성 종류
location 객체
1. 의미 : 사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체, 현재 URL에 대한 정보와 새로고침 메소드를 제공
2. 기본형
location.속성;
location.메서드();
예) location.href; // 사용자 브라우저의 URL 경로 값을 반환
예) location.href = "http://naver.com"; // 사용자 브라우저의 URL 경로를 naver 주소로 변경
예) location.reload(); // 사용자 브라우저를 새로고침함
3. location객체의 속성 종류
history 객체
1. 의미 : 사용자가 방문한 사이트의 기록을 남기고 이전과 다음 방문사이트로 돌아갈 수 있는 속성과 메서드를 제공
2. 기본형
// 1. history.속성;
예) history.length; // 사용자가 방문한 사이트의 기록을 남긴 총 수량
// 2. history.메서드();
예) history.back(); // 사용자가 방문한 사이트 중 바로 이전에 방문한 사이트로 이동
// 3. history.메서드(n);
예) history.back(2); // 사용자가 방문한 사이트 중 두 단계 이전에 방문한 사이트로 이동
3. history 객체의 속성 종류
navigator 객체
1. 의미 : 현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체
2. 기본형
navigator.속성;
예) document.write(navigator.userAgent); // 방문자의 브라우저와 운영체제 정보를 제공
// 출력결과 (크롬 브라우저일때)
Mozilla/5.0 // 기본 플랫폼
(Windows NT 10.0; Win64; x64) // 운영체제 정보
AppleWebKit/537.36 (KHTML, like Gecko) // 사용 중인 브라우저의 엔진 이름
Chrome/93.0.4577.82 // 사용 중인 브라우저 이름
Safari/537.36 // 같은 엔진을 사용 중이며 호환 가능한 다른 브라우저
3. screen 객체의 속성 종류
반응형
'💻 1. 웹개발_Front end > 1-4 Javascript' 카테고리의 다른 글
| [Javascript] 05-2 함수에서 return 문의 역할 (0) | 2021.09.12 |
|---|---|
| [Javascript] 05-1 함수 (0) | 2021.09.12 |
| [Javascript] 04-2 내장 객체 (0) | 2021.09.12 |
| [Javascript] 04-1 객체 (0) | 2021.09.12 |
| [Javascript] 03-4 반복문 (0) | 2021.09.07 |
댓글