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

下载本文档

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

文档简介

第三次任务（预备知识：第四、五章；分值：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'];//在这

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

温馨提示

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

最新文档

评论

0/150

提交评论