原版Javascript程序设计实验指导书

《Javascript程序设计》实验指导书

一、课程性质和教学目的

JavaScrip是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

学习Javascript必须理论联系实际，多做上机练习。只有在上机实验过程中才能真正学会程序设计。本实验报告主要包括学期内各个实验的实验目的、实验内容、实验记录、实验总结等，供学生学习记录，以提高学习效率。参加实验的学生应参照本报告手册的要求，认真实验，如实填写实验数据，并对实验结果进行分析，阐述实验中所遇到的问题，提出解决问题的方法。

二、实验目的

上机实验的目的不仅是为了验证教材和讲课的内容，或者验证自己所编写的程序正确与否。学习程序设计上机实验的目的是：

1.加深对讲授内容的理解，尤其是一些语法规定，课堂讲授既枯燥无味又难以记忆，但它们都很重要。能过多次上机就能自然地、熟练地掌握。通过上机掌握语法是行之有效的方法。

2.学会上机调试程序。即善于发现程序中的错误，并且能很快排除这些错误，使程序能正确运行。要真正掌握这门课程，不仅应当了解和熟悉有关理论和方法，还要求自己动手实现即会编程并上机调试通过。故应给予充分重视。调试程序固然可以借鉴他人的现成经验，但更重要的是通过自己的直接实践来累积经验，而且有些经验是只能意会难以言传。调试程序的能力是每个程序设计人员应当掌握的一项基本功。

3.做实验时不要在程序通过后就认为搞定、完成任务了，而应当在己通过的程序甚而上作一些改动（例如修改一些参数、增加程序一些功能、改变输入数据的方法等），以观察和分析所出现的情况。

三、上机实验前的准备工作

实验前应做好准备工作，以充分利用有限的上机时间。准备工作至少包括：

1.复习和掌握本实验有关的教学内容。

2.准备好上机所需的程序。初学者切忌不编写程序或抄别人的程序去上机，应从一开始就养成严谨的科学作风。

3.对运行上可能出现的问题应事先作出估计；对程序中自己有疑问的地方，应作上记号，以便在上机时给予注意。

4.根据实验内容认真准备实验程序及调试时所需的输入数据。

5.在上实验课之前必须写好预习报告（编程题源程序用纸写好或画好程序流程图）

6.填空与改错题等题要预先做好，上机时的工作只能是输入源程序和调试修改。

7.认真完成实验内容，得出正确的实验结果。实验结束后总结实验内容、书写实验报告。

8.遵守实验室规章制度、不缺席、按时上、下机。

四、实验环境

代码编写环境：可根据机房主机条件自己决定。推荐notepad，Dreamweaver，eclipse，hbuilder等。

页面预览环境：建议学生及早考虑和适应跨浏览器自适应问题。推荐Firefox，google chrome，世界之窗，Internet Explorer等。

实验一 Javascript基本页面操作

实验目的

1.JS页面基本结构。

2.JS中变量基本格式。

3.变量与字符串相连接并显示结果。

4.使用按钮与function一一对应来实现代码功能。

实验内容

1.在C盘下创建文件夹1.1。在文件夹内创建一个txt文档，并命名为xx.1.html。xx是你学号后两位。然后把课本P10的程序1.1输入该文档，并把

你属于哪一种上班族？

当你流落荒岛时，饥寒交迫，你会以哪种捕食方式快速喂饱自己

设计抓山鸡

采椰子

在岸边捕鱼

捕猎野猪

实验五 Javascript中text控件的设计练习

实验目的

1.熟悉text控件的基本代码。

2.掌握javascript中text与其他控件的组合用法。

3.掌握text与function组合使用的常见用法。

实验内容

1. 请设计一个页面，包括一个文本框，四个按钮。四个按钮的value分别是“我的姓名”“我的性别”“我的爱好”“我的家乡”。点击按钮，则在文本框中会显示相应信息。

注意：我要求你本题中四个按钮要使用同一个function。换句话说，这个题目必须用传递参数技术来完成。

2. 创建一个包含一个文本框和四个按钮的页面。要求点击按钮的时候在文本框中出现对应文字。而且要求本题目四个按钮必须使用同一个function，也就是说必须使用参数传递技术。四个按钮点击后在文本框中出现的对应文字为：

