《网站前端技术》教案第19课JavaScript基础（二）.docx

.f.1.7嗯三课题第19课JaVaSCriPt基础（二）课时2课时(90min)教学目标知识技能目标：掌握JaVaSCriPl数据类型、运算符的使用方法素质目标：掌握JaVaSCriPI的相关知识，增加学生的知识储备教学重难点教学重点：JaVaSCriPt数据类型教学难点：JaVaSCriPl运算符教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（28min）一上机操作（10min）第2节课：问题导入（3min）一传授新知（30min）一上机操作（7min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解JavaScript数据类型和运算符的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题JavaScript的数据类型可分为哪几类？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（28min）4.4JavaScript类型【教师】讲解JaVaSCriPt数据类型的使用方法÷【多媒体】组织学生扫码播放"JavaScript数据类型”视频（详见教材），让学生对这部分内容有一个大致地了解在JaVaSeriPt语言规范里，数据类型分为基本数据类型和复合数据类型两大类。其中，基本数据类型包括数值型、字符串型、布尔型、未定义型和Null型；复合数据类型包括数组、对象和函数等。通过教师讲解、课堂互动、演示操作等方式，使学生了解JavaScript的基本数据类型及使用方法数值型是JavaScript中最基本的数据类型。在JavaScript中，所有的数值不区分整型和浮点型，全部都是由浮点型表示的。【课堂互动】+【教师】提问什么是数值直接量？十【学生】聆听、思考、回答当T数字直接出现在JaVaSCriPI程序中时，称它为数值直接量。JaVaSCriPt支持的数值直接量的形式有整型、浮点型。【提示】在任!可数值直接量前面加负号(一)可以构成负数，但是负号是一元求反运算符，不是数值直接量语法的一部分。1 .整型【课堂互动】÷【教师】提问整型瘫的进制有哪些？÷【学生】聆听、思考、回答整型数据有十进制、k三制和十六进制.十进制虢是一由09组成的数字序列，如2、60、100等。JavaScript能够处理十进制的整型数据。k三制数据是以数字"0"开头，其后跟一个由07组成的数字序列，如07、0366等。JavaScript的某些实现允许采用八进制格式的整型孀。【提示】虽然某些JaVaSCriPl实现允许采用八进制格式的整空雌，但是有些实现不支持，所以在实际的应用中最好不要使用八进制格式的整型数据。十六进制雌是以"0X"或"Ox"开头，其后跟一个十六进制的数字序列。该数字序列可以是09的某些数字，也可以是a（八）-f(F)的某些字母，还可以是数字和字母的组合，如OX123、Oxfax0XI2ab等。这些数字和字母用来表示015的某个值。JaVaSCriPt能够识别十六进制的整型数据。【示例4-4-1】在HTML文档scripl标签内输入以下代码：varnumber1=32,number2=-36,nunber3=010,number4=0x10;alert(typeof32);alert(typeof-32);alert(typeof(number3);alcrt(l)peof(nmber4):【学生】聆听、上机操作、演示【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【教师】PPt展示“含有"number"的弹窗”图片(详见教材)，并讲解效果：页面中出现弹窗，内容为"number"。单击"确定"按钮，接着出现同样的弹窗(共出现4个)。测试变量的数据类型均为number类型。【提示】在JavaScript语言规范里，表达式的球类型可以通过typeof方法判断，其语法格式如下：typeof表达式或者IyPeof(表达式)2 .浮点型浮点型数据可以带有小数点，它的表示方法有两种。(1)传统计数法，将浮点数分为整数部分、小数点和小数部分，如1.5、2.445等。若整数部分为0,则可以省略整数部分，如.3、.456等。(2)科学计数法，即实数后跟字母e或E,后面加上一个带正号或负号的整数指数，其中正号可以省略，如4e+3、3.2e45x1.12ETI等。【示例4-4-2在HTML文档script标签内输入以下代码：varfloat1=32.12,float2=-38.00;alert(typeof32.12);alert(typeof(float2);【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进彳王寅示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面中出现弹窗，内容为"number",单击"确定"按钮，接着出现一个弹窗，内容也为"number"。测试变量的数据类型均为number类型。3 .字符串型【课堂互动】*【教师】提问字符串中可以包含哪些形式的字符？÷【学生】聆听、思考、回答字符串是由0个或多个字符组成的序列，它可以包含大4当字母、汉字、数字、标点符号或其他字符。字符串是JavaScript用来表示文本的数据类型。程序中，字符串数据包含在单引号或双引号中。如果字符串数据本身含有单引号或双引号，则用来包含该药照的符号应使用不同的引号.即如果字符串数据本身含有单引号，则使用双引号包含该数据；如果字符串数据本身含有双引号，则使用单引号包含该数据。简单地理解，就是外双内单或外单内双。*>»有时，字符串数据中使用的引号会导致匹配混乱，如字符串”字符串包含在单引号或双引号中；对于这种情况，必须使用转义字符。转义字符由开始。使用转义字符不仅可以避免引号匹配混乱问题的出现，还可以在字符串中添加不可显示的特殊字符。【教师】PPt展示“常用转移字符表”表格（详见教材），并讲解多个字符串可以使用加号（+）进行拼接，字符串神丑可酷类型拼接的结果都是字符串型。【示例4-4-3】在HTML文档script标签内输入以下代码：varstring1="Thisisa'car'.",string2=Thatisa"boat",n'varstring3="Thisisa'student'."varstring4="Sheis"+18;alert（slringl+string2+siring3+string4）;【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教帅进行点评【学生】聆听、上机操作、演示【教师】PPt展示“含有字符串的弹窗”图片（详见教材），并讲解效果：页面中出现弹窗，内容为字符串。4.4.3 布尔型布尔数据的类型只有两个值,即true（真）和false（假），用于说明每个事物是真还是假。【示例4-4-4在HTML文档script标签内输入以下代码：varbooll=true,bool2=folse;alert（bool1）;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“含有“true”的弹窗”图片（详见教材），并讲解效果：页面中出现弹窗，内容为"true"。4.4.4 未定义型在变量只定义未赋值之前，变量均为未定义（undefined）型。【示例4-4-5在HTML文档script标签内输入以下代码：vardefine;alert（define）;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教帅进行点评【学生】聆听、上机操作、演示【教师】PPt展示“含有"undefined”的弹窗”图片（详见教材），并讲解效果：页面中出现弹窗,内容为"undefined"。【提示】>»*NaN,即NotaNumber,4.4.5null型【课堂互动】中【教师】提问null型数据类型表示的是什么？【学生】聆听、思考、回答null是TW殊的值，表示空值，用于定义空的或不存在的引用。null不等同于空的字符串("")或0【示例4-4-6在HTML文档scripl标签内输入以下代码：varV=null;alert(,'Thisisa"+v);alert(18+v);【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”页面依次弹出的两个弹窗”图片(详见教材)，并讲解效果：页面中出现弹窗，内容为"ThisisanW",单击"确定"按钮后，接着出现弹窗，内容为"18".【提示】nW和字符串数据拼接的结果为字符串型，null和数字相加的结果为数字本身。null的数据类型为object,学习了对象后再研究。【学生】聆听、记录、理解【教师】组织学生分组讨论，上机完成以下任务上机操作在新建的页面中设置弹窗，内容为"请输入一个成绩"，单击"确定"按钮后，接着出通过上机操作巩(10min)现输入框，输入"94"后出现弹窗，内容为"等级为Ah固所学知识【学生】讨论、上机操作未定义数据和字符串数据拼接的结果为字符串型，未定义数据和数值数据相加的结果为第二节课问题导入(3min)【教师】提出以下问题JavaScript运算符有什么作用？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(30min)4.5JavaScript运算符【教师】讲解JaVaSCriPt运算符的使用方法通过教师讲解、课堂互动、演示操作等方式，让学生 了解 Java Script 运 算符的使用方法Q!: i!r.程序最基本的功能就是运算。运算符也称操作符，是完成一系列操作的符号。运算符用于将一个或几个值进行计算，然后生成一个新的值，这些参与计算的值称为操作数。操作数可以是常量，也可