JQuery+Ajxa教案课程设计.doc

PAGE 课程教案 课题名称 JQuery+Ajxa应用开发 授课班级 授课学时 2 授课地点 授课形式 讲授 参考教材 《jQuery和Ajax实战教程》 教学资源 / --菜鸟教程 教学目标 知识目标： 1、理解Jquery的本质及宗旨。 2、熟悉Jquery的编码风格。 3、使用Jquery实现简单的显示隐藏网页元素效果。 技能目标： 1、熟练掌握Jquery页面加载事件 2、熟悉Jquery的编码风格。 3、使用Jquery实现简单的显示隐藏网页元素效果。 素质目标： 学生可以基本熟悉Jquery开发环境，编写第一个Jquery程序。 教学重点与难点 教学 重点 熟练掌握Jquery页面加载事件，熟悉Jquery编码风格 教学 难点 Jquery实现网页元素的显示隐藏效果。 学情分析 本次课程为Jquery课程的第一个课，需要给学生揭开Jquery神秘的面纱，让学生知道Jquery就是一个JS库，理解使用Jquery的作用，熟悉Jquery的编码风格，主要需要让学生体会到Jquery相对原生JS比较，可以书写更少的代码完成功能。 教学过程 课前： 准备有关Jquery相关的介绍，方便在课程开始给学生介绍，让学生对Jquery产生兴趣。 课中： 1、理解Jquery的本质及宗旨。 2、熟悉Jquery的编码风格。 3、使用Jquery实现简单的显示隐藏网页元素效果。 课后： 布置预习任务，预习下一章，让学生学习Jquery中的选择器和筛选器有哪些。 教学反思 本次课程为第一次课，主要起到的作用是引导作用，让学生真正体会到Jquery的魅力即可，不需要太多复杂的案例，要让学生对后面的Jquery学习充满兴趣即可，课程案例需要简单，让学生用最少的代码完成实际功能，增强学生的成就感和求知欲。 教学设计 课程名称 使用Jquery优化Web页面 授课对象 授课章节 第 1 章 Jquery框架简介 第 1-3 节 Jquery简介，Jquery第一个程序，Jquery实现显示隐藏元素。 本次课学时数 2学时 教学目的 理解Jquery的本质及宗旨。 熟悉Jquery的编码风格。 使用Jquery实现简单的显示隐藏网页元素效果。 教学分析 本次课程为Jquery课程的第一个课，需要给学生揭开Jquery神秘的面纱，让学生知道Jquery就是一个JS库，理解使用Jquery的作用，熟悉Jquery的编码风格，主要需要让学生体会到Jquery相对原生JS比较，可以书写更少的代码完成功能。 教学重点与 难点 重点 熟练掌握Jquery页面加载事件，熟悉Jquery编码风格 难点 Jquery实现网页元素的显示隐藏效果。 教学方法 与手段 ●课堂讲授 ●讲解例题 ●电子课件 ○案例分析 ○小组讨论 ○文字材料 ●提问 ●音像材料 其他： 现场编码演示 教学过程设计 教学内容 教学过程 设计意图 时间分配 课程导入 （1）展示Jquery制作Tab选项卡效果，同时展示Jquery代码 （2）展示Jquery制作幻灯片效果，及其实现代码 （3）提问学生，如果不使用Jquery而直接使用原生JS去实现效果，是否需要更多更复杂的代码才行。 通过案例的展示及案例对应源代码的展示，让学生体会到使用JQ是可以让代码变少，提高编程开发效率的，让学生理解JQ的作用。 5分钟 课程介绍 1.介绍课程的授课计划、考核标准 （1）平时成绩占30%，包括出勤、作业、提问，课堂项目（作业）、综合项目完成情况等。 （2）考试成绩占70%。 2.提问为什么JS已经可以编写网页脚本了，为什么还需要类似Jquery这样的库。 3.提问Jquery和JavaScript有关系吗。 4.根据学生对提问的回答，介绍JavaScript相关基本概念和特点。 （1）jQuery 是一个 JavaScript 库， jQuery 极大地简化了 JavaScript 编程。 （2）jQuery的宗旨： Write less,do more。 （3）学习JQuery需要具备的基础知识： 【1】HTML; 【2】CSS;【3】JavaScript 介绍整门课程的授课即考核计划并通过提问和介绍大致了解使用Jquery的作用和好处。 15分钟 Jquery开发环境和运行环境的选择 （1）告知学生，Jquery仍然属于网页脚本，那么开发工具没有什么要求，之前大家写HTML,Javascript习惯用什么开发工具编写，现在仍然可以使用之前的工具，并告知，在课堂上老师选择Hbuilder进行开发。 （2）打开Jquery的官网，以及在百度搜索一些资源