国开JavaScript程序设计形考作业3试题及答案.docx
第三次任务(预备知识：第四、五章；分值：10分；选做：2选1；需辅导教师评分)实训五：设计登录和注册页1 .题目设计登录和注册页。2 .目的(1)掌握表单域的引用方法。(2)掌握常用控件的基本方法。(3)掌握事件的处理方法。(4)理解COokie的原理和应用。3 .内容针对所设计的系统，设计登录和注册页。4 .要求(1)登录界面能对输入的数据进行验证，要求非空，且符合一定的要求。(2)登录时，用条件判断输入的数据，模拟登录判断。登录成功后，用COOkie保存登录状态，并进入主页。(3)主页含有注销功能。(4)注册界面能对数据进行验证。如电子邮件、电话号码等要符合格式要求。参考答案：这是一个涉及到前端和后端设计的问题，前端部分需要使用HTM1和JaVaSCriPK后端部分需要使用至少一种服务器端语言如NOde.js,PythOn等，和一个数据库管理系统。因为这里的限制，我将提供一个基于JaVaSCriPt的前端实现，但请注意这只是一个示例，并且在实际环境中需要与后端服务配合使用。首先,我们需要创建HTM1文件来作为登录和注册页。htm1复制代码<!DOCTYPEhtm1><htm1><head><tit1e>1oginandRegistration<tit1e><sty1e>*样式代码可以在这里添加*/<sty1e><head><body><divid="1ogin-container"><h2>1ogin<h2><formid=",1ogin-form,><inputtype="text"id="1ogin-username"p1aceho1der="Username"required><inputtype=,password"id="1ogin-password"p1aceho1der="Password"required><buttontype="submit,>1ogin<button><form><div><divid="register-container"><h2>Register<h2><formid="register-form"><inputtype="text"id="register-username"P1aceho1der=nUsername"required><inputtype=,emai1"id="register-emai1"p1aceho1der="Emai1"required><inputtype=,password"id="register-password"p1aceho1der="Password"required><buttontype="submit,>Register<button><form><div><scriptsrc=,script.js,><script><body><htm1>然后，我们需要创建一个JaVaSeriPt文件来处理登录和注册的逻辑。在这个示例中，我们只是简单地阻止表单的默认提交行为，并添加了一些基本的验证。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('Usernameorpasswordcannotbeempty.,);return;)/在这里，你需要添加更多的验证和与服务器的交互来验证登录信息。/这可能涉及到使用AJAX或FetchAPI发送请求到服务器。)；document.getE1ementById(,register-form').addEvent1istener(,submit,function(event)event.preventDefau1t();/阻止表单提交varusername=document.getE1ementById(,registerusername,).va1ue;varemai1=document.getE1ementById(,register-emai1,).va1ue;varpassword=document.getE1ementById(,registerpassword,).va1ue;if(!username!emai1!password)/验证用户名、邮箱和密码是否为空a1ert('Usernamejemai1,andpasswordcannotbeempty.,);return;)/在这里，你需要添加更多的验证和与服务器的交互来注册新用户。/这可能涉及到使用AJAX或FetchAPI发送请求到服务器。)；请注意，这只是一个非常基本的示例，实际的登录和注册系统需要更多的安全性和验证。例如，密码应该在服务器端进行加密存储，而不是明文存储。同样，用户名和电子邮件应该是唯一的，不能被其他人使用。你可能还需要考虑如何处理错误和异常，以及如何保护用户的数据隐私。实训六：设计简单的购物车1 .题目设计简单的购物车。2 .目的(1)掌握JSoN的使用方法。(2)掌握数据列表的动态生成方法。(3)掌握WebStorage的使用方法。(4)会利用所学知识设计简单的应用程序。3 .内容设计产品浏览页面，用户可以单击产品的“添加到购物车”链接将产品加入购物车，同时，显示购物车。可以对购物车中的产品执行增减或删除操作。4 .要求(1)针对一个具体应用，设计产品列表。(2)要动态生成产品及购物车数据列表。(3)将购物车的数据存放在WebStorage中。参考答案：在这个项目中，我们将使用JaVaSCript,HTM1和CSS来设计一个简单的购物车。我们将使用JSON来存储购物车的数据，并使用WebStorage来持久化这些数据。以下是一个基本的购物车实现：首先，我们需要创建HTM1页面来显示产品列表和购物车。htm1复制代码<!DOCTYPEhtm1><htm1><head><tit1e>购物车<tit1e><sty1e>#Cartwidth:300px;border:Ipxso1id#000;padding:10px;)#carttab1ewidth:100%;)#cartth,#carttdborder:Ipxso1id#000;padding:5px;text-a1ign:center;)<sty1e><head><body><h1>产品列表<h1><u1id=,products,><1-这里将通过JaVaSCriPt动态添加产品<u1><h1>购物车<h1><divid=',cart,>><!-这里将通过JaVaSCriPt动态生成购物车<div><buttononc1ick=',addToCart(,product1,j'10')”>添加到购物车<button><scriptsrc=",cart.js,><script><body><htm1>然后，我们需要在回t.js文件中实现购物车的逻辑。我们将使用I。Ca1Storage来存储购物车的数据。每次页面加载时，我们将从I。CaIStOrage中读取购物车的数据，并在页面上显示出来。同时，当用户点击添加到购物车按钮时，我们将产品添加到购物车中，并将购物车的数据保存到IOCaIStorage中。当用户点击删除或增加按钮时，我们将更新购物车的数据，并再次保存到I。CaIStOrage中。javascript复制代码1etcart=3S0N.parse(1oca1storage.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.CreateE1ement('tab1e');1etthead=document.createE1ement(,thead,);1ettbody=document.createE1ement(,tbody,);1etheaderRow=document.CreateE1ement(,tr,);headerRow.innerHTM1='<th>产品<th><th>数量<th><th><th>'thead.appendChi1d(headerRow);tab1e.appendChi1d(thead);cart.forEach(item=>1etrow=document.createE1ement(,tr,);row.innerHTM1='<td>Jitem.product</tdxtd>$item.quantity<td><td><buttononc1ick=',subtractFromCart(,$item,product,),>减少<button><td>'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(,c1ick'function()addToCart(this.textcontent1););products.appendChi1d(product1i);)；
