5. Window 객체
- 전역객체
- window 변수로 참조 가능.
하지만 일반적으로 생략해서 사용.
- screen, location, history. navigator, document 은
Window 객체의 속성이다.
원래는 window.screen
window.location
window.history
window.navigator
window.document 사용하는것이 원칙이지만 일반적으로 window 는 생략하고 사용된다.
- window.opener : 자식창에서 부모창 참조할 때 사용.
- 부모에서 새로운 창(자식창)을 만드는 방법
var childWin = open("child.html"); // window.open("child.html", 옵션); 동일
옵션 - 창의 크기, 위치(좌표), .. 를 줄수있음.
현재 창 닫기
window.close();
부모창 닫기
opener.close();
자식창 닫기
childWin.close();
<!DOCTYPE html>
<html>
<head>
<title>js07_객체2_BOM5_Window객체2_새로운창열기</title>
<script>
// 새로운창 열기
var childWin;
console.log(history);
function new_win() {
childWin =
window.open("child.html", "",
"width=200, height=300, left=300, top=400");
}
// 함수
function self_close() {
window.close();
}
function child_close() {
childWin.close();
}
</script>
</head>
<body>
<h1>부모창</h1>
<button onclick="new_win()">창열기</button>
<button onclick="self_close()">자신 창닫기</button>
<button onclick="child_close()">자식 창닫기</button>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>child.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function self_close() {
window.close();
}
function parent_close() {
opener.close();
}
</script>
</head>
<body>
<h1>자식창</h1>
<button onclick="self_close()">자신 창닫기</button>
<button onclick="parent_close()">부모 창닫기</button>
</body>
</html>
2> setTimeout(function(){}, 1/1000);
- 한번 만 실행됨.
<!DOCTYPE html>
<html>
<head>
<title>js07_객체2_BOM5_Window객체3_setTimeout</title>
<script>
// setTimeout(function(){}, delay)
// 단 한번만 실행됨
function run() {
setTimeout(function () {
console.log("2초뒤에 출력됨.");
}, 2000);
}
</script>
</head>
<body>
<button onclick="run()">start</button>
</body>
</html>
3> setInterval(function(){}, 1/1000);
- 매번 실행
- 해제방법: clearInterval(fun);
<!DOCTYPE html>
<html>
<head>
<title>js07_객체2_BOM5_Window객체4_setInterval</title>
<script>
// setTimeout(function(){}, delay)
// 단 한번만 실행됨
var x;
function run() {
x = setInterval(function () {
console.log("2초뒤에 출력됨.");
}, 2000);
}
function stop() {
clearInterval(x);
}
</script>
</head>
<body>
<button onclick="run()">start</button>
<button onclick="stop()">stop</button>
</body>
</html>
4> alert("아이디가 중복됨.");
confirm("진짜 삭제할거임?");
prompt("이름을 입력하세요.");
<!DOCTYPE html>
<html>
<head>
<title>js07_객체2_BOM5_Window객체5_alert_confirm_prompt</title>
<script>
function info1() {
alert("아이디가 중복됨.");
}
function info2() {
var result = confirm("진짜 삭제할거임?");
console.log(result);
}
function info3() {
var result = prompt("이름을 입력하세요.");
console.log(result);
}
</script>
</head>
<body>
<button onclick="info1()">alert</button>
<button onclick="info2()">confirm</button>
<button onclick="info3()">prompt</button>
</body>
</html>
'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 3일차 - 2일차 정리 (0) | 2024.05.07 |
|---|---|
| js 3일차 - 객체(3) JSON (0) | 2024.05.07 |
| js 2일차 -객체(2) _ BOM (Browser Object Model) (0) | 2024.05.03 |
| js 2일차 - 객체(1) _ 데이터관련, spread 연산자 + 얕은복사, 깊은복사 (0) | 2024.05.03 |
| js 2일차 - 1일차 정리 (0) | 2024.05.03 |
