第2章 JavaScript基本语法 教学设计

博学谷——让IT教学更简单，让IT学习更有效来源网络侵权请联系删除PAGE12黑马程序员《JavaScript前端开发案例教程（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第2章JavaScript基本语法计划课时8课时教学引入学习任何一门语言，都需要掌握这门语言的基本语法，JavaScript语言也不例外。只有掌握了JavaScript的基本语法，才能游刃有余地学习后续内容。本章将针对JavaScript的变量、数据类型、表达式、运算符以及流程控制等基本语法进行详细讲解。教学目标使学生了解什么是变量，能够说出变量的概念使学生掌握变量的命名规则，能够为变量命名使学生掌握变量的声明与赋值，能够声明变量并为其赋值使学生熟悉数据类型的分类，能够说出JavaScript中有哪些数据类型使学生掌握常用的基本数据类型，能够根据实际需求声明基本数据类型的变量使学生掌握数据类型检测，能够检测变量的数据类型是否符合预期使学生掌握数据类型转换，能够根据实际需求进行数据类型转换使学生掌握表达式的使用，能够根据具体需求使用表达式使学生掌握运算符的使用，能够使用运算符完成运算使学生熟悉运算符的优先级，能够区分表达式中运算符的优先级使学生掌握选择结构语句，能够根据需求选择合适的选择结构语句使学生掌握循环结构语句，能够根据需求选择合适的循环结构语句使学生掌握跳转语句，能够实现程序中的流程跳转使学生掌握循环嵌套，能够根据程序需要使用循环嵌套语句教学重点变量的声明与赋值常用的基本数据类型数据类型转换算术运算符逻辑运算符选择结构-if...else语句循环结构-for语句跳转语句动手实践：输出“金字塔”教学难点数据类型转换算术运算符赋值运算符逻辑运算符循环结构-for语句跳转语句循环嵌套动手实践：输出“金字塔”教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（什么是变量、变量的命名规则、变量的声明与赋值、【案例】交换两个变量的值）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接导入的方式导入新课在程序中，经常需要保存一些临时数据。例如，将两个数字相加的结果保存起来，以便在后面的计算中使用。为了保存这些临时数据，我们可以在程序中声明一些变量。本节课将讲解什么是变量、变量的命名规则以及变量的声明与赋值。三、新课讲解知识点1-什么是变量教师通过PPT的方式讲解什么是变量。什么是变量。变量的组成。变量名。变量值。知识点2-变量的命名规则教师通过PPT的方式讲解变量的命名规则。变量的命名规则。变量的命名建议。常见的关键字。知识点3-变量的声明与赋值教师通过PPT结合实际操作的方式讲解变量的声明与赋值。先声明后赋值。声明的同时并赋值。多学一招：常见的关键字。知识点4-【案例】交换两个变量的值教师通过PPT结合实际操作的方式讲解【案例】交换两个变量的值。案例需求：假设我们在一家西餐厅用餐，我们左手拿着西餐刀，右手握着西餐叉，但是西餐的礼仪是左手握西餐叉，右手拿西餐刀，因此我们需要将左右手的西餐工具交换。本案例将实现交换左右手的西餐工具。案例分析：我们可以将左手、右手和餐桌看作3个变量，把左手看作变量leftHand，变量值为西餐刀；把右手看作变量rightHand，变量值为西餐叉；把餐桌看作变量temp，用来临时存储数据。编写代码实现案例。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（://tch.ityxb）布置本节课作业以及下节课的预习作业。第二课时（数据类型分类、常用的基本数据类型、数据类型检测、数据类型转换）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课变量是存储数据的容器，变量可以保存各种各样的数据，例如字符串、数字等。这些数据在计算机中需要分类型存储，例如将一串字符存为字符串型数据，将数字存为数字型数据等。接下来将对数据类型进行讲解。三、新课讲解知识点1-数据类型分类教师通过PPT的方式讲解JavaScript中的数据类型分类。基本数据类型（或称为值类型）。boolean（布尔型）string（字符串型）number（数字型）null（空型）undefined（未定义型）bigInt（大整型）symbol（符号型）复杂数据局类型（或称为引用类型）。object（对象）。知识点2-常用的基本数据类型教师通过PPT结合实际操作的方式讲解JavaScript中常用的基本数据类型。布尔型。数字型。整数：一般情况下使用十进制表示，除此之外还可以使用八进制或十六进制表示。浮点数：浮点数可以使用标准格式和科学记数法格式表示。通过Number.MAX_VALUE获取数字型的最大值。通过Number.MIN_VALUE获取数字型的最小值。字符串型。单引号字符串。双引号字符串。单、双引号嵌套的情况。空型：null。未定义型：undefined。多学一招：数字型中的特殊值。Infinity（无穷大）。-Infinity（无穷小）。NaN（NotaNumber，非数字）。使用isNaN()可以判断一个变量的值是否为数字。知识点3-数据类型检测教师通过PPT结合实际操作的方式讲解JavaScript中的数据类型检测。typeof操作符的两种语法格式。typeof需要类型检测的数据typeof(需要类型检测的数据)演示如何使用typeof操作符检测数据类型。知识点4-数据类型转换教师通过PPT结合实际操作的方式讲解JavaScript中的数据类型转换。将数据转换为布尔型。通Boolean()。将数据转换为数字型。parseInt()。parseFloat()。Number()。将数据转换为字符串型。String()。toString()。四、归纳总结教师回顾本节课所讲的知识，并通过提问的方式检测学生是否掌握了JavaScript中的数据类型。五、布置作业教师通过高校教辅平台（://tch.ityxb）布置本节课作业以及下节课的预习作业。第三、四课时（表达式、算术运算符、字符串运算符、【案例】根据用户输入的数据完成求和运算、赋值运算符、比较运算符、逻辑运算符、三元运算符、位运算符、运算符优先级、【案例】计算圆的周长和面积）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在实际开发中，我们需要进行各种各样的运算，这时就需要用到表达式和运算符。表达式是一组代码的集合，每个表达式的执行结果都是一个值。运算符用于按照特定规则进行运算。本节课将讲解JavaScript中的表达式和运算符。三、新课讲解知识点1-表达式教师通过PPT结合实际操作的方式帮助学生认识JavaScript中的表达式。最基本的表达式：一个变量或值，不再包含其他表达式。含有运算符的表达式。赋值表达式。知识点2-算术运算符教师通过PPT结合实际操作的方式讲解JavaScript中的算术运算符。算术运算符的作用：用于对两个变量或数字进行算术运算。算术运算符的注意事项。先乘除后加减。取模运算结果的正负。小数的精度问题。正、负数的表示。多学一招：toFixed()方法。知识点3-字符串运算符教师通过PPT结合实际操作的方式讲解JavaScript中的字符串运算符。字符串运算符（+）：用于字符串拼接。多学一招：隐式转换。利用-*/实现将数据转换为数字型。利用+实现将数据转换为字符串型。知识点4-【案例】根据用户输入的数据完成求和运算教师通过PPT结合实际操作的方式讲解【案例】根据用户输入的数据完成求和运算。案例需求：提示用户输入两个数据，输入完成后对两个数据进行求和运算，在控制台输出求和的结果。实现思路：使用prompt()接收用户输入的数据，然后使用parseFloat()将用户输入的数据转换成浮点数，相加后的结果使用toFixed()方法保留两位小数。编写代码实现案例。知识点5-赋值运算符教师通过PPT结合实际操作的方式讲解JavaScript中的赋值运算符。赋值运算符的作用：将运算符右边的值赋给左边的变量。赋值运算符的注意事项。知识点6-比较运算符教师通过PPT结合实际操作的方式讲解JavaScript中的比较运算符。比较运算符的作用：对两个数据进行比较，比较结果是布尔值true或false。比较运算符的注意事项。知识点7-逻辑运算符教师通过PPT结合实际操作的方式讲解JavaScript中的逻辑运算符。逻辑运算符的作用：条件判断。逻辑运算符的短路问题。知识点8-三元运算符教师通过PPT结合实际操作的方式讲解JavaScript中的三元运算符。什么是三元运算符。三元运算符的语法格式。知识点9-位运算符教师通过PPT结合实际操作的方式讲解JavaScript中的位运算符。位算符的作用：用来对数据进行二进制运算。位算符的注意事项。知识点10-运算符优先级教师通过PPT结合实际操作的方式讲解JavaScript中运算符的优先级。什么是运算符的优先级。小括号“()”是优先级最高运算符，运算时先计算小括号内的表达式。知识点11-【案例】计算圆的周长和面积教师通过PPT结合实际操作的方式讲解【案例】计算圆的周长和面积。案例需求：使用JavaScript中的运算符实现圆的周长和面积的计算。实现思路：首先我们要知道圆的周长公式和面积公式。圆的周长公式为2πr，圆的面积公式为πr2。公式中，π表示圆周率，代码中使用圆周率的近似值3.14；r表示圆的半径。编写代码实现案例。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式检测学生是否掌握了JavaScript中的表达式和运算符的使用。五、布置作业教师通过高校教辅平台（://tch.ityxb）布置本节课作业以及下节课的预习作业。第五、六课时（选择结构-if语句、选择结构-if...else语句、选择结构-if...elseif...else语句、选择结构-switch语句、【案例】查询水果的价格、循环结构-for语句、循环结构-while语句、循环结构-do...while语句、跳转语句、循环嵌套）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过比拟的方式导入新课现实生活中，我们做一件事，从开始到结束往往需要经过一个流程，这个流程如何执行由我们自身来决定。一个程序的执行也有流程，很多时候我们需要通过控制程序中的流程来实现程序的功能，这就是流程控制。程序的流程控制通过3种结构实现，分别是顺序结构、选择结构和循环结构。顺序结构指的是程序按照代码的先后顺序自上而下地执行，由于顺序结构比较简单，本节课将不过多介绍。本节课将讲解选择结构、循环结构、跳转语句以及循环嵌套。三、新课讲解知识点1-选择结构-if语句教师通过PPT结合实际操作的方式讲解选择结构中的if语句。if语句的作用。if语句的执行流程。if语句的代码演示。知识点2-选择结构-if...else语句教师通过PPT结合实际操作的方式讲解选择结构中的if…else语句。if…else语句的作用。if…else语句的执行流程。if…else语句的代码演示。知识点3-选择结构-if...elseif...else语句教师通过PPT结合实际操作的方式讲解选择结构中的if...elseif...else语句。if...elseif...else语句的作用。if...elseif...else语句的执行流程。if...elseif...else语句的代码演示。知识点4-选择结构-switch语句教师通过PPT结合实际操作的方式讲解选择结构中的switch语句。switch语句的作用。switch语句的执行流程。switch语句的代码演示。知识点5-【案例】查询水果的价格教师通过PPT结合实际操作的方式讲解【案例】查询水果的价格。案例需求：日常生活中，我们去水果店买水果，结账时售货员要查询所买水果的价格来计算总价，例如，当售货员输入“苹果”时，查询苹果的价格；输入“桃子”时，查询桃子的价格。实现思路：首先声明变量fruit，用来接收售货员输入的水果名称，然后利用switch语句实现查询对应水果的价格。编写代码实现案例。知识点6-循环结构-for语句教师通过PPT结合实际操作的方式讲解循环结构中的for语句。for语句的作用。for语句的执行流程。for语句的代码演示。通过案例演示for语句的使用。知识点7-循环结构-while语句教师通过PPT结合实际操作的方式讲解循环结构中的while语句。while语句的作用。while语句的执行流程。while语句的代码演示。通过案例演示while语句的使用。知识点8-循环结构-do…while语句教师通过PPT结合实际操作的方式讲解循环结构中的do…while语句。do…while语句的作用。do…while语句和while语句的区别。do…while语句的执行流程。do…while语句的代码演示。通过案例演示do…while语句的使用。多学一招：断点调试。知识点9-跳转语句教师通过PP