๐2022-08-05๐
ex10-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์๋์ฐ ์ด๊ธฐ</title>
<script>
function load(URL) {
window.open(URL, "myWin", "left=300,top=300,width=400,height=300");
}
</script>
</head>
<body>
<h3>window.open()์ผ๋ก ์๋์ฐ ์ด๊ธฐ</h3>
<hr>
<a href="javascript:load('http://www.graceland.com')">
์๋น์ค ํ๋ ์ฌ๋ฆฌ ํ ํ์ด์ง</a><br>
<a href="javascript:load('http://www.universalorlando.com')">
์ ๋๋ฒ์ค ์ฌ๋๋ ํ ํ์ด์ง</a><br>
<a href="javascript:load('http://www.disneyworld.com')">
๋์ฆ๋์๋ ํ ํ์ด์ง</a><br>
</body>
</html>
ex10-2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์๋์ฐ ๋ซ๊ธฐ</title>
<script>
let newWin=null; // ์๋ก ์ฐ ์๋์ฐ ๊ธฐ์ต
function load(URL) {
newWin = window.open(URL, "myWin", "left=300,top=300,width=400,height=300");
}
function closeNewWindow() {
if(newWin==null || newWin.closed) // ์๋์ฐ๊ฐ ์ด๋ฆฌ์ง ์์๊ฑฐ๋ ๋ซํ ๊ฒฝ์ฐ
return; // ์๋์ฐ๊ฐ ์๋ ๊ฒฝ์ฐ ๊ทธ๋ฅ ๋ฆฌํด
else
newWin.close(); // ์ด์ด ๋์ ์๋์ฐ ๋ซ๊ธฐ
}
</script>
</head>
<body>
<h3>window์ close()๋ก ์๋์ฐ ๋ซ๊ธฐ</h3>
<hr>
<a href="javascript:load('http://www.disneyworld.com')">
์ ์๋์ฐ ์ด๊ธฐ(๋์ฆ๋์๋)</a><br>
<a href="javascript:window.close()">
ํ์ฌ ์๋์ฐ ๋ซ๊ธฐ</a><br>
<a href="javascript:closeNewWindow()">
์ ์๋์ฐ ๋ซ๊ธฐ</a>
</body>
</html>
ex10-3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์๋์ฐ ๋ซ๊ธฐ</title>
<script>
let newWin=null; // ์๋ก ์ฐ ์๋์ฐ ๊ธฐ์ต
function load(URL) {
newWin = window.open(URL, "myWin", "left=300,top=300,width=400,height=300");
}
function closeNewWindow() {
if(newWin==null || newWin.closed) // ์๋์ฐ๊ฐ ์ด๋ฆฌ์ง ์์๊ฑฐ๋ ๋ซํ ๊ฒฝ์ฐ
return; // ์๋์ฐ๊ฐ ์๋ ๊ฒฝ์ฐ ๊ทธ๋ฅ ๋ฆฌํด
else
newWin.close(); // ์ด์ด ๋์ ์๋์ฐ ๋ซ๊ธฐ
}
</script>
</head>
<body>
<h3>window์ close()๋ก ์๋์ฐ ๋ซ๊ธฐ</h3>
<hr>
<a href="javascript:load('http://www.disneyworld.com')">
์ ์๋์ฐ ์ด๊ธฐ(๋์ฆ๋์๋)</a><br>
<a href="javascript:window.close()">
ํ์ฌ ์๋์ฐ ๋ซ๊ธฐ</a><br>
<a href="javascript:closeNewWindow()">
์ ์๋์ฐ ๋ซ๊ธฐ</a>
</body>
</html>
ex10-4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval()๋ก ํ
์คํธ ํ์ </title></head>
<body>
<h3>ํ
์คํธ๊ฐ ์๋ ํ์ ํ๋ฉฐ, ๋ง์ฐ์ค๋ก ํด๋ฆญํ๋ฉด ์ค๋จํฉ๋๋ค.</h3>
<hr>
<div><span id="span" style="background-color:yellow">
์๋ ํ์ ํ๋ ํ
์คํธ์
๋๋ค.</span>
</div>
<script>
let span = document.getElementById("span");
let timerID = setInterval("doRotate()", 200); // 200๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก doRotate() ํธ์ถ
span.onclick = function (e) { // ๋ง์ฐ์ค ํด๋ฆญ ์ด๋ฒคํธ ๋ฆฌ์ค๋
clearInterval(timerID); // ํ์ด๋จธ ํด์ . ๋ฌธ์์ด ํ์ ์ค๋จ
}
function doRotate() {
let str = span.innerHTML;
let firstChar = str.substr(0, 1);
let remains = str.substr(1, str.length-1);
str = remains + firstChar;
span.innerHTML = str; // str ํ
์คํธ๋ฅผ span ๊ฐ์ฒด์ ์ถ๋ ฅ
}
</script>
</body>
</html>
ex10-5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์๋์ฐ์ ์์น์ ํฌ๊ธฐ ์กฐ์ </title>
</head>
<body>
<h3>์๋์ฐ์ ์์น์ ํฌ๊ธฐ ์กฐ์ </h3>
<hr>
<button onclick="window.moveBy(-10, 0)">left</button>
<button onclick="window.moveBy(10, 0)">right</button>
<button onclick="self.moveBy(0, -10)">up</button>
<button onclick="moveBy(0, 10)">down</button>
<button onclick="resizeBy(10, 10)">+</button>
<button onclick="resizeBy(-10, -10)">-</button>
</body>
</html>
ex10-6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์น ํ์ด์ง์ ์๋ ์คํฌ๋กค</title>
<script>
function startScroll(interval) {
setInterval("autoScroll()", interval);
}
function autoScroll() {
window.scrollBy(0,10); // 10ํฝ์
์๋ก ์คํฌ๋กค
}
</script>
</head>
<body onload="startScroll(1000)">
<h3>์๋ ์คํฌ๋กค ํ์ด์ง</h3>
<hr>
<h3>๊ฟ๊ธธ(์ด๋์)</h3>
๊ฟ๊ธธ์<br>
๋ฐ์์ทจ๊ฐ ์๋ค๋ฉด<br>
๋์ ์ง ์ฐฝ๋ฐ<br>
๊ทธ ๋๊ณ๋จ ๊ธธ์ด ์ด๋ฏธ ์ค๋ ์ ์<br>
๋ชจ๋๊ฐ ๋๊ณ ๋ง์์ ๊ฑฐ์์<br><br>
ํ์ง๋ง<br>
๊ทธ ๊ฟ๊ธธ์์ ์์ทจ ์๋ค ํ๋<br>
๋๋ ๊ทธ๊ฒ์ด ์ ๋ง ์๋ฌ์์<br><br>
์ด ๋ฐค๋<br>
๋๋ ๋์ ์ง ์ฐฝ๋ฐ<br>
๊ทธ ๋๊ณ๋จ ์์ ํ๋ก ์์<br>
ํน์๋ผ๋ ๋์ ๋ชฉ์๋ฆฌ๊ฐ ๋ค๋ ค์ฌ๊น<br>
๊ณ ๊ฐ ์์ด๊ณ ์ฟ๋ค์ด์<br>
</body>
</html>
ex10-7.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์น ํ์ด์ง ํ๋ฆฐํธ</title>
</head>
<body>
<h3>์น ํ์ด์ง ํ๋ฆฐํธ</h3>
<hr>
<p>window ๊ฐ์ฒด์ print() ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด
window ๊ฐ์ฒด์ ๋ด๊ฒจ ์๋ ์น ํ์ด์ง๊ฐ ํ๋ฆฐํธ ๋ฉ๋๋ค.
<p>
<a href="javascript:window.print()">์ด๊ณณ์ ๋๋ฅด๋ฉด ํ๋ฆฐํธ ๋ฉ๋๋ค.</a><p>
<input type="button" value="ํ๋ฆฐํธ" onclick="window.print()">
</body>
</html>
ex10-8.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onbeforeprint์ onafterprint</title>
<style>
#logoDiv {
display : none;
position : absolute; left : 0; top : 0;
width : 100%; height : 100%;
z-index : -1; /* ๋ก๊ณ ์ด๋ฏธ์ง๋ฅผ ๋ฌธ์์ ๋ฐ๋ฐ๋ฅ์ ๋ฐฐ์น */
}
</style>
<script>
window.onbeforeprint=function (e) {
let logoDiv = document.getElementById("logoDiv");
logoDiv.style.display = "block"; // block์ผ๋ก ๋ณ๊ฒฝ. ๋ก๊ณ ๊ฐ ํ๋ฉด์ ๋ํ๋๊ฒ ํจ
}
window.onafterprint=hideLogo;
function hideLogo() {
let logoDiv = document.getElementById("logoDiv");
logoDiv.style.display = "none"; // ๋ก๊ณ ๋ฅผ ๋ณด์ด์ง ์๊ฒ ํจ
}
</script></head>
<body>
<h3>onbeforeprint, onafterprint ์ด๋ฒคํธ ์</h3>
<hr>
<div id="logoDiv">
<img src="media/logo.png" alt="์ด๋ฏธ์ง ์์ต๋๋ค.">
</div>
<p>์๋
ํ์ธ์. ๋ธ๋ผ์ฐ์ ์๋์ฐ์์๋ ๋ณด์ด์ง ์์ง๋ง, ํ๋ฆฐํธ์์๋ ํ์ฌ ๋ก๊ณ ๊ฐ ์ถ๋ ฅ๋๋ ์์ ๋ฅผ
๋ณด์
๋๋ค. ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ๋๋ฌ ์ธ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฉ๋ด๋ฅผ ์ ํํด ๋ณด์ธ์.</p>
</body>
</html>
ex10-9.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window.location์ผ๋ก ์น ์ฌ์ดํธ ์ ์</title>
<script>
function load() {
let select = document.getElementById("site");
window.location=select.options[select.selectedIndex].value;
}
</script>
</head>
<body>
<h3>window.location์ผ๋ก ์น ์ฌ์ดํธ ์ ์</h3>
<hr>
์ฌ์ดํธ ์ ํ :
<select id="site">
<option value="http://www.naver.com" selected>๋ค์ด๋ฒ
<option value="http://www.google.com">๊ตฌ๊ธ
<option value="http://www.microsoft.com">๋ง์ดํฌ๋ก์ํํธ
</select>
<p>
<button onclick="load()">์น ์ฌ์ดํธ ์ ์</button>
</body>
</html>
ex10-10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ธ๋ผ์ฐ์ ์ ๋ณด ์ถ๋ ฅ</title>
<style>
span { color : blue; }
div {
border-color : yellowgreen;
border-style : solid;
padding : 5px;
}
</style>
<script>
function printNavigator() {
let text = "<span>appCodeName</span>: " + navigator.appCodeName + "<br>";
text += "<span>appName</span>: " + navigator.appName + "<br>";
text += "<span>appVersion</span>: " + navigator.appVersion + "<br>";
text += "<span>platform</span>: " + navigator.platform + "<br>";
text += "<span>product</span>: " + navigator.product + "<br>";
text += "<span>userAgent</span>: " + navigator.userAgent +"<br>";
text += "<span>vendor</span>: " + navigator.vendor +"<br>";
text += "<span>language</span>: " + navigator.language + "<br>";
text += "<span>onLine</span>: " + navigator.onLine + "<br>";
text += "<span>cookieEnabled</span>: " + navigator.cookieEnabled + "<br>";
text += "<span>javaEnabled()</span>:" + navigator.javaEnabled() + "<br>";
text += "<span>plugins.length</span>: " + navigator.plugins.length + "<br>";
for(let j=0; j<navigator.plugins.length; j++) {
text += "plugins" + j + " : <blockquote>";
text += navigator.plugins[j].name + "<br>";
text += "<i>" + navigator.plugins[j].description + "</i><br>";
text += navigator.plugins[j].filename + "</blockquote>";
}
// div ํ๊ทธ์ ์ถ๋ ฅ
let div = document.getElementById("div");
div.innerHTML = text;
}
</script>
</head>
<body onload="printNavigator()">
<h3>๋ธ๋ผ์ฐ์ ์ ๊ดํ ์ ๋ณด ์ถ๋ ฅ</h3>
์๋์ ์ด ๋ธ๋ผ์ฐ์ ์ ๊ดํ ์ฌ๋ฌ ์ ๋ณด๋ฅผ ์ถ๋ ฅํฉ๋๋ค.
<hr>
<p>
<div id="div"></div>
</body>
</html>
ex10-11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์คํฌ๋ฆฐ์ ๊ดํ ์ ๋ณด ์ถ๋ ฅ</title>
<script>
function printScreen() {
let text = "availHeight:" + screen.availHeight + "<br>";
text += "availWidth:" + screen.availWidth + "<br>";
text += "colorDepth:" + screen.colorDepth + "<br>";
text += "pixelDepth:" + screen.pixelDepth + "<br>";
text += "height:" + screen.height + "<br>";
text += "width:" + screen.width + "<br>";
document.getElementById("div").innerHTML = text;
}
</script>
</head>
<body onload="printScreen()">
<h3>์คํฌ๋ฆฐ ์ฅ์น์ ๊ดํ ์ ๋ณด</h3>
<hr>
<div id="div"></div>
</body>
</html>
ex10-12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history ๊ฐ์ฒด ํ์ฉ</title>
</head>
<body>
<h3>history ๊ฐ์ฒด ํ์ฉ</h3>
<hr>
<button onclick="history.back()">back()</button>
<button onclick="history.forward()">forward()</button>
<button onclick="history.go(-1)">go(-1)</button>
</body>
</html>
๋๊ธ