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

《原版Javascript程序设计实验指导书.docx》由会员分享，可在线阅读，更多相关《原版Javascript程序设计实验指导书.docx（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、?Javascript程序设计?实验指导书一、课程性质和教学目的JavaScrip是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置 支持类型。它的解释器被称为JavaScript引擎，为浏览器的一局部，广泛用于客户端的脚 本语言，最早是在HTML （标准通用标记语言下的一个应用）网页上使用，用来给HTML网页 增加动态功能。学习Javascript必须理论联系实际，多做上机练习。只有在上机实验过程中才能真正 学会程序设计。本实验报告主要包括学期内各个实验的实验目的、实验内容、实验记录、 实验总结等，供学生学习记录，以提高学习效率。参加实验的学生应参照本报告手册的要 求，认真实

2、验，如实填写实验数据，并对实验结果进展分析，阐述实验中所遇到的问题， 提出解决问题的方法。二、实验目的上机实验的目的不仅是为了验证教材和讲课的内容，或者验证自己所编写的程序正确与 否。学习程序设计上机实验的目的是：1 .加深对讲授内容的理解，尤其是一些语法规定，课堂讲授既枯燥无味又难以记忆，但 它们都很重要。能过屡次上机就能自然地、熟练地掌握。通过上机掌握语法是行之有效的方 法。2 .学会上机调试程序。即善于发现程序中的错误，并且能很快排除这些错误，使程序能 正确运行。要真正掌握这门课程，不仅应当了解和熟悉有关理论和方法，还要求自己动手实 现即会编程并上机调试通过。故应给予充分重视。调试程序固

3、然可以借鉴他人的现成经历， 但更重要的是通过自己的直接实践来累积经历，而且有些经历是只能意会难以言传。调试程 序的能力是每个程序设计人员应当掌握的一项 基本功。3 .做实验时不要在程序通过后就认为搞定、完成任务了，而应当在己通过的程序甚而上 作一些改动（例如修改一些参数、增加程序一些功能、改变输入数据的方法等），以观察和 分析所出现的情况。三、上机实验前的准备工作实验前应做好准备工作，以充分利用有限的上机时间。准备工作至少包括：1 ,复习和掌握本实验有关的教学内容。2 .准备好上机所需的程序。初学者切忌不编写程序或抄别人的程序去上机，应从一开场 就养成严谨的科学作风。3 .对运行上可能出现的问

4、题应事先作出估计；对程序中自己有疑问的地方，应作上记号， 以便在上机时给予注意。4 .根据实验内容认真准备实验程序及调试时所需的输入数据。5 .在上实验课之前必须写好预习报告编程题源程序用纸写好或画好程序流程图）6,填空与改错题等题要预先做好，上机时的工作只能是输入源程序和调试修改。7认真完成实验内容，得出正确的实验结果。实验完毕后总结实验内容、书写实验报告。8 .遵守实验室规章制度、不缺席、按时上、下机。四、实验环境实验内容1 .请设计一个页面，页面中有三个按钮，要求单击每个按钮的时候，那么在对应位置出现你 自己的姓名。单击文本框按钮，那么文本框中要出现你的名字，也就是。nclick点击按钮

5、之后，通过函数 function,使得text的value值为你的名字。单击alert按钮，那么弹出一个alert警告框，里面是你的名字。最后是div按钮，单击它那 么div中的内容换成你的名字，也就是这个div对应id的 document. getElementById(”).innerHTML=你的名字”2 .confirm的功能是弹出一个两选项的对话框，最重要的是，你点击确定或者取消按钮之 后，可以给出进一步的选择。请创立页面，要求是，修改此题的代码，使其功能为： 单击按钮，会弹出一句话：“你今天的心情是不是很好啊如果用户点击确定，那么弹出“那你请我吃饭好不好啊如果用户点击取消，那么弹出

