网页设计与制作——JavaScript+jQuery标准教程 教案 第2章 JavaScript基础.docx

《网页设计与制作——JavaScript+jQuery标准教程 教案 第2章 JavaScript基础.docx》由会员分享，可在线阅读，更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第2章 JavaScript基础.docx（11页珍藏版）》请在第一文库网上搜索。

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学口课内实践口理实一体0习题复习口考核评价口其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价口汇报展示口其他活动团课外：序号2授课日期月日月日月日月日授课班级课内教学内容：第2章JaVaSCriPt基础课外学习任务：(1)课前：以小组为单位，讨论JavaScript语言的概念以及语法规则并以PPT的形式记录下来。(2)课后：使用JavaScript语言实现多种数据运算。教学目标：知识目标 掌握变量的定义； 掌握关键字； 掌握数据类型分类； 掌握数据

2、类型转换； 掌握多种运算符的使用。能力目标 能够了解JavaScript的基础功能； 能够掌握使用JavaScript的常用语法； 能够使用JaVaSCriPt实现多种数据的运算。素质目标 较强的专业知识和技术能力； 丰富知识结构，提升专业知识； 能高效的掌握JavaScript语言语法的相关内容。重点难点及解决方法：（1）重点：掌握JaVaSCriPt语言的各种语法规则解决方法：通过课堂练习+启发式教学的方法，教师通过讲解JaVaSCriPt语言的各种基础语法，引导学生积极思考，掌握各种语法的使用规则；同时通过配套示例，使学生深入掌握JaVaSCriPt语言的使用；培养学生的思维能力和分析问

3、题解决问题的能力。（2）难点：使用JaVaSCriPt语言实现各种数据运算解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用JavaScript语言实现各种数据的运算。帮助学生加深掌握JavaScript语言各种语法规则的相关知识。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按

4、制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“J课内教学内容及过程时间分配方法及手段【导引示例】在JaVaSCriPt中，可以通过变量存放多种类型的数据，还可以通过运算符实现多种数据的运算效果1 .变量【定义变量】1 .声明变量声明变量语法形式如下所示。var变量名；一次性声明多个变量其语法形式如下所示。var变量1,变量2,变量n;2 .变量的命名规则（1）由字母、下画线和数字组成。（2）第一个字符必须为字母或下画线。（3）第一个字符不能为数字，其后的

5、字符可以为字母、数字和下画线。(4)不能为关键字。例如，Var属于关键字，不可以用于命名变量。(5)变量推荐使用小驼峰法(CameICaSe)来命名。除第一个单词外，其他单词首字母大写，例如，表示学校信息的变量可以命名为SChOOnnf0。(6)变量命名时要尽量做到“见名知意”，推荐使用英文单词，不推荐使用拼音。例如,表示年龄的变量命名为age要比nian1ing表达的含义更加直观和准确。3 .初始化变量变量名=值；4 .定义变量Var变量名=值；【关键字】JavaScript的关键字如表2.1所示。abstractargumentsboo1eanbreakbytecasecatchcharc

6、1assconstcnnfincdshiiooerdcf1tdeknsdndoub1eekeenumeva1exnortextendseIkefina1finn11vf1ntforfunctionpotnifimn1ementsiimporininstanceofintinterface1et1ongnativenewnu11packageprivateprotectedpub1icreturn【案例分析2-1数据交换编程思想定义两个变量NUm1和NUm2,并将两个变量的值交换，然后通过弹窗显示2.数据类型【数据类型分类】JavaScript的数据类型分为基本数据类型、引用数据类型和特殊对象类

7、型3种。基本数据类型括未定义(Undefined)、空(NU11)、布尔类型(BOO1ean)、字符串类型(String)和数值类型(Number)0引用数据类型包括对象类型(Object)、数组类型(Array)和函数类型(Function)o特殊对象类型包括正则类型(RegExp)和日期类型(Date)o【数据类型分类】1 .进制数值类型可以使用的进制包括十进制、二进制、八进制和十六进制。二进制数只用0和1两个数字表示；八进制数使用07共8个数字表示，在书写时需要添加前缀“0”；十六进制数使用数字09以及字符AF共16个字符表示，其中，字母不区分大小写，在书写时需要添加前缀“Ox”。例如，

8、存储不同进制数的变量定义如下所示。varNUm1=IO10;二进制数VarNum2=30;十进制数VarNUm3=077;八进制数VarNUm4=0x5FA3;/十六进制数2.范围在JaVaSCriPt中，通过MAX_VA1UE可以获取对应类型数据的最大值，通过MIN.VA1UE可以获取对应类型数据的最小值。【字符串类型】1 .字符串长度字符串是由多个字符组成的，字符的个数就是字符串的长度。使用字符串类型的1ength属性可以返回指定字符串的长度。2 .字符串拼接字符串与字符串之间可以通过连接符（+）进行拼接。如果数据类型不同，JavaScript会自动将非字符串类型数据转换为字符串类型数据后

