任务4 构建注册登录模块.pptx

任务情景任务内容任务描述

任务情景首页功能已经完成，但还没有实现注册、登录功能。可是想要实现“注册、登录”功能该掌握哪些技术呢？在老师的指导下，小茹同学再次投入到紧张而充实的开发工作中。任务思考：想要实现“注册、登录”功能该掌握哪些技术呢？

任务内容1、了解表单控件作用。2、能够实现基本的表单。3、掌握表单多种类型控件使用。4、熟练运用表单控件常用属性。5、运用jQuery实现表单验证。

前导学习素材准备实施准备

前导学习jQuery是一个JavaScript库，是一个由JohnResig创建于2006年1月的开源项目。jQuery凭借着简洁的语法和跨平台的兼容性，极大简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript程序员的设计思路和编写程序的方式。1.jQuery是一个优秀的JavaScript库。2.jQuery极大地简化了JavaScript编程。3.jQuery很容易学习。名称大小描述说明jQuery.js约229KB完整无压缩版本，主要用于测试、学习和开发jQuery.min.js约31KB经过工具压缩，主要应用与产品和项目jQuery-vsdoc.js——相当于js库提供的方法的说明库，主要用于第三方js自动提示的功能

前导学习在本次任务中，我们需要掌握以下知识与技能：1.掌握HTML表单元素和其他元素的混合使用。2.灵活运用CSS样式，包括熟练掌握选择器、盒模型、浮动、定位的应用。3.能够编写脚本，即运用jQuery实现简单的逻辑验证。4.掌握数据交互功能的实现方法。以上内容请参考教材“任务4构建注册登录模块——前导知识”部分进行学习并完成练习

素材准备请在班群下载与本书配套的源码素材

结构编写样式编写实施过程特效编写

小茹通过思考，认为本节任务需要完成4个页面的开发1、登录和注册页面的图片素材。2、至少需要用户名+密码+qq号登陆控件。3、编写CSS代码完成样式。4、jQuery代码实现表单验证。思考

结构编写步骤1：编写头部(Head)代码。引入了相应的jquery文件、js文件和css样式，共3个文件。一般先新建后引入文件。这里采用先引入后创建的方法。需要注意，路径要准确。接下来，让我们跟随小茹的步伐，按照所确定的3个步骤构建注册登录模块。

结构编写HTML文档结构一般包括标记(Html)、头部(Head)、主体(Body)三部分。head标签用于定义文档的头部，它是所有头部元素的容器。其中，head元素可以引用脚本。“index.html”文件创建完毕后，请参考教材“任务4构建注册登录模块——任务实施”中“步骤1-1”——”步骤1-6“完成练习。

样式编写步骤1：在“css”目录下新建“login.css”文件，参考教材“任务3“党史学习教育网”首页制作——任务实施”中“步骤2-1”——”2-14“完成练习。运行代码，看到页面的颜值有所提升

特效编写步骤1：在“js”目录下新建名为“login”的js文件，再打开这个文件，开始编写相应脚本。步骤2：参考教材“任务3“党史学习教育网”首页制作——任务实施”中“步骤3-1”——“步骤3-11”完成练习。

知识总结技能总结任务总结职素总结互相评价

任务总结总结类别总结内容知识表单控件作用基本的表单表单多种类型控件使用运用表单控件常用属性运用jQuery实现表单验证技能用户名+密码+qq号登陆控件。编写CSS代码完成样式。jQuery代码实现表单验证。职素沟通协作独立思考迎难而上互相评价基础知识完成互相评价页面效果完成互相评价职素认知完成互相评价

任务评价任务名称：构建注册登录模块任务承接人：交付日期：项目要求评价标准成绩HTML结构完整（30分）1.页面布局合理，代码有缩进，且类名有意义（10分）2.页面效果无明显错乱（20分）?CSS样式代码部分（40分）1.CSS选择器书写正确，代码有缩进（15分）2.CSS样式功能完成（15分）3.CSS代码有新尝试（10分）?表单验证功能部分（30分）1.业务逻辑清晰，无语法错误，代码有缩进（20分）2.功能实现，无bug（10分）?总分?评价人评价级别（√）备注个人□优秀□良好□合格□不合格?老师□优秀□良好□合格□不合格?