《Web应用程序全栈开发》教学大纲(含章节知识点).docx

《Web应用程序全栈开发》教学大纲

课程编码：15031626课程类别：专业必修课

学分：4
学时：72第一局部相关说明
一、课程的性质
Web应用程序全栈开发是计算机相关专业的一门专业课程。通过教学,使学生掌握以HTML5 为主体，搭配CSS3、JavaScript、jQuery制作网页，再搭配jQuery Mobile制作手机APP应用等 专业知识，并较熟练的进行手机Web APP工程的设计与制作，初步具备构建分布式应用系统开 发和Web全栈开发的思想和能力，为成为一个Web应用全栈开发程序员打下良好的基础。该课 程的先修课程为《C语言程序设计》，为后续《混合式手机应用开发》、《毕业设计（论文）》 等课程打下坚实基础。 二、课程的基本要求（-）知识目标
本课程主要讲授用HTML5制作手机应用与Web应用的差异；HTML5语法、标签及组件元 素；HTML5制作的网页；CSS3样式表；HTML5+CSS3的综合应用；JavaScript的语法；jQuery Mobile常用的函数和应用；网页存储；HTML5的数据存储、插件、地图等应用；HTML5+jQuery Mobile手机应用的开发等知识。
（-）能力目标
通过本课程的学习，学生在掌握HTML5和jQuery Mobile的基础知识上，能把具体应用问 题抽象成手机可以处理的模型，并完成界面设计与功能实现，掌握手机Web APP制作的基本操 作技能，并能熟练应用于本地应用、网络应用中，并进行软件设计、管理、实施的能力。
（三）素质目标
具备能将课程能力应用到各类大创工程、创新创业活动、比赛中，在工程实践中提高的动手 能力和创新能力，初步具备手机应用开发程序员的素质。
三、教学重点、难点
（一）重点：HTML5应用开发平台及工具的应用；HTML5+CSS3的工程创立与应用； JavaScript的使用；jQuery Mobile的使用；数据存储等。
（二）难点：多线程、离线存储、定位与地图等。
四、教学方法与手段采用讲授与案例相结合、任务驱动与工程相配合的教学方法，通过课堂上多媒体理论精讲、
验证型（3）实验（训|）目的
掌握验证控件，掌握SQLite数据库的创立、记录的增加、查询。
（4）实验（训）学时
2学时。
（5）实验（训）内容
在实验四的基础上，为用户名加上必须输入的验证；在登录按钮的事件触发中判断输入的用 户名和密码与数据库表中的记录是否一致，并依次进行用户名错、密码错和正确的提示；正确跳 转到会员中心，表达出数据库表中的所有记录。
（6）实验（训）方式与考前须知
学生应在课上完成与题目相符的程序编写与调试任务，并按工整规范书写实验报告上交。
第八章Web应用系统综合开发——HTML5+PHP+MySQL （8学时） 一、本章的教学目的和要求
本章教学要求：通过学习，学生可以了解软件测试，熟悉软件工程管理和开发流程，掌握分 布式Web应用系统开发的整体架构设计和制作流程。
教学重点：开发流程中各环节的设计和代码编写。
教学难点：开发流程中各环节的衔接。
二、教学内容
1、软件工程管理软件工程管理概述
1.1 软件工程估算进度计划与人员组织
2、软件系统开发流程开发流程图
2.1 过程产物及要求过程说明
3、系统设计可行性分析
3.1 需求分析数据需求分析
3.2 系统/子系统设计（结构设计）软件（结构）设计
3.3 数据库（顶层）设计
4、Web应用系统整体架构基于PHP的分布式系统构架设计
4.1 基于PHP的分布式系统制作流程
5、工程的结构化实现及维护软件测试的基本概念
5.1 软件测试模型测试用例设计
5.2 黑盒测试白盒测试
6、工程运行结果计算机Web应用界面
6.1 手机Web APP应用界面手机Android APP应用界面
7、练习题
案例分析讨论、精心设计工程、以任务驱动为主线，以及课下以学生自主学习为主、老师辅导为 辅，完成预习、作业、拓展工程等教学任务，将课内课外学习结合，提高学生自主学习主动性, 实现理论和实践教学一体化，到达软件设计与制作的工程实践应用能力培养的目标。
五、学时分配总学时：72学时,其中理论时数为50学时,实验上机时数为22学时。
章（节）内容
理论学时
实验上机学时
总学时
第一章Web应用基础——如何进行 Web应用开发
2
2
4
第二章Web应用网页设计——HTML5
8
2
10
第三章Web应用网页美化——CSS3
6
2
8
第四章Web应用程序交互
JavaScript 语言
8
2
10
第五章Web应用程序设计
——PHP+MySQL
8
2
10
第六章Web应用程序桥梁——基于
REST 风格的 Web API
2
2
4
第七章移动Web应用程序开发
——HTML5+jQuery Mobile
10
8
18
第八章Web应用系统综合开发一一
HTML5+PHP+MySQL
6
2
8
合计
50
22
72
六、考核要求
（-）考核性质：考查。
（二）考核方式：实践。
（三）成绩评定：平时成绩（测验、实验、课程阅读、课堂笔记等）占30%,期末考试成绩占70% o
七、教材与参考书（一）教材
1 .使用教材
2 .主要参考书第二局部课程内容
第一章Web应用基础——如何进行Web应用开发（4学时）一、本章的教学目的和要求
本章教学要求：通过学习，学生可以了解分布式Web应用系统的基本概念和常用开发工具, 熟悉软件开发的主要过程模型；结构化需求分析与设计的要求、内容和方法；面向对象方法学的 优点、面向对象建模的三个模型和测试方法及UML的应用，掌握Photoshop的基本功能、操作 方法。
教学重点：相关工具软件的使用、Photoshop常用功能。
教学难点：软件架构的概念、软件工程管理。
二、教学内容
1、什么是分布式Web应用系统几个基本概念
2.1 分布式Web应用系统开发工具
2、PhotoshopPhotoshop软件入门
2.2 Photoshop软件高级调整Photoshop案例应用
3、软件工程软件过程
3.2 结构化需求分析与设计面向对象方法学与UML
4、练习题第二章 Web应用网页设计——HTML5 （10学时）
一、本章的教学目的和要求
本章教学要求：通过学习，学生可以了解HTML5新增和废除的标记；了解文字、段落的效 果设置；了解表格的相关操作；了解音频、视频的添加与播放。熟悉HTML5标记；熟悉超级链 接的锚记。掌握HTML5的语法及文件结构；掌握列表标记、超级链接的应用；掌握表单元素的 应用；掌握图片、Flash的应用。
教学重点：HTML5文件结构、列表、超级链接、效果设置、表单及表单元素；图片的设置 及编辑；音频、视频、动画、Flash的使用。
教学难点：HTML5的语义标记、超级链接的应用、表单分组、控制音视频。
二、教学内容
1、HTML5 基础HTML基本概念
1.1 HTML 概述HTML标记格式
1.2 HTML5文件基本结构网站的建设
2、HTML5常用标记HTML5文件结构与语义标记
2.1 HTML属性与事件文字与段落标记
2.2 列表标记图片标记
2.3 内联框架注释与特殊符号
3、在网页中嵌入多媒体内容HTML5多媒体技术概述
3.1 加载多媒体资源＜311或0＞与＜^€160＞标记的方法和事件
4、超链接什么是超链接
4.1 超链接的用法网页中的特殊超链接
5、表格表格的基本标记
5.1 表格及单元格属性合并单元格
6、表单创立表单
6.1 表单的输入组件表单的列表组件
6.2 表单的选择组件表单的按钮组件
6.3 表单的其他组件表单的验证
6.4 表单的应用实例一会员注册
7、练习题第三章Web应用网页美化——CSS3 （8学时）
一、本章的教学目的和要求
本章教学要求：通过学习，学生可以了解CSS样式选择器、渐变的应用，了解列表，掌握 方框、边界与边框、定位的相关操作，掌握CSS样式表的应用，掌握文字样式、背景的设置， 掌握滤镜、过渡、变换、动画的相关操作。
教学重点：CSS样式、文字样式、背景的设置、方框、边界、边框、间距、组件定位、滤镜、 过渡、变换、动画等。
教学难点：CSS样式选择器、渐变、超链接与定位、动画的编写。
二、教学内容
1＞ CSS基础了解 CSS
1.1 创立CSS样式表
2、CSS语法CSS语法——类型
2.2
css语法一
一背景
2.3
css语法一
一区块
2.4
css语法一

