《交互式前端开发实践》教案

1、教案2018年秋季学期）课程名称（全称）：交互式网站前端开发综合实践课程代码：课程计划总学时：96本学期学时：96所属学院：互联网+学院任课教师：教研室：网络教研室制订日期：年月日四川科技职业学院教学事业部制2018年7月20日交互式网站前端开发综合实践课程教案第1次课，2学时适用专业软件技术（Java开发）计算机网络技术（Web前端开发）课题绪论课程定位与作用教学目的了解本课程在本专业课程体系中的地位了解本课程知识总体结构重点与难点重点：本课程在专业课程体系中的作用难点：课程知识结构和建议如何学习教学设计概述案例引入一案例分析一引出技能项一引出知识点一讲解知识点一举例教学环境及资源要求Dre

2、amweaverCS6以上，能上网复习提问你觉得效果比较炫的网站是什么，打开看看授课要点软件技术（java开发）计算机网络技术（web前端开发）的课程体系介绍本课程在课程体系中所处的地位不同的工作岗位对本课程知识技能的需求本课程点知识结构建议如何学习本课程课外作业欣赏JS+JQ效果的网站，并从整体认知Js+JQ的作用和效果教学设计与教学内容时间分配教学内容学生活动教师活动实训设备10教师自我介绍课程考核说明无教师介绍多媒体201、请学生回答:你觉得你看到过的哪个网站比较炫，并告诉网址2、分析网站用到的前台技术（源代码查看器）3引出JS和JQ技术学生回答，并操作多媒体讲解多媒体，能上网251、工

3、作岗位分析【软件技术：前端岗位、后端岗位】【计算机网络技术（web前端开发）：前端岗位】2、课程体系分析（详见人才培养方案的思维导图）【软件技术（java开发方向）】【计算机网络技术（Web前端开发）方向】讲解多媒体201、js要学什么【语法、window、document、css特效、表弟验证与事件等，并举例】2、JQuery要学什么【语法、选择器、事件、效果（）】讲解多媒体，能上网10如何学习JS+JQ【（抄一修改一模仿一创新）n】，并以个人的经历为例解释提问讲解多媒体时间分配教学内容学生活动教师活动实训设备5知识回顾与作业布置回答教师总结与布置作业多媒体第2次课，2学时适用专业软件技术（

4、Java开发）计算机网络技术（Web前端开发）课题第一章HTML标记：HTML、XHTML、HTML5标签的使用教学目的掌握HTML标记、属性了解XHTML、HTML5新标签、绘画功能掌握HTML5表单标签重点与难点重点：常用标签、列表标签、表单标签、HTML新标签、链接难点：HTML画布教学设计概述案例引入一案例分析一引出技能项一引出知识点一讲解知识点一举例教学环境及资源要求DreamweaverCS6以上，能上网复习提问1、如何记忆繁多的HTML标签？2、HTML与XHTML区别是什么？授课要点HTML标记、属性举例，让学生有直接的感官认知HTML5文档结构、音频、视频、画布课外作业模仿课

5、程内容，CANVAS绘制圆教学设计与教学内容时间分配教学内容学生活动教师活动实训设备51、回忆上次课程内容【专业课程体系、地位与作用】HTML学什么，HTML5要学什么】学生回答提问与总结多媒体301、Web前端开发概述Web的发展Web特点及架构Web新技术的发展及应用Web3介绍Web新技术的应用2、HTML标签文字与段落图片与超链接列表标签表格标签表单标签注释标签3、XHTML基础讨论讲解与演示多媒体，能上网30HTML5标签HTML5文档结构HTML5新增的结构标签及属性HTML5音视频HTML5表单HTML5画布讨论讲解与演示多媒体，能上网时间分配教学内容学生活动教师活动实训设备:r

6、arjnsIfrtrlbbrnfaUa:srjdSlM/XftirnsSildpl划甘恤1畑沁环门卫煥.cv沪dMiifflb常tnimtlfliLr：!阿疸gtect*:偌:述口件门严“讹讯Fins苛“勺地爲0瓦ar；jMivlErl:MM$Jnr=lbmjimlirfndwCff阿iAIQjrrrdErt.rfudyffn十-：-WifH.fiQi；i-脚迪-血賊戊貼曲威!濒b輒邀1祁.ccdiilifwrt=MKd.tcUHfjcJK+wlMl:rfairfiJDrTlt&r：-g仙.fct-牺开盏:珂Si).-Hffllsil.曲帧1交直验也初贮曲阿r灯nzipih15学生提问或亲自上

