자바스크립트: 웹 브라우저 기반의 객체들
1. window 객체
팝업 예제)
popup.html
<!DOCTYPE html>
<html>
<head>
<title>공지창</title>
<meta charset="utf-8">
<script>
function move() {
// window.opener.location.href="http://www.google.com";
var url="http://www.google.com";
opener.location.replace(url);
}
</script>
</head>
<body>
<p>여기는 공지창입니다.</p>
<a href="javascript:move()">여기를 클릭하면 구글로 이동됩니다.</a>
<br><br><br>
<a href="javascript:window.close()">창닫기1</a>
<a href="javascript:self.close()">창닫기2</a>
<a href="#" onclick="self.close()">창닫기3</a>
</body>
</html>
jscript.html
<!DOCTYPE html>
<html>
<head>
<title>웹 브라우저 기반의 객체들</title>
<meta charset="utf-8">
<script>
function popup() {
window.open("./popup.html","","width=300,height=350,left=0;top=0"); // 새창 관련 메소드
}
// document.bgColor="red";
document.write("안녕하세요");
</script>
</head>
<body onload="popup()">
</body>
</html>
2. history 객체
앞으로/뒤로 예제)
jscript22.html
<!DOCTYPE html>
<html>
<head>
<title>웹 브라우저 기반의 객체들</title>
<meta charset="utf-8">
<script>
</script>
</head>
<body>
<a href="1.html">1번문서</a>
<a href="javascript:history.back()">뒤로</a>
<a href="javascript:history.forward()">앞으로</a>
<a href="javascript:history.go(-2)">2단계 뒤로</a>
<a href="javascript:history.go(2)">2단계 앞으로</a>
</body>
</html>
3. document 객체
예제) input
<!DOCTYPE html>
<html>
<head>
<title>웹 브라우저 기반의 객체들</title>
<meta charset="utf-8">
<script>
function a() {
text=document.info.id.value;
alert(text);
}
</script>
</head>
<body>
<form name="info">
<input type="input" value="" name="id" />
<input type="button" value="클릭하세요" onclick="a()" />
</form>
</body>
</html>
4. screen 객체
예제) screen으로 해상도 출력
<!DOCTYPE html>
<html>
<head>
<title>웹 브라우저 기반의 객체들</title>
<meta charset="utf-8">
<script>
document.write(screen.width,"<br>");
document.write(screen.height,"<br>");
document.write(screen.availWidth,"<br>");
document.write(screen.availHeight,"<br>");
</script>
</head>
<body>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| css로 이미지 흑백으로 바꿀 때 IE 안먹는 문제 해결법 (0) | 2019.07.04 |
|---|---|
| 자바스크립트 내장객체: String (0) | 2017.08.31 |
| 15. 자바스크립트 기초: 점프메뉴, this (0) | 2017.08.29 |
| 13. 자바스크립트 기초: 내장객체 Date, Array (0) | 2017.08.25 |
| 12. 자바스크립트 기초: return (0) | 2017.08.25 |
