国开JavaScript程序设计形考作业2试题及答案.docx
第二次任务（预备知识：第二、三章；分值：10分；选做：3选1；需辅导教师评分）实训二：显示数据列表1 .题目显示数据列表。2 .目的（1）掌握流程控制语句的使用。（2）掌握函数的使用。（3）理解闭包的概念。（4）应会设计基本的应用程序。3 .内容在所设计的项目中，实现显示数据列表。数据以表格的方式显示，不同的行显示不同的颜色。当单击每行数据的标题时，将会弹出窗口，显示详细信息。4 .要求（1）数据存放在数组中，用程序实现数据显示。（2）以闭包的方式定义工具，窗口函数封装在工具中。（3）通过循环生成数据行，用条件判断实现不同行显示不同的颜色。参考答案：这个任务可以通过JavaScript和HTM1实现。我们需要一个HTM1表格来显示数据，然后使用JaVaSCriPt来填充数据和控制行颜色以及弹出窗口。这里是一个简单的示例：首先，创建一个HTM1文件，例如叫做index.htm1：htm1复制代码<!DOCTYPEhtm1><htm1><head>CtitIe>数据列表显示<tit1e><sty1e>tab1ewidth:100%;border-co11apse:co11apse;)th,tdborder:Ipxso1idb1ack;padding:8px;text-a1ign:1eft;.odd-rowbackground-co1or:#f2f2f2;).even-rowbackground-co1or:#FFfFFf;<sty1e><head><body><tab1eid=,data-tab1e"><tab1e><scriptsrc=',script.js,><script><body><htm1>然后，创建一个JaVaSCriPt文件，例如叫做SCriPt.js：javascript复制代码/定义数据数组vardata=name:"张三age:23,gender:“男",name:,1李四,age:24,gender:,女,name:“王五"，age:25,gender:“男",/更多数据.；/创建并返回一个函数，该函数用于创建并返回一个表格行元素functioncreateRow(data1tem)/使用数据项创建并返回一个表格行元素varrow=document.CreateE1ement(,tr,);varnameCe11=document.cReateE1ement(,td,);nameCe11.textcontent=data1tem.name;row.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;)/创建并返回一个函数，该函数用于创建并返回一个带有标题的表格行元素，并且该行在被点击时会弹出一个窗口显示详细信息functionCreateTit1eROW(titIe)/使用标题创建并返回一个表格行元素，该行在被点击时会弹出一个窗口显示详细信息varrow=createRow(name:tit1e,age:'点击查看"gender:'点击查看)；/使用“点击查看”作为占位符文本，直到实现弹出窗口的功能为止row.addEvent1istener('c1ick'function()/为该行添加一个点击事件监听器，当该行被点击时，将弹出一个窗口显示详细信息varwin=WindoW.open(,新窗口中创建一个新的表格，其中包含标题行(Name,Age,Gender)win.document.write(,<tr><td>,+data0.name+,<td><td>,+data0.age+,<td><td><+data0.gender+,<td><tr>');/在新窗口中添加第一行数据(假设第一行数据是标题行)for(vari=1;i<data.1ength;i+)/对于数据数组中的每一项数据，在新窗口中添加一行数据(除了标题行)win.document.write(,<tr><td>,+datai.name+,<td><td>,+datai.age+,<td><td>,+datai.gender+,<td><tr>,);/在新窗口中添加一行数据(Name,Age,Gender)win.document.write('<tab1e>,);/在新窗口中关闭表格标签，完成表格的创建和数据的添加win.document.c1ose();/关闭新窗口的文档对象模型(DOM),完成新窗口的创建和数据的添加，然后使新窗口可读或可写(取决于用户的设置)；/在该行上添加一个点击事件监听器，当该行被点击时，将弹出一个窗口显示详细信息(Name,Age,Gender)的表格，其中包含所有数据项的数据(Name,Age,Gender)实训三：随机显示题头图片1 .题目随机显示题头图片。2 .目的(1)掌握图像显示的基本知识。(2)掌握对象建立的方法。(3)掌握Math的使用方法。(3)会应利用随机函数编写应用程序。3 .内容结合一个具体应用的需求，设计随机显示题头的程序。4 .要求(1)针对一个具体应用的需求，设计界面。(2)使用对象的方式存储图像信息，利用随机函数抽取图像。参考答案：以下是一个基本的实现方式，使用了JavaScript的Math.random。函数来随机选择一个图片，然后使用innerHTM1属性将图片插入到HTM1的div元素中。htm1复制代码<!DOCTYPEhtm1><htm1><head><sty1e>#headerwidth:100%;height:200px;text-a1ign:center;background-co1or:#f5f5f5;)<sty1e><head><body><divid="header"><div><script>varimages=,image1.jpg',image2.jpg',image3.jpg'/替换为你的图片地址varrandomindex=Math.f1oor(Math.random()*images.1ength);/生成一个随机索引varrandomimage=imagesrandomindex;/根据随机索引选择一个图片varHeaderE1ement=document.getEIementById('header');/获取header元素HeaderE1ement.innerHTM1=,<imgsrc=",+randomimage+,a1t=",RandomHeaderImage">,;/在header元素中插入图片<script><body><htm1>请注意，你需要将'image1.jpg','image2.jpg,'image3.jpg'替换为你自己的图片地址。这个脚本会在页面加载时随机选择一个图片并显示在页面的顶部。如果你希望图片能够随着时间或其他事件的发生而更新，你可能需要将生成随机图片的代码放入一个函数中，并在适当的时候调用这个函数。实训四：实现日期显示1 .题目实现日期显示。2 .目的(1)掌握Date对象的使用方法。(2)掌握通过Date获得年月日的方法。(3)巩固对多分支结构的掌握和应用。(3)利用Date设计应用程序。3 .内容结合一个具体应用的需求，实现日期的显示。4 .要求(1)针对一个具体应用，设计日期显示的格式。(2)用JaVaSCriPt实现日期的显示。参考答案：以下是一个简单的JaVaSCriPt代码示例，可以显示当前日期，以年-月-日(YYYY-MM-DD)的格式显示：javascript复制代码<!DOCTYPEhtm1><htm1><body><pid=',date,><p><script>/创建一个新的日期对象vartoday=newDate();/获取年、月、日varyear=today.getFu11Year();varmonth=today.getMonth()+1;getMonth()方法返回的月份从0开始，因此需要加1varday=today.getDate();/格式化日期字符串varformattedDate=year+,+month+,+day;/将日期显示在页面上document.getE1ementById('date').innerHTM1=formattedDate;<script><body><htm1>在这个示例中，我们首先创建了一个新的Date对象(newDate(),它会被初始化为当前的日期和时间。然后，我们使用getFu11Year,getMonth和getDate方法分别获取年份、月份和日期。注意，getMonth方法返回的月份是从0开始的，因此我们需要给结果加1以得到常规的月份表示。然后，我们将年、月、日拼接成一个字符串，格式为''YYYY-MM-DD'最后，我们使用getE1ementBy工d方法找到页面上的一个元素(我们假设其id为“date”)，然后使用innerHTM1属性将格式化后的日期字符串插入到该元素中。这样，当页面被加载时，就会显示当前的日期。