7、台操作学生操作演示多媒体，能上网5知识回顾与作业布置回答教师总结与布置作业多媒体第3次课，4学时适用专业软件技术（Java开发）计算机网络技术（Web前端开发）课题第章JavaScript编稈基础:JavaScript基本语法之JavaScript介绍与基本语法教学目的了解JavaScript的作用与使用范围掌握JavaScript简单使用技巧重点与难点重点：JavaScrip啲作用与使用范围难点：JavaScript简单使用技巧教学设计概述案例引入一案例分析一引出技能项一引出知识点一讲解知识点一举例教学环境及资源要求DreamweaverCS6以上，能上网复习提问3、为什么我觉得学习的过程应

8、该是【（抄一修改一模仿一创新）n】？4、学习好JS+JQuery课程，你觉得你能从事什么岗位的工作？授课要点JS小程序举例，让学生有直接的感官认知JS代码的作用（使用）位置课外作业模仿课程内容，自己设计出能运行且有效果的JS小程序教学设计与教学内容时间分配教学内容学生活动教师活动实训设备102、回忆上次课程内容【HTML5新标签？强大画图功能】【JS要学什么,JQ要学什么】学生回答提问与总结多媒体时间分配教学内容学生活动教师活动实训设备601、JS简介脚本语言；可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript是一种轻量级的编程语言。J

9、avaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后，可由所有的现代浏览器执行。JavaScript很容易学习2、快速认知JS的使用：举例JavaScript:写入HTML输出JavaScript:对事件作出反应JavaScript:改变HTML内容JavaScript:改变HTML图像JavaScript:验证输入3、JavaScript与Java?Java（由Sun发明）是更复杂的编程语言。ECMA-262是JavaScript标准的官方名称。JavaScript由BrendanEich发明。它于1995年出现在Netscape中（该浏览器已停止更新），

10、并于1997年被ECMA（一个标准协会）采纳讨论讲解与演示多媒体，能上网801、JS代码的编写位置HTML中的脚本必须位于与标签之间脚本可被放置在HTML页面的和部分中标签中的JavaScript:【举例】2、if条件语句、循环语句【应用举例】3、JavaScript函数和事件把JavaScript代码放入函数中，就可以在事件发生时调用该函数或中的JavaScript:【举讨论讲解与演示多媒体，能上网时间分配教学内容学生活动教师活动实训设备例】4、案例：计算器制作5、夕卜部的JavaScript可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部JavaScript文件的文件

11、扩展名是js,如需使用外部文件，请在标签的src属性中设置该.js文件25学生提问或亲自上台操作学生操作演示多媒体，能上网5知识回顾与作业布置回答教师总结与布置作业多媒体第4次课，4学时适用专业软件技术（Java开发）计算机网络技术（Web前端开发）课题第一章JavaScript高级编程教学目的了解面向对象编程的含义；DOM模型掌握对象的创建与调用掌握常用内置对象的应用了解正则表达式重点与难点重点：内置对象难点：正则表达式教学设计概述案例引入一案例分析一引出技能项一引出知识点一讲解知识点一举例教学环境及资源要求DreamweaverCS6以上，能上网复习提问1说说如何能调用外部的JS?2、自定

12、义函数的编与、调用、返回情况？授课要点1面向对象编程2、DOM模型等3、内置对象、方法4、日期对象5、正则表达式课外作业在自己电脑上搭建开发环境，并实现小示例；脚本特效制作教学设计与教学内容时间分配教学内容学生活动教师活动实训设备10回忆上次课程内容【JS代码的编写位置】【调用外部JS的语法】【教师举例，在运行之前，学生回答预期结果】学生回答提问与总结多媒体701、面向对象概念10什么是面向对象？优点缺点是什么？【举例】面向对象的三大特征是什么？2、对象的创建与调用30直接定义并创建对象；使用对象构造器创建对象；两种方法的实例3、常用内置对象30数字对象Number。【举例】字符串对象Stri

13、ng。字符串处理函应用【举例】日期对象Date。【举例】计时器SetTimeout方法应用数组对象Array。【举例】布尔对象BooleanMath对象讨论讲解与演示多媒体，能上网751、DOM模型Document对象方法与属性运用document对象getElementBylD()、getElementName()方法的应用Window对象方法与属性运用Window对象的open()方法制作各种样式的广告窗口Histrory对象方法与属性运用2、类型转换【举例】parseInt()；讨论讲解与演示多媒体，能上网时间分配教学内容学生活动教师活动实训设备parseFloat()前者把值转换成整数

