《jquery web前端开发应用技术课程教学实践探索》由会员分享，可在线阅读，更多相关《jquery web前端开发应用技术课程教学实践探索（4页珍藏版）》请在金锄头文库上搜索。
1、 “jQuery Web 前端开发应用技术”课程教学实践探索 徐辉 高荣 广西财经学院信息与统计学院 摘 要： jQuery 是目前 Web 前端开发中常用的技术, 本文结合笔者的教学实践经验, 针对 jQuery Web 前端开发应用技术课程, 从课程定位、课程内容、教学方法、实验教学等方面对该课程的教学与实践进行探索和研究。关键词： jQuery; Web 前端开发; 教学实践; 作者简介：徐辉 (1965-) , 男 (汉族) , 广西博白人, 副教授, 研究生学历, 主要研究方向为数据挖掘、机器学习 () ;作者简介：高荣 (1979-) , 男 (汉族) , 山东潍坊人, 讲师, 硕
2、士, 主要研究方向为深度学习、数据挖掘。基金：广西高等教育教学改革工程项目 (2012JGA203, 2017JGB373) 1 引言由于互联网、移动互联网的的高速发展, 以及移动互联应用的普及、HTML5 的广泛应用, Web 技术从 Web 1.0 发展到 Web 2.0 时代, 网站中的网页内容往往是动态生成的, 页面表现形式更加精美、独特、绚丽, 为用户提供更好的使用体验, 交互性更强, Web 前端开发已经成为当前的热门技术之一。IT 行业对Web 前端开发人员的专业素质和专业能力提出了新的要求, 除了精通传统的HTML、CSS、Photo Shop 技术以外, 更需要熟练 Java
3、 Script、DOM、BOM、j Query、Ajax 等新技术1, Web 前端开发的难度相比以往的传统网站更大, 其在网站开发过程中的作用越来越重要。近几年来, 笔者对 Web 前端开发技术进行了探究和教学, 并在教学中对“j Query Web 前端开发应用技术”课程进行了多年的教学实践。本文结合笔者的实际教学经验对该课程的教学进行初步探讨。2 课程教学设计2.1 课程性质和定位j Query 是一个轻量级的 Java Script 脚本库, 其语法简单, 提供了各种函数, 应用 j Query 函数可以对网页非常简单地进行操作网页元素、处理事件、处理动画特效, 添加 Ajax 异步数
4、据交互等, 从而使页面动感。如今 j Query 已经成为非常流行的 Java Script 库。“j Query Web 前端开发应用技术”课程是我校本科和高职计算机专业都必修的一门核心能力课程, 48 学时, 以培养 Web 前端开发工程师岗位能力为导向, 掌握 j Query Web 前端编程技术, 具备构建 Web 框架和 Web 前端设计的能力。该课程的先修课程包括 Java 语言程序设计、数据库技术、网页制作, 后续课程有 PHP Web 应用开发、JSP Web 网站程序设计、Java EE 网站开发等 Web 后台开发课程。当然, 也可以把 j Query Web 前端开发应用
5、技术课程与 Web 后台开发课程安排在同一个学期开课, 这样, 学生对 j Query 的 Ajax 与 Web 后台程序的动态异步交换数据的理解更为透彻。由此可见, j Query Web 前端开发应用技术是连接 Web 前端界面与 Web 后台程序之间的重要支撑技术, 在 Web 应用中处于重要的地位。2.2 课程目标本课程根据 Web 前端开发工程师所需技能, 规划和设计本课程的教学目标和教学内容。通过本课程的学习, 使学生具备以下应用 j Query 开发 Web 前端交互网页的能力: (1) 掌握 Java Script 基本编程知识; (2) 掌握 j Query 选择器、过滤器的
6、应用; (3) 掌握访问和操作 HTML 元素的编程; (4) 掌握表单元素访问、事件处理、设置和获取 CSS 样式的编程; (5) 掌握动画特效的编程; (6) 掌握与后台应用进行异步数据通信的 Ajax 编程。2.3 课程内容设计在学习 j Query Web 前端开发技术课程之前, 学生已经学过 Java 语言、网页制作和 HTML、数据库技术课程。因此, 在构建本课程的教学内容时, 将重点放在j Query、j Query Mobile、j Query Easy UI 插件的编程知识和应用。本课程的教学内容包括以下 11 个知识结构: (1) Java Script 基础知识; (2)
7、 j Query 选择器; (3) j Query 访问和操作 HTML 元素; (4) j Query 表单访问编程; (5) j Query 事件处理; (6) j Query 设置和获取 CSS 样式; (7) j Query动画特效设计; (8) j Query 的 Ajax 编程; (9) j Query Mobile 基础; (10) j Query Easy UI 插件应用。为了让学生真正理解 j Query 知识, 掌握 j Query 技术的应用, 设计了一系列接近实际情境的实验项目, 包括以下实验项目:(1) Java Script 编程实验。目的是掌握 Java Scri
8、pt 基本语法、常用函数、内置对象和事件处理的编程。(2) 选择器和过滤器实验。目的是掌握 j Query 常用的基本选择器、层次选择器和过滤器的应用。(3) 访问和操作 HTML 元素实验。目的是掌握 j Query 获取和设置 HTML 元素, 增加和删除 HTML 元素及其属性的编程应用。(4) 表单访问编程实验。目的是掌握 j Query 访问表单元素的编程应用。(5) 设置和获取 CSS 样式实验。目的是掌握增加、删除、切换 HTML 元素的 CSS类的编程, 以及对 HTML 元素设置 CSS 样式属性的编程。(6) 动画特效实验。目的是掌握 j Query 常用的动画函数的应用。
9、(7) Ajax 编程实验。目的是掌握 j Query 的 Ajax 函数的应用, 以及异步访问数据库的编程。(8) j Query Mobile 设计实验。目的是掌握 j Query Mobile 组件的应用编程。(9) j Query Easy UI 应用实验。目的是掌握 j Query Easy UI 插件的应用编程。3 课程教学方法实施3.1 情境引入, 任务驱动j Query Web 前端开发应用技术课程比其它编程语言更容易学习, 它是一门实践性强、实用性强的课程。学生只需要具备了一些 Java 基础知识、HTML 基础、CSS 基础就可以学习这门课了。因此, 在教学过程中, 为了提
10、高学生学习 j Query 的兴趣, 采用“情境引入, 任务驱动”方式进行教学。对每一个模块知识结构, 从实际项目或者网上典型的电子商务网站中引入与模块知识相关的板块内容作为情境, 让学生知道将要介绍的模块知识的应用场景, 针对情境, 提出要解决的问题, 进行分析, 引出问题的解决思路、实现过程, 以及需要使用的 j Query 知识。最后对 j Query 知识点逐个展开介绍、归纳。另外, 教学中采用“任务驱动”教学法, 可以在课前向学生布置下一次课堂上应完成的任务, 让学生提前思考, 带着问题来听课, 老师在课堂讲授中针对任务中的难点问题, 给出提示或者部分程序代码, 使学生受到启发。这样
11、学生在老师引导下自主完成指定的任务, 形成“教学做”一体化教学模式2, 让学生在学中做、做中学, 深刻体会 j Query 技术带来的乐趣。通过一个个任务的驱动, 学生的知识不断地积累, 提升学生应用 j Query 的技能。3.2 案例教学j Query Web 前端开发应用技术课程非常适合应用案例教学法, 讲解 j Query知识之前先演示案例, 让学生先看到执行效果, 非常直观, 一目了然, 对案例有了感性认识。然后根据案例剖析涉及的知识点, 老师再进一步讲授相关知识。老师针对案例, 可以设计若干个有一定广度和深度的思考问题, 在课堂上展开讨论, 激发学生学习和讨论的热情。3.3 课程实
12、验和实训教学根据课程内容的知识结构, 安排了 9 个实验项目, 每个实验项目由多个任务组成。在设计实验任务时, 应考虑实验的综合性、实用性, 将多方面的 j Query知识整合到一个任务中完成。同时, 实验任务应与实际项目的子任务相类似。这样学生通过完成一系列实验任务, 不仅对 j Query 知识加深了理解, 而且把这些实验任务所做的网页文件和 j Query 脚本程序整合起来, 就可以构建成一个小型或者简单的 Web 网站前端界面和脚本程序, 从而让学生体会到实验的真实意图和最终的 Web 网站成果, 很有成就感。3.4 网络资源助力课程教学由于课程受到课时数的限制, 课堂教学很难面面俱到
13、, 利用网络资源学习 j Query 的扩展知识, 拓宽学生的知识面。一方面, 在学校的网络教学平台建立网络课程, 将预先录制的课程教学视频、教学资料、作业等发布出来, 供学生在课余时间反复学习。另一方面, 向学生推荐互联网中资源丰富的学习网站, 比如, 慕课网3 () 、极客学院 () 都有免费的 j Query 网络学习资源, 要求学生选择慕课网的免费 j Query 课程, 观看其教学视频、做测试题, 并将学习过程截图, 作为平时作业提交给老师, 收到较好的学习效果。4 结束语j Query Web 前端开发应用技术课程涉及到多方面的知识和技术, 是多种技术的综合。在教学中采用任务驱动、案例教学等教学方法和教学手段, 激发学生的学习主动性, 使学生快乐学习, 学生普遍认为这门课比 Java 语言编程课更容易学习, 更快地看到设计效果, 从而学生更乐于学习, 极大地提高了学生的技能和课程教学质量, 为后续其他专业课程的学习和网站开发工作打下良好的基础。参考文献1储久良.Web 前端开发技术课程教学改革与实践J.计算机教育, 2014 (14) :12-15. 2朱曼.基于 CDIO 理念的 Web 程序设计课程教学模式探索J.福建电脑, 2015 (7) :144-145. 3秦美峰.Web 前端编程实践性教学的探索J.福建电脑, 2015 (1) :117-119.