俞敏洪推荐语：

开卷不读薛氏书，纵谈教育也枉然。

小巫推荐语：

他是要您懂得培养孩子之道，人生成长之道。

徐小平推荐语：

他的文字与思想已经并将继续对中国社会产生重要影响。

《南方人物周刊》推荐语：

助你自信充盈，找到正确的出口。唯有青春，不可辜负！

3.请参考并输入课本p32程序清单3.3的全部代码，观察运行结果。注意//右侧的注释性代码不必输入。

4.完成课本p33的练习3.9.这个题目中必须用到parseInt（）函数。

因为我们经常用到文本框，而文本框中的默认类型为字符型，而有时候我们需要将其作为数值进行运算，那么我们就必须将其通过parseInt（）函数转为数值型后再运行代码。

假设现在是X摄氏度，那么转换为华氏度的公式为((x*9)/5)+32

那么怎么让第一个文本框的值为x呢？常见做法是

var x=document.getElementById("t1").value;

那么怎么把它转为数值型呢？只要加上函数即可。((parseInt(x)*9)/5)+32

5. 下面页面主要介绍了parseInt()函数。它的功能是让字符串转为数值型。你可以看上面的两个按钮，代码完全一样，唯一的区别是一个加了parseInt（）函数而另外一个没有。接下来请在本页面内作出修改，实现如下功能：请增加2个button，其value值分别为相减，相乘；而这两个按钮的功能分别是点击之后，在其后的文本框中出现文本框t1，t2相减、相乘的结果。

+

实验六 Javascript中函数的简单应用

实验目的

1熟悉javascript语言的函数基本结构。

2会定义函数及其参数变量。

3熟悉对函数的一些基本操作和具体的函数定义。

实验内容

1.设计一个页面，要求页面内有三个文本框，4个按钮。四个按钮上分别是＋、－、×、÷,而点击某个按钮之后，则会将前两个文本框中的数字进行相应的数学运算，把答案显示在第三个文本框中。

2.设计一个页面，要求实现功能为：

a.点击对应按钮，则在其后的文本框中出现对应答案。考察点是parseInt()函数的应用。

b.给每个算式等号左边的文本框中设置一个默认值。就是要求每个text都要在代码中先设一个value。

c.小提示:我只给出了加法的按钮对应的代码，我建议你复制粘贴这段代码来实现功能，但是要注意让按钮和function，以及各个文本框之间的对应关系。

3.设计一个页面，要求单击左边文本框对应按钮，则左边文本框中会出现对应文字。比如依次单击6,5,7，则出现657。右边文本框及对应按钮的功能也类似。

在输入数字完毕后，单击=按钮，则第三个文本框中会出现左边两个文本框中的相加之和。

本题目是一个简化的计算器。我给出的提示是，本题中建议只采用三个function。左边文本框对应数字按钮都用一个function足矣，右边的则用另外一个按钮function，=等号单独用一个function。

4.设计一个网页，其上的文字为

“测试你俩的缘分

三分测试你俩的缘分

三分钟就知道谁是你最爱得人? (98%的准确率) ”

然后下面有这样两句

您的名字是？

后面设计个文本框。然后下面是这一句

写下一个异性的名子.

后面再一个文本框

然后后面是个按钮，"开始测试"

点击开始测试之后，页面会有这样的提示：

哈哈，某某，我已经知道你喜欢的人是某某啦。赶快贿赂贿赂我，让我帮你保密吧！

这个题目主要是复习button的onclick与alert结合的一个题目。

5.请创建页面输入如下代码，本题目我已经给出了前三个按钮的代码，请为第四个按钮增

添代码，使得单击第四个按钮的时候，第二个文本框中出现1+3+数值型t1的值的结果。

初始值t1

最终值t2

实验七 Javascript控件交互设计

实验目的

1.熟悉text与button的组合应用。

2.会定义function的相关功能。

3.试验较复杂功能的页面设计。

实验内容

1. 请完成以下网页的设计，要求用户在输入姓名后，单击相应按钮，下面就会出现一个对

应的请假单。并且附带用户的姓名和当天日期。日期由Date（）函数得出。得到具体年月