6、“那你是不是因为我没给你时机请我吃饭所以心情不好啊.自己创立一个文件，复制任务2的代码，然后自己编写程序，要求页面一开场弹出一个 confirm,然后用户点击确定或者取消之后，会再分别弹出内容不同的alert。3 .设计网页，实现的功能为：点击确定之后再出现一个confirm,看用户是否点击两次确 定。如果点击取消，那么以alert完毕。要求：修改代码，实现如下功能：一开场confirm提问：你是否喜欢红色如果用户点击确定，那么再一个confirm：你是否喜欢蓝色如果用户点击确定，那么弹出“你喜欢红色和蓝色如果用户点击取消，那么弹出“你喜欢红色不喜欢蓝色如果在“你是否喜欢红色那个问题上用户选择

7、了取消，那么再一个confirm是“你是否 喜欢黄色.果百户点击确定，那么弹出“你喜欢黄色不喜欢红色如果用户点击取消，那么弹出“红色和黄色你都不喜欢4 .提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某 个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。 如果用户点击取消，那么返回值为nullo也就是如果点击取消那么没有任何反响。语法：prompt (“文本“，“默认值”)这里的文本是这个对话框上方弹出的提示语。这里的默认值是对话框刚翻开的时候默认出现 在对话框里的内容。创立页面，要求实现功能：title改成你自己的名字。最终效果为：

8、当用户输入自己名字后，页面提示为“XX,成功学院欢迎你的到来！ xx是 用户自己输入的名字。5 .创立页面，包括一个文本框一个按钮，使其最终效果为：当用户输入自己性别后，如果 输入为“男，那么页面显示“先生你好，如果输入为“女，那么显示“女士你好”。6 .页面翻开之后，会直接出现提示框，第一个提示框是请用户输入自己的姓名，第二个提 示框是请用户输入性别为“男或者“女。根据用户输入的信息，页面显示“XX先生你 好或者“XX女士你好。这里的xx是用户在第一个prompt提示框中自己输入的名字。实验九d i v与text的显示应用练习实验目的l.nerHTML的灵活应用2.v与text的显示应用3.

9、1ue与innerHTML的区别于练习实验内容1 .此题目是练习课本P36的4.2的内容，通过id访问元素，并通过innerHTML属性改变其 内容。题目要求为，用户在文本框中输入自己的名字，单击按钮，那么页面的div中出现一 句话“XX,你今天心情好么 XX是用户在文本框中输入的名字。文本框中默认值为你自己的 姓名。这个题目比较容易，我再强调一下里面涉及的知识点：div要显示内容应该把div对应id 的innerHTML属性设置为你需要显示的内容即可。比方document.getElementById(注意这 里要输入div的id).innerHTML=你的名字”而文本框的值那么由这句经典代

10、码来指代。document.getElementByld(文本框的 id).value他们的一样点是都要用到document.getElementByld,都要在括号内的引号中输入id。区别是 div后面跟的是innerHTML,而text文本框后面跟的是valueo2 .此题目要求为，设计页面代码，在页面内增加一个文本框，文本框内默认值为10。当用 户单击第一个按钮的时候，那么文本框中依次出现10,20,40, 80 就是前一个数的倍数。而单击第二个按钮，那么刷新页面，重置文本框的值。这个题目比较容易，我再强调一下里面涉及的知识点：div要显示内容应该把div对应 id 的innerHTML

11、 属性设置为你需要显示的内容即可。比方 document. getElementByld (注意这里要输入 div 的 id ) . innrHTML=你的名字” 3 .Math .random ()是一个从0到1的随机数。那么如果我想得到从0至U 10的随机数呢那 么就需要我们让Math. random ()*10就可以了。然后通过四舍五入，就能得到一个从0 到10的随机整数。任务9的要求是创立一个页面，页面内有一个按钮和一个文本框。单击按钮的时候文本框 中随机出现一个0到10随机数。建议从我的示范页面中选择和复制代码来完成。4 .请把以下代码复制到空文档中，用浏览器翻开，然后按要求修改代码