14、，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(NotaNumber)3、Javascript框架介绍什么是Javascript框架？当前流行框架有哪些？4、JavaScript网页特效文字特效：打字效果程序编写图片特效：不断闪烁的图片鼠标特效：屏蔽鼠标右键菜单特效：下拉菜单表单特效：控制用户输入字符个数15学生提问或亲自上台操作学生操作演示多媒体，能上网5知识回顾与作业布置回答教师总结与布置作业多媒体第5次课，4学时适用专业软件技术（Java开发）计算机网络技术（Web前端开发）课题第4章JQuery编程教学目的掌握JQuery

15、选择器掌握JQuery样式类操作掌握JQuery兀素内容操作掌握JQuery事件、动画了解JQuery与AJAX应用关系重点与难点重点：JQuery样式类操作、JQuery事件、动画难点：JQuery与AJAX应用；插件开发教学设计概述案例引入一案例分析一引出技能项一引出知识点一讲解知识点一举例教学环境及资源要求DreamweaverCS6以上，能上网复习提问1、内置对象有哪些？与自定义对象区别是？2、javascript与JQuer关系是什么？授课要点JQuery选择器、JQuery样式类操作、JQuery兀素内容操作、JQuery事件、动画对应的属性方法课外作业JQuery制作动画与特效：

16、显示与隐臧效果、滑动效果等70修改我的背晨色f/diediid=twDlp不褪改我的背呈色$t)dytion()#one).css(123backgroundf#001)j层次选择器【举例】4S6cripLtype=text/javastr-ipt$(docLflweHt).ready(/unction()/选取日*下的第一代弓pmn元幸，将宇倍大小改为lEpxalert2);divspan:first)*css(font-sizea30px1);】；Cfxi-ipLA讨论讲解与演示多媒体，能上网教学设计与教学内容时间教学内容学生活动教师活动实训设备分配回忆上次课程内容【什么是面向对象】学生回

17、答提问与总结多媒体15【创建对象、内置对象引用】【JS特效编程及运用】【教师举例，在运行之前，学生回答预期结果】过滤选择器【举例】表单选择器【举例】r时间分配教学内容学生活动教师活动实训设备通用语法：$(选择兀素)例子：$(”#showDiv”)或$(”.showDiv”)4、jQuery事件方法载入事件【举例】事件处理【举例】事件切换【举例】其他事件701、jQuery中兀素属性的操作设置元素属性【举例】删除元素属性【举例】2、jQuery中样式类的操作添加样式类【举例】移除样式类【举例】交替样式类【举例】3、jQuery中样式属性的操作读取样式属性【举例】设置样式属性【举例】设置元素偏移【

18、举例】4、jQuery中元素内容的操作操作HTML代码【举例】操作文本【举例】操作表单元素的值【举例】5、jQuery动画特效【举例】实现图层的隐藏、移动、滑动拉幕、淡入淡出等效果6、DOM操作节点操作、解决冲突7、jQuery与AJAX方法介绍jQuery中的AJAX方法、事件8、jQuery插件讨论讲解与演示多媒体，能上网15学生提问或亲自上台操作学生操作演示多媒体，能上网5知识回顾与作业布置回答教师总结与布置作业多媒体第6次课，2学时适用专业软件技术（Java开发）计算机网络技术（Web前端开发）课题第5章CSS样式运用教学目的掌握style样式属性动态改变边框颜色掌握className

19、类名属性动态改变按钮背景图片掌握display显示属性实现层或图片的隐藏显示和切换特效重点与难点重点：style样式属性动态改变边框颜色难点：className类名属性动态改变按钮背景图片教学设计概述案例引入一案例分析一引出技能项一引出知识点一讲解知识点一举例教学环境及资源要求DreamweaverCS6以上，能上网复习提问请实现复选框全选或全不选的效果，并讲解授课要点style样式属性动态改变边框颜色className类名属性动态改变按钮背景图片display显示属性实现层或图片的隐藏显示和切换特效课外作业制作列表菜单；布局案例制作教学设计与教学内容时间分配教学内容学生活动教师活动实训设备1

20、0回忆上次课程内容【JQuery选择器类型】【JQuery动画特效常见类型】【JQuery与AJAX】【JQuery操作CSS】学生回答提问与总结多媒体351、动态改变字体大小【举例】15DOM来设置和修改节点的CSS样式修改CSS样式的方法如下：nodeObject.style.cssProperty=newStyle;其中小odeObject为节点对象,cssProperty为CSS属性，newStyle为CSS属性的值。c黑Erwerty乂年门ext）邯并芾用冏任阿就：届性战述color设理文木的颜色伽t在一疔设呂贡有的字体属性fontSne设置元累的字体丈小fcntStyle设賈元歩的

21、宇体样式fontWeight设置字体的相细移入和移出事件的应用onmouseover和onmouseout事件可用于在用户的鼠标移至HTML兀素上方或移出兀素时触发函数。2、改变按钮背景特效【举例】20思考：能否通过通过改变样式backlmage能否实讨论讲解与演示多媒体，能上网时间分配教学内容学生活动教师活动实训设备现？onMouseOver=this.style.backgroundImage=url(images/back2.jpg);失败原因分析：当鼠标移到按钮上方时，余了图片要换以外，还应保留border、margin、padding等样式。解决方法如下：首先创建mouseOver和

22、mouseOut两种类样式使用className类属性进行切换。定义样式：定义mouseOverStyle和mouseOutStyle两种样式，在对应样式中编与所需要的全部属性。调用样式代码：在事件发生时改变为相应的样式代码：.mouseOverStylebackground-image:url(images/back2.jpg);color:#CC0099;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;.mouseOutStylebackground-image:url(images/back1

23、.jpg);color:#0000FF;border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;301、层的隐藏和显示【举例】30style.display属性操作兀素的显示状态Object.style.display=value讨论讲解与演示多媒体，能上网时间分配教学内容学生活动教师活动实训设备Value部分常用值播述none此元童不会皺显block此元衰第显示为块圾元盍，此元我怖右会带有换疔符Miro叽此元索幺戢显示为内联元素，元素丽廉没右换抒符“z-index:定义和用法z-index属性设置元素的堆

