4-1 ????件?簡?

}C (Arrays) O JavaScript Ѫت (Built-in Object) @A\jjAijT²ƧA{XC²檺A}CO@ܼơAiHxs\hӭȡ]iHOrBƭȡAάOt@Ӫ^Aڭ̥iHϥί (Index) ΤUС]Subscript^ӦsC@ӤȡAޱq 0 }lAҦp}C A Ĥ@Ӥ A[0]AĤӤ A[4]A̦AoO̱`Ϊ}Cs覡C]oMCyO@PC^

nϥΰ}CܼƮɡAݥŧiAiHγ]w}CӼơAMA⤸@Ӥ@ӥ[ihAҦpG

Example]array01.htm^G

WzdҪlɦpUG

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

<body>
<h2 align=center>}Cغc</h2>
<hr>

<script>
myArray = new Array();			// ͤ@ӪŪ}C
myArray[0] = "This is a test";		// [J 1 Ӥ 
myArray[1] = 3.1415926;			// [J 2 Ӥ 
myArray[2] = "The last element";	// [J 3 Ӥ 
document.writeln("myArray[0] = " + myArray[0] + "<br>");
document.writeln("myArray[1] = " + myArray[1] + "<br>");
document.writeln("myArray[2] = " + myArray[2] + "<br>");
</script>

<hr>
</body>
</html>

iNȤ@wG

myArray = new Array("This is a test", 3.1415926, "The last element");

²檺kAhON}CUӤbAG

myArray = ["This is a test", 3.1415926, "The last element"];

Yn@LX}CҦeӶi˵AiΤUC禡

lɡ]listArray.js^G]ǦϰUYi^
// CL}C
function listArray(array, arrayName) {
	for (var i=0; i<array.length; i++) {
		document.write(arrayName+"["+i+"] = ");
		document.write("<font color=green>"+array[i]+"</font><br>");
	}
}

array NǤJƪ}CAarrayName hO}CW١A array.length hO}C array ӼơC

Hint
bWzܩwqAO_iHǤJ arrayNameAӪ array }CW١H٨SѪkAŪ̩ΦPǭݡC

ҦpAN myArray HWz禡LXAio

Example]array02.htm^G

WzdҪlɦpUG

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

<body>
<h2 align=center>}CCL</h2>
<hr>

<script src=listArray.js></script>
<script>
myArray = ["This is a test", 3.1415926, "The last element"]; 
listArray(myArray, "myArray");
document.write("myArray = " + myArray);
</script>
<hr>
</body>
</html>

bWzdҤAڭ̬ON listArray() 禡gb listArray.js ɮפAèϥΤUC覡ӱNɮ׾ɤJWzG

<script src="listArray.js"></script> oؤ覡AiHڭ̦bPɤJۦP禡AD`KAШ򳹸`uۭqơvC

{bڭ̨ӬݴXӤ㪺AĤ@ӬOuC@yvAiHq 15 ӦrꤤAHüƪ覡DX@ӨܡApUG

Example]randomText.htm^G

WzdҪlɦpUG

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

<body>
<h2 align=center>C@y]QζüIr}C^</h2>
<hr>

<script>
text = new Array();
i = 0;
text[i++]="If you don't set aside time for exercise,<br>you'll set aside time for illness.";
text[i++]="ާA̬۷RɶhΦhuA<p>YA̯l׷ŬXa۫ݡA<p>AҦɨ賣NO@صL媺RA<p>YoA]nnnnAA<p>]nb߸̦s۷P¡A<p>P¥LFA@OСC<br><br>jFHAA~|DA<p>bZM^bA<p>S몺CK~|FLѡA<p>psWRRC<br><br>u}TEL誺CK";
text[i++]="_観ΤHA@ӿWߡC<p>@UɤHAAUɤHC";
text[i++] = " @@<p> @                             @    @ͪ}@";
text[i++] ="ڴӥh u]Abs<p>Ӧb]D۪\<br>SALe<p>Ostt ڵئ~wu<p>QL^K ̵M<p>|jA ڬBŦӤW<p>Ӥp گYg";
text[i++] = "Yesterday is history, Tomorrow is mystery, and Today is a gift. That is why we call it present.";
text[i++] = "RϭOAӬOzߡI";
text[i++] = "pAJ  bڳ̬Rɨ<p>o  ڤwbe DFʦ~ D͢ڭ̵@qнt<p>OڤƧ@@ʾ  bAg <p>UV}F  Oګe@߱<p>  A  ЧAť ŸݪOڵݪ <p> ӷAשLL  bAḨF@a...<p>BͰ  Oä  Oڭs<br><br>u}TE@\}᪺";
text[i++] = "Draft beers, not people.";
text[i++] = "Of all the things I lost, I miss my mind most.";
text[i++] = "Choose what you love ...<br>Love what you choose.";
text[i++] = "Rules are made to be broken.";
text[i++] = "Waste bandwidth; not trees!";
text[i++] = "Work like you don't need the money.<br>Love like you've never been hurt.<br>Dance like nobody's watching.";
text[i++] = "gɮA<br>oŤsOC<br>OijUA<br>bt׹DbtgC<br><br>ҡE";
 
index = Math.floor(Math.random()*text.length);		// HüƳ]wylޭ
document.write("<CENTER><table border=2 cellpadding=20 bgcolor=white>");
document.write("<tr><td><b><font size=+2 face=\"з,Helvetical,Arial\" color=#408080>");
document.write(text[index]);
document.write("</font></b></td></tr></table></CENTER>");
</script> 

<hr>
</body>
</html>

bWzdҤAҦrsb@Ӱ}CACsJAN|gѶüƿ@ӯޭȨӬDXylAҥHXGCҿXӪyl|@ˡCüƪ͡ApUG

HP˪覡Aڭ̤]iHbJɡAC@üƿ MIDI ɡAҦpG

Example]randomMusic.htm^G

WzdҪlɦpUG

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

<body>
<h2 align=center>۰Iq]QζüII MIDI ֡^</h2>
<hr>

<script>
midiFile = new Array();
songName = new Array();
singerName = new Array();

i = 0;
midiFile[i] = "music/ť.mid";
songName[i] = "ť";
singerName[i] = "iff";
i++;
midiFile[i] = "music/xp.mid";
songName[i] = "xp";
singerName[i] = "X";
i++;
midiFile[i] = "music/pGD.mid";
songName[i] = "pGD";
singerName[i] = "\";
i++;
midiFile[i] = "music/ӧA򳣤n.mid";
songName[i] = "ӧA򳣤n";
singerName[i] = "iff";
i++;
midiFile[i] = "music/tomorrow.mid";
songName[i] = "ѧAO_̵MR";
singerName[i] = "w";

index = Math.floor(Math.random()*midiFile.length);
pickedMidi = midiFile[index];
pickedSongName = songName[index];
pickedSingerName = singerName[index];
document.writeln("<embed src="+pickedMidi+" hidden=false autostart=true loop=false type='audio/midi'>");
</script>

<p align=center>
<script>
document.write("A{bť쪺qO<font color=green>y"+pickedSingerName+"z</font>");
document.write("y<font color=red>"+pickedSongName+"</font>z");
</script>

<p>
ҦqG
<blockquote>
<script>
for (var i = 0; i < midiFile.length; i++) {
	document.write("<font color=green>"+singerName[i]+"</font>G");
	document.write("<font color=red>"+songName[i]+"</font>");
	document.write(" (<a href="+midiFile[i]+">"+midiFile[i]+"</a>)<br>");
}
</script>
</blockquote>

<hr>
</body>
</html>

Hint
bWzdҤAڭ̨ϥΤFTӰ}CAOΨxs midi }BqW١BqmWCn@kAOΤ@Ӱ}CӦsoǸơA䤤C@ӤN@qơA]tT]midi }BqW١BqmW^Ao˪ƵcҲդơC

QΦP˪覡Aڭ̥iHHͤ@iӤAPɤ]HI֡ApUҡG

Example]randomImage.htm^G

WzdҪlɦpUG

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

<body>
<h2 align=center>۰ʬï[Iq]QζüIvέI MIDI ֡^</h2>
<hr>

<script>
imageUrl=["image/roger/all.jpg", "image/roger/fall.jpg", "image/roger/grade4.jpg", "image/roger/lake.jpg",
	"image/roger/roger1.gif", "image/roger/roger5.jpg", "image/roger/uniform.jpg", "image/roger/wes.jpg"];
midiUrl=["music/ť.mid", "music/xp.mid", "music/pGD.mid", "music/ӧA򳣤Qn.mid", "music/tomorrow.mid"];

pickedImage = imageUrl[Math.floor(Math.random()*imageUrl.length)];
pickedMidi = midiUrl[Math.floor(Math.random()*midiUrl.length)];
document.writeln("<embed src="+pickedMidi+" hidden=true autostart=true loop=false>");
</script>

<table align=center border=2>
<tr><td>
<script>document.write("<img src="+pickedImage+">")</script>
</table>

<hr>
</body>
</html>

ڭ̤]iHQΨqHͪrAӦXt@qrArƪvN|pܦhAҦp

Example]punchme.htm^G

WzdҪlɦpUG

lɡ]punchme.htm^G]ǦϰUYi^
<html>
<head>
<meta http-equiv="Refresh" content="3">
</head>

<body>
<h2 align=center>QζüƦXTAæ۰ʧs]3 s@^</h2>
<hr>

<script>
text1 = new Array();
i = 0;
text1[i++] = "Hey you geek, ";
text1[i++] = "Hey buddy, ";
text1[i++] = "See if you dare to ";
text1[i++] = "To reboot the computer, ";
text1[i++] = "To save the world, ";
text1[i++] = "To get the highest score in the class, ";
text1[i++] = "Pǭ, ";

text2 = new Array();
i = 0;
text2[i++] = "punch me!";
text2[i++] = "press me!";
text2[i++] = "push me!";
text2[i++] = "hit me with your best shot!";
text2[i++] = "ڤ@Ua!";
text2[i++] = "~ڤ@a!";

document.write("<h3 align=center>");
document.write("<font face='Helvetical,Arial' color='#408080'><I>");
document.write(text1[Math.floor(Math.random()*text1.length)]+text2[Math.floor(Math.random()*text2.length)]);
document.write("</I></font>");
document.write("</h3>");
</script>

<center>
<img src="image/roger/roger4.jpg" onMouseDown="this.src='image/roger/newroger.jpg'"
onMouseUp="this.src='image/roger/roger4.jpg'">
</center>

</body>
</html>

bWzdҤAڭ̦b [F@C <meta http-equiv="Refresh" content="3">Ao@Cԭz|sC 3 NsJA]W誺ʺATN|C 3 ܰʤ@C]MAڭ̤]ΤF onMouseOver M onMouseUp ƥAHKYɧ󴫼vAFʪĪGC^

pGڭ̧Qΰ}CӦsvAN|֨ĪGAyܻA@Dv󪺺}AJavaScript |NvƧ^ӡAݭne{vɡANiHqȤݹqO餤A٫oFqɶA֤FϥΪ̪ݮɶAFFu֨v]Cache^ĪGCҦpG

Example]rotateImage.htm^G

WzdҪlɦpUG

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

<body>
<h2 align=center>֨ĪG]Cache^ JavaScript </h2>
<hr>

<h3 align=center>
IӤHU@iI
</h3>

<script language="JavaScript">
currentIndex = 0;			// Ĥ@iӤޭ
imageArray = new Array();		// ͩv󪺰}C
photoNum = 42;				// Ӥƥ
for (i=0; i<photoNum; i++){
	imageArray[i] = new Image();	// CӰ}CO Image AҥH֨ĪG
	if (i < 10)
		imageArray[i].src = "image/19980425/000"+i+".jpg";
	if ((10 <= i) && (i < 100))
		imageArray[i].src = "image/19980425/00"+i+".jpg";
}

// Ǧ^U@iӤ}
function nextImageUrl(){
	currentIndex++;				// oOܼ
	currentIndex=currentIndex % photoNum;	// Dl
	return(imageArray[currentIndex].src);	// ^ǷӤ}
}
</script>

<center>
<img src="image/19980425/0000.jpg" onMouseUp="this.src=nextImageUrl()">
</center>

</body>
</html>

bWzdҤA@Ψ42iӤA JavaScript |ߧYNvƧ^ӡAӤ|ϥΪIɡA~qvƧ^ӧe{C]LoӽdҭnbݪA~ܨĪGAYuObȤIdҡAhҦvƳbwФAeݥX֨ĪGC^

Hint
pG imageArray uOΨӦsv}AӤOs@ӼvAN|֨ĪGC

̫@ӽdҡAOϥκӹF Powerpoint v`ǩMĪGAаѦҤUCdҡG

Example]slideShow/index.htm^G

MAnxsoǺTӶi`ǼAMOΰ}C̤KC]dҨ۲MؤjǭpPqTߡBP奿ͪ@~ASP¡C^


JavaScript {]pPΡGΩΤ