日的函数请看课本P303。请假单显示在一个id为d1的div中。

再说一点，这个题目如果你使用参数传递的思路来解决的话，那么只需用写一个function即可足够使用了。

2.请为如下页面增加代码，要求实现效果为：用户输入姓名，并在空缺文本框中输入答案后，单击提交答案按钮，则会告诉用户最终得分。每作对一题25分，满分一百分。

请在此输入您的姓名：

请在下面的文本框内输入您的答案：

＋

=

－

=

×

=

÷

=

实验八新函数的学习与应用训练

实验目的

1.介绍了parseInt（）这个函数以及text文本框的value默认值功能，并重新练习了button的onclick调用function来实现代码功能的页面结构。

2.掌握innerHTML和Math.random()随机数函数。

3.confirm（）与prompt（）是我们要练习的新知识。刷新页面location.reload()也是一个我们必须了解的常用函数。

4.我们今天的重点是4.7利用math对象简化运算中4.7.1取整和4.7.3随机数。这两个知识点的组合可以衍生出很多不同的效果。是我们会经常用到的。

实验内容

1. 请设计一个页面，页面中有三个按钮，要求单击每个按钮的时候，则在对应位置出现你自己的姓名。

单击文本框按钮，则文本框中要出现你的名字，也就是onclick点击按钮之后，通过函数function，使得text的value值为你的名字。

单击alert按钮，则弹出一个alert警告框，里面是你的名字。最后是div按钮，单击它则div 中的内容换成你的名字，也就是这个div对应id的document.getElementById("").innerHTML="你的名字"

2.confirm的功能是弹出一个两选项的对话框，最重要的是，你点击确定或者取消按钮之后，可以给出进一步的选择。请创建页面，要求是，修改本题的代码，使其功能为：

单击按钮，会弹出一句话：“你今天的心情是不是很好啊？”

如果用户点击确定，则弹出“那你请我吃饭好不好啊？”

如果用户点击取消，则弹出“那你是不是因为我没给你机会请我吃饭所以心情不好啊？”3.自己创建一个文件，复制任务2的代码，然后自己编写程序，要求页面一开始弹出一个confirm，然后用户点击确定或者取消之后，会再分别弹出内容不同的alert。

4.设计网页，实现的功能为：点击确定之后再出现一个confirm，看用户是否点击两次确定。如果点击取消，则以alert结束。

要求：修改代码，实现如下功能：一开始confirm提问：

你是否喜欢红色？

如果用户点击确定，则再一个confirm：

你是否喜欢蓝色？

如果用户点击确定，则弹出“你喜欢红色和蓝色”

如果用户点击取消，则弹出“你喜欢红色不喜欢蓝色”

如果在“你是否喜欢红色？”那个问题上用户选择了取消，则再一个confirm是“你是否喜欢黄色？”

如果用户点击确定，则弹出“你喜欢黄色不喜欢红色”

如果用户点击取消，则弹出“红色和黄色你都不喜欢”

5.提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。也就是如果点击取消则没有任何反应。

语法： prompt("文本","默认值")

这里的文本是这个对话框上方弹出的提示语。这里的默认值是对话框刚打开的时候默认出现在对话框里的内容。

创建页面，要求实现功能： title改成你自己的名字。

最终效果为：当用户输入自己名字后，页面提示为“XX，成功学院欢迎你的到来！”xx是用户自己输入的名字。

6.创建页面，包括一个文本框一个按钮，使其最终效果为：当用户输入自己性别后，如果输入为“男”，则页面显示“先生你好”，如果输入为“女”，则显示“女士你好“。

7.页面打开之后，会直接出现提示框，第一个提示框是请用户输入自己的姓名，第二个提示框是请用户输入性别为“男”或者“女”。根据用户输入的信息，页面显示“XX先生你好”

或者“XX女士你好”。这里的xx是用户在第一个prompt提示框中自己输入的名字。

实验九 div与text的显示应用练习

实验目的

1.nerHTML的灵活应用

2.v与text的显示应用

3.lue与innerHTML的区别于练习

实验内容