12、实现功能。 文本框赋初值和单击清空。 function a() document.getElementByld(ntl) .value=Math.round(Math.random()* 99 + 1 )； ) function b () document.getElementByld(ntl) .value=n n;) function c () ) function d() ) 本页面的A, B按钮已经具备了相应功能。请学习其代码，然后对C,D按钮输入js代码， 使其实现页面上要求的功能。input typxt id=ntl valu=”这里会出现一个随机数现在是 时 分input typ

13、e=ntextn id=nt4n value=n12n 秒单击此按钮，那么上面第一个文本框中会出现一个随机数单击此按钮，会清空第一个文本框中的数值/p单击此按钮，那么上面的第二，三，四个文本框会出现随机数。这里特别提醒一下，第二个文本框是出小时，那么应该是从0到23的随机数，而文本框三, 四是分和秒，它应该是从0到59的随机数。单击此按钮，那么上面的第二，三，四个文本框中的随机数会被清空。实验十Javascript程序修改练习实验目的1 .javascript代码阅读能力2 .根据源代码进展改进的能力。实验内容.请把以下代码复制到空文档中，用浏览器翻开，然后按要求修改代码实现功能。title郭

14、峰function a()function b()在此页面根基上进展代码修改，使得下面的A,B按钮可以完成相应的运算功能。input type二text id=tl”+input type=text” id=”t2二 -=xinput type=text id=input type二text”=单击此按钮，那么上面四个式子的等号左侧文本框中会随机出现。到100之间的整数v/ppxinput type二button” value二”按钮 B onclick二“b()”单击此按钮，那么上面四个式子的等号左侧文本框中会随机出现。到100之间的整数，并且 最右边的文本框中会出现他们的计算结果。.请把以

15、下代码复制到空文档中，用浏览器翻开，然后按要求修改代码实现功能。t it 1郭峰/titlefunction a () 请在此输入您的姓名：input type=ntextn id=ntl valu，=张三” p要求单击此按钮后，下面文本框中出现一句话：&ldqu。；恭喜xxx!我们已经测试出您 的幸运数字为y”。xxx为上面文本框中输入的名字，y是一个从0到100的随机 整数。input type=ntextn id=nt2n size=n50n实验HJavascript中的函数应用练习实验目的1 .讲解了第四章的三个 基本函数confirm。,prompt。,location.

16、reload。而重点那么是这 之后的数学函数Math.random。这个函数可以随机产生一个从。到1之间的随机数。把 它与ceil, floor, round这三个取整函数相组合，就能产生很多不同的效果。这也将是我 们下周的主要练习内容。2 .知识Math.round(),Math.random()o而我们最常见的形式是把他们组合在一起使用，如： Math.round(Math.random()*x)x的值是几，它就会出现一个从。到几的随机整数。3 .直接用id来引用页面内对象的方法。实验内容1.请把以下代码复制到空文档中，用浏览器翻开，然后按要求修改代码实现功能。 v!-body backg

17、round-color: #006699;)#dl background-color: #FFFFFF;height: 200px;width: 400px;margin:0 auto;)p align二网页的背景颜色往往是一组六位的十六进制数。比方#990000代表红 色。vpalign二此题要求是：更改“随机色按钮的代码，使其每次单击时候，网页背景都随机呈现一个新的颜色。vpalign=思路：每次单击该按钮，都生成一个随机的六位整数，并将这个数作为 网页的背景颜色代码即可。 .请设计页面代码，要求实现功能为：使得当单击按钮”文本框内出现随机整数”时，文本 框内出现十以内随机整数。单击生成随

18、机数按钮，会生成一个10以内的随机整数，并 通过alert让它显示出来。生成一个10以内的随机整数的代码是 Math round（Math.random（）*10）单击”文本框内出现10”，方法是设置tl的value为10、这样写是因为文本框的id是 tl.请设计代码，要求效果为，单击按钮后，文本框2会出现文本框1的值与40相加的 结果。比方文本框1内是20,那么文本框2内应该是20 + 40 = 60.=80 | parselnt(tl.value)=10 & parselnt(tl.value)=80上面这句意思是你的年龄在80以下而且10以上逻辑与&逻辑或| |在课本P67。请把这个知识

