职业技术学院《Web数据交互技术及响应式开发技术》教学大纲.docx

PAGE6/NUMPAGES6

《Web数据交互技术及响应式开发技术》教学大纲

课程基本信息

课程代码

课程名称（中/英）

Web数据交互技术及响应式开发技术

WebDataInteractionandResponseDevelopmentTechnology

开课学院

智能制造与信息工程学院

适用专业

软件技术

学分

3分

总学时

48学时

理论学时

24

实践学时

24

课程性质

必修

课程类别

专业课

考核方式

考查

先修课程

Web网页制作基础、JavaScript程序设计、轻量级前端框架

选用教材

《Web前端开发中级（下册）》，工业和信息化部教育与考试中心主编，电子工业出版社，2019.8

网络课程

无

课程简介

本课程是软件技术专业学生的专业必修课程。课程教学目标是通过本课程的学习，使学生能综合运用Ajax和Bootstrap进行Web前端开发，能熟练使用Bootstrap框架，能正确解决Web前端开发过程中的问题。本课程要求学生理解并学会Web数据交互技术、Ajax工作原理、页面性能优化技术、Socket通信、Bootstrap响应式页面开发技术等，掌握利用Ajax和Bootstrap进行Web前端开发的方法和技巧。本课程将依据应用型人才培养定位，在教学中融入课程思政，实现立德树人的人才培养目标。

课程目标

课程目标1：课程思政目标——将课程思政元素融入网页内容中，在网页上通过文本、图片、动画等元素展示与课程思政有关的信息；引导学生形成积极向上的世界观、价值观和人生观，并树立版权意识。

课程目标2：web前端开发能力提升——提高学生的Web数据交互技术及响应式开发技术能力，具体要求如下：

1）Web数据交互技术：能创建并运行Web前后端数据交互页面，能使用JavaScript及jQuery操作iframe，能开发AJAX应用实例。

2）响应式开发技术：熟练掌握Bootstrap框架中的栅格布局及各种组件的使用方法和技巧，能利用Bootstrap框架搭建简单页面。

课程目标3：综合素养培养——培养思辨能力，理解web前端开发技术性，具备一定的代码优化设计能力。坚定学生的民族自信，会用国产软件HBuilder设计开发Web数据交互及响应式网页作品。

课程内容与教学要求

（一）Web数据交互技术概述

1.知识点和教学要求

（1）了解Web的概念

（2）了解Web数据交互技术，包括AJAX、iframe、WebSocket等

2.能力培养要求

（1）能理解Web前后端数据交互的原理

（2）能创建并运行Web前后端数据交互页面

（二）HTTP概述

1.知识点和教学要求

（1）了解HTTP的概念、消息结构及主要特点

（2）熟悉HTTP的通信过程

（3）熟悉HTTP常见的状态码

2.能力培养要求

（1）能识别HTTP常见的状态码

（2）能根据HTTP状态码给出对应解决方案

（三）AJAX与iframe

1.知识点和教学要求

（1）了解AJAX异步通信的工作原理

（2）了解iframe异步通信的工作原理

2.能力培养要求

（1）能使用JavaScript及jQuery操作iframe

（2）能开发AJAX应用实例

（四）页面性能优化技术

1.知识点和教学要求

（1）熟悉Cookie的创建、使用和销毁的方法

（2）掌握页面性能优化的方法

2.能力培养要求

（1）能创建、使用和销毁Cookie

（2）能进行页面性能优化

（五）Socket通信

1.知识点和教学要求

（1）了解Socket通信的概念、机制及过程

（2）掌握使用Socket开发聊天室功能的方法

2.能力培养要求

（1）能使用PHP实现Socket服务端

（2）能使用jQuery实现Socket客户端

（3）能测试聊天室功能

（六）Bootstrap概述

1.知识点和教学要求

（1）了解Bootstrap的构成、功能及开发工具

（2）掌握Bootstrap安装和配置的方法

2.能力培养要求

（1）能下载、安装和配置Bootstrap

（2）能利用Bootstrap框架搭建简单页面

（七）Bootstrap的基本架构

1.知识点和教学要求

（1）了解响应式开发的概念、流程及布局结构

（2）熟悉Bootstrap的栅格布局

2.能力培养要求

（1）能使用Bootstrap实现栅格基本布局

（2）能使用Bootstrap实现水平布局和垂直布局

（3）能使用Bootstrap实现栅格排序和偏移

（八）Bootstrap的样式

1.知识点和教学要求

（1）了解Bootstrap的作用

（2）熟悉常见的Bootstrap样式，包括媒体对象、文本、列表、表格、图片、表单、辅助样式等

2.能力培养要求

（1）能使用Bootstrap对媒体对象、文本进行