国开JavaScript程序设计形考作业1-5试题及答案_第1页
国开JavaScript程序设计形考作业1-5试题及答案_第2页
国开JavaScript程序设计形考作业1-5试题及答案_第3页
国开JavaScript程序设计形考作业1-5试题及答案_第4页
国开JavaScript程序设计形考作业1-5试题及答案_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

国开JavaScript程序设计形考作业1试题及答案实训一：设计系统主页作业1.题目设计系统主页。2.目的（1）熟悉Web前端项目开发环境。（2）掌握如何建立Web前端项目，学会规划项目结构。（3）掌握动态生成页面内容的方法。（4）理解如何使用Flash显示图片新闻。（5）会在应用系统中编写播放动态新闻的程序。3.内容建立项目结构，并设计一个系统的主页，在主页中嵌入Flash播放新闻。4.要求（1）建立Web前端项目，规划好程序结构。（2）使用document.write()方法生成播放Flash的JavaScript代码。（3）可以方便地增减播放的图片新闻数量。（4）单击图片时能够打开对应的新闻页面。<linkhref="/zyzx/baseFiles/gzk/nerc_gzk/style/addcss.css"rel="stylesheet"type="text/css"/>参考答案：根据题目信息，以下是一个使用JavaScript完成设计系统主页作业的代码：html复制代码<!DOCTYPEhtml><html><head><title>系统主页</title><linkhref="/zyzx/baseFiles/gzk/nerc_gzk/style/addcss.css"rel="stylesheet"type="text/css"/></head><body><divid="header"><h1>系统主页</h1></div><divid="flash-container"></div><divid="footer"><p>版权所有©2023</p></div><script>//定义图片新闻数组varnewsImages=["image1.jpg","image2.jpg","image3.jpg"];//获取Flash容器元素varflashContainer=document.getElementById("flash-container");//生成播放Flash的JavaScript代码varflashContent='';for(vari=0;i<newsImages.length;i++){flashContent+='<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"width="300"height="200">'+'<paramname="movie"value="news'+i+'.swf">'+'<paramname="quality"value="high">'+'<embedpluginspage="/go/getflashplayer"quality="high"width="300"height="200"src="news'+i+'.swf"type="application/x-shockwave-flash"></embed>'+'</object>';}//将生成的Flash代码插入到页面中flashContainer.innerHTML=flashContent;//为每个图片新闻添加单击事件处理程序for(vari=0;i<newsImages.length;i++){varnewsImage=document.getElementById("news-"+i);newsImage.addEventListener("click",function(){window.open("news.html?index="+i,"_blank");});}</script></body></html>这个示例代码创建了一个简单的系统主页，其中包含一个顶部导航栏、一个图片新闻区域和一个页脚。在图片新闻区域中，使用JavaScript动态生成了Flash播放代码，并将该代码插入到页面中。同时，为每个图片新闻添加了一个单击事件处理程序，单击时打开对应的新闻页面。注意，这里假设每个新闻图片都附带一个名为“newsX.swf”的Flash文件，其中X是新闻索引，同时还需要创建一个名为“news.html”的文件来显示对应的新闻页面，并将新闻页面中的链接指向“news.html?index=X”的形式，其中X是新闻索引。你需要根据实际情况修改这些文件名或路径。