24、叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的z-index属性值。Z-index仅能在定位元素上奏效（例如position:absolute;）该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数则离用户更近，为负数则表示离用户更远Z-index可能的值fS描述auto默认.堆菱義序与父元罠相等.number设富元素的堆叠额序。inherit晟定应谡腿愛元蠶继承linden瞒性的值10学生提问或亲自上台操作学生操作演示多媒体，能上网5知识回顾与作业布置回答教师总结与布置作业多媒体第7次课，2学时适用专业软件技术（Java开发）计算机

25、网络技术（Web前端开发）课题第6章表单验证技术教学目的熟悉使用表单验证掌握文本框控件掌握使用DOM模型的层次关系访问兀素的方法掌握使用表单事件和脚本函数实现表单验证技术掌握DIV的innerHTML或innerText动态显示内谷；重点与难点重点：使用DOM模型的层次关系访问兀素；使用表单事件和脚本函数实现表单验证；使用表单验证；文本框控件；正则表达验证；难点：使用表单事件和脚本函数实现表单验证教学设计概述案例引入一案例分析一引出技能项一引出知识点一讲解知识点一举例教学环境及资源要求DreamweaverCS6以上，能上网复习提问CSS3能制作什么类型的动画？授课要点使用DOM模型的层次关系

26、访问兀素使用表单事件和脚本函数实现表单验证使用表单验证文本框控件课外作业编写用于验证用户注册页面的正则表达式，实现注册页面验证功能？教学设计与教学内容时间教学内容学生活动教师活动实训设备分配5回忆上次课程内容style样式属性动态改变边框颜色】【className类名属性动态改变按钮背景图片】【display显示属性实现层或图片的隐藏/显示和切换特效】学生回答提问与总结多媒体1、什么是表单验证【举例】10当用户在输入相关数据时，对输入的数据进行相关的验证，检查数据格式是否符合要求，在数据格式正确过后再上传至服务器。表单验证是javascript中的高级选项之一JavaScript用来在数据被送

27、往服务器前对HTML表单中的这些输入数据进行验证2、为什么要学表单验证【举例】15减轻服务器端的压力每一个元素包含一个拆分后的子串。例如对于讨论讲解与演示多媒体，能上网下面的字符串：如果以逗号为分隔符，可以将该字符串拆分为时间果401E1U实训设备教学内容学生活动教师活动分配一个数组，数组中的每一个元素包含一个不同的水1表单验证内容【举例】20以注册表单为例:1）是否为空3）是否为电子邮件4）是否在某个范围5）长度是否足够6）出生日期7）省市级联菜单多媒体，讲解与演示讨论能上网文耙口IM.CI*4-工JLOWBKHi密码不龍治交并旦最虫为B付，还蔓我两次循入的密码娶一致下練淘空且半龍有救字朋i

