《web前端技术》(赵敏)003-0教案 第17课 JavaScript基础之变量、数据类型和运算符

PAGE1PAGE1PAGE2PAGE2

课题第17课JavaScript基础之变量、数据类型和运算符课时2课时（90min）教学目标知识技能目标：（1）熟悉变量的声明与赋值，以及变量的作用域（2）掌握JavaScript中的数据类型、运算符素质目标：（1）学习JavaScript中变量和数据类型的基础知识，激发了解和探索新技术的欲望（2）积极参与实战演练，提升自身动手能力，强化实践能力教学重难点教学重点：变量的声明与赋值、JavaScript中的数据类型、运算符教学难点：变量的作用域教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（30min）→知识检测（10min）第2节课：→传授新知（25min）→课堂练习（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务提前了解JavaScript中的变量和数据类型，并说说和以前学过的语言相比，JavaScript中的变量和数据类型有什么特点？【学生】完成课前任务通过课前任务，让学生提前了解JavaScript中的变量和数据类型，为课堂上学习相关知识点做准备考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题什么是JavaScript？相比其他编程语言，它有哪些特点？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（30min）9.3变量【教师】讲解变量的概念变量是指程序中已经命名的存储单元，它的主要作用是为数据操作提供存放信息的容器。在程序执行过程中，变量保存的数据可能会发生变化。【学生】聆听、记录、理解9.3.1变量的声明与赋值【教师】讲解变量的声明与赋值使用JavaScript变量前一般需要先进行声明。在ECMAScript6版本以前，使用var关键字声明变量，其语法格式如下：…（详见教材）在ECMAScript6版本之后，增加了let关键字声明变量，其语法格式如下：…（详见教材）【课堂拓展】使用var和let关键字声明变量主要有以下几个不同点。（1）let支持块级作用域（作用域为循环、判断等语句块），var不支持。（2）在同一个作用域中，var可以重复声明同一个变量，而let不可以。…（详见教材）【课堂拓展】ECMAScript是由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。…（详见教材）声明变量之后，还需要给变量赋值，否则该变量的值默认为undefined。在JavaScript中，使用等号（=）为变量赋值。变量赋值的方式有两种，一种是先声明后赋值，另一种是声明的同时赋值，其语法格式如下：…（详见教材）例如，使用以下代码声明变量并赋值。…（详见教材）【学生】聆听、记录、理解9.3.2变量的作用域【教师】讲解JavaScript的代码格式和编写时的注意事项变量的作用域是指变量在程序中的有效范围，也就是程序中使用这个变量的区域。在ECMAScript6之前，变量的作用域主要分为两种，包括全局作用域和局部作用域。在ECMAScript6之后，变量的作用域主要分为3种，包括全局作用域、局部作用域和块级作用域，相应作用域的变量分别称为全局变量、局部变量和块级变量。…（详见教材）JavaScript中，使用var可以声明作用于全局和局部的变量，但不可以声明作用于块级的变量；使用let可以声明作用于全局、局部和块级的变量。但是，需要注意以下几点。…（详见教材）【学生】聆听、记录、理解9.4数据类型【教师】讲解JavaScript的5种数据类型，并说明其区别9.4.1Undefined类型…（详见教材）9.4.2Null类型…（详见教材）【课堂拓展】需要注意的是，null和undefined与空字符串（''）和0都不相等。9.4.3Boolean类型…（详见教材）【学生】聆听、记录、理解通过教师的讲解、提问、演示例子，使学生了解JavaScript中的变量和数据类型知识检测（10min）【教师】提前扫描书上前言部分的二维码，找到该书的题库，并从中选择第九章的单选题（1、2），多选题（1,2,3）和判断题（1）部分，发布生成”作业二维码“，并放入课件；在课上让学生通过”文旌课堂“扫描”作业二维码“，进行知识检测，检测完学生可以直接在”文旌课堂“查看答题报告，查看答案解析，有疑问可咨询教师，思考，做题目，查看答题报告通过在线知识检测，可检测学生对本章内容的掌握程度，查漏补缺知识点，培养学生在线学习意识第二节课问题导入（5min）【教师】提出问题以前我们在数学中学过加减乘数等运算，计算机也是有运算的，计算机是怎么来计算数据的？运算符有哪些表示？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）9.5运算符【教师】讲解运算符的概念和分类运算符又称操作符，是能够完成一系列操作的符号。运算符可以对一个或多个值进行计算，生成一个新的值，此处用于计算的值称为操作数。操作数可以是变量或常量。JavaScript中的运算符按照操作数的个数可以分为单目运算符、双目运算符和三目运算符；按照运算符的功能可以分为算术运算符、赋值运算符、比较运算符、条件运算符和逻辑运算符等。【学生】聆听、记录、理解9.5.1算术运算符【教师】讲解常用的算术运算符及其含义，展示表“常用算术运算符及其含义”辅助理解算术运算符主要用于数值之间的计算。它的功能和数学中的加减乘除类似，并在其基础上增加了自增自减等操作。表9-4展示了常用的算术运算符及其含义。……（详见教材）【课堂拓展】当“++”或“--”放置在变量之后时，先返回变量操作前的值，再进行自增或自减操作；当“++”或“--”放置在变量之前时，则变量先进行自增或自减操作，再返回变量操作后的值。【学生】聆听、记录、理解9.5.2赋值运算符【教师】讲解常用的赋值运算符及其含义，展示表“常用的赋值运算符及其含义”辅助理解赋值运算符是最常用的运算符，其作用是将运算符右侧的计算结果赋值给左侧的变量。最基本的赋值运算符之前已使用多次，那就是“=”运算符。表9-5展示了常用的赋值运算符及其含义。……（详见教材）【学生】聆听、记录、理解9.5.3比较运算符【教师】讲解常用的比较运算符及其含义，展示表“常用的比较运算符及其含义”辅助理解比较运算符主要用于变量与变量、变量与其他基本类型数据的比较，比较结果为Boolean类型的值，即true或者false。表9-6展示了常用的比较运算符及其含义。……（详见教材）【课堂拓展】简单来说，就是“==”和“!=”只比较数据的值是否相等，“===”和“!==”不仅要比较值是否相等，还要比较数据类型是否相同。【学生】聆听、记录、理解9.5.4条件运算符【教师】讲解常用的条件运算符及其含义条件运算符也称为三元运算符，主要由条件表达式和结果表达式构成，是一种非常灵活的运算符，其语法格式如下：条件表达式?结果1:结果2;其中，“?”左侧为条件表达式，条件表达式为真，返回“结果1”；条件表达式为假，则返回“结果2”。【课堂拓展】表达式是运算符和操作数组合而成的式子，表达式的值就是对操作数进行运算后的结果。【学生】聆听、记录、理解9.5.5逻辑运算符【教师】讲解常用的逻辑运算符及其含义，展示表“常用的逻辑运算符及其含义”辅助理解逻辑运算符又称布尔运算符，主要用于操作布尔型数据，当用于逻辑运算的变量或值（也称操作数）不是布尔型数据时，JavaScript会先将它们转换为布尔型再运算。表9-7展示了常用的布尔运算符及其含义……（详见教材）【学生】聆听、记录、理解9.5.6运算符优先级【教师】讲解运算符优先级，展示表“运算符优先级”辅助理解前面介绍了JavaScript中一些常见的运算符，每个运算符都有自己的运算规则。当一个表达式中同时出现多个运算符时，需要按照一定的优先顺序处理不同的运算符，以保证程序的正确执行。运算符的运算顺序就是运算符优先级。表9-8展示了JavaScript中运算符的优先级（自上向下运算符优先级依次降低）和运算顺序（自左向右或者自右向左）。……（详见教材）【学生】聆听、记录、理解通过教师的讲解和演示例子，使学生了解JavaScript各种运算符含义课堂练习（10min）【教师】将一下习题放入课件中，让学生进行课堂练习，教师可提问学生，后进行讲解1．以下哪个常量值最大?(B)A.80B.0X65C.095D.01152．下面四个变量声明语句中，哪一个变量的命名是正确的？(B)A.vardefaultB.varmy_bouseC.varmydogD.var2cats3．下面哪一个语句定义了一个名为pageNumber的变量并将它的值赋为240?(C)A.varPageNumber=240B.pagenumber=240C.varpageNumber=240D.varintnamedpageNumber=2404．下面哪一个字符串变量定义语句是不正确的？(C)A.varmytext="Hereissometext!”B.varmytext='Hereissometext!'C.varmytext='Hereissometext！"D.varmytext="Hereis\nsometext！"5．下面四个JavaScript语句中，哪一个是合法的?(D)A.document.write（”Johnsaid,’'Hi!”"）B.document.write("Johnsaid，’’Hi！”’）C.document.write（”Johnsaid,’’Hi！")D.document.write（"Johnsaid，\'’Hi！\”")6．下面哪一个不是JavaScript运算符？(C)A.=B.==C.&＆D.＄＃7．表达式123％7的计算结果是(C)A.2B.3C.4D.58．表达式”123abe"—”123”的计算结果是＿.(D)A."abc"B.0C.”123abc123"D.NaN9．赋值运算符的作用是什么?(A)A.给一个变量赋新值B.给一个变量赋予一个新名C.执行比较运算D.没有任何用处10．比较运算符的作用是什么?(C)A．执行数学计算B.处理二进制位，目前还不重要C．比较两个值或表达式,返回真或假D.只比较数字，不比较字符串11．下面的哪一个表达式将返回真？(D)A.（3===3)&＆(5<l）B.！（17<=20)C.(3!=3）｜|(7〈2）D.(1===1）|｜（3〈2）12．下面的哪一个表达式将返回假？(A)A.!(3〈=l)B.(4>=4）&&（5〈=2）C.(”a”=="a"）＆＆(”c"！="d”)D.(2〈3)｜｜(3〈2）13．下列各种运算符中,_____优先级最高。(D)A.+B.&＆C.==D.*=思考，做题目，讨论、回答，聆听，记录通过知识检测，可检测学生对本章内容的掌握程度，查漏补缺知识点课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了JavaScript的变量、数据类型、运算符。通过本节课的学习，学生应重点掌握以下内容。（1）在JavaScript中，可以使用var和let关键字声明变量。（2）JavaScript中的基本数据类型有Undefined类型、Null类型、Boolean类型、Number类型和String类型。（3）JavaScript中的运算符按照操作数的个数可以分为单目运算符、双目运算符和三目运算符；按照运算符的功能可以分为算术运算