19、点画线。5 .请创立一个网页，实现如下功能：页面内有一个文本框，让用户输入他出生的月份值， 然后单击按钮。如果这个值小于7,那么弹出一句话“你是上半年出生的如果这个值大于 等于7,那么弹出一句话“你是下半年出生的.请设计代码，实现功能为：单击按钮后自动进展判断，如果你的收入是“傲视群雄而 且假期安排为“带薪假期，那么你的假期心情图片il的srcwi.gif屋否那么是0.gif。 提醒：此题必然会用到课本P67的逻辑与操作符。另外这里我插入的是动图，图片扩展名 是gif不是jpg,不要写错了。6 .请设计代码，实现功能为：单击按钮后自动进展判断，如果你得到了好安排，那么你的假 期心情图片il的s

20、rc=U.gif 否那么是0.gif。至于什么是好的，由你自己决定。但 是至少应该有三个选项符合好心情标准。实验十五选择构造程序设计练习实验目的L熟悉选择程序语言的 基本构造。2 .会定义javascript中的选择构造。3 .熟悉对选择构造的一些基本操作和具体的应用。实验内容.设计代码，使用switch选择构造，使其实现功能为：页面有四个按钮，如果是单击“红 灯“按钮，那么弹出alert “请停车！如果是黄灯，那么弹出alert请观察后通过路口。如 果是绿灯，那么弹出“请直接通行。如果是灯都灭了，那么弹出“信号灯已坏，请慎重观 察，缓速通行。1 .设计页面，要求使用switch选择构造来实现

21、为：请用户在文本框输入年龄，然后单击按钮，弹出对应答案0-16 您是青少年17-32您是青年33-48 您是中年人49-64 您是领导人64以上您是长者2 .设计页面，要求使用switch选择构造来实现为：请用户输入考试成绩，然后单击按钮，弹出对应答案0-59 您明年再来吧6069您可以安心了70-79 您考的还不错80-89 您和学霸只有一步之遥90以上 我以学霸之血宣布，封印解除！100请大神收下我的膝盖吧！3 .请修设计代码，使其实现功能为：页面一开场提问您喜欢什么宠物有三个按钮选项，猫， 狗，兔子。选择单击按钮狗，那么页面提示：狗是非常聪明的动物，但是每天遛狗需要您付 出相当多的时间，

22、精力乃至毅力。选择猫，那么页面提示，猫很适合与人共处，优点是易于打理且不像狗那样需要陪伴，相应 的，猫咪很多时候不是特别粘人。让养育者很难有主人的感觉。选择兔子，那么提示：兔子大多数时候可以表现的比猫还萌，但那时因为它真的呆蠢，确实 傻到不要不要的。大多数时候只会凭本能行事。4 .请自己创立一个网页实现如下功能：网页内有一个文本框，请用户输入自己的笔记本电脑的价格之后单击按钮默认价格必然在 1000之上)，那么页面内显示一句话：如果用户输入的数值是2000以内，那么显示这是低端入门款如果用户输入数值大于等于2000而小于3000,那么显示你这是影音视觉系笔记本电脑 如果用户输入数值大于等于30

23、00而小于4000,那么显示你这是在宿舍打游戏一般都能带动 的节奏啊如果用户输入数值大于等于4000而小于5000,那么显示土豪你打游戏是不是有飞一般的感 觉如果用户输入数值大于5000,那么显示这位朋友我们处在不同的世界还是分手吧！5 .此题目是上一题的附加题。上一题给笔记本电脑根据价格写评语，有个问题，如果用户真 的输入了不合理的数值，比方1000以下，我们应该怎么办呢一个合理的程序设计应该考虑到各种情况，并且给顾客以相应的反响，帮助用户得到正确的 答案。请修改你刚刚的任务的答案，使得当用户输入低于1000或者高于20000的数字时，提示用 户：您输入的价格已经超出了常标准围，想必是您不小