1. 本题目是练习课本P36的4.2的内容，通过id访问元素，并通过innerHTML属性改变其内容。题目要求为，用户在文本框中输入自己的名字，单击按钮，则页面的div中出现一句话“XX,你今天心情好么？”xx是用户在文本框中输入的名字。文本框中默认值为你自己的姓名。

这个题目比较容易，我再强调一下里面涉及的知识点：div要显示内容应该把div对应id 的innerHTML属性设置为你需要显示的内容即可。比如document.getElementById("注意这里要输入div的id").innerHTML="你的名字"

而文本框的值则由这句经典代码来指代。

document.getElementById("文本框的id").value

他们的相同点是都要用到document.getElementById，都要在括号内的引号中输入id。区别是div后面跟的是innerHTML,而text文本框后面跟的是value。

2.本题目要求为，设计页面代码，在页面内增加一个文本框，文本框内默认值为10。当用户单击第一个按钮的时候，则文本框中依次出现10,20,40，80.....就是前一个数的倍数。而单击第二个按钮，则刷新页面，重置文本框的值。

这个题目比较容易，我再强调一下里面涉及的知识点：div要显示内容应该把div对应id的innerHTML属性设置为你需要显示的内容即可。比如document.getElementById("注意这里要输入div的id").innerHTML="你的名字"

3.Math.random()是一个从0到1的随机数。那么如果我想得到从0到10的随机数呢？那么就需要我们让Math.random()*10就可以了。然后通过四舍五入，就能得到一个从0到10的随机整数。

任务9的要求是创建一个页面，页面内有一个按钮和一个文本框。单击按钮的时候文本框中随机出现一个0到10随机数。

建议从我的示范页面中选择和复制代码来完成。

4.请把以下代码复制到空文档中，用浏览器打开，然后按要求修改代码实现功能。

本页面的A,B按钮已经具备了相应功能。请学习其代码，然后对C,D按钮输入js代码，使其实现页面上要求的功能。

现在是时分 秒

单击此按钮，则上面第一个文本框中会出现一个随机数

单击此按钮，会清空第一个文本框中的数值

单击此按钮，则上面的第二，三，四个文本框会出现随机数。

这里特别提醒一下，第二个文本框是出小时，那么应该是从0到23的随机数，而文本框三，四是分和秒，它应该是从0到59的随机数。

单击此按钮，则上面的第二，三，四个文本框中的随机数会被清空。

实验十 Javascript程序修改练习

实验目的

1.javascript代码阅读能力

2.根据源代码进行改进的能力。

实验内容

1.请把以下代码复制到空文档中，用浏览器打开，然后按要求修改代码实现功能。

在此页面基础上进行代码修改，使得下面的A,B按钮可以完成相应的运算功能。

+

=

-

=

×

=

÷

=

单击此按钮，则上面四个式子的等号左侧文本框中会随机出现0到100之间的整数

单击此按钮，则上面四个式子的等号左侧文本框中会随机出现0到100之间的整数，并且最右边的文本框中会出现他们的计算结果。

2.请把以下代码复制到空文档中，用浏览器打开，然后按要求修改代码实现功能。

请在此输入您的姓名：

要求单击此按钮后，下面文本框中出现一句话：“恭喜xxx！我们已经测试出您的幸运数字为y”。xxx为上面文本框中输入的名字，y是一个从0到100的随机整数。

实验十一 Javascript中的函数应用练习

实验目的

1.讲解了第四章的三个基本函数confirm(),prompt(),location.reload()。而重点则是这之后

的数学函数Math.random()。这个函数可以随机产生一个从0到1之间的随机数。把它与ceil，floor，round这三个取整函数相组合，就能产生很多不同的效果。这也将是我们下周的主要练习内容。

2.知识Math.round(),Math.random()。而我们最常见的形式是把他们组合在一起使用，如：

Math.round(Math.random()*x)

x的值是几，它就会出现一个从0到几的随机整数。

3.直接用id来引用页面内对象的方法。

实验内容

1. 请把以下代码复制到空文档中，用浏览器打开，然后按要求修改代码实现功能。

网页的背景颜色往往是一组六位的十六进制数。比如#990000代表红色。

本题要求是：更改“随机色”按钮的代码，使其每次单击时候，网页背景都随机呈现一个新的颜色。