第二次任务（预备知识：第二、三章；分值：10分；选做：3选1；需辅导教师评分）实训二：显示数据列表1.题目显示数据列表。2.目的（1）掌握流程控制语句的使用。（2）掌握函数的使用。（3）理解闭包的概念。（4）应会设计基本的应用程序。3.内容在所设计的项目中，实现显示数据列表。数据以表格的方式显示，不同的行显示不同的颜色。当单击每行数据的标题时，将会弹出窗口，显示详细信息。4.要求（1）数据存放在数组中，用程序实现数据显示。（2）以闭包的方式定义工具，窗口函数封装在工具中。（3）通过循环生成数据行，用条件判断实现不同行显示不同的颜色。参考答案：这个任务可以通过JavaScript和HTML实现。我们需要一个HTML表格来显示数据，然后使用JavaScript来填充数据和控制行颜色以及弹出窗口。这里是一个简单的示例：首先，创建一个HTML文件，例如叫做index.html:html复制代码<!DOCTYPEhtml><html><head><title>数据列表显示</title><style>table{width:100%;border-collapse:collapse;}th,td{border:1pxsolidblack;padding:8px;text-align:left;}.odd-row{background-color:#f2f2f2;}.even-row{background-color:#ffffff;}</style></head><body><tableid="data-table"></table><scriptsrc="script.js"></script></body></html>然后，创建一个JavaScript文件，例如叫做script.js:javascript复制代码//定义数据数组vardata=[{name:"张三",age:23,gender:"男"},{name:"李四",age:24,gender:"女"},{name:"王五",age:25,gender:"男"},//更多数据...];//创建并返回一个函数，该函数用于创建并返回一个表格行元素functioncreateRow(dataItem){//使用数据项创建并返回一个表格行元素varrow=document.createElement('tr');varnameCell=document.createElement('td');nameCell.textContent=dataI;row.appendChild(nameCell);varageCell=document.createElement('td');ageCell.textContent=dataItem.age;row.appendChild(ageCell);vargenderCell=document.createElement('td');genderCell.textContent=dataItem.gender;row.appendChild(genderCell);returnrow;}//创建并返回一个函数，该函数用于创建并返回一个带有标题的表格行元素，并且该行在被点击时会弹出一个窗口显示详细信息functioncreateTitleRow(title){//使用标题创建并返回一个表格行元素，该行在被点击时会弹出一个窗口显示详细信息varrow=createRow({name:title,age:'点击查看',gender:'点击查看'});//使用"点击查看"作为占位符文本，直到实现弹出窗口的功能为止row.addEventListener('click',function(){//为该行添加一个点击事件监听器，当该行被点击时，将弹出一个窗口显示详细信息varwin=window.open('',新窗口中创建一个新的表格，其中包含标题行（Name,Age,Gender）win.document.write('<tr><td>'+data[0].name+'</td><td>'+data[0].age+'</td><td>'+data[0].gender+'</td></tr>');//在新窗口中添加第一行数据（假设第一行数据是标题行）for(vari=1;i<data.length;i++){//对于数据数组中的每一项数据，在新窗口中添加一行数据（除了标题行）win.document.write('<tr><td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].gender+'</td></tr>');//在新窗口中添加一行数据（Name,Age,Gender）}win.document.write('</table>');//在新窗口中关闭表格标签，完成表格的创建和数据的添加win.document.close();//关闭新窗口的文档对象模型（DOM），完成新窗口的创建和数据的添加，然后使新窗口可读或可写（取决于用户的设置）});//在该行上添加一个点击事件监听器，当该行被点击时，将弹出一个窗口显示详细信息（Name,Age,Gender）的表格，其中包含所有数据项的数据（Name,Age,Gender）

实训三：随机显示题头图片1.题目随机显示题头图片。2.目的（1）掌握图像显示的基本知识。（2）掌握对象建立的方法。（3）掌握Math的使用方法。（3）会应利用随机函数编写应用程序。3.内容结合一个具体应用的需求，设计随机显示题头的程序。4.要求（1）针对一个具体应用的需求，设计界面。（2）使用对象的方式存储图像信息，利用随机函数抽取图像。参考答案：以下是一个基本的实现方式，使用了JavaScript的Math.random()函数来随机选择一个图片，然后使用innerHTML属性将图片插入到HTML的div元素中。html复制代码<!DOCTYPEhtml><html><head><style>#header{width:100%;height:200px;text-align:center;background-color:#f5f5f5;}</style></head><body><divid="header"></div><script>varimages=['image1.jpg','image2.jpg','image3.jpg'];//替换为你的图片地址varrandomIndex=Math.floor(Math.random()*images.length);//生成一个随机索引varrandomImage=images[randomIndex];//根据随机索引选择一个图片varheaderElement=document.getElementById('header');//获取header元素headerElement.innerHTML='<imgsrc="'+randomImage+'"alt="RandomHeaderImage"/>';//在header元素中插入图片</script></body></html>请注意，你需要将'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复制代码<!DOCTYPEhtml><html><body><pid="date"></p><script>//创建一个新的日期对象vartoday=newDate();//获取年、月、日varyear=today.getFullYear();varmonth=today.getMonth()+1;//getMonth()方法返回的月份从0开始，因此需要加1varday=today.getDate();//格式化日期字符串varformattedDate=year+'-'+month+'-'+day;//将日期显示在页面上document.getElementById('date').innerHTML=formattedDate;</script></body></html>在这个示例中，我们首先创建了一个新的Date对象（newDate()），它会被初始化为当前的日期和时间。然后，我们使用getFullYear，getMonth和getDate方法分别获取年份、月份和日期。注意，getMonth方法返回的月份是从0开始的，因此我们需要给结果加1以得到常规的月份表示。然后，我们将年、月、日拼接成一个字符串，格式为"YYYY-MM-DD"。最后，我们使用getElementById方法找到页面上的一个元素（我们假设其id为"date"），然后使用innerHTML属性将格式化后的日期字符串插入到该元素中。这样，当页面被加载时，就会显示当前的日期。

第三次任务（预备知识：第四、五章；分值：10分；选做：2选1；需辅导教师评分）实训五：设计登录和注册页1.题目设计登录和注册页。2.目的（1）掌握表单域的引用方法。（2）掌握常用控件的基本方法。（3）掌握事件的处理方法。（4）理解Cookie的原理和应用。3.内容针对所设计的系统，设计登录和注册页。4.要求（1）登录界面能对输入的数据进行验证，要求非空，且符合一定的要求。（2）登录时，用条件判断输入的数据，模拟登录判断。登录成功后，用Cookie保存登录状态，并进入主页。（3）主页含有注销功能。（4）注册界面能对数据进行验证。如电子邮件、电话号码等要符合格式要求。参考答案：这是一个涉及到前端和后端设计的问题，前端部分需要使用HTML和JavaScript，后端部分需要使用至少一种服务器端语言如Node.js，Python等，和一个数据库管理系统。因为这里的限制，我将提供一个基于JavaScript的前端实现，但请注意这只是一个示例，并且在实际环境中需要与后端服务配合使用。首先，我们需要创建HTML文件来作为登录和注册页。html复制代码<!DOCTYPEhtml><html><head><title>LoginandRegistration</title><style>/*样式代码可以在这里添加*/</style></head><body><divid="login-container"><h2>Login</h2><formid="login-form"><inputtype="text"id="login-username"placeholder="Username"required><inputtype="password"id="login-password"placeholder="Password"required><buttontype="submit">Login</button></form></div><divid="register-container"><h2>Register</h2><formid="register-form"><inputtype="text"id="register-username"placeholder="Username"required><inputtype="email"id="register-email"placeholder="Email"required><inputtype="password"id="register-password"placeholder="Password"required><buttontype="submit">Register</button></form></div><scriptsrc="script.js"></script></body></html>然后，我们需要创建一个JavaScript文件来处理登录和注册的逻辑。在这个示例中，我们只是简单地阻止表单的默认提交行为，并添加了一些基本的验证。javascript复制代码document.getElementById('login-form').addEventListener('submit',function(event){event.preventDefault();//阻止表单提交varusername=document.getElementById('login-username').value;varpassword=document.getElementById('login-password').value;if(!username||!password){//验证用户名和密码是否为空alert('Usernameorpasswordcannotbeempty.');return;}//在这里，你需要添加更多的验证和与服务器的交互来验证登录信息。//这可能涉及到使用AJAX或FetchAPI发送请求到服务器。});document.getElementById('register-form').addEventListener('submit',function(event){event.preventDefault();//阻止表单提交varusername=document.getElementById('register-username').value;varemail=document.getElementById('register-email').value;varpassword=document.getElementById('register-password').value;if(!username||!email||!password){//验证用户名、邮箱和密码是否为空alert('Username,email,andpasswordcannotbeempty.');return;}//在这里，你需要添加更多的验证和与服务器的交互来注册新用户。//这可能涉及到使用AJAX或FetchAPI发送请求到服务器。});请注意，这只是一个非常基本的示例，实际的登录和注册系统需要更多的安全性和验证。例如，密码应该在服务器端进行加密存储，而不是明文存储。同样，用户名和电子邮件应该是唯一的，不能被其他人使用。你可能还需要考虑如何处理错误和异常，以及如何保护用户的数据隐私。

实训六：设计简单的购物车1.题目设计简单的购物车。2.目的（1）掌握JSON的使用方法。（2）掌握数据列表的动态生成方法。（3）掌握WebStorage的使用方法。（4）会利用所学知识设计简单的应用程序。3.内容设计产品浏览页面，用户可以单击产品的“添加到购物车”链接将产品加入购物车，同时，显示购物车。可以对购物车中的产品执行增减或删除操作。4.要求（1）针对一个具体应用，设计产品列表。（2）要动态生成产品及购物车数据列表。（3）将购物车的数据存放在WebStorage中。参考答案：在这个项目中，我们将使用JavaScript，HTML和CSS来设计一个简单的购物车。我们将使用JSON来存储购物车的数据，并使用WebStorage来持久化这些数据。以下是一个基本的购物车实现：首先，我们需要创建HTML页面来显示产品列表和购物车。html复制代码<!DOCTYPEhtml><html><head><title>购物车</title><style>#cart{width:300px;border:1pxsolid#000;padding:10px;}#carttable{width:100%;}#cartth,#carttd{border:1pxsolid#000;padding:5px;text-align:center;}</style></head><body><h1>产品列表</h1><ulid="products"><!--这里将通过JavaScript动态添加产品--></ul><h1>购物车</h1><divid="cart"><!--这里将通过JavaScript动态生成购物车--></div><buttononclick="addToCart('product1','10')">添加到购物车</button><scriptsrc="cart.js"></script></body></html>然后，我们需要在cart.js文件中实现购物车的逻辑。我们将使用localStorage来存储购物车的数据。每次页面加载时，我们将从localStorage中读取购物车的数据，并在页面上显示出来。同时，当用户点击添加到购物车按钮时，我们将产品添加到购物车中，并将购物车的数据保存到localStorage中。当用户点击删除或增加按钮时，我们将更新购物车的数据，并再次保存到localStorage中。javascript复制代码letcart=JSON.parse(localStorage.getItem('cart'))||[];functionaddToCart(product,quantity){letproductInCart=cart.find(item=>duct===product);if(productInCart){productInCart.quantity+=quantity;}else{cart.push({product,quantity});}updateCart();}functionupdateCart(){letcartDiv=document.getElementById('cart');lettable=document.createElement('table');letthead=document.createElement('thead');lettbody=document.createElement('tbody');letheaderRow=document.createElement('tr');headerRow.innerHTML='<th>产品</th><th>数量</th><th></th>';thead.appendChild(headerRow);table.appendChild(thead);cart.forEach(item=>{letrow=document.createElement('tr');row.innerHTML=`<td>${duct}</td><td>${item.quantity}</td><td><buttononclick="subtractFromCart('${duct}')">减少</button></td>`;tbody.appendChild(row);});table.appendChild(tbody);cartDiv.innerHTML='';cartDiv.appendChild(table);localStorage.setItem('cart',JSON.stringify(cart));}window.onload=function(){letproducts=document.getElementById('products');letproductNames=['产品1','产品2','产品3'];//在这里添加你的产品名称productNames.forEach(name=>{letproductLi=document.createElement('li');productLi.textContent=name;productLi.addEventListener('click',function(){addToCart(this.textContent,1);});products.appendChild(productLi);});};

第四次任务（预备知识：第六章；分值：20分；必做；需辅导教师评分）实训七：实现用户管理功能1.题目实现用户管理功能。2.目的（1）理解Node.js程序的基本原理。（2）掌握利用Node.js建立服务器程序的基本方法。（3）理解Ajax的工作原理。（4）掌握编写Ajax程序的基本方法。（5）会利用所学知识设计简单的应用程序。3.内容设计程序能够对用户进行管理，实现查询、删除、注册、登录功能。4.要求（1）用户管理界面，以列表的方式显示用户数据，并提供删除功能。数据通过Ajax请求服务器端程序，从数据库中获取。（2）注册界面Ajax请求服务器端程序能够将用户信息保存到数据库。（3）注册界面在输入用户名时能实现动态验证的唯一性。（4）登录功能通过数据库查询进行验证。参考答案：这个问题的范围比较广，需要设计和实现一个完整的用户管理系统，包括后端服务器、数据库和前端用户界面。由于这里的限制，我将提供一个简化的版本，只使用Node.js和Express作为后端，SQLite作为数据库，并且没有涉及前端用户界面。更完整的实现将需要使用HTML、CSS和JavaScript来创建用户界面，并可能涉及到更复杂的后端技术，如使用Express.js创建API端点，使用MongoDB或MySQL等数据库系统。这里是一个简化的实现：首先，你需要安装Node.js和Express.js以及SQLite。在你的项目文件夹中，创建一个package.json文件来管理你的项目依赖。你可以通过运行npminit命令来创建这个文件。然后，运行npminstallexpresssqlite3命令来安装Express和SQLite。然后，你可以创建一个server.js文件来作为你的服务器程序。以下是一个基本的服务器程序，它使用Express.js来创建一个服务器，并使用SQLite作为数据库。javascript复制代码constexpress=require('express');constbodyParser=require('body-parser');constsqlite3=require('sqlite3').verbose();//初始化Expressconstapp=express();//设置body-parser中间件app.use(bodyParser.json());//设定数据库constdb=newsqlite3.Database(':memory:',(err)=>{if(err){returnconsole.error(err.message);}console.log('Connectedtothein-memorySQlitedatabase.');db.run('CREATETABLEusers(idINTEGERPRIMARYKEY,usernameTEXT,passwordTEXT)');});//创建数据库连接池db.serialize(()=>{app.get('/users',(req,res)=>{letsql='SELECT*FROMusers';db.all(sql,[],(err,rows)=>{if(err){res.status(500).send(err);return;}res.json(rows);});});app.post('/register',(req,res)=>{let{username,password}=req.body;letsql='INSERTINTOusers(username,password)VALUES(?,?)';db.run(sql,[username,password],(err)=>{if(err){res.status(500).send(err);return;}res.status(201).send(sql);});});app.delete('/users/:id',(req,res)=>{letsql='DELETEFROMusersWHEREid=?';db.run(sql,[req.params.id],(err)=>{if(err){res.status(500).send(err);return;}res.status(204).send();});});});这个服务器程序实现了基本的查询、删除、注册功能。它使用SQLite作为数据库，你可以通过运行nodeserver.js命令来启动这个服务器。然后你可以使用Postman或其他API测试工具来测试这个服务器的功能。

第五次任务（预备知识：第七章；分值：30分；必做；需辅导教师评分）实训八：使用jQuery技术实现企业信息展示系统的相关功能1.题目使用jQuery技术实现企业信息展示系统的相关功能。2.目的（1）掌握jQuery的基本知识。（2）掌握jQuery的应用方法。（3）进一步理解Ajax程序的设计方法。（4）会利用所学知识设计简单的应用程序。3.内容用jQuery技术实现产品的查询、添加、修改与删除，用户的登录、注册、查询和删除。4.要求（1）从下载jQuery库。（2）将在客户端网页中使用的MyTools中的函数转换为jQuery函数。请求服务器端程序能够将用户信息保存到数据库。（3）进一步完善功能，优化界面。参考答案：在这个项目中，我们将使用jQuery来实现企业信息展示系统的一些基本功能。我们将包括产品的查询、添加、修改和删除，以及用户的登录、注册、查询和删除。由于这个项目的规模相对较小，我们将简化数据库的交互，只关注前端的实现。首先，我们需要从下载jQuery库，并把它添加到我们的项目中。然后，我们可以开始创建我们的前端页面和jQuery函数。以下是一个简单的示例，我们将创建一个HTML页面来显示产品列表，并提供添加、删除和编辑产品的功能。html复制代码<!DOCTYPEhtml><html><h

人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论