(文章出处:http://www.cnblogs.com/tograce/category/157013.html)
循环
学过C语言的人，对此应该熟悉，完全是一样的，一个简单的while循环例子：
简单的while循环
<html>
<head>
<title>简单的while循环例子</title>
<script language="javascript">
<!--hide me
var password="tograce";
var answer;
while (answer!=password)
{
answer=prompt("input the password(tograce)","");
}
//show me-->
</script>
</head>
<body>
</body>
</html>
下面代码功能是一样的:
while loop
var a_line="";
var loop = 0;
while (loop < width)
{
a_line = a_line + "x";
loop=loop+1;
}
for loop
var a_line="";
for (var loop=0; loop < width; loop++)
{
a_line = a_line + "x";
}
一个
作业
答案如下：
loops example
<html>
<head>
<title>loop</title>
<script language="javascript">
<!--
var number=prompt("how many words(3-5 is good)?","4");
var the_string="";
var a_word="";
for (loop=0;loop<number;loop++)
{
line_number=loop+1;
a_word=prompt("What's word"+line_number+"?","");
the_string="word"+line_number+":"+a_word+"<br>"+the_string;
}
var new_window=window.open("reverse.html","reserve","width=400,height=400");
new_window.document.writeln("<h2>In reverse</h2>");
new_window.document.writeln(the_string);
-->
</script>
</head>
<body>
</body>
</html>
数组
定义一个新数组: var colors = new Arrary("red","blue","green");
一定要将Arrary的第一个字母大写
来看一小实例：
完整代码
<html>
<head><title></title>
</head>
<body>
<p>Try clicking on the "Chang" link to see what happen to the images below:</p>
<img src="image/one.jpg"><img src="image/two.jpg"><img src="image/three.jpg"><br>
<a href="#" onClick="var choice=prompt('Change which image(0 or 1)?','1');
window.document.images[choice].src='image/three.jpg';">Chang</a>
</body>
</html>
代码里有一句值得注意：window.document.images[choice].src=...... 前面并没有先定义数组，怎么可以用数组的方法调用呢？不要多想，就是这么一回事：html页面内的第一个图片是:document.images[0],第二个图片是：document.images[1]......如果你还要想知道一页面内共有多少图片，可以这样: document.images.length
函数
先来做一个显示时间的小题:
显示时间的完整代码
<html><head>
<title></title></head>
<body>
<a href="#"
onClick="var the_date=new Date();
var the_hour=the_date.getHours();
var the_minute=the_date.getMinutes();
var the_second=the_date.getSeconds();
var the_time=the_hour+':'+the_minute+':'+the_second;
alert('The time is now:'+the_time)">
Click here for the time!</a>
</body>
</html>
这里还没用到函数，注意了，大部分代码就在 onClick="........." 内,注意这种在 onClick="....." 内包含了多个语句的用法。
将上面代码放入一个函数内，再看完整的代码:
Code
<html><head>
<title>function with no paramater</title>
<script language="javascript">
<!--
function anounceTime()
{
var the_date=new Date();
var the_hour=the_date.getHours();
var the_minute=the_date.getMinutes();
var the_second=the_date.getSeconds();
var the_time=the_hour+":"+the_minute+":"+the_second;
alert("The time is now:"+the_time);
}
-->
</script>
</head>
<body>
<a href="#" onClick="anounceTime();return false;">Click her for the time!</a>
</body>
</html>
结果是一样的，另外我发现将代码 onClick="anounceTime();return false;" 中的 return false；去掉也能正确执行，那么这一句到底是起什么作用的?
看到了没有，显示的时间是这样的:
20:14:5 ,如果想显示成这样的
20:14:05 效果呢？简单，在 function里加几句就OK了:
Code
function announceTime()
{
var the_date=new Date();
var the_hour=the_date.getHours();
var the_minute=the_date.getMinutes();
if (the_minute<10)
{the_minute="0"+the_minitue;}
var the_second=the_date.getSeconds();
if (the_second<10)
{the_second="0"+the_second;}
var the_time=the_hour+":"+the_minute+":"+the_second;
alert("The time is now:"+ the_time);
}
还可以简化，最后的代码：
JavaScript实例_时间显示
<html><head>
<title>function with no paramater</title>
<script language="javascript">
<!--
function fixNumber(the_number)
{
if (the_number<10)
{
the_number="0"+ the_number;
}
return the_number;
}
function announceTime()
{
var the_date=new Date();
var the_hour=the_date.getHours();
var the_minute=the_date.getMinutes();
var fixed_minute=fixNumber(the_minute);
var the_second=the_date.getSeconds();
var fixed_second=fixNumber(the_second);
var
the_time=the_hour+":"+fixed_minute+":"+fixed_second;
alert("The time is now:"+ the_time);
}
-->
</script>
</head>
<body>
<a href="#" onClick="announceTime();return
false;">Click her for the time!</a>
</body>
</html>
以下的这个作业是个综合题，将涉及所学到的内容
参考答案:
day_4_homework_frame
<html><head><title>day_4_homework_frame</title></head>
<frameset rows="30%,*">
<frame src="day_4_homework_control.html" name="control_frame" >
<frame src="day_4_homework_default.html" name="display_frame" >|
<frameset/>
</html>
day_4_homework_control.html
<html><head><title>day_4_homework_control</title>
<script language="javascript">
<!--
var color_array=new Array("green","blue","gray","yellow");
var color_index=0;
function nextColor()
{
color_index++;
if (color_index==color_array.length)
{
color_index=0;
}
parent.display_frame.document.bgColor=color_array[color_index];
}
-->
</script>
</head>
<body>
<a href="day_4_homework_default.html" target="display_frame"><img src="image/home.gif"></a>
<a href="#" onClick="nextColor();"><img src="image/rainbow.gif"></a>
<a href="day_4_homework_browser.html" target="display_frame"><img src="image/monkey.gif" name="change_image"></a>
</body>
</html>
注意体会 函数 nextColor ()是怎样实现换色这一功能的!
day_4_homework_default.html
<html><head><title>day_4_homework_default</title>
</head>
<body>
<h1>Your Homework Assignment</h1>
<p>Make this page work. It's just like the homework from Lesson 3 except for the rainbow button. Every time you click on the rainbow button, a new color is put into the background. Try using an array to do this.<br><br>
Make the rainbow button work, and then View Source to see what I did. </p>
</body>
</html>
day_4_homework_browser.html
<html><head><title>day_4_homework_browser</title>
<script language="javascript">
<!--
var image1="image/monkey.gif";
var image2="image/sky.gif";
-->
</script>
</head>
<body>
<h1>Browser Configuration</h1>
<p>Brand your browser by moving your mouse over the image below until you find one you like. Then click on the image.</p><br>
<a href="#" onMouseOver="temp=image1;image1=image2;image2=temp; window.document.the_image.src=image1;"
onClick="parent.control_frame.document.change_image.src=image1;">
<img src="image/monkey.gif" name="the_image"></a>
</body>
</html>