9、进行拼接。3 .转义符在使用字符串表示数据时，除了普通的字符，还可以通过转义符表示一些特殊的字符。转义符以反斜杠（）为起始字符，可以用来表示换页、换行等特殊字符。JavaScript中常用的转义符如表2.2所示。代码输出V_单引号V双引号W-反斜杠n换行r回车t1ab（制表符）b退格符f换页符【布尔类型】布尔类型数据包含true和fa1se两个值。trUe表示真，转换为数值用1表示。fa1se表示假，转换为数值用O表示。布尔类型数据多用于逻辑判断。【其他基本数据类型】其他基本数据类型包括未定义数据类型Undefined和空数据类型Nu11o当变量只声明没有初始化时，变量的默认值为Undefin

10、edoNU1I值也可以赋值给对应的变量，但是多在指针对象中使用。【数据类型转换】在多种类型数据运算时会涉及数据类型不统一的情况，这会导致一部分数据运算出现错误。例如，字符串类型数据和数值类型数据相加，最后得到的会是字符串拼接。因此，可以对数据进行数据类型转换后再进行相应运算，从而保证运算结果正确。1 .获取数据类型获取数据类型可以使用typeof运算符实现。2 .将数据转换为字符串类型数据将数据转换为字符串类型数据的方式有3种，具体如下。 将数据和字符串类型数据进行拼接，系统会自动将数据转换为字符串类型数据。 使用toString()函数将数据转换为字符串类型数据。 使用Smng()函数将数据

11、转换为字符串类型数据。3.将数据转换为数值类型数据将数据转换为数值类型数据的方式有3种，具体如下。 使用ParSeInto函数将数据转换为整数。 使用ParSeFIOat()函数将据转换为浮点数。 使用NUmber()函数将字符串类型数据转换为数值类型数据。 使用减法、乘法和除法算术运算符在运算时将数据自动转换为数值类型数据。不同转换方式对应的转换规则如表2.3所示。源数据oarse1nt()DarseFIoatt)Nunber()和运算符纯数字字符串对应数字对应数字对，E数字空字符串NaNNaN0数字开头字符串开头数字开头数字Naq非数字开头字符串NaNNaN,NaNnu11NaNNaN0u

12、ndefinedNaNNaNNa4trueNaNNaN1fakeNGNNaN04.将数据转换为布尔类型数据将数据转换为布尔类型数据需要使用BOO1eano函数实现。Boo1ean()函数会将0、NaN.NUI1和Undefined转换为fa1se,将其他数据转换为IrUe。【案例分析22】输出多种类型变量的值定义多种类型的变量，并将变量的结果愉出到浏览器的控制台中3.运算符【运算符概述】在JaVaSeriPt中，根据运算符的功能，可以将运算符分为算术运算符、递增/递减运算符、比较运算符、逻辑运算符、赋值运算符。根据运算符的操作数个数，可以将运算符分为单目运算符、双目运算符和三目运算符。其中，目

13、就是操作数的个数，也可以称为“元”【运算规则】1 .算术运算符JavaScript中的算术运算符与数学中的四则运算符基本相同，包括加法运算符(+)、减法运算符()、乘法运算符(*)、除法运算符(/)和取模运算符（）。算术运算符为双目运算符，其语法形式如下所示。操作数1算术运算符操作数2算术运算符如表2.4所示。运算符描述雨+加法+5的和%与构为8减法3的差自课为2*乘法，*5的积i与果为15/除法；/2的商维i果为4%取模（余数）%3的余数结果为12 .递增/递减运算符递增/递减运算符根据操作数与运算符的位置可以分为前置递增/递减运算符和后置递增/递减运算符两种。（1）前置递增/递减运算符。+操作数或-操作数（2）后置递增/递减运算符。操作数+或操作数-3 .比较运算符比较运算符为双目运算符，用于比较两个操作数的大小，比较运算的结果为布尔值。如果两个操作数的关系符合运算符的法则就返回true,否则返回fa1se常用的比较运算符如表2.5所示。运算符运算符说明示列当左边操作数大于右边操作数时返回true否则返回fa1se5夕返回te36返回fi1se当左边操作数小于右边操作数时返回true否则返回fa1se4)返回true4=当左边操作数大于等于右边操作数时返回t