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

《国开JavaScript程序设计形考作业3试题及答案.docx》由会员分享，可在线阅读，更多相关《国开JavaScript程序设计形考作业3试题及答案.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然后，我们需要创建一个JaVaSeriPt文件来处理登录和注册的逻辑。在这个示例中，我们只是简单地阻止表单的默认提交行为，并

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

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

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

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

7、购物车的数据存放在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:center;

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

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

10、t(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$item.q

11、uantity减少;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=产品产品2产品31；/在这里添加你的产品名称productNames.forEach(name=1etproduct1i=document.CreateE1ement(,1i,)；product1i.textcontent=name;product1i.addEvent1istener(,c1ickfunction()addToCart(this.textcontent1););products.appendChi1d(product1i);)；