28、n航斟菱U9E*草最bn比翩I贬点滞井第艇丫金輦只血z.护胡站加昙叫F-电3；实或iE菽万戈雋蚩用厠豈涟用戸-牌腰备瞬直鼻辑云N竝力.壬雯1-独斗闭晔M1拾水师户旦上兗Ai玛或科U二海|fcjTTJ円土巴1卜円呂年月口不BE沖空.目平能遇H耳要求的爾2）是否为数字-irrt.T一不器为辛目翘胡転孫字砥B這澀半匪有敢宇字和下划线字符寻空旦SAJSA世逊構證重曲rsjiwdiiRri0Sih，口不斜空且包旨丄超*_hFWr砂址诅EM1;-:-二fjS4f.5tiJI兄JS回戶“J国耳江曲anIt说沟莹刚t务持说时间分配教学内容学生活动教师活动实训设备replace()方法replace。方法可以根

29、据需要将字符串中的String对象或者文字替换掉，形成一个新的字符串search()方法search()方法可以根据模式字符串进行查找。如果目标字符串中找到与模式匹配的第一个字串，则search()方法则返回该子串被找到的位置，否则返回-1。search()方法只接收一个参数，即需要查找的模式字符串2、文本框控件【举例】20文本框对象的常用属性、方法、事件文本框控件在网页设计中的使用是相当频繁的，当需要获得更好的用户体验时，就需要使用JavaScript代码来对其进行操作，如获取或修改其属性值，控制其获取焦点等等，接下来我们就对文本框的相关属性和方法进行说明。value属性在网页中我们可以使用

30、文本框的value属性来获取其值或者修改其值例如我们可以获取表单中id为txtEmail的值focus()方法在用户进行操作时，某一些时候需要自动的将某一个文本框设置为焦点，进行数据的输入，此时就可以使用focus()方法来让其获得焦点，以便用户对其进行数据的输入。例当文本框获取焦点时将文本框的数据清空，并将边框设为红色。10学生提问或亲自上台操作学生操作演示多媒体，能上网时间分配教学内容学生活动教师活动实训设备5知识回顾与作业布置回答教师总结与布置作业多媒体第8次课，2学时适用专业软件技术（Java开发）计算机网络技术（Web前端开发）课题第7章客户端数据请求技术教学目的了解WEBSeric

31、e掌握XML文件掌握HTTP通信机制掌握AJAX方法；了解熟悉JSON技术重点与难点重点：XML文件、AJAX方法难点：AJAX方法、JSON数据读取教学设计概述案例引入一案例分析一引出技能项一引出知识点一讲解知识点一举例教学环境及资源要求DreamweaverCS6以上，能上网复习提问表单验证的必要性？授课要点编写XML文件、读取AJAX方法、事件Javascript实现JSON对象数据读取课外作业什么是HTTP通信机制？教学设计与教学内容时间分配教学内容学生活动教师活动实训设备5回忆上次课程内容【需要验证的表单兀素有哪些？】【正则表达式】学生回答提问与总结多媒体30WEBService原理

32、、调用介绍HTTP通信机制建立TCP连接发起HTTP请求响应HTTP请求关闭TCP连接XML文件v?xmlversion=1.0encoding=UTF-8?vcitiesvname北京v/name北京位于华北平原北部，背靠燕山，毗邻天津市和河北省。北京的气候为典型的北温带半湿润大陆性季风气候。vweatherid=todayvdate2018年7月20日v/datevsituation多云OC/7Cv/temperature2018年8月3日v/date多云转晴/situation1C/10C讨论讲解与演示多媒体，能上网时间分配教学内容学生活动教师活动实训设备v/weatherv/cityvcityid=023vname重庆vweatherid=today2018年8月7日v/datevsituation晴15C/25C2018年8月13日v/date晴转阴v/situation15C/23C35XMLHttpRequest对象使用过程创建XMLHttpRequest对象向服务器发送请求获取响应内容XMLHttpRequest对象的使用举例：利用XMLHttpRequest对象取得XML数据：L取得餐厅