《网站前端技术》教案第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.程序最基本的功能就是运算。运算符也称操作符，是完成一系列操作的符号。运算符用于将一个或几个值进行计算，然后生成一个新的值，这些参与计算的值称为操作数。操作数可以是常量，也可以是变量。运算符和操作数组成的式子称为表达式。表达式的运算规则基本是先运算括号，再按照运算符的优先级从左到右依次进行.表达式的值就是对操作数进行运算后的结果。【课堂互动】【教师】提问JS运算符可以按照哪些标准进行分类？十【学生】聆听、思考、回答根据操作数个数的不同，运算符可以分为单目运算符、双目运算符、三目运算符。根据功能的不同，运算符可以分为算术运算符、关系运算符、赋值运算符、逻辑运算符、条件运算符。4.5.1算术运算符算术运算符包括加（+）、减（一）、乘（*）、除（/）、自加（+）、自减（-）、取余（）运算符。1 .加减乘除（+-*/）【课堂互动】十【教师】提问加减乘除运算符的运算规则周十么？十【学生】聆听、思考、回答加减乘除运算符都属于双目运算符，它们的运算规则如同数学中的规则，即乘除的优先级高于加减。【示例4-5-1】在HTML文档script标签内输入以下代码：varnumber1=2.2;varnumber2=3;varnumber3=numberl*2+number23;alert（number3）;效果：页面中出现弹窗，内容为运算结果"5.4"。2 .自加（+）【课堂互动】+【教师】提问自加运算符起什么作用？）【学生】聆听、思考、回答自加运算符属于单目运算符，它可以使变量的值自动加1。该运算符有两种情况：（1）i+,表示在使用i之后，使i的值加I。（2）+i,表示在使用i之前，先使i的值加1。示例4-5-2在HTML文档scripl标签内输入以下代码：vari=2.12;i+；alert（i）;效果：页面中出现弹窗，内容为运算结果"3.12"。3 .自减（一）自减运算符属于单目运算符，它可以使变量的值自动减1.该运算符有两种情况：（1）i,表示在使用i之后，使i的值减I.（2）i,表示在使用i之前，先使i的值减1.【示例4-5-3在HTML文档scripl标签内输入以下代码：vari=8;alert（i）;效果：页面中出现弹窗，内容为运算结果"7"。【提示】自减运算一般不用于浮点数,因为用于浮点数时运算结果不能被开发者控制。如果将【示例4-5-3中的8修改为8.12,则弹出的运算结果为7.119999999999999.【学生】聆听、记录、理解4.取余（）取余运算符属于双目运算符，它是指整数a对整数b求余。【示例4-5-4在HTML文档scripl标签内输入以下代码：varnumber1=38;varnumber2=number1%3;alert（number2）;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：面中出现弹窗，内容为运算结果"2"。【提示】取余运算的两个操作数的数据类型都要求为整型。4.5.2关系运算符关系运算符主要用于测试操作数之间的关系，包括小于（V）、大于（）、小于等于（=）、大于等于（=）、等于（=）、全等于（=）、不等于（！=）、非全等于（!=）.根据这些关系存在与否返回一个布尔型数值，即true或false.1 .小于（）小于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数小于右边的操作数，则返回true；否则返回false.它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-5在HTML文档scripl标签内输入以下代码：varnumber=39;alert（18number）;效果：面中出现弹窗，内容为运算结果"true".2 .大于（）大于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数大于右边的操作数，则返回true；否则返回false,它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-6在HTML文档script标签内输入以下代码：varnumber=39;alert(18number);效果：面中出现弹窗，内容为运算结果"false"。3 .小于等于(=)小于等于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数小于或等于右边的操作数，则返回true；否则返回false.它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-7在HTML文档script标签内输入以下代码：varnumber=39;alert(18=number);效果：面中出现弹窗,内容为运算结果"true"。4 .大于等于(=)大于等于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数大于或等于右边的操作数，则返回true；否则返回false.它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-8在HTML文档scrip。标签内输入以下代码：varnumber=39;aleri(18=number);效果：面中出现弹窗，内容为运算结果"false".5 .等于(=)等于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数等于右边的操作数，即模糊比较相等，则返回true；否则返回false。它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-9在HTML文档scripl标签内输入以下代码：varX=5;alert(x="5");效果：面中出现弹窗，内容为运算结果"irue".【提示】等于运算符是两个等于号，不同于赋值运算符(=)。6 .全等于(=)全等于运算符属于双目运算符，用于比较操作数的关系。如果左边的操作数值与类型都等于右边的操作数，即精准h匕较相等，则返回true；否则返回false.它可以应用于数字型、字符型和布尔型数据之间。【示例4-5-10在HTML文档VSCriPl标签内输入以下代码：varX=5;alert(x="5");【教师】组织学生用其他的方法完成上面的任务，并在各组中挑选一学生进行演示，演示完成后教师进行点评，并讲解代码及效果效果：面中出现弹窗,内容为运算结果“false".【提示】X变量为数字5,而右侧是字符5。全等于运算符是三个等于号，不同于赋值运算符（=）.7 .不等于（!=）不等于运算符属于双目运算符，用于比较操作数的关系。如果模糊比较左边的操作数值不等于右边的操作数，则返回true；否则返回false它主要应用于数字型数据之间，也可以用于字符型和布尔型数据之间。【示例4-5-11在HTML文档scripl标签内输入以下代码：varx=5;alert（x!=',5,'）;效果：面中出现弹窗，内容为运算结果"false".8 .不全等于（!=）不全等于运算符属于双目运算符，用于比较操作数的关系。如果精准比较左边的操作数值或类型不等于右边的操作数，则返回true；否则返回false,它可以应用于数字型、字符型和布尔型数据之间。【示例4-5-12在HTML文档script标签内输入以下代码：varX=5;alen（x!="5"）;效果：面中出现弹窗，内容为运算结果"lrue"。9 .5.3赋值运算符【教师】讲解赋值运算符赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中。【课堂互动】中【教师】提问什么是复合赋值运算符？十【学生】聆听、思考、回答复合赋值运算混合了其他运算符（如算术运算符）和赋值运算符，如+=、-=、*=、/=等,表示将运算符左边的变量与右边的变量或常量进行运算，然后将运算结果赋值给左边的变量。【示例4-5-13在HTML文档script标签内输入以下代码：vara=16,b=10;a+=b;表示a=a+b=16+10=26alert（a）;效果：页面中出现弹窗，内容为运算结果"26".10 5.4逻辑运算符【课堂互动】÷【教师】提问逻辑运算符常用于哪种数据类型？逻辑运算符一般用于布尔型数据，通常逻辑运算符与关系表达式配合使用。逻辑运算符的返回值是true或false逻辑运算符包含与(&&)、或(|)、非(！)。1 .逻辑与(&&)逻辑与运算符属于双目运算符，其运算对象均为真时，结果为真；运算对象只要有一个为假，结果为假。【示例4-5-14在HTML文档VSCriP3标签内输入以下代码：vara=12,b=16,c=23.89;alert(a>b&&b<c);alert(a<b&&b<c);【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中依次弹出"false”和w(ruew因为a>b的结果是false,b<c的结果是true,真与假得假；a<b的结果是(rue,真与真得真。2 .逻辑或(II)逻辑或运算符属于双目运算符，其运算对象有一个为真时，结果就为真；运算对象都为假时，结果为假。【示例4-5-15在HTML文档<script>标签内输入以下代码：vara=12,b=16,C=23.89;alert(a>bb<c);alert(a<bb<c);【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评，并讲解代码的效果效果：页面中依次弹出"true"和"irue".因为a>b的结果是falsefb<c的结果是true,真或假得真；a<b的结果是true,真或真得真。3 .逻辑非(！)逻辑非运算符属于单目运算符，其运算对象为真时，结果为假；运算对象为假时，结果为真。【示例4-5-16在HTML文档<script>标签内输入以下代码：vara=12.b=16,c=23.89;alert(!(a>b);alert(!(b<c);【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评,并讲解代码的效果效果：页面中依次弹出"true"和"false"。因为a>b的结果是false,非假即真；b<c的结果是IrUe,非真即假。4 .5.5条件运算符在JavaScrip1语言规范里，提供了条件运算符，它属于三目运算符，其语法格式如下：表达式1?表达式2:表达式3当表达式】的值为真或O时，结果为表达式2的值，否则结果为表达式3的值。【示例4-5-17在HTML文档<scripl>标签内输入以下代码：vara=12,b=16;varmax=a>b?a:b;alert(max);1j.一/一一»»»1AG十_.亍."片1号LM;京，Q嗖圣，一L.JH'":"!-Ls三>一一-效果：页面中弹出"16".因为a=12,b=16,a>b不成立,结果为false,所以max的值为b的值16.【学生】聆听、记录、理解上机操作(7min)【教师】组织学生分组讨论，上机完成以下任务在创建的Coursehml文件中，设置内容为"course"的弹窗,单击"确定"按钮，接着出现一个弹窗，内容为"true".在<scripi>标签内输入以下代码，使得页面依次弹出"false"、"23"。vara=22,b=23,c=23.89;alert(a>b&&b<c);varmax=a>b?a:b;alert(max);【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了JavaScript数据类型、运算符等基本内容，希望通过本节课的讲解，大家可以掌握数据类型与运算符的使用方法，增加JaVaSCriPt相关知识的储备。【学生】总结回顾知识点总结知识点，巩固学生对JavaSCriPl数据类型、运算符等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，设计含有字符串或数字的弹窗提示，增加多种数据类型的运算功能，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课下来，发现学生的练习不够，教师的检查不够。教学中，应合理安排学生的练习时间，让学生在练习中体会、理解，在练习中总结、反思，从而巩固所学知识。