思路：每次单击该按钮，都生成一个随机的六位整数，并将这个数作为网页的背景颜色代码即可。

2.请设计页面代码，要求实现功能为：使得当单击按钮"文本框内出现随机整数"时，文本

框内出现十以内随机整数。单击生成随机数按钮，会生成一个10以内的随机整数，并通过alert让它显示出来。生成一个10以内的随机整数的代码是Math.round(Math.random()*10)

单击"文本框内出现10"，方法是设置t1的value为10、这样写是因为文本框的id是t1

3. 请设计代码，要求效果为，单击按钮后，文本框2会出现文本框1的值与40相加的结果。比如文本框1内是20，则文本框2内应该是20+40=60.<

特别提醒，要让两个数相加，必须通过parseInt（）()把它变成数值型。比如一个x 是字符型，那么parseInt（x）就是它的数值型。

注意所有标点符号都必须是英文形式的。

实验十二数字计算程序设计练习

实验目的

1.通过上机实验调试代码，掌握与数学计算有的程序设计技巧

实验内容

1.请设计代码实现P47第2,3行的设计任务。

圆柱体的体积公式：底面积*高度=π*半径的平方*高度

所以我们这个页面应该有三个文本框，第一个让用户输入半径，第二个让用户输入高度，用户单击按钮之后，第三个文本框显示圆柱体的体积。

要点就是先得到前两个文本框的值，然后将其转为数值型相乘，并乘以Math.PI，(Math.PI 是javascript中的数学函数，代指圆周率。)然后将结果显示在第三个文本框中。

2.请设计代码，要求效果为，单击按钮后，文本框2会出现文本框1的值与40相加的结果。比如文本框1内是20，则文本框2内应该是20+40=60.

特别提醒，要让两个数相加，必须通过parseInt（）()把它变成数值型。比如一个x 是字符型，那么parseInt（x）就是它的数值型。

注意所有标点符号都必须是英文形式的。

3.请设计页面代码，要求实现功能为：增加代码，使得用户在文本框中输入一个数字，然后单击按钮"文本框2内出现随机整数"时，文本框内出现一个不大于第一个文本框中数字的随机整数。也就是说，文本框1中的那个数字，就是文本框2中的数字的变化范围，或者最大可能值。

4.请设计页面代码，要求：使得数组shuzu3在前两个元素之后多一个元素“元素3”，并且单击按钮的时候，让元素3显示在alert中。

5.请设计代码，单击按钮之后，在t1文本框中显示这个数组的第4个元素的值。注意，第一个元素的序号是0，所以第四个元素的序号应该是3.

6.请设计代码，使得页面单击按钮时，创建一个7元素数组，每个数组元素是一个颜色的名字，然后单击按钮，则文本框内随机出现一个颜色的名字。

实验十三数组程序设计练习

实验目的

1.掌握数组的创建于赋值等基本功能的用法。

2.掌握数组在js中灵活运用的普遍思路。

实验内容

1. 请设计代码，使得页面单击按钮时，创建一个8元素数组，每个数组元素是一个城市的名字，然后单击按钮，则文本框内随机出现一句话：“你最适合的旅游城市是***”。这个城市的名字是随机的。

2.本题要求效果为，用户在第一个文本框输入姓氏，然后单击按钮，则第二个文本框会随机出现一个男孩的名字。

本题目已经创建了包含N个男孩名字的数组，关键是：我们要在数组中随机选择一个元素，就要知道数组有几个元素。但是不知道的时候怎么办呢？

课本54页的5.4.2提到了一个属性“数组名.length”，直译是数组的长度，其实就是数组元素个数。

提示：比如一个数组有10个元素，那么其序号就是从0到9，所以我们就让它的数组序号为从0到（10-1）的随机数即可。

3.本题目引用了文件夹内的十张旅游图片。请修改代码，使得页面单击按钮时，页面内出现一张随机的旅游图片。

4.本题目引用了文件夹内的十张旅游图片。请修改代码，使得页面单击按钮时，页面内出现3张不同的随机旅游图片。

本题的思考点在于：怎样实现让它一次抽取三个不同的数组元素？

