请用微信扫码

扫二维码

关闭

第19课网页交互与特效（二） 教案（表格式）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

资源下载
资源下载
  1. 二一教育资源

第19课网页交互与特效（二） 教案（表格式）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

2024-04-02 06:31 公共课程 32.55K [教案]

资源简介

课题 网页交互与特效（二）
课时 2课时（90 min）
教学目标 知识技能目标： （1） 熟悉JavaScript语言的基础知识 （2） 能够使用Dreamweaver CC为网页引入JS文件，并编写JavaScript代码 思政育人目标： （1） 了解我国古代优秀画作，体会画家的匠心精神，培养钻研精神。 （2） 了解我国古代计算方法，增强民族自豪感。
教学重难点 教学重点：JavaScript语言的基础知识 教学难点：使用Dreamweaver CC为网页引入JS文件，并编写JavaScript代码
教学方法 情景模拟法、问答法、讨论法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（10 min）→传授新知（23 min）→课堂抢答（10 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解JavaScript 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望
考勤
（2 min） 【教师】使用文旌课堂APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况
问题导入
（10 min） 【教师】提出以下问题： 请说说JavaScript有哪些优点？ 【学生】思考、举手发言 JavaScript简单易学，功能完备且轻便易读，在网页中使用它能够在完善网页功能的同时不给网页增加太多负担。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容
传授新知
（23 min） 【教师】通过学生的发言，引入新的知识点，介绍JavaScript 一、JavaScript简介 【教师】提出以下问题： 什么是JavaScript？ 【学生】分析、思考、举手发言 JavaScript是一种可以嵌入到网页文件中的编程语言，可以实现网页的交互与特效，使用户体验更好。 （详见教材） 二、JavaScript语言基础 1．数据类型 【教师】提出以下学习任务： JavaScript中最基本的数据类型有哪些？ 【学生】查阅资料、思考、理解 JavaScript中最基本的数据类型有数值型、字符串型、布尔型、空值、未定义值。 （1）数值型（number）。JavaScript中的数字都属于数值型数据，数字可以带有小数点，也可以是整数。此外，还可以使用科学计数法表示数值型数据。例如，5e3表示5乘以10的3次方，即5000；5e-3表示5乘以10的-3次方，即0.005。 （2）字符串型（string）。包含在英文的双引号或单引号之中的字符（包括数字、标点符号等），即为字符串。例如，"JavaScript语言基础"与'qwer1234'都是字符串型数据。 （3）布尔型（boolean）。布尔型数据只有true与false两个值，它们对应的数值型数据分别为1与0。布尔型数据常用于JavaScript的控制结构。 （4）空值（null）。空值即null，它是一个特殊的值，用于定义空的或不存在的引用。例如，当引用一个没有定义的变量时，即返回一个空值。 （详见教材） 【课堂互动】教师提出以下问题： 空值是不是字符串或者0？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 空值不等于空字符串（""）或0。 【课堂互动】教师提出以下问题： 如何区别null与undefined？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 null与undefined的区别在于，null表示一个变量赋予了空值，而undefined表示变量未赋值。 2．变量 【教师】展示JavaScript中变量的语法，帮助学习理解 在JavaScript程序运行过程中，随时可能产生一些临时数据，这些数据将保存在内存单元中，变量就是指一个已经命名的存储单元。可以说，变量就是一个存储数据的容器。 （1）声明变量。在JavaScript中，使用var关键字声明变量。 当声明多个变量时，变量名之间用英文逗号隔开，如“var a,b,c;”。 声明变量之后，还需要给变量赋值，否则该变量的值默认为undefined。 （2）变量的命名。在JavaScript中，变量的命名规则如下。① 变量名由字母、数字、下划线（_）和美元符号（$）构成，且第一个字符不能为数字； （3）变量的分类。在JavaScript中，变量有一定的作用域（也就是变量的有效范围）。根据变量作用域来划分，可将变量分为全局变量和局部变量。 （详见教材） 【教师】展示JavaScript关键字内容，帮助学习理解 JavaScript关键字是指在JavaScript语言中被事先定义并赋予特殊含义的词。体关键字内容如表8-2所示。 （详见教材） 【课堂互动】教师提出以下问题： 局部变量的优先级是否低于全局变量？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 在函数中，局部变量的优先级高于全局变量，假如有同名的局部变量和全局变量，那么局部变量会覆盖全局变量。 3．运算符 【教师】展示JavaScript中常用的运算符表，帮助学习理解 运算符是用来操作数据的符号。JavaScript中的运算符按照操作数据的个数来划分，可分为一元运算符、二元运算符、三元运算符；按照功能来划分，可分为算术运算符、比较运算符、逻辑运算符、赋值运算符、条件运算符等。 （1）算术运算符。算术运算符主要用于数值之间的计算，其功能和数学中的加减乘除类似。假设声明变量x与y且给定x=5。 （2）比较运算符。比较运算符用于比较两个值，然后返回一个布尔型数据true或false，来表示比较结果。假设声明变量x=5。 （3）逻辑运算符。逻辑运算符用来确定变量或值之间的逻辑关系，然后返回一个布尔型数据true或false。 （4）赋值运算符。赋值运算符用于为变量赋值，最基本的赋值运算符为等于，它还可以与其他运算符联合使用，构成复合赋值运算符。 （详见教材） 【课堂互动】教师提出以下问题： 如何使用“++”与“--”运算符？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 “++”与“--”都是一元运算符。但是需要注意，当“++”或“--”放置在变量之后时，先返回变量操作前的值，再进行自增或自减操作；当“++”或“--”放置在变量之前时，则变量先进行自增或自减操作，然后返回变量操作后的值。 【教师】展示JavaScript中条件运算符的语法规则，帮助学习理解 如果“ ”左侧“表达式”的值为true，则整个表达式的值为“结果1”，否则为“结果2”。 例如，以下代码表示一个使用条件运算符的表达式。 var a=2; (a==5) a="yes":a="No"; 该段代码运行后，a的值为“No”。 【教师】提出以下学习任务： 根据教材“运算符的优先级与结合性”表格，查阅资料，了解更多关于运算符的知识。 【学生】聆听、思考、理解 4．流程控制语句 【教师】展示JavaScript中流程控制语句的表达式，帮助学习理解 JavaScript程序是由若干条语句组成的，每条语句以英文分号作为结束符。其中，控制程序执行流程的语句称为流程控制语句。在JavaScript中，流程控制语句包括条件语句、循环语句和跳转语句等。 （1）条件语句。JavaScript中的条件语句有if语句、if…else语句、if…else if…else语句和switch语句。 ① if语句。if语句是最基本的条件语句，是根据条件表达式来执行并处理语句的。 ② if…else语句。if…else语句会根据条件表达式来判断执行两组语句中的哪一组。 ③ if…else if…else语句。当需要判断的条件表达式较多时，可以使用该语句。 ④ switch语句。switch语句能够将一个条件表达式的值与多个值进行比较，并按照比较结果选择执行的语句。 （2）循环语句。 ① for循环语句。 ② while循环语句。 ③ do…while循环语句。 （3）跳转语句。 （详见教材） 5．函数的定义与调用 为了使代码更加简洁并且可重复利用，通常会将某段可实现特定功能的代码定义成一个函数。函数在定义后可以被反复调用，大大提高了代码的编写效率。 【教师】展示JavaScript中函数的语法格式，帮助学习理解 （1）函数的定义。函数分为有参函数和无参函数，它们都使用关键字function定义。 ① 定义有参函数。 ② 定义无参函数与定义有参函数的语法格式类似，只需要将参数去掉即可。 （2）函数的调用。函数在定义之后并不会自动执行，而是需要在相关位置进行调用。 （3）返回值函数。在使用函数进行一些处理和运算时，如果想要得到最后的结果，需要在函数体中添加return语句，用于返回函数的值。 【课堂互动】教师提出以下问题： 你知道古代人是如何计算的吗？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 在我国古代，人们使用算筹进行计算，算筹一般由木棍、竹条或兽骨制成。通过排列和摆放算筹可以进行加、减、乘、除、开方等运算，甚至还可以用来求解方程。 6．数组 【教师】展示JavaScript中数组结构和数组定义，帮助学习理解 数组本质上是一种具有顺序的特殊对象。数组由多个元素组成，每个元素由“下标”和“值”组成。其中数组元素的“下标”又称“索引”或“键”，以数字标识，代表元素在数组中的位置，默认情况下从0开始递增。 在JavaScript中，数组主要用于临时存储任意类型的数据，进行高速批量运算。JavaScript中有两种定义数组的方式，一种是实例化Array对象；另一种是直接使用“[]”定义数组。 【课堂互动】教师提出以下问题： 使用Array对象和“[]”定义数组有什么区别？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 使用Array对象和“[]”定义数组类似，不同之处在于，后者可以定义部分数据元素为空的数组，如上述empty数组中包含两个为空的元素，前者则不可以；还有前者能通过传入一个数值类型的参数定义一个长度为这个参数值的数组，如new Array(5)定义了一个长度为5的数组。 三、在HTML文档中引入JavaScript 【教师】展示在HTML文档中引入JavaScript的语法格式，帮助学习理解 1．内嵌式 内嵌式是将JavaScript代码包裹在 2．外链式 外链式是指创建一个扩展名为“.js”的文件，将JavaScript代码编写在该文件里，然后通过 3．行内式 行内式是指将JavaScript代码作为HTML标签的属性值使用。例如，通过以下代码实现单击网页上的按钮弹出提示框。 【学生】聆听、思考、记忆、实际操作 通过讲解，让学生了解JavaScript
课堂抢答 （10 min） 【教师】提出JavaScript中各类运算符，让学生抢答各个运算符的作用 【学生】聆听、抢答、说出JavaScript中各类运算符的作用 通过课堂抢答加深学生对所学知识的认识，活跃课堂气氛
第二节课
任务实施
（25 min） 【教师】演示使用Dreamweaver CC制作“传承经典网”主页Banner的操作，对其进行分析 1．添加网页元素 （1）继续在任务一任务实施中创建的文档中操作，或用本书配套素材“项目八”→“任务二”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，然后打开“index.html”网页文档。 （2）在

→