24、心输入了错误的数据，请重新输入。 同时将用户已经输入的数字清零。清零这一步，因为用户是在一个文本框中输入的内容，那么我们有两个方法。你可以执行 location.reload(),刷新当前页面，那么用户输入的数据自然会清零；你也可以强制让那个文 本框的值清零，假设那个文本框的id叫tl,那么你可以设置tl.valued或者tl.value=”都可 以。实验十六Javascript控件综合应用练习实验目的.掌握button, div, text等控件的 基本代码。1 .练习灵活运用以上控件来实现页面功能的方法。实验内容L图片本身也可以设置onclick事件来切换图片内容。请在页面内插入图片01,

25、设其src=0l.jpg。然后设置onclick事件来调用function f要求实现效果为，用户单击图片的时候，让它在01与02.jpg之间切换也就是单击的时候，function会判断，如果现在是01,那就让它的src=02.jpg。如果现在的 图片不是01,那就让图片的src=01.jpg.要求实现效果为：当用户输入身高体重并单击按钮之后，页面不是alert显示答案，而是把提示语直接显示在 页面上，并且同时搭配一张图片。过轻，过重，正常，肥胖，非常肥胖对应的gif我会同时 发送到文件夹内。请对号入座。3.：创立一个页面，包括3个按钮，单击第一个按钮alrt弹出你的名字，单击第二个按 钮al

26、ert弹出你的家乡，单击第三个按钮alert弹出你的辅导员的名字。4：创立一个页面，包括3个按钮，单击第一个按钮alrt弹出你的名字，单击第二个按 钮alert弹出你的家乡，单击第三个按钮alert弹出你的辅导员的名字。和任务3的区 别是这个必须使用参数传递方式来完成，也就是这个页面只能有一个function。5：创立一个页面，包括3个button和一个div。要求单击第一个按钮，div中显示你的 姓名；单击第二个按钮，div中显示图片阿狸gif；单击第三个按钮时div里出现一个标 题为“郭峰的按钮。6：创立一个页面，包括两个文本框和一个按钮。要求用户在第一个文本框输入自己的幸运 数字。单击按

27、钮时第二个文本框中出现一句“您的幸运数字是。x是用户刚刚输入的幸 运数字的值。7：创立一个页面，包括2个文本框和一个按钮。要求用户在第一个文本框输入自己的幸运 数字。单击按钮时第二个文本框中出现一句“您的幸运数字的平方是x。x是用户刚刚输 入的幸运数字的值的平方。8：创立一个页面，包括2个文本框和一个按钮。要求用户在第一个文本框输入自己的幸运 数字。单击按钮时第二个文本框中出现一句“您的幸运数字与10相加的结果是x。这个 题目因为涉及加法所以必须使用pars工nt ()函数。实验十七循环构造程序设计练习实验目的.熟悉javascript中的循环 基本构造。1 ,会定义循环构造的各个参数。2 .

28、熟悉循环构造的常见用法。头验内谷.创立一个页面，包括1个按钮，一个div, 一个txt。请用户在txt中输入自己的出 生年份，然后单击按钮。如果年份小于等于1995,那么div中显示一句“你已经到了法定 结婚年龄了，否那么显示“你还不能结婚呢。1 .创立一个页面，包括2个按钮，一个div, 1个txt。请用户在txt中输入自己的出 生年份，然后单击对应的按钮。两个按钮分别显示“男，“女。我国法律是男22周岁 女20周岁允许结婚。也就是如果用户单击“男按钮，那么他的出生年份如果年份小于等于1993,那么div中 显示一句“你已经到了法定结婚年龄了，否那么显示“你还不能结婚呢。也就是如果用户单击“

