《HTML与JavaScript》课程教学大纲

1、 PAGE PAGE 10HTML5与JavaScript 教学大纲一、说明（一）课程性质 学院平台选修课程。（二）教学目的通过本课程的学习，使学生掌握HTML5，CSS及JavaScript综合应用，掌握网页开发技术的基础与核心，熟悉开发符合Web标准规范网页的技巧与方法，能够使用HTML5与JavaScript编写可交互Web应用程序，创建一些实用的Web应用。（三）教学内容教学内容主要包括利用HTML5制作网站，使用CSS3美化HTML5 网页，JavaScript基础，JavaScript对象模型，JavaScript表单、样式与定位，HTML5画布， HTML5音频与视频， Web存

2、储，Web 离线应用， Workers多线程处理，Geolocation地理位置等（四）教学时数 本课程教学时数共72学时，其中讲授36学时，实验36学时。（五）教学方式 使用讲授加实践的方式进行教学，由浅入深地进行各种基础知识的讲解。通过综合实例的训练让学生熟练掌握各种知识的实际应用。讲授时需利用多种现代化媒体进行教学辅助。二、本文理论部分上篇 基础应用第1章 利用HTML5制作网站教学要点： 本章使学生重点掌握HTML5与之前的版本相比的革命性变化，包括网页结构、设计风格及理念的变化，表单数据内容进化，了解Web技术的变化趋势，掌握简单的HTML5网站的规划与实现。教学时数： 3学时教学内

3、容：1.1 HTML5时代的网页设计1.2HTML5带来的网页结构、设计风格及理念的变化 1.2.1HTML 4时代的几个特征 1.2.2 Web标准与规范 1.2.3一个典型的HTML5页面1.3HTML5带来的标签变化 1.3.1什么是标签 1.3.2标签的分类 1.3.3近十几年来的HTML 1.3.4Web的变化趋势1.4HTML5带来的表单数据内容进化 1.4.1数据提交格式的变化 1.4.2数据提交范围的变化 1.4.3表单数据类型的增加 1.4.4表单属性和验证方式的进化 1.4.5文件上传控件和重复模型的应用1.5HTML5与SEO 1.5.1技术趋势 1.5.2搜索引擎服务商

4、面临的问题 1.5.3SEO从业人员面临的问题 1.5.4SEO面临的几个社会问题1.6HTML5的开发环境与调试环境 1.6.1HTML5编写工具 1.6.2JavaScript开发 1.6.3HTTP监控 1.6.4调试环境1.7案例：HTML5网站建设 1.7.1需求的提出 1.7.2需求分析 1.7.3系统分析 1.7.4工程实现第2章 从HTML、XHTML到HTML5教学要点： 本章重点使学生了解HTML，XHTML的结构，语法等特性，了解HTML5增加及废除标签，熟悉HTML5新增标签的功能及其使用方法。教学时数： 2学时教学内容：2.1 HTML基础 2.1.1 HTML简介

5、2.1.2 HTML特性 2.1.3 HTML结构 2.1.4 HTML语法 2.1.5 HTML标签 2.1.6 HTML属性 2.2 XHTML基础 2.2.1 XHTML结构 2.2.2 XHTML语法 2.2.3 XHTML类型 2.2.4 DTD解析 2.2.5命名空间 2.3 HTML5基础 2.3.1 HTML5语法 2.3.2 HTML5元素 2.3.3 HTML5增加及废除的属性 2.3.4 HTML5全局属性 2.3.5 HTML5其他功能第3章 使用CSS3美化HTML5文档教学要点： 本章重点使学生掌握使用CSS美化HTML5文档的技巧与方法，熟悉掌握常用页面布局的形式

6、，能进行常用页面的布局设计与实现。教学时数： 4学时教学内容：3.1 CSS 概述 3.1.1 CSS发展简史 3.1.2 CSS1.0和CSS2.0概述 3.1.3 CSS3编码规范 3.1.4 HTML5文档使用CSS33.2 CSS美化页面 3.2.1 字体属性 3.2.2 文本高级样式 3.2.3 段落属性 3.2.4 图片样式 3.2.5 图文混排 3.2.6 背景相关属性 3.2.7 边框3.3 网页布局 3.3.1设计多列布局 3.3.2设置多列显示样式 定义列宽 定义列数 定义列间距 定义列边框样式 定义跨列显示 定义列高度 定义打印列 3.3.3设计盒布局 3.3.4设置盒布

7、局格式 定义自适应宽度 定义列显示顺序 定义列排列方向 定义模块大小自适应 消除空白 定义对齐方式 3.3.5综合实战：设计多列网页第4章 JavaScript基础教学要点： 使学生了解JavaScript与Jscript、ECMAScript之间的关系与区别，掌握JavaScript的变量、条件语句、循环、函数与对象的使用方法。教学时数： 4学时教学内容：4.1 JavaScript 概述 4.1.1 什么是 JavaScript 4.1.2 Jscript与 ECMAScript 4.1.3 在网页使用JavaScript代码 4.1.4 JavaScript标识符 4.1.5 JavaS

