HTML5与JavaScript教学大纲.docx
《HTML5与JavaScript教学大纲.docx》由会员分享，可在线阅读，更多相关《HTML5与JavaScript教学大纲.docx（19页珍藏版）》请在冰豆网上搜索。
HTML5与JavaScript教学大纲
西北师范大学计算机专业课程教学大纲
HTML5与JavaScript
一、说明
（一）课程性质
学院平台选修课程。
（二）教学目的
通过本课程的学习，使学生掌握HTML5，CSS及JavaScript综合应用，掌握网页开发技术的基础与核心，熟悉开发符合Web标准规范网页的技巧与方法，能够使用HTML5与JavaScript编写可交互Web应用程序，创建一些实用的Web应用。
（三）教学内容
教学内容主要包括利用HTML5制作网站，使用CSS3美化HTML5网页，JavaScript基础，JavaScript对象模型，JavaScript表单、样式与定位，HTML5画布，HTML5音频与视频，Web存储，Web离线应用，Workers多线程处理，Geolocation地理位置等
（四）教学时数
本课程教学时数共72学时，其中讲授36学时，实验36学时。
（五）教学方式
使用讲授加实践的方式进行教学，由浅入深地进行各种基础知识的讲解。
通过综合实例的训练让学生熟练掌握各种知识的实际应用。
讲授时需利用多种现代化媒体进行教学辅助。
二、本文
理论部分
上篇基础应用
第1章利用HTML5制作网站
教学要点：
本章使学生重点掌握HTML5与之前的版本相比的革命性变化，包括网页结构、设计风格及理念的变化，表单数据内容进化，了解Web技术的变化趋势，掌握简单的HTML5网站的规划与实现。
教学时数：
3学时
教学内容：
1.1HTML5时代的网页设计
1.2 HTML5带来的网页结构、设计风格及理念的变化
1.2.1 HTML4时代的几个特征
1.2.2Web标准与规范
1.2.3 一个典型的HTML5页面
1.3 HTML5带来的标签变化
1.3.1 什么是标签
1.3.2 标签的分类
1.3.3 近十几年来的HTML
1.3.4 Web的变化趋势
1.4 HTML5带来的表单数据内容进化
1.4.1 数据提交格式的变化
1.4.2 数据提交范围的变化
1.4.3 表单数据类型的增加
1.4.4 表单属性和验证方式的进化
1.4.5 文件上传控件和重复模型的应用
1.5 HTML5与SEO
1.5.1 技术趋势
1.5.2 搜索引擎服务商面临的问题
1.5.3 SEO从业人员面临的问题
1.5.4 SEO面临的几个社会问题
1.6 HTML5的开发环境与调试环境
1.6.1 HTML5编写工具
1.6.2 JavaScript开发
1.6.3 HTTP监控
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.1HTML基础
2.1.1HTML简介
2.1.2HTML特性
2.1.3HTML结构
2.1.4HTML语法
2.1.5HTML标签
2.1.6HTML属性
2.2XHTML基础
2.2.1XHTML结构
2.2.2XHTML语法
2.2.3XHTML类型
2.2.4DTD解析
2.2.5命名空间
2.3HTML5基础
2.3.1HTML5语法
2.3.2HTML5元素
2.3.3HTML5增加及废除的属性
2.3.4HTML5全局属性
2.3.5HTML5其他功能
第3章使用CSS3美化HTML5文档
教学要点：
本章重点使学生掌握使用CSS美化HTML5文档的技巧与方法，熟悉掌握常用页面布局的形式，能进行常用页面的布局设计与实现。
教学时数：
4学时
教学内容：
3.1CSS概述
3.1.1CSS发展简史
3.1.2CSS1.0和CSS2.0概述
3.1.3CSS3编码规范
3.1.4HTML5文档使用CSS3
3.2CSS美化页面
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.2.1定义列宽
3.3.2.2定义列数
3.3.2.3定义列间距
3.3.2.4定义列边框样式
3.3.2.5定义跨列显示
3.3.2.6定义列高度
3.3.2.7定义打印列
3.3.3设计盒布局
3.3.4设置盒布局格式
3.3.4.1定义自适应宽度
3.3.4.2定义列显示顺序
3.3.4.3定义列排列方向
3.3.4.4定义模块大小自适应
3.3.4.5消除空白
3.3.4.6定义对齐方式
3.3.5综合实战：
设计多列网页
第4章JavaScript基础
教学要点：
使学生了解JavaScript与Jscript、ECMAScript之间的关系与区别，掌握JavaScript的变量、条件语句、循环、函数与对象的使用方法。
教学时数：
4学时
教学内容：
4.1JavaScript概述
4.1.1什么是JavaScript
4.1.2Jscript与ECMAScript
4.1.3在网页使用JavaScript代码
4.1.4JavaScript标识符
4.1.5JavaScript语句
4.1.6JavaScript代码块
4.1.7JavaScript注释，单行注释与多行注释
4.1.8JavaScript中的数据类型与特殊的值
4.1.9转义符
4.2变量，条件语句，循环
4.2.1JavaScript变量
4.2.2JavaScript算术运算符
4.2.3JavaScript赋值运算符
4.2.4JavaScript比较运算符
4.2.5JavaScript逻辑运算符
4.2.6弱类型变量的运算
4.2.7条件语句
4.2.8JavaScript中的循环
4.3函数与对象
4.3.1JavaScript函数
4.3.2数组
4.3.3对象
4.3.4内部对象Math
4.3.5内部对象Date对象
4.3.6内部对象String对象
4.3.7JavaScript全局对象与全局函数
第5章对象模型
教学要点：
使学生重点掌握浏览器对象模型和文档对象模型的实际应用方法。
教学时数：
2学时
教学内容：
5.1BOM
5.1.1BOM体系结构
5.1.2BOM的作用
5.1.3History对象
5.1.4Location对象
5.1.5Navigator对象
5.2框架与多窗口通信
5.3浏览器检测
5.4DOM
5.4.1DOM结构与BOM的关系
5.4.2利用DOM结构访问HTML标签的方法
5.4.3获取和设置元素属性
5.4.4节点
5.5.5HTMLDOM
第6章表单、样式与定位
教学要点：
使学生重点掌握网页中表单对象的属性及使用方法，掌握表格及其事件处理方法，并能够进行表单、表格对象的样式设计与定位。
教学时数：
4学时
教学内容：
6.1forms对象
6.1.1form对象的集合
6.1.2form对象的属性
6.1.3form对象的专用的事件属性
6.1.4form对象的方法
6.2表单元素的方法
6.3表单元素的属性
6.4常用的一些js表单验证
6.5表格与事件
6.5.1JS访问表格
6.5.2表格对象的方法
6.5.3表格行对象的方法与属性与单元格对象的属性
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画布
教学要点：
使学生掌握使用HTML5canvas元素进行平面图形，文字及2D图形的绘制，进行图形的各种变换以及控制操作。
教学时数：
4学时
教学内容：
7.1认识HTML5canvas元素
7.1.1在页面中添加canvas元素
7.1.2Canvas如何绘制图形
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移动坐标空间
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音频与视频
教学要点：
使学生对于音频编解码器和视频编解码器进行了解，熟悉在HTML5页面文档中对于音频和视频的控制与播放。
教学时数：
4学时
教学内容：
8.1HTML5多媒体技术概述
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音频与视频相关事件
第9章Web存储
教学要点：
使学生重点掌握WebStorage和WebSQL的使用。
教学时数：
4学时
教学内容：
9.1认识WebStorage
9.1.1Cookie存储机制的优缺点
9.1.2为什么要用WebStorage
9.1.3WebStorage的优缺点
9.1.4浏览器支持概述
9.2使用WebStorage
9.2.1检查浏览器的支持性
9.2.2设置和获取数据
9.2.3防止数据泄露
9.2.4WebStorage的其他用法
9.2.5WebStorage事件监测
9.2.6实例1：
设计网页皮肤
9.2.7实例2：
跟踪localStorage数据
9.2.8实例3：
设计计数器
9.2.9综合应用：
Web应用项目实时跟踪
9.3WebSQL数据库
9.3.1WebSQL数据库概述
9.3.2使用WebSQL数据库
9.3.3实例1：
创建简单的本地数据库
9.3.4实例2：
批量存储本地数据
9.3.5综合应用：
WebStorage和WebSQL混合开发
第10章离线应用
教学要点：
使学生掌握如何搭建离线应用程序、进行离线缓存更新实现、JavaScript接口实现与离线存储事件监听。
教学时数：
2学时
教学内容：
10.1HTML5离线应用概述
10.1.1为什么要学习HTML5离线应用
10.1.2浏览器支持概述
10.2HTML5离线应用详解
10.2.1解析manifest文件
10.2.2搭建离线应用程序
10.2.3检查浏览器是否支持
10.2.4离线缓存更新实现
10.2.5JavaScript接口实现
10.2.6离线存储事件监听
10.3实战1：
缓存首页
10.4实战2：
离线编辑内容
10.5实战3：
离线跟踪
第11章Workers多线程处理
教学要点：
使学生重点掌握创建WebWorkers和与WebWorkers通信的方法。
教学时数：
2学时
教学内容：
11.1认识WebWorkers
11.1.1WebWorkers概述
11.1.2浏览器支持概述
11.1.3熟悉WebWorkers成员
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地理位置
教学要点：
使学生重点掌握使用GeolocationAPI获取当前地理位置，监视位置信息以及处理位置信息方法。
教学时数：
4学时
教学内容：
12.1位置信息概述
12.1.1为什么要学习Geolocation
12.1.2位置信息表示方式
12.1.3位置信息来源
12.1.4IP定位
12.1.5GPS定位
12.1.6Wi—Fi定位
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对象
12.3案例实战
12.3.1使用Google地图
12.3.2跟踪行走速度
实验部分
（一）基本要求
通过本部分的实验，使学生掌握使用HTML5与CSS制作符合Web标准网页的方法，使用JavaScript进行简易计算器及调查问卷的实现。
使用HTML5canvas进行绘画，能制作自己的网页音频播放器，使用Web存储实现页面计数器且记录页面状态，制作可以离线使用的日程提醒簿。
（二）实验项目总表
序号
实验项目名称
学时数
项目类别
项目类型
基础/设计/综合
必做/选做
1
使用HTML5制作个人网站
2
基础
必做
2
使用HTML5+CSS3.0设计博客主页
4
综合
必做
3
使用JavaScript实现简易计算器
4
设计
必做
4
读者问题调查表单实现
4
设计
必做
5
使用canvas绘制美丽花朵
2
设计
必做
6
使用canvas绘制动画时钟
4
设计
选做
7
打造自己的网页音频播放器
4
综合
必做
8
使用Web存储实现页面计数器且记录页面状态
4
基础
必做
9
制作可以离线使用的日程提醒簿
4
综合
选做
10
在后台线程中实现数据库的增删查改操作，实现数据的批量插入。
4
基础
必做
11
显示计算机或移动设备所在地的地图
4
综合
必做
（三）实验项目内容及要求
所有试验项目要求实验机房计算机连入互联网，且安装有最新版本的Safari、Chrome、Firefox以及Opera浏览器，且InternetExplorer浏览器需要在9.0版本以上。
三、参考书目
1、李东博，《HTML5+CSS3从入门到精通》，清华大学出版社，2013-6-1
2、[美]NicholasC.Zakas《JavaScript高级程序设计》，人民邮电出版社，2012-3-1第3版。
3.、[美]WesleyHales著，《HTML5和JavaScriptWeb应用开发》，人民邮电出版社，2013-11-1第一版。
4、秀野堂主蒋宇捷罗睿，《论道HTML5》，人民邮电出版社，2012-5-1
5、刘增杰臧顺娟何楚斌，《精通HTML5+CSS3+JavaScript网页设计》，清华大学出版社，2012-8-1第一版
参考手册：
CSS2.0参考手册，CSS3.0参考手册，JavaScript参考手册JavaScript核心参考，jQuery1.7中文手册，jQuery1.3参考手册，jQuery1.4参考手册W3CSchool，w3c标准html5手册,XHTML参考手册,XMLHttp中文参考手册
本课程使用教具和现代教育技术的指导性意见
无
升级会员 