本题的扩展知识是：通过设置img的width宽度属性，可以改变图片大小。width="200px"是让图片宽度为200像素，高度则自动同比例改变。

5.请设计代码，使得页面效果为：单击按钮的时候，页面内9个单元格会随机出现不同颜

色。请注意，我已经给九个单元格都写好了id，是从t1到t9.

实验十四 Javascript综合应用练习

实验目的

1解和巩固课本P66的switch结构的知识

2.数组，if，switch，逻辑符，显示图片这五个知识点进行综合应用练习。

实验内容

1. 设计一个页面，要求完成如下功能

页面内有一个div，一个按钮，用户在文本框内输入名字，单击按钮，则页面会出现一个图片，并通过alert显示说明：根据您的信息推算，您的男神是*****

思路：创建一个数组，数组中有各个男神的姓名。单击按钮，则从中随机抽取一个男神的姓名，通过alert显示出来。并且我在div中已经插入了一个空的img图片对象，其id为i1，你让这个img的src值等于这个男神的姓名加jpg即可。比如你想让i1出现吴彦祖，那么代码格式为i1.src=吴彦祖.jpg。

2.要求题目效果：

用户单击某个单元格，则该单元格内会出现一个男神图片。

题目思路：1.每个单元格td都要设计一个onclick事件，onclick=f(this)。this 指的是该代码所在的网页对象本身。比如这个代码位于一个td单元格中，this指的就是这个ta单元格。2.function f(x){}的功能是：首先创建男神姓名数组，然后从中随机抽取一个男神姓名，跟我已经给出的代码相组合，让该男神的图片出现在单元格中。

3.题目效果：

用户单击按钮，则九个单元格中会有八个随机变灰色，仅剩下正中间一个单元格显示一个男神图片，并且通过alert显示一句话：“果然xx才是你的真爱啊！”

如果对结果不满意，单击“重新选择”按钮，可以再测一次。

题目思路：每个单元格td都有自己的id。这个题目和任务03相比就增加了一个功能，就是让每个单元格的原有内容消失。同时让正中间的单元格显示一个随机的男神图片即可。

4.请设计本页代码，要求实现功能为：请用户在文本框内输入年龄。如果用户年龄大于20岁，则显示“你到了合法结婚年龄了”。否则则显示“你还没到合法结婚年龄呢”。

5.请设计本页代码，要求题目效果：请用户在文本框输入自己年龄，如果用户年龄大于80岁或者小于10岁，则显示“别人会在公交车上给你让座”

否则则显示“你应该在公交车上给别人让座”

本题有两个思路

1.parseInt(t1.value)>=80 || parseInt(t1.value)<=10

上面这句意思是你的年龄在80以上或者10以下

2.parseInt(t1.value)>=10 && parseInt(t1.value)<=80

上面这句意思是你的年龄在80以下而且10以上

逻辑与&&逻辑或||在课本P67。请把这个知识点画线。

6.请创建一个网页，实现如下功能：页面内有一个文本框，让用户输入他出生的月份值，然后单击按钮。如果这个值小于7，则弹出一句话“你是上半年出生的”如果这个值大于等于7，则弹出一句话

“你是下半年出生的”

7.请设计代码，实现功能为：单击按钮后自动进行判断，如果你的收入是“傲视群雄”而且假期安排为“带薪假期”,则你的假期心情图片i1的src='1.gif'。否则是0.gif。提醒：本题必然会用到课本P67的逻辑与操作符。另外这里我插入的是动图，图片扩展名是gif不是jpg，不要写错了。

8.请设计代码，实现功能为：单击按钮后自动进行判断，如果你得到了好安排,则你的假期心情图片i1的src='1.gif'。否则是0.gif。至于什么是好的，由你自己决定。但是至

少应该有三个选项符合好心情标准。

实验十五选择结构程序设计练习

实验目的

1.熟悉选择程序语言的基本结构。

2.会定义javascript中的选择结构。

3.熟悉对选择结构的一些基本操作和具体的应用。

实验内容

1.设计代码，使用switch选择结构，使其实现功能为：页面有四个按钮，如果是单击“红灯“按钮，则弹出alert“请停车！”如果是黄灯，则弹出alert请观察后通过路口。如果是绿灯，则弹出“请直接通行”。如果是灯都灭了，则弹出“信号灯已坏，请谨慎观察，缓速通行。”