8、cript 语句 4.1.6 JavaScript 代码块 4.1.7 JavaScript 注释，单行注释与多行注释 4.1.8 JavaScript中的数据类型与特殊的值 4.1.9 转义符4.2 变量，条件语句，循环 4.2.1 JavaScript 变量 4.2.2 JavaScript 算术运算符 4.2.3 JavaScript 赋值运算符 4.2.4 JavaScript 比较运算符 4.2.5 JavaScript逻辑运算符 4.2.6 弱类型变量的运算 4.2.7 条件语句 4.2.8 JavaScript 中的循环4.3 函数与对象 4.3.1 JavaScript 函数

9、4.3.2 数组 4.3.3 对象 4.3.4 内部对象Math 4.3.5 内部对象Date对象 4.3.6 内部对象String对象 4.3.7 JavaScript全局对象与全局函数第5章 对象模型教学要点： 使学生重点掌握浏览器对象模型和文档对象模型的实际应用方法。教学时数： 2学时教学内容：5.1 BOM 5.1.1 BOM体系结构 5.1.2 BOM的作用 5.1.3 History对象 5.1.4 Location 对象 5.1.5 Navigator对象5.2 框架与多窗口通信5.3 浏览器检测5.4 DOM 5.4.1 DOM结构与BOM的关系 5.4.2 利用DOM结构访问

10、HTML标签的方法 5.4.3 获取和设置元素属性 5.4.4节点 5.5.5 HTML DOM第6章 表单、样式与定位教学要点： 使学生重点掌握网页中表单对象的属性及使用方法，掌握表格及其事件处理方法，并能够进行表单、表格对象的样式设计与定位。教学时数： 4学时教学内容：6.1 forms对象 6.1.1 form 对象的集合 6.1.2 form 对象的属性 6.1.3 form 对象的专用的事件属性 6.1.4 form 对象的方法6.2 表单元素的方法6.3 表单元素的属性6.4 常用的一些js表单验证6.5 表格与事件 6.5.1 JS访问表格 6.5.2表格对象的方法 6.5.3表

11、格行对象的方法与属性与单元格对象的属性 6.5.4事件 6.5.5给事件注册多个函数 6.5.6事件对象 6.5.7事件传播冒泡与捕获 6.5.8标准化事件对象，兼容性处理6.6 样式与定位 6.6.1修改元素的外观 6.6.2获取最终应用到元素上的CSS样式 6.6.3访问外部样式文件中的CSS样式 6.6.4关于元素尺寸的获取(这里只讨论块元素的情况) 6.6.5关于页面窗口尺寸的获取 6.6.6关于元素边框大小的获取 6.6.7关于元素坐标位置的获取 6.6.8最简单的拖动效果下篇 高级应用第7章 HTML5画布教学要点： 使学生掌握使用HTML5 canvas元素进行平面图形，文字及2

12、D图形的绘制，进行图形的各种变换以及控制操作。教学时数： 4学时教学内容：7.1认识HTML5 canvas元素 7.1.1在页面中添加canvas元素 7.1.2 Canvas如何绘制图形 7.1.3认识Canvas坐标 7.1.4何时不用Canvas 7.1.5如果浏览器不支持Canvas 7.1.6检测浏览器支持 7.2绘制简单图形 7.2.1绘制直线 7.2.2绘制矩形 7.2.3绘制圆形 7.2.4绘制三角形 7.2.5清空画布 7.3绘制贝塞尔曲线 7.3.1绘制二次方贝塞尔曲线 7.3.2绘制三次方贝塞尔曲线 7.4图形的变换 7.4.1保存与恢复Canvas状态 7.4.2移动

13、坐标空间 7.4.3旋转坐标空间 7.4.4缩放图形 7.4.5矩阵变换 7.5图形的组合与裁切 7.5.1图形的组合 7.5.2裁切路径 7.6更多的颜色和样式选项 7.6.1应用不同的线型 7.6.2绘制线性渐变 7.6.3绘制径向渐变 7.6.4绘制图案 7.6.5设置图形的透明度 7.6.6创建阴影 7.7绘制文字 7.7.1绘制填充文字 7.7.2文字相关属性 7.7.3绘制轮廓文字 7.7.4测量文字宽度 7.8操作与使用图像 7.8.1向Canvas中引入图像 7.8.2改变图像大小 7.8.3创建图像切片第8章 HTML5音频与视频教学要点： 使学生对于音频编解码器和视频编解码

