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

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

1、第三次任务(预备知识：第四、五章；分值：10分；选做：2选1；需辅导教师评分)实训五：设计登录和注册页1 .题目设计登录和注册页。2 .目的(1)掌握表单域的引用方法。(2)掌握常用控件的基本方法。(3)掌握事件的处理方法。(4)理解COokie的原理和应用。3 .内容针对所设计的系统，设计登录和注册页。4 .要求(1)登录界面能对输入的数据进行验证，要求非空，且符合一定的要求。(2)登录时，用条件判断输入的数据，模拟登录判断。登录成功后，用COOkie保存登录状态，并进入主页。(3)主页含有注销功能。(4)注册界面能对数据进行验证。如电子邮件、电话号码等要符合格式要求。参考答案：这是一个涉及

2、到前端和后端设计的问题，前端部分需要使用HTM1和JaVaSCriPK后端部分需要使用至少一种服务器端语言如NOde.js,PythOn等，和一个数据库管理系统。因为这里的限制，我将提供一个基于JaVaSCriPt的前端实现，但请注意这只是一个示例，并且在实际环境中需要与后端服务配合使用。首先,我们需要创建HTM1文件来作为登录和注册页。htm1复制代码1oginandRegistration*样式代码可以在这里添加*/1ogin1oginRegisterRegister然后，我们需要创建一个JaVaSCriPt文件来处理登录和注册的逻辑。在这个示例中,我们只是简单地阻止表单的默认提交行为，并

3、添加了一些基本的验证。javascript复制代码document.getE1ementById(,1ogin-form).addEvent1istener(,submit,function(event)event.preventDefau1t();/阻止表单提交varusername=document.getE1ementById(,1ogin-username).va1ue;varpassword=document.getE1ementById(,1ogin-password,).va1ue;if(!username!password)/验证用户名和密码是否为空a1ert(,Usernam

4、eorpasswordcannotbeempty.,);return;)/在这里，你需要添加更多的验证和与服务器的交互来验证登录信息。/这可能涉及到使用A：IAX或FetChAP工发送请求到服务器。)；document.getE1ementById(,register-form).addEvent1istener(,submitfunction(event)event.preventDefau1t();/阻止表单提交varusername=document.getE1ementById(,register-username,).va1ue;varemai1=document.getE1emen

5、tById(,register-emai1,).va1ue;varpassword=document.getE1ementById(,register-password,).va1ue;if(!username!emai1!password)/验证用户名、邮箱和密码是否为空a1ert(Usernameemai1jandpasswordcannotbeempty.,);return;)/在这里，你需要添加更多的验证和与服务器的交互来注册新用户。/这可能涉及到使用A：IAX或FetChAP工发送请求到服务器。)；请注意，这只是一个非常基本的示例，实际的登录和注册系统需要更多的安全性和验证。例如，密

6、码应该在服务器端进行加密存储，而不是明文存储。同样，用户名和电子邮件应该是唯一的，不能被其他人使用。你可能还需要考虑如何处理错误和异常，以及如何保护用户的数据隐私。实训六：设计简单的购物车1 .题目设计简单的购物车。2 .目的(1)掌握JSoN的使用方法。(2)掌握数据列表的动态生成方法。(3)掌握WebStorage的使用方法。(4)会利用所学知识设计简单的应用程序。3 .内容设计产品浏览页面，用户可以单击产品的“添加到购物车”链接将产品加入购物车，同时，显示购物车。可以对购物车中的产品执行增减或删除操作。4 .要求(1)针对一个具体应用，设计产品列表。(2)要动态生成产品及购物车数据列表。

7、(3)将购物车的数据存放在WebStOrage中。参考答案：在这个项目中，我们将使用JaVaSCript,HTM1和CSS来设计一个简单的购物车。我们将使用JSON来存储购物车的数据，并使用WebStorage来持久化这些数据。以下是一个基本的购物车实现：首先，我们需要创建HTM1页面来显示产品列表和购物车。htm1复制代码购物车#Cartwidth:300px;border:Ipxso1id#000;padding:10px;)#carttab1ewidth:100%;)#cartth,#carttdborder:Ipxso1id#000;padding:5px;text-a1ign:cen

8、ter;)产品列表1-这里将通过JaVaSCriPt动态添加产品购物车!-这里将通过JaVaSCriPt动态生成购物车添加到购物车然后，我们需要在ca.js文件中实现购物车的逻辑。我们将使用I。CaIStorage来存储购物车的数据。每次页面加载时，我们将从I。CaIStOrage中读取购物车的数据，并在页面上显示出来。同时，当用户点击添加到购物车按钮时，我们将产品添加到购物车中，并将购物车的数据保存到I。CaIStOrage中。当用户点击删除或增加按钮时，我们将更新购物车的数据，并再次保存到IoCa1StOrage中。javascript复制代码1etcart=JSON.parse(1oca

9、1storage.getItem(,cart,);functionaddToCart(productjquantity)1etproductInCart=cart.find(item=item.product=product);if(productInCart)ProductInCart.quantity+=quantity;e1secart.push(productjquantity);)updateCart();)functionUpdateCart()1etcartDiv=document.getEIementById(cart,);1ettab1e=document.CreateE1e

10、ment(tab1e);1etthead=document.createE1ement(,thead,);1ettbody=document.CreateE1ement(,tbody,);1etheaderRow=document.CreateE1ement(,tr,);headerRow.innerHTM1=产品数量;thead.appendChi1d(headerRow);tab1e.appendChi1d(thead);cart.forEach(item=1etrow=document.createE1ement(,tr,);row.innerHTM1=Jitem.product$ite

11、m.quantity减少;tbody.appendChi1d(row);)；tab1e.appendChi1d(tbody);cartDiv.innerHTM1=,;cartDiv.appendChi1d(tab1e);Ioca1Storage.set1tem(,cart,JSON.stringify(cart);)window.on1oad=function()1etproducts=document.getE1ementById(products);1etProductNames=,产品1,产品2产品3;/在这里添加你的产品名称productNames.forEach(name=1etproduct1i=document.CreateE1ement(,1i,);product1i.textcontent=name;product1i.addEvent1istener(,c1ickjfunction()addToCart(this.textcontentj1););products.appendChi1d(product1i);)；