6-2 DOM ?方?

Fs DOM 󪺩ʽ~Aڭ̤]iHUӪҴѪkC檫󪺤kAiNJ޼Ʃbk᪺AA榡pUG
objectName.methodName([arguments]);
ڭ̬ݬ window U history 󷥨kA󪺥\OΨӰOsvAШUCdҡG

Example]histGo01.htm^G

WzdҪlɦpUG

lɡ]histGo01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>"history" XӤk</h2>
<hr>
<a href="http://www.cs.nthu.edu.tw">MؤjǸTt</a><br>
<hr>

History  = <script>document.writeln(history.length)</script>[ϥ history.length]<br>
<a href="javascript:history.go(-1)">^e@</a> [ϥ history.go(-1)]<br>
<a href="javascript:history.go(0)">sz</a> [ϥ history.go(0)]<br>
<a href="javascript:history.go(+1)">U@</a> [ϥ history.go(+1)]
<hr>

</body>
</html>

bWzdҤAhistory.length OFHesơAڭ̥iHIuMؤjǸTtvAAuW@vssANiHݨuHistory סvwgܦ 2Cڭ̤]iHIs history.go(n) Ӹ줧esLA n=-1 ɡANe@ӺA n=+1 ɡANU@ӺAӷ n=0AhNszC

Hint
AiHϥ history AӤϥΥW window.historyC

t@ӱ`ΪkO window open() kAiHΨӶ}ssAëwUݩ Ak榡pUG

windowId = window.open([url][, winName][, winControlString][, keepHistory]); pUG kϥΥiUCdҡG

Example]winOpen01.htm^G

bWzdҤAunAI@ӳsAJavaScript N|ϥ window.open() Ӷ}Ҥ@ӷsܦsCWzdҪlɦpUG

lɡ]winOpen01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ϥ window.open() d</h2>
<hr>
<script>
function openWin(url){
	window.open(url,'Detail','status=no,toolbar=no,width=800,height=600');
}
</script>
<a href="#" onClick="openWin('http://www.nthu.edu.tw')">Mj</a><br>
<a href="#" onClick="openWin('http://www.nctu.edu.tw')">j</a><br>
<a href="#" onClick="openWin('http://www.ntu.edu.tw')">xj</a><br>
<hr>

</body>
</html>

bWzdҤAݭn`N@COuhref="#"vAoO@ӡuvsAϥΪI惡sɡAsä|եhJ@ӷsAӬOg onClick ƥhX JavaScript {XӶ}Ҥ@ӷsC

Hint
ϥ HTML ҲͪsA]iHͷsAun[J target=_blank ݩʴNiHFAҦpu<a target=_blank href=s}>sr</a>vAOkõLkwsUݩʡC

ڭ̥iHϥ window.open() ĤTӿJѼƨӱsﶵAШUCdҡAdҥiHϥΪ̸gѪ檺ﶵӱs]wG

Example]winOpen02.htm^G

WzdҪlɦpUG

lɡ]winOpen02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ϥ window.open() dҡGsﶵ</h2>
<hr>
<script>
function openWindow(form){
	var winFmt="";
	winFmt += "width="+form.width.value+",";
	winFmt += "height="+form.height.value+",";
	winFmt += "left="+form.left.value+",";
	winFmt += "top="+form.top.value+",";
	winFmt += "titlebar="+(form.titlebar.status?1:0)+",";
	winFmt += "menubar="+(form.menubar.status?1:0)+",";
	winFmt += "toolbar="+(form.toolbar.status?1:0)+",";
	winFmt += "location="+(form.location.status?1:0)+",";
	winFmt += "scrollbars="+(form.scrollbars.status?1:0)+",";
	winFmt += "resizable="+(form.resizable.status?1:0)+",";
	winFmt += "status="+(form.status.status?1:0);
	status="r = " + winFmt;
	window.open(form.url.value, form.title.value, winFmt);
}
</script>

<form>
}G<input size=30 id=url value="http://www.cs.nthu.edu.tw"><br>
W١G<input size=30 id=title value="newWin"><br>
eסG<input size=30 id=width value=400><br>
סG<input size=30 id=height value=300><br>
mG<input size=30 id=left value=100><br>
mG<input size=30 id=top value=100><br>
<input type=checkbox id=titlebar> ܼDC<br>
<input type=checkbox id=menubar> ܤUԿ<br>
<input type=checkbox id=toolbar> ܤuC<br>
<input type=checkbox id=location> ܺ}C<br>
<input type=checkbox id=scrollbars> ܱb<br>
<input type=checkbox id=resizable> iܤjp<br>
<input type=checkbox id=status> ܪAC<br>
<p>
<input type=button value="}ҷs" onClick="openWindow(this.form)">
<input type=reset>
<hr>

</body>
</html>

bWzdҤAϥΪ̫Uu}ҷsvɡA|NﶵrܦbACAHKdݡC

ڭ̤]iHϥ window print() kӦLX@ӺAҦpG

Example]winPrint01.htm^G

bWzdҤAunAI@ӳsAJavaScript N|ϥ window.print() Ӷ}Ҥ@ӦCLܵCdҪlɦpUG

lɡ]winPrint01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ϥ window.print() d</h2>
<hr>
k@G<a href="#" onClick="window.print()">CL</a><br>
kGG<a href="javascript:window.print()">CL</a>
<hr>

</body>
</html>

ЯSO`NAڭ̥ΤFӤP覡ӹFP˪\C

~Aڭ̥iHϥ window.moveBy(x, y) ӱN۹ثem x M y ӹAҦpڭ̥iHʵH͡ua_vĪGAdҦpUG

Example]winQuake01.htm^G

WzdҪlɦpUG

lɡ]winQuake01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>a_</h2>
<hr>

<script>
function shakeWindow(x){
	for (i=0; i<1000; i++){
		window.moveBy(0,x)
		window.moveBy(x,0)
		window.moveBy(0,-x)
		window.moveBy(-x,0)
	}
}
</script>

<form>
<input type="button" onClick="shakeWindow(5)" value="pa_">
<input type="button" onClick="shakeWindow(50)" value="ja_">
</form>

<hr>
</body>
</html>

bWzdҤAunU@ӫsAsN|Is window.moveByAWUkAͧϦpa_PıC

ڭ̥iHϥ window.clipboardData.setData() ӱNYqreŶKïAШUCdҡG

Example]winClipboard01.htm^G

WzdҪlɦpUG

lɡ]winClipboard01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ƻsr</h2>
<hr>
ЦbUC峹IUG
<pre style="background-color:#EEEEEE;" ondblclick='javascript:window.clipboardData.setData("Text", this.innerText); alert("AwgFѮv...");'>
@OsY 
u@LѪK 
@OcP
˵@ӮLѪ]
@OdUe 
yVߤ@v 
@O 
AAA@꺡 
...
</pre>

<hr>
</body>
</html>

bWzdҤAڭ̥unb֤WIUAN|N pre ҩҧreŶKïA䤤

window M document 󪺩ʽBkBƥBXAѪdҥФ]㪺CAѩgTAAحzAШUCɮסG
JavaScript {]pPΡGΩΤ