2. 设计页面，要求使用switch选择结构来实现为：

请用户在文本框输入年龄，然后单击按钮，弹出对应答案

0--16 您是青少年

17--32 您是青年

33--48 您是中年人

49--64 您是领导人

64以上您是长者

3.设计页面，要求使用switch选择结构来实现为：

请用户输入考试成绩，然后单击按钮，弹出对应答案

0--59 您明年再来吧

60--69 您可以安心了

70--79 您考的还不错

80--89 您和学霸只有一步之遥

90以上我以学霸之血宣布，封印解除！

100 请大神收下我的膝盖吧！

4. 请修设计代码，使其实现功能为：页面一开始提问您喜欢什么宠物？有三个按钮选项，猫，狗，兔子。选择单击按钮狗，则页面提示：狗是非常聪明的动物，但是每天遛狗需要您付出相当多的时间，精力乃至毅力。

选择猫，则页面提示，猫很适合与人共处，优点是易于打理且不像狗那样需要陪伴，相应的，猫咪很多时候不是特别粘人。让养育者很难有主人的感觉。

选择兔子，则提示：兔子大多数时候可以表现的比猫还萌，但那时因为它真的呆蠢，确实傻到不要不要的。大多数时候只会凭本能行事。

5. 请自己创建一个网页实现如下功能：

网页内有一个文本框，请用户输入自己的笔记本电脑的价格之后单击按钮（默认价格必然在1000之上），则页面内显示一句话：

如果用户输入的数值是2000以内，则显示这是低端入门款

如果用户输入数值大于等于2000而小于3000，则显示你这是影音视觉系笔记本电脑

如果用户输入数值大于等于3000而小于4000，则显示你这是在宿舍打游戏一般都能带动的节奏啊

如果用户输入数值大于等于4000而小于5000，则显示土豪你打游戏是不是有飞一般的感觉？

如果用户输入数值大于5000，则显示这位朋友我们处在不同的世界还是分手吧！

6. 本题目是上一题的附加题。上一题给笔记本电脑根据价格写评语，有个问题，如果用户真的输入了不合理的数值，比如1000以下，我们应该怎么办呢？

一个合理的程序设计应该考虑到各种情况，并且给顾客以相应的反馈，帮助用户得到正确的答案。

请修改你刚才的任务的答案，使得当用户输入低于1000或者高于20000的数字时，提示用户：您输入的价格已经超出了常规范围，想必是您不小心输入了错误的数据，请重新输入。同时将用户已经输入的数字清零。

清零这一步，因为用户是在一个文本框中输入的内容，那么我们有两个办法。你可以执行location.reload()，刷新当前页面，则用户输入的数据自然会清零；你也可以强制让那个文本框的值清零，假设那个文本框的id叫t1，那么你可以设置t1.value=0或者t1.value=""都可以。

实验十六 Javascript控件综合应用练习

实验目的

1.掌握button，div，text等控件的基本代码。

2.练习灵活运用以上控件来实现页面功能的方法。

实验内容

1. 图片本身也可以设置onclick事件来切换图片内容。

请在页面内插入图片01，设其src=01.jpg。然后设置onclick事件来调用function f（）。

要求实现效果为，用户单击图片的时候，让它在01与02.jpg之间切换

也就是单击的时候，function会判断，如果现在是01，那就让它的src=02.jpg。如果现在的图片不是01，那就让图片的src=01.jpg

2. 要求实现效果为：

当用户输入身高体重并单击按钮之后，页面不是alert显示答案，而是把提示语直接显示在页面上，并且同时搭配一张图片。过轻，过重，正常，肥胖，非常肥胖对应的gif我会同时发送到文件夹内。请对号入座。

3.：创建一个页面，包括3个按钮，单击第一个按钮alert弹出你的名字，单击第二个按钮alert弹出你的家乡，单击第三个按钮alert弹出你的辅导员的名字。