14、器进行了解，熟悉在HTML5页面文档中对于音频和视频的控制与播放。教学时数： 4学时 教学内容：8.1 HTML5多媒体技术概述 8.1.1关于编解码器 8.1.2音频编解码器 8.1.3视频编解码器 8.2浏览器支持概述 8.2.1用JavaScript检测音频格式支持情况 8.2.2用JavaScript检测视频格式支持情况 8.3在HTML5中播放音频 8.3.1认识audio元素 8.3.2播放音频 8.4在HTML5中播放视频 8.4.1认识video元素 8.4.2播放视频 8.5音频与视频相关属性、方法与事件 8.5.1音频与视频相关属性 8.5.2音频与视频相关方法 8.5.3

15、音频与视频相关事件 第9章 Web存储教学要点： 使学生重点掌握WebStorage 和 WebSQL的使用。教学时数： 4学时教学内容：9.1认识WebStorage 9.1.1 Cookie存储机制的优缺点 9.1.2为什么要用WebStorage 9.1.3 WebStorage的优缺点 9.1.4浏览器支持概述 9.2使用WebStorage 9.2.1检查浏览器的支持性 9.2.2设置和获取数据 9.2.3防止数据泄露 9.2.4 WebStorage的其他用法 9.2.5 WebStorage事件监测 9.2.6实例1：设计网页皮肤 9.2.7实例2：跟踪localStorage数

16、据 9.2.8实例3：设计计数器 9.2.9综合应用：Web应用项目实时跟踪 9.3 WebSQL数据库 9.3.1 WebSQL数据库概述 9.3.2 使用WebSQL数据库 9.3.3 实例1：创建简单的本地数据库 9.3.4 实例2：批量存储本地数据 9.3.5 综合应用：WebStorage和 WebSQL混合开发第10章 离线应用教学要点： 使学生掌握如何搭建离线应用程序、进行离线缓存更新实现、JavaScript接口实现与离线存储事件监听。教学时数： 2学时教学内容：10.1 HTML5离线应用概述 10.1.1为什么要学习HTML5离线应用 10.1.2浏览器支持概述 10.2

17、HTML5离线应用详解 10.2.1解析manifest文件 10.2.2搭建离线应用程序 10.2.3检查浏览器是否支持 10.2.4离线缓存更新实现 10.2.5 JavaScript接口实现 10.2.6离线存储事件监听 10.3实战1：缓存首页 10.4实战2：离线编辑内容 10.5实战3：离线跟踪第11章 Workers多线程处理教学要点： 使学生重点掌握创建WebWorkers和与WebWorkers通信的方法。教学时数： 2学时教学内容：11.1认识WebWorkers 11.1.1 WebWorkers概述 11.1.2浏览器支持概述 11.1.3熟悉WebWorkers成员

18、11.2使用WebWorkers 11.2.1检查浏览器支持性 11.2.2创建WebWorkers 11.2.3与WebWorkers通信 11.3案例实战 11.3.1使用多线程实现后台运算 11.3.2在后台过滤值 11.3.3多任务并发处理 11.3.4在多线程之间通信 11.3.5使用线程技术计算Fibonacci数列 11.3.6使用多线程绘图 11.4综合应用：模拟退火算法 11.4.1认识模拟退火算法 11.4.2编写应用主页面4 11.4.3编写worker.js 11.4.4与WebWorkers通信第12章 Geolocation地理位置教学要点： 使学生重点掌握使用Ge

19、olocationAPI获取当前地理位置，监视位置信息以及处理位置信息方法。教学时数： 4学时教学内容：12.1位置信息概述 12.1.1为什么要学习Geolocation 12.1.2位置信息表示方式 12.1.3位置信息来源 12.1.4 IP定位 12.1.5 GPS定位 12.1.6 WiFi定位 12.1.7手机定位 12.1.8自定义定位 12.2使用GeolocationAPI 12.2.1检查浏览器支持性 12.2.2获取当前地理位置 12.2.3监视位置信息 12.2.4停止获取位置信息 12.2.5隐私保护 12.2.6处理位置信息 12.2.7使用position对象 1

20、2.3案例实战 12.3.1使用Google地图 12.3.2跟踪行走速度实验部分（一）基本要求通过本部分的实验，使学生掌握使用HTML5与CSS制作符合Web标准网页的方法，使用JavaScript进行简易计算器及调查问卷的实现。使用HTML5 canvas进行绘画，能制作自己的网页音频播放器，使用Web存储实现页面计数器且记录页面状态，制作可以离线使用的日程提醒簿。（二）实验项目总表序号实验项目名称学时数项目类别项目类型基础/设计/综合必做/选做1使用HTML5制作个人网站2基础必做2使用HTML5+CSS3.0设计博客主页4综合必做3使用JavaScript实现简易计算器4设计必做4读者问题调查表单实现4设计必做5使用canvas绘制美丽花朵2设计必做6使用canvas绘制动画时钟4设