《Javascript程序设计》实验指导书
实验内容
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=\是让图片宽度为200像素，高度则自动同比例改变。
5. 请设计代码，使得页面效果为：单击按钮的时候，页面内9个单元格会随机出现不同颜
第 16 页 共 36 页
《Javascript程序设计》实验指导书
色。请注意，我已经给九个单元格都写好了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。至于什么是好的，由你自己决定。但是至
第 17 页 共 36 页
《Javascript程序设计》实验指导书
少应该有三个选项符合好心情标准。
实验十五 选择结构程序设计练习
实验目的
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以下，我们应该怎么办呢？
第 18 页 共 36 页
《Javascript程序设计》实验指导书
一个合理的程序设计应该考虑到各种情况，并且给顾客以相应的反馈，帮助用户得到正确的答案。
请修改你刚才的任务的答案，使得当用户输入低于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（）函数。
第 19 页 共 36 页
《Javascript程序设计》实验指导书
实验十七 循环结构程序设计练习
实验目的
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为这个数组中的随机一个图片。记得一定要加上路径\。
\暴怒\得意\告别\害羞\加油\恐惧\快乐\满足\撒娇\7.设计页面，要求页面内循环出现6个6 8.设计页面，要求页面内出现6到66
9.设计页面，要求页面内出现4行4列的一共16个6. 10.设计页面，要求页面内出现6行16列的一共96个6 11.设计页面，要求页面内出现完整版99乘法表
12.设计页面，要求页面内出现只有左下角部分的常规型99加法表 13.设计一个页面,完成功能为页面显示一个五行星阵，形式如下： * ** *** **** *****
实验十八 for结构程序设计练习
实验目的
1.熟悉for循环基本结构。
第 20 页 共 36 页
《Javascript程序设计》实验指导书
2.会定义for结构的主要参数。
3.能灵活应用for结构解决实际问题。
实验内容
本组题目要求全部使用for循环结构来实现。 1.设计页面，要求页面内循环出现8个8 2.设计页面，要求页面内出现8到88
3.设计页面，要求页面内出现8行8列的一共64个8. 4.设计页面，要求页面内出现16行20列的一共320个8 5.设计页面，要求页面内出现完整版99乘法表
6.设计页面，要求页面内出现只有左下角部分的常规型99加法表 7.设计一个页面,完成功能为页面显示一个五行星阵，形式如下： * ** *** **** *****
8.思考题：完成功能为页面显示如下星阵 ***** **** *** ** *
9.思考题：完成功能为页面显示如下星阵 * ** *** **** ***** **** *** ** *
10.思考题：完成功能为页面显示如下星阵 * *** ***** ******* *********
11.思考题：完成功能为页面显示如下星阵 * *** ***** ******* ********* ******* ***** *** *
第 21 页 共 36 页