2.5
CSS语法一
一边框
2.6
css语法一
一列表
2.7
css语法一
定位
2.8
CSS语法一
一扩展
2.9
css语法一
过渡
3、练习题

第四章Web应用程序交互JavaScript语言（10学时）
一、本章的教学目的和要求
本章教学要求：通过学习，学生可以了解JavaScript的语法结构，掌握常用的内置对象、函 数、JavaScript事件、BOM、DOM编程、画布应用。
教学重点：常用的内置对象、函数、BOM、DOM编程等。
教学难点：用JavaScript控制表单元素和CSS元素。
二、教学内容
1> JavaScript的语法和语句JavaScript 基本常识
1.1 数据类型和变量运算符和表达式
1.2 语句
2、JavaScript 函数函数的使用
2.1 JavaScript的内置函数
3、JavaScript 对象自定义对象
3.1 内置对象浏览器对象
4、JavaScript DOM文档对象模型
4.1 操作HTML元素JavaScript 事件
5、练习题
6、实验一【基本语法和表单编程 实验】（1）实验（训）工程简介
该工程为必做工程。编写HTML5网页，在JavaScript中要求用户在文本框中输入用户名，提 交时，假设文本框为空，那么取消提交；利用随机函数，设计验证码，并利用隐藏控件，设计判断用 户输入的验证码；利用文本框、单项选择钮、复选框和隐藏控件设计填空题、单项选择题或判断题、多项选择 题。
（2）实验（训）类型
验证型（3）实验（训）目的
掌握JavaScript的基本语法，以及表单编程。
（4）实验（训）学时
2学时。
（5）实验（训I）内容
本实验由三个工程构成：工程一、要求用户在文本框中输入用户名，提交时，假设文本框为空, 那么取消提交（使用form对象的onSumbit事件）。工程二、利用随机函数，设计验证码，再利用 隐藏控件，设计判断用户输入的验证码。工程三、试题库的设计：利用文本框和隐藏控件设计填 空题。利用单项选择钮和隐藏控件设计单项选择题或判断题。利用复选框和隐藏控件设计多项选择题。
（6）实验（训）方式与考前须知
文件名为学生名字的汉语拼音全拼或首字母；文件标题为学生中文姓名；运行时，输入姓名 处应输入学生中文姓名。
第五章 Web应用程序设计——PHP+MySQL （10学时）一、本章的教学目的和要求
本章教学要求：通过学习，学生可以了解Web应用程序开发的基础知识，熟悉PHP语言的 语法和表单操作，掌握MySQL数据库的管理及用PHP操作MySQL数据库的流程。
教学重点：PHP基础语法及应用、PHP语言的$_GET和$_POST方法应用、MySQL数据库管 理、PHP操作MySQL数据库等。
教学难点：用PHP语言和MySQL数据库进行Web应用软件开发。
二、教学内容
1> Web应用开发基础网络应用基础架构
1.1 Web应用开发简介HTTP协议基础
1.2 PHP概况PHP Web应用环境配置
2、PHP语言基础PHP基础语法
2.1 PHP 生成 HTML变量的概念
2.2 内置变量字符串
2.3 数组流程控制语句
3、Web应用数据采集与表单操作表单的概念
3.1 $_GET和$_POST 方法表单数据处理
4、PHP数据库操作PHP数据库操作概述
4.1 MySQL数据库管理表记录更新
4.2 PHP操作MySQL数据库流程MySQL数据库操作
5、练习题6、实验二【PHP和数据库实验】
（1）实验工程简介
该工程为必做工程。通过创立MySQL数据库及表，并通过PHP代码完成对表的连接、增加、 修改、删除、查询、表达等相关操作。
（2）实验类型综合型
（3）实验目的掌握PHP连接和操作数据库的方法、掌握SQL语句的应用等。
（4）实验内容编写一个php页面l.php,能够按照学号、姓名、院系查询mysql数据库test中student表里的记
录数，结果分页显示，每页显示15条记录。student表结构见下表:
字段名
含义
数据类型
数据长度
是否主键
是否允许为空
SJd
学号
varchar
11
是
否
S_student
姓名
varchar
40
否
是
department
院系
Varchar
40
否
是
设计一个使用AJAX技术的PHP页面2.php,上面提供有一个院系查询选项表，当用户改变该选 项表中的选项时，在页面下方响应显示出院系和所指定数值的全部学生（即在PHP网页中实现数 据库查询操作代码局部的响应刷新）。响应代码放在页面2.php中。
（5）实验方式与考前须知学生应在课上完成与题目相符的程序编写与调试任务，并按工整规范书写实验报告上交。
第六章Web应用程序桥梁——基于REST风格的Web API （4学时） 一、本章的教学目的和要求
本章教学要求：通过学习，学生可以了解Web API的基础知识，熟悉JSON数据格式和REST 服务编程，掌握Ajax技术和XMLHttpRequest对象的操作。
教学重点：用Ajax读取服务器文件及与服务器端进行交互。
教学难点：JSON数据格式应用和REST服务编程。
二、教学内容Web API 基础
1.1 RESTFUL Web API 简介JSON 简介
1.2 REST服务编程2、基于Ajax的API的请求
2.1 Ajax 与 XMLHttpRequest 对象异步通信超时控制
3、练习题第七章移动Web应用程序开发——HTML5+jQuery Mobile（ 18学时）
一、本章的教学目的和要求
本章教学要求：通过学习，学生可以了解Cookie,掌握Web Storage的应用，了解jQuery 的基本结构与应用，了解掌握jQuery Mobile UI组件，了解jQuery Mobile事件机件，了解 IndexedDB> Web SQL。熟悉jQueiy Mobile网页导航、事件触发,初始化、加载、切换等页面事 件和点击、滑动、滚动等触摸事件。掌握数据的增删改查，熟悉文本操作，掌握表格排序、日期、 日历等插件的相关操作。
教学重点：localStorage和sessionStorage使用，jQuery Mobile UI组件及网页导航，页面事 件和触摸事件，数据的增删改查。相关的插件的基本应用。
教学难点：网页的离线应用，ThemeRoller快速应用布景主题，各类事件的应用，文本操作。 相关的插件的高级应用。
二、教学内容1、移动应用开发模式
1.1 移动应用开发的三种模式Native应用与Web应用比拟
1.2 智能手机浏览器基于Web的应用开发
2、网页存储Web StorageWeb Storage 的分类
2.1 检测浏览器是否支持Web Storage使用 sessionStorage
2.2 使用 localstorageWeb Storage 应用
3、HTML5本地数据库IndexedDB 的使用
3.1 Web SQL Database 的使用4> jQuery 和 jQuery Mobile
4.1 jQueryjQuery Mobile
5、jQuery Mobile 事件页面事件
5.1 触摸事件6、jQuery Mobile 插件
6.1 表格排序插件tablesorter滑动导航菜单插件mmenu
6.2 日期时间插件DateBox文件上传插件ajaxfileupload
7、练习题
8、实验三【登录/注销和计数器 实验】（1）实验（训）工程简介
该工程为必做工程。编写HTML5网页，在JavaScript中用localStorage、sessionStorage与 Application关联，记录用户登录次数计算。
（2）实验（训）类型
验证型（3）实验（训）目的
掌握JavaScript的写法、用法；掌握localStorage的使用；掌握按钮的触发。
（4）实验（训）学时
2学时。
（5）实验（训）内容
用编辑器新建一个HTML5网页文件；增加登录和注销两个按钮、输入框和提交按钮和用于 显示的元素；单击“登录”按钮，显示“提交”按钮及显示的元素；单击“提交”按钮，显示姓名和登 录次数；单击“注销”按钮，注销登录内容，显示登录按钮。
（6）实验（训）方式与考前须知
文件名为学生名字的汉语拼音全拼或首字母；文件标题为学生中文姓名；运行时，输入姓名 处应输入学生中文姓名。
9、实验四【登录界面设计实验】（1）实验（训I）工程简介
该工程为必做工程。用HTML5+jQuery Mobile设计用户登录界面。
（2）实验（训）类型
设计型（3）实验（训）目的
掌握jQuery Mobile UI组件的使用；掌握通过DIV+CSS进行页面布局。
（4）实验（训）学时
2学时。
（5）实验（训I）内容
新建登录网页，并设置背景颜色；在网页中加入登录的图标、用户名和密码的输入框及登录 按钮；在文件下方加水平线和版权信息，并设置颜色；内容均要居中对齐表达。
（6）实验（训）方式与考前须知
学生应在网页最下面加显示作者的版权信息，要求有学生的中文姓名和学号。
10、实验五【登录界面验证 实验】（1）实验（训I）工程简介
该工程为必做工程。使用JavaScript创立数据库，并增加记录，再判断输入的用户名和密 码是否正确，及多条记录的表达。
（2）实验（训）类型