第2章 基本语法 教学设计

第3章面向对象（上）《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期教师姓名：年月日课题名称第2章基本语法计划学时6学时内容分析对于任何一种语言来说，掌握基本语法都是学好这门语言的第一步，只有完全掌握了基础知识，才能游刃有余的学习后续内容。本章将针对JavaScript的变量定义、数据类型、运算符等基础语法进行详细讲解。教学目标及基本要求掌握变量的定义与赋值掌握数据类型与运算符的使用掌握流程控制语句的使用教学重点JavaScript引入方式、语法风格、注释、输出语句教学难点数据类型转换、字符串/赋值/逻辑运算符、运算符优先级、循环结构教学方式教学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。教学过程第一学时（标识符、关键字、保留字、变量）一、提出需求，导入学习任务（1）思考编程语言的学习应该从何入手。从学习汉语、英语的学习方式（先学习基本的语法、然后才可以组词、造句、交流等等）引出编程语言的学习也类似。地基打好，才能建高楼；只有完全掌握了JavaScript的基础知识，才能游刃有余的学习后续的内容。（2）明确学习方向。理解标识符的概念。熟悉关键字与保留字。掌握变量的基本使用。掌握变量的赋值操作。二、知识讲解标识符功能：开发中自定义的一些符号来标记一些名称。用途：为变量、函数命名等。标识符的定义需要遵循一定的规则。对于多个单词的名称，常使用下划线法、驼峰法、帕斯卡法的风格。关键字功能：被事先定义好并赋予了特殊含义。如var、if、function。注意：关键字不能作为变量名和函数名使用。列举ES5规定的关键字。保留字作用：系统预留，未来可能成为关键字。不推荐使用保留字来命名。变量的使用什么是变量：存储数据的容器，其保存的数据是可变的。声明变量：使用var关键字，通过代码进行演示。变量的命名：与标识符相同。列举哪些是合法变量名，哪些是不合法变量名。利用逗号“,”可实现一条语句同时完成多个变量的声明。变量的赋值通过代码演示如何为变量赋值。注意var关键字可以省略，但不推荐这么做。补充讲解ES6新增的const关键字，用来定义常量。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第二学时（数据类型分类、基本数据类型、数据类型检测、数据类型转换）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。了解数据类型的分类。理解基本数据类型和复合数据类型的区别。掌握基本数据类型的使用。掌握数据类型的检测方法。掌握数据类型的自动转换机制。掌握数据类型的手动转换操作。二、知识讲解数据类型的分类划分数据类型的意义：保存不同类型的数据，来满足各种操作需求。划分方式：两大类，基本数据类型，复合数据类型。5种常用的基本数据类型：布尔、字符、数值、空、未定义型。对象属于复合数据类型，特点：里面可以保存多个变量。基本数据类型——布尔型作用：逻辑判断，有true和false两个值，表示真和假。注意：区分大小写，必须全小写。基本数据类型——数值型作用：可保存数字（包括整数和浮点数），用来进行数学运算。正负：可在数字前使用“+”或“-”表示正或负。NaN：是一个特殊的值，表示非数值。进制：支持十进制、八进制、十六进制表示法。基本数据类型——字符型作用：表示文本，可保存Unicode字符、数字等组成的字符序列。定界符：可使用单引号或双引号。（ES6新增了反引号）在计算机中通常称为字符串。单引号字符串中可保存双引号，双引号字符串中可保存单引号。转义字符作用：在字符串中表示一些特殊字符。语法：使用“\”符号对其后的内容转义，或表示一些特殊字符。演示常用的转义字符的使用。基本数据类型——空型作用：表示一个不存在的或无效的对象与地址。语法：使用null表示，全小写字母。基本数据类型——未定义型作用：表示未定义，如声明的变量还未被初始化。语法：使用undefined表示，全小写字母。数据类型检测为什么进行数据类型检测：变量的数据类型，在运行过程中会根据赋值结果而改变，因此在开发中，若要知道一个变量当前的数据类型，就需要对其检测。演示如何利用typeof操作符来进行数据类型检测。演示如何利用Ototype.toString.call(data)进行数据类型检测。数据类型转换为什么需要进行数据类型转换。转布尔型：利用Boolean()函数进行转换。注意根据传入参数的不同类型，转换结果也不同。转数值型：利用Number()或parseInt()、parseFloat()函数进行转换。注意3种函数对于转换的结果有区别。使用isNaN()可判断给定值。转字符型：利用String()函数，或调用toString()方法进行转换。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（表达式、算术运算符、字符串运算符、赋值运算符、比较运算符）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。理解表达式的概念。掌握算术运算符的使用。掌握字符串运算符的使用。掌握赋值运算符的使用。掌握比较运算符的使用。二、知识讲解表达式作用：各种类型的数据、变量和运算符的集合。讲解表达式的用途，增强代码的灵活性。算术运算符作用：对数值类型的变量及常量进行数学运算。列举常用的运算符，通过代码演示其使用示例。注意四则运算遵循的顺序，先乘除后加减。讲解取模运算“%”的原理和基本规律。注意浮点数运算的精度问题，以及解决办法。注意整数、浮点数的取值范围，小数位的最大数量。对比分析“++”和“--”在变量前、后的区别。测试布尔型在进行运算时产生的效果。字符串运算符作用：使用“+”对两个字符串进行连接，或数字与字符串连接。注意在进行运算时，针对不同数据类型的处理结果可能不同。测试布尔型、整型、浮点型或为null的数据，与字符串的拼接结果。赋值运算符作用：将运算符右边的值赋给左边的变量。通过代码演示各种赋值运算符的使用。赋值运算符支持对多个变量进行同时赋值操作。对比分析“a+=b”与“a=a+b”，以及在操作字符串时的特点。比较运算符作用：对两个数值或变量进行比较，获得布尔值比价结果。通过代码演示各种比较运算符的使用。注意字符串与数字进行比较运算时的特点。注意区分全等“===”、不全等“!==”与“==”、“!=”的区别。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第四学时（逻辑运算符、三元运算符、位运算符、运算符优先级）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（2）明确学习方向。掌握逻辑运算符的使用。掌握三元运算符的使用。掌握位运算符的使用。理解运算符的优先级机制，掌握如何更改优先级。二、知识讲解逻辑运算符作用：对布尔型的数据进行操作。通过代码演示常用逻辑运算符的使用，注意比较各运算符的区别。注意“&&”和“||”的短路效果，并演示短路效果的使用。演示逻辑运算符在if中的使用，如“x>3&&y!=0”。三元运算符作用：根据条件表达式的结果，执行表达式1或表达式2。利用三元运算符可以简化代码书写，使代码简洁方便。通过代码演示三元运算符的使用。位运算符作用：对数据进行二进制按位操作。在讲解前，回顾进制之间的转换以及如何查看ASCII表。通过代码演示各种位运算符的使用。以二进制的方式讲解位运算的运算过程。运算符优先级作用：当一个表达式中出现多个运算符时，其优先级值得注意。给出运算符优先级表格，并演示具体案例进行说明。表达式中还有一个优先级最高的运算符——圆括号()，演示其使用方法。三、【案例】计算圆的周长和面积分析案例的功能和实现思路功能：根据用户输入的半径，计算圆的周长和面积。思路：通过prompt()提示用户输入半径，然后进行计算，将计算结果显示在网页中。编写代码完成案例的开发在网页中准备3个文本框，分别用来显示半径、周长和面积。编写JavaScript代码，通过prompt()提示用户输入半径。将输入的内容转换成数字。判断用户输入的内容是否合法，如果不合法则不进行计算并给出提示。利用“*”进行乘法计算。为了更好的显示效果，通过字符串的toFixed()限制小数的最大位数。将计算结果显示在网页的文本框中。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第五学时（选择结构、循环结构、跳转语句）一、提出需求，导入学习任务（1）思考如何将现实生活中的判断（假如..否则…等）以及只要符合某要求就重复执行某些操作的关系在程序中表示出来。流程控制语句：顺序、选择和循环。选择结构语句指的就是需要对一些条件进行判断，从而决定执行指定的代码。循环语句就是可以实现一段代码的重复执行，如计算给定区间内的偶数等。（2）明确学习方向。掌握选择结构语句if、switch的使用方法。掌握循环结构语句while、do…while、for的使用方法。掌握跳转语句break、continue的使用方法。二、知识讲解选择结构语句分类：单分支（if）、双分支（if…else）和多分支（if…elseif…else），switch也属于多分支。选择结构——单分支if作用：当满足某种条件时，就进行某种处理。演示单分支的语法结构，绘制流程图，以及示例代码。选择结构——双分支if…else作用：当满足某种条件时，就进行某种处理，否则进行另一种处理。演示双分支的语法结构，绘制流程图，以及示例代码。选择结构——多分支if…elseif…else作用：针对不同情况进行不同的处理。通过多分支语句，为学生的考试成绩划分等级，如优秀、良好、及格等。演示多分支的语法结构，绘制流程图。注意“elseif”中间有空格，如果遗漏，会造成语法错误。选择结构——多分支switchswitch语句也是多分支语句，功能与if系列条件语句相同。switch选择结构语句的特点就是代码更加清晰简洁、便于阅读。区分switch与if的不同。switch只能针对某个表达式的值进行判断，从而决定执行哪一段代码。注意在switch中，break和default的作用，以及在省略情况下的细节问题。演示如何利用switch的方式来判断学生成绩的等级。循环结构语句作用：实现一段代码的重复执行，例如连续输出1~100之间的数字。。分类：while、do…while和for循环语句。循环结构——while讲解while的语法结构，绘制流程图。通过编写代码演示while的应用。应注意，若循环条件永远为true时，则会出现死循环。案例：将while与if结合起来，实现计算100以内的奇数和。循环结构——do…while讲解do…while的语法结构，绘制流程图。比较while与do…while的异同。while是先判断条件后执行循环体，而do...while会无条件执行一次循环体后再判断条件，决定是否执行下次循环。循环结构——for作用：适合循环次数已知的情况。分别使用while与for实现输出5个“*”，通过对比代码进行学习。讲解for循环的语法结构，绘制流程图。测试for循环括号中的表达式是否可以为空，如“for(;;)”。跳转语句作用：实现程序执行过程中的流程跳转。分类：break和continue语句。break：在switch中终止当前语句的执行，或在循环语句中跳出循环。continue语句用于结束本次循环的执行，开始下一轮循环的执行操作。以在for循环中跳出为例，编写代码演示break的使用。将break换成continue，观察程序的运行结果。break可在死循环中使用，当满足一定条件时跳出循环。continue和break还可跳转到指定的标签语句处，演示标签的添加，以及跳到指定标签的实现。利用标签，实现跳出两层循环，或在多层循环内跳出到指定的外层循环。三、【案例】打印金字塔分析案例的功能和实现思路观察金字塔的显示效果，分析其基本规律。每层中星星的数量=当前层数*2-1。例如，当前为第4层，则星星数=4*2-1=7。每层星星前的空格=金字塔层数-当前层数。例如，当前行数为第3层，则空格数=5-3=2。编写代码完成案例的开发通过prompt()提示用户输入金字塔的层数。判断用户输入是否为一个合法的数字，如果不是则报错提示。编写外层for循环，遍历金字塔的层数。编写内层第1个for循环，输出星星前的空格。编写内层第2个for循环，输出指定数量的“*”。在一行输