《JavaScript程序设计案例教程》教案 第1章 JavaScript入门.docx

PAGE10

PAGE10

PAGE3

PAGE3

《JavaScript程序设计案例教程》

教案

课时分配表

章序

课程内容

课时

备注

1

JavaScript入门

4

2

基本语法

6

3

数组

4

4

函数

6

5

面向对象

6

6

BOM

6

7

DOM

4

8

事件

4

9

Ajax

6

10

浏览器存储

4

11

正则表达式

4

12

Vue

6

13

网页版贪吃蛇

4

合计

64

课题

JavaScript入门

课时

4课时（180min）

教学目标

知识目标：

（1）了解JavaScript的起源、应用和特点

（2）理解JavaScript和ECMAScript的关系

（3）了解编辑器和浏览器相关知识及其应用

（4） 掌握JavaScript基础应用

（5） 能够使用JavaScript实现简单的网页功能

能力目标：

（1）能够运用合适的开发工具进行JavaScript代码的编写、运行和调试

（2）掌握在HTML中以不同方式引入JavaScript的方法，并能根据实际项目需求进行正确选择

（3）能够通过触发事件（如按钮点击事件等）实现网页的交互效果，提升用户体验

（4）具备解决浏览器兼容性问题的能力，确保开发的网页能在各种浏览器上正常运行

素质目标：

（1） 通过对计算机技术的了解，增强探索意识

（2） 树立正确的价值观，提高媒介素养

教学重难点

教学重点：HTML引入JavaScript的三种方式及外链优势，常用输出语句，基础表达式，开发工具（编辑器、浏览器），编辑器编写代码，浏览器运行调试代码

教学难点：JavaScript与ECMAScript的关系及完整组成，不同方式引入JavaScript的场景选择，处理不同编辑器和浏览器的兼容性问题

教学方法

问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请同学们打开常用的浏览器（如Chrome、Firefox等），浏览至少三个不同类型的网站，如新闻网站、购物网站、社交网站等。在浏览过程中，仔细观察网页上的各种交互元素并记录，然后在APP上发表记录。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

新课预热

【教师】自我介绍，与学生简单互动，介绍课程内容、考核标准等

【学生】聆听、互动

【教师】讲解JavaScript是网页前端开发的必备技术，增强学生的学习兴趣

HTML、CSS和JavaScript是网页前端开发的必备技术。使用HTML和CSS可以制作静态的没有交互性的网页，而要使网页具有交互效果，就必须要使用JavaScript来实现。我们每天都在使用电脑或手机浏览各种各样的网页，可以说浏览网页已经成为我们生活的一部分，这些与我们紧密相关的网页的实现都离不开JavaScript。

【学生】聆听、记录、理解

问题导入

【教师】提出以下问题：

同学们，当我们在浏览网页时，经常会遇到一些很酷炫的效果和便捷的交互体验，这些丰富的交互功能是如何实现的呢？它们背后又运用了哪些技术呢？

【学生】聆听、思考、举手回答

传授新知

【教师】通过学生的回答，引入新知，讲解JavaScript的基础知识，JavaScript的开发工具，并编写第一个JavaScript程序

1.1JavaScript介绍

1.1.1JavaScript的起源

1995年，NetScape（网景）公司决定开发一种与Java搭配使用且语法上类似辅助脚本的语言，其公司员工BrendanEich（布兰登·艾奇）仅花费10天时间便设计出了该脚本语言的原型。这门脚本语言最初命名为Mocha，1995年9月改名为LiveScript，同年12月，NetScape公司与Sun公司组成的开发联盟为了让这门语言搭上Java这门编程语言的热度，将其临时改名为JavaScript。但实际上Java和JavaScript是两门完全不同的语言，除了在语法上有些类似之外，并没有太多的共同点。

……（详见教材）

1.1.2JavaScript的应用

JavaScript是一种可以嵌入到网页文件中的编程语言，可以实现网页的交互效果，使用户体验更好。例如，当用户在网页上填写手机号和验证码时，可以在浏览器端通过JavaScript进行校验，如果不符合校验规则，可以直接给出用户提示，而不必提交到服务器，这不仅给了用户好的体验，还减轻了服务器端的压力。

?【教师】利用多媒体展示“百度搜索框”和“网页上的轮播图效果”图片（详见教材），并进行讲解

当我们在百度搜索框中输入关键词时，搜