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

教案

（ 2018 年秋季学期）

课程名称（全称）：交互式网站前端开发综合实践

课程代码：

课程计划总学时：96 本学期学时：96

所属学院：互联网+学院教研室：网络教研室任课教师：

制订日期：年月日

四川科技职业学院教学事业部制

2018年7月20日

《交互式网站前端开发综合实践》

课程教案

第 1 次课，2学时

教学设计与教学内容

第2次课，2学时

教学设计与教学内容

第 3 次课，4学时

教学设计与教学内容

第4次课，4学时

教学设计与教学内容

第5次课，4学时

教学设计与教学内容

1、jQuery简介

2、jQuery的基本功能

●引用jQuery类库

●第一个jQuery程序

3、jQuery选择器

●基本选择器【举例】

●层次选择器【举例】

●过滤选择器【举例】

●表单选择器【举例】

第6次课，2学时

教学设计与教学内容

1、动态改变字体大小【举例】15’

DOM来设置和修改节点的CSS样式

修改CSS样式的方法如下：

nodeObject.style.cssProperty=newStyle;

其中，nodeObject 为节点对象，cssProperty 为

CSS属性，newStyle 为CSS属性的值。

移入和移出事件的应用

onmouseover 和onmouseout 事件可用于在用

户的鼠标移至HTML 元素上方或移出元素时触发函

数。

2、改变按钮背景特效【举例】20’

思考：能否通过通过改变样式backImage能否实

z-index:定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

➢元素可拥有负的z-index 属性值。

➢Z-index 仅能在定位元素上奏效（例如position:absolute;）

该属性设置一个定位元素沿z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远

➢Z-index可能的值

第7次课，2学时

教学设计与教学内容

1、什么是表单验证【举例】10’

当用户在输入相关数据时，对输入的数据进行相关的验证，检查数据格式是否符合要求，在数据

格式正确过后再上传至服务器。表单验证是

javascript中的高级选项之一，JavaScript 用来在

数据被送往服务器前对HTML 表单中的这些输入

数据进行验证

2、为什么要学表单验证【举例】15’

减轻服务器端的压力

每一个元素包含一个拆分后的子串。例如对于下面的字符串：

如果以逗号为分隔符，可以将该字符串拆分为

1、表单验证内容【举例】20’以注册表单为例：

1）是否为空

2）是否为数字

3）是否为电子邮件

4）是否在某个范围

5）长度是否足够

6）出生日期

7）省市级联菜单

第8次课，2学时

教学设计与教学内容

1.XMLHttpRequest对象使用过程

●创建XMLHttpRequest对象

●向服务器发送请求

●获取响应内容

●XMLHttpRequest对象的使用

举例：利用XMLHttpRequest对象取得XML数据:

2.JSON对象

●JSON的语法

●JSON在javascript中的应用

●利用javascript来取得JSON对象数据

举例：利用Javascript来取得JSON对象数据:

第9次课，4学时

教学设计与教学内容