4：创建一个页面，包括3个按钮，单击第一个按钮alert弹出你的名字，单击第二个按钮alert弹出你的家乡，单击第三个按钮alert弹出你的辅导员的名字。和任务3的区别是这个必须使用参数传递方式来完成，也就是这个页面只能有一个function。

5：创建一个页面，包括3个button和一个div。要求单击第一个按钮，div中显示你的姓名；单击第二个按钮，div中显示图片阿狸.gif；单击第三个按钮时div里出现一个标题为“郭峰”的按钮。

6：创建一个页面，包括两个文本框和一个按钮。要求用户在第一个文本框输入自己的幸运数字。单击按钮时第二个文本框中出现一句“您的幸运数字是x”。x是用户刚刚输入的幸运数字的值。

7：创建一个页面，包括2个文本框和一个按钮。要求用户在第一个文本框输入自己的幸运数字。单击按钮时第二个文本框中出现一句“您的幸运数字的平方是x”。x是用户刚刚输入的幸运数字的值的平方。

8：创建一个页面，包括2个文本框和一个按钮。要求用户在第一个文本框输入自己的幸运数字。单击按钮时第二个文本框中出现一句“您的幸运数字与10相加的结果是x”。这个题目因为涉及加法所以必须使用parseInt（）函数。

实验十七循环结构程序设计练习

实验目的

1.熟悉javascript中的循环基本结构。

2.会定义循环结构的各个参数。

3.熟悉循环结构的常见用法。

实验内容

1.创建一个页面，包括1个按钮，一个div，一个text。请用户在text中输入自己的出生年份，然后单击按钮。如果年份小于等于1995，则div中显示一句“你已经到了法定结婚年龄了”，否则显示“你还不能结婚呢”。

2.创建一个页面，包括2个按钮，一个div，1个text。请用户在text中输入自己的出生年份，然后单击对应的按钮。两个按钮分别显示“男”，“女”。我国法律是男22周岁女20周岁允许结婚。

也就是如果用户单击“男”按钮，那么他的出生年份如果年份小于等于1993，则div中显示一句“你已经到了法定结婚年龄了”，否则显示“你还不能结婚呢”。

也就是如果用户单击“女”按钮，那么他的出生年份如果年份小于等于1995，则div中显示一句“你已经到了法定结婚年龄了”，否则显示“你还不能结婚呢”。

3.创建一个页面，包括1个button。要求单击第一个按钮，则按钮标题显示为"您的幸运数字是x"。x是一个从1到9之间的随机整数。本题用到两个知识点，一是Math.round(Math.random()*x)随机整数，二是button的value值显示它的标题。

4.创建一个页面，包括1个div和一个按钮。要求用户单击按钮时div中出现一句“您的幸运宠物是x”。x是数组中生成的一个随机的宠物类型。本题目考察数组。要求用户先创建如下数组，然后单击按钮则出现数组中的一个随机值。

var shuzu=["猫","狗","兔子","仓鼠","狐狸",'乌龟','金鱼','松鼠','猴子','变色龙','蜗牛','雪貂','龙猫','鹦鹉']

5.创建一个页面，包括2个按钮和一个img。两个按钮的标题分别是“方片K”，“黑桃Q”。页面img一开始显示文件夹中的图片1.jpg。用户单击按钮的时候则图片变化为按钮标题对应的图片。

6.创建一个页面，包括1个按钮和一个img。要求用户单击按钮时img图片显示为img文件夹中的九个gif图片中的随机一个。思路是创建一个九元素的数组，元素名为img文件夹中的图片名。然后单击按钮的时候img的src为这个数组中的随机一个图片。记得一定要加上路径"img/"。

"暴怒","得意","告别","害羞","加油","恐惧","快乐","满足","撒娇"

7.设计页面，要求页面内循环出现6个6

8.设计页面，要求页面内出现6到66

9.设计页面，要求页面内出现4行4列的一共16个6.

10.设计页面，要求页面内出现6行16列的一共96个6

11.设计页面，要求页面内出现完整版99乘法表

12.设计页面，要求页面内出现只有左下角部分的常规型99加法表

13.设计一个页面,完成功能为页面显示一个五行星阵，形式如下：

*

**

***

****

*****

实验十八 for结构程序设计练习

实验目的

1.熟悉for循环基本结构。