29、女按钮，那么他的出生年份如果年份小于等于1995,那么div中 显示一句“你已经到了法定结婚年龄了，否那么显示“你还不能结婚呢。2 .创立一个页面，包括1个button。要求单击第一个按钮，那么按钮标题显示为“您的幸 运数字是x”。x是一个从1到9之间的随机整数。此题用到两个知识点，一是 Math. round (Math. random () *x)随机整数,二是 button 的 value 值显示它的标题。3 .创立一个页面，包括1个div和一个按钮。要求用户单击按钮时div中出现一句“您的 幸运宠物是x。x是数组中生成的一个随机的宠物类型。此题目考察数组。要求用户先创 立如下数组，然后

30、单击按钮那么出现数组中的一个随机值。var shuzu=“猫“，”狗“兔子“，“仓鼠“，“狐狸 J乌龟I，金鱼I，松鼠I，猴子I， 变色龙1 , T蜗牛I，雪貂I，龙猫I，鹦鹉,.创立一个页面，包括2个按钮和一个img。两个按钮的标题分别是“方片K，“黑桃Q。 页面img一开场显示文件夹中的图片l.jpg。用户单击按钮的时候那么图片变化为按钮标 题对应的图片。4 .创立一个页面，包括1个按钮和一个img。要求用户单击按钮时img图片显示为img文 件夹中的九个gif图片中的随机一个。思路是创立一个九元素的数组，元素名为img文件 夹中的图片名。然后单击按钮的时候img的src为这个数组中的随机

31、一个图片。记得一定 要加上路径“ img/。“暴怒“，“得意“，“辞别“，“害羞”，“加油”，“恐惧快乐“，“满足“，“撒娇”.设计页面，要求页面内循环出现6个65 .设计页面，要求页面内出现6到66.设计页面，要求页面内出现4行4列的一共16个6.6 .设计页面，要求页面内出现6行16列的一共96个6.设计页面，要求页面内出现完整版99乘法表7 .设计页面，要求页面内出现只有左下角局部的常规型99加法表.设计一个页面，完成功能为页面显示一个五行星阵，形式如下：* *火*火* * * *实验十八for构造程序设计练习实验目的.熟悉for循环 基本构造。1 .会定义for构造的主要参数。2 .能

32、灵活应用for构造解决实际问题。实验内容本组题目要求全部使用for循环构造来实现。1 .设计页面，要求页面内循环出现8个8.设计页面，要求页面内出现8到882 .设计页面，要求页面内出现8行8列的一共64个8.3 .设计页面，要求页面内出现16行20列的一共320个8.设计页面，要求页面内出现完整版99乘法表4 .设计页面，要求页面内出现只有左下角局部的常规型99加法表7,设计一个页面，完成功能为页面显示一个五行星阵，形式如下：卡* * * *8 .思考题：完成功能为页面显示如下星阵大*火 * * * *9 .思考题：完成功能为页面显示如下星阵* * *大*大*大火 大 *10 .思考题：完成

33、功能为页面显示如下星阵代码编写环境：可根据机房主机条件自己决定。推荐notepad, Dreamweaver, eclipse, hbuilder 等。页面预览环境：建议学生及早考虑和适应跨浏览器自适应问题。推荐Firefox, google chrome,世界之窗，Internet Explorer 等。实验一Javascr i pt基本页面操作实验目的LJS页面基本构造。2 .JS中变量 基本格式。3 .变量与字符串相连接并显示结果。4,使用按钮与function 对应来实现代码功能。实验内容.在C盘下创立文件夹1.1。在文件夹内创立一个txt文档，并命名为。xx是你学 号后两位。然后把课

34、本P10的程序1.1输入该文档，并把内容改为你自己的名字。 内容改为你的名字加欢迎标语。后面是P9的最后一行，但是把” ”里面的内容换成你 自己的名字。保存该文档，并用google浏览器查看效果。1 .请将课本P10倒数第四行代码中的alert换成document.write并保存。你可以把任务01答 案.html中的代码直接进展修改。然后用google浏览器翻开这个页面看效果。想想alert和 write的功能各是什么。2 .请看课本P12的1.11练习，将任务01的页面代码的script中增加 alert (document. title) o保存后用google浏览器翻开看效果。3 .我们一般建议在body中完成页面的布局设计，而将script代码放在head中。我