国开JavaScript程序设计形考作业1-5试题及答案(1).docx

《国开JavaScript程序设计形考作业1-5试题及答案(1).docx》由会员分享，可在线阅读，更多相关《国开JavaScript程序设计形考作业1-5试题及答案(1).docx（22页珍藏版）》请在第一文库网上搜索。

1、国开JavaScript程序设计形考作业1试题及答案实训一：设计系统主页作业1 .题目设计系统主页。2 .目的（1）熟悉Web前端项目开发环境。（2）掌握如何建立Web前端项目，学会规划项目结构。（3）掌握动态生成页面内容的方法。（4）理解如何使用F1aSh显示图片新闻。（5）会在应用系统中编写播放动态新闻的程序。3 .内容建立项目结构，并设计一个系统的主页，在主页中嵌入F1aSh播放新闻。4 .要求（1）建立Web前端项目，规划好程序结构。（2）使用document,write（）方法生成播放FIaSh的JavaScript代码。（3）可以方便地增减播放的图片新闻数量。（4）单击图片时能够打

2、开对应的新闻页面。1inkhref=zz参考答案：根据题目信息，以下是一个使用JaVaSCriPt完成设计系统主页作业的代码：htm1复制代码系统主页1inkhref=,https:/系统主页版权所有©2023/定义图片新闻数组varnewsimages=image1.jpg,image2.jpg,image3.jpg；/获取F1aSh容器元素varf1ashcontainer=document.getEIementById(f1ash-container);/生成播放F1ash的JavaScript代码varf1ashcontent=,;for(vari=0;inewsimages

3、.1ength;i+)f1ashcontent+=,objectC1assid=nC1sid:D27CDB6E-AE6D-11cf-96B8-444553540000codebase=)将生成的F1ash代码插入到页面中f1ashcontainer.innerHTM1=f1ashcontent;/为每个图片新闻添加单击事件处理程序for(vari=0;inewsimages.1ength;i+)varnewsimage=document.getEIementById(news-,+i);newsimage.addEvent1istener(c1ickjfunction()window.open

4、(news.htm1?index=+i,_b1ank);)；)这个示例代码创建了一个简单的系统主页，其中包含一个顶部导航栏、一个图片新闻区域和一个页脚。在图片新闻区域中，使用JaVaSCriPt动态生成了F1ash播放代码,并将该代码插入到页面中。同时，为每个图片新闻添加了一个单击事件处理程序，单击时打开对应的新闻页面。注意，这里假设每个新闻图片都附带一个名为newsX.swf的F1ash文件,其中X是新闻索引，同时还需要创建一个名为news.htm1的文件来显示对应的新闻页面，并将新闻页面中的链接指向news.htm1?index=X的形式，其中X是新闻索引。你需要根据实际情况修改这些文件名

5、或路径。第二次任务（预备知识：第二、三章；分值：10分；选做：3选1；需辅导教师评分）实训二：显示数据列表1 .题目显示数据列表。2 .目的（1）掌握流程控制语句的使用。（2）掌握函数的使用。（3）理解闭包的概念。（4）应会设计基本的应用程序。3 .内容在所设计的项目中，实现显示数据列表。数据以表格的方式显示，不同的行显示不同的颜色。当单击每行数据的标题时，将会弹出窗口，显示详细信息。4 .要求（1）数据存放在数组中，用程序实现数据显示。（2）以闭包的方式定义工具，窗口函数封装在工具中。（3）通过循环生成数据行，用条件判断实现不同行显示不同的颜色。参考答案：这个任务可以通过JaVaSCriPt

6、和HTM1实现。我们需要一个HTM1表格来显示数据,然后使用JaVaSeriPt来填充数据和控制行颜色以及弹出窗口。这里是一个简单的示例：首先，创建一个HTM1文件，例如叫做index.htm1：htm1复制代码数据列表显示tab1ewidth:100%;border-co11apse:co11apse;)th,tdborder:Ipxso1idb1ack;padding:8px;text-a1ign:1eft;.odd-rowbackground-co1or:#f2f2f2;.even-rowbackground-co1or:;然后，创建一个JaVaSCriPt文件，例如叫做SCriPt.j

7、s：javascript复制代码/定义数据数组vardata=name:张三、age:23,gender:“男name:,李四,age:24,gender:“女,name:“王五，age:25,gender:“男/更多数据.；/创建并返回一个函数，该函数用于创建并返回一个表格行元素functioncreateRow(data1tem)/使用数据项创建并返回一个表格行元素varrow=document.cPeateE1ement(,tr,);varnameCe11=document.CreateE1ement(,td,);nameCe11.textcontent=data1tem.name;ro

8、w.appendChi1d(nameCe11);varageCe11=document.CreateE1ement(,td,);ageCe11.textcontent=data1tem.age;row.appendChi1d(ageCe11);vargenderCe11=document.CreateE1ement(,td,);genderCe11.textcontent=data1tem.gender;row.appendChi1d(genderCe11);returnrow;)/创建并返回一个函数，该函数用于创建并返回一个带有标题的表格行元素,并且该行在被点击时会弹出一个窗口显示详细信息f

9、unctioncreateTit1eRow(tit1e)/使用标题创建并返回一个表格行元素，该行在被点击时会弹出一个窗口显示详细信息varrow=createRow(name:tit1e,age:点击查看gender:点击查看)；/使用“点击查看”作为占位符文本，直到实现弹出窗口的功能为止row.addEvent1istener(c1ickfunction()/为该行添加一个点击事件监听器，当该行被点击时，将弹出一个窗口显示详细信息varwin=WindoW.open(,新窗口中创建一个新的表格，其中包含标题行(NamejAge,Gender)win.document.write(,+data

10、0.name+,+data0.age+,+data0.gender+,);/在新窗口中添加第一行数据(假设第一行数据是标题行)for(vari=1;idata.1ength;i+)/对于数据数组中的每一项数据，在新窗口中添加一行数据(除了标题行)win.document.write(,+datai.name+,+datai.age+,+datai.gender+,);/在新窗口中添加一行数据(Name,Age,Gender)win.document.write(,);/在新窗口中关闭表格标签，完成表格的创建和数据的添加win.document.c1ose();/关闭新窗口的文档对象模型(DoM

11、),完成新窗口的创建和数据的添加，然后使新窗口可读或可写(取决于用户的设置)；/在该行上添加一个点击事件监听器，当该行被点击时，将弹出一个窗口显示详细信息(Name,Age,Gender)的表格，其中包含所有数据项的数据(Name,Age,Gender)实训三：随机显示题头图片1 .题目随机显示题头图片。2 .目的(1)掌握图像显示的基本知识。(2)掌握对象建立的方法。(3)掌握Math的使用方法。(3)会应利用随机函数编写应用程序。3 .内容结合一个具体应用的需求，设计随机显示题头的程序。4 .要求(1)针对一个具体应用的需求，设计界面。(2)使用对象的方式存储图像信息，利用随机函数抽取图像。参考答案：以下是一个基本的实现方式，使用了JavaScript的Math.random。函数来随机选择一个图片，然后使用innerHTM1属性将图片插入到HTM1的div元素中。htm1复制代码#headerwidth:100%;height:200px;text-a1ign:center;background-co1or:#f5f5f5;)sc