第3章 JavaScript语言基础.ppt

第3章JavaScript语言基础 教学目标 通过本章的学习 使学生掌握JavaScript脚本的基础知识 为后续章节的学习打好基础 教学要求 学习重点 变量的定义和使用表达式的计算方法控制语句的结构和使用方法函数的定义和调用 数据类型 数值型在JavaScript中 所有数字都用浮点型表示 不区分整型和浮点型 数字的有效范围是10 308 10308 如453 7 52 1 72e5等 字符串型字符串型是用单引号或双引号引起来的一个或多个字符 数字和标点符号的序列 如 helloword JavaScript123 你好 编程 布尔型布尔型只有两个值 真 True 和假 False 代表一种状态或标志 用来作为判断依据控制操作流程 通常 非0值表示 真 0值表示 假 数据类型 空值空值是一个特殊的数据类型 用关键字null表示什么都没有 创建一个对象失败时返回空值 也可以直接将null赋值给变量 未定义型未定义型也是一个特殊的数据类型 用关键字undefined表示 当使用一个没有被赋值的变量或使用一个不存在对象的属性时 JavaScript会返回undefined 对象对象是一种复杂的数据类型 它是数据项和函数的集合 常量 固定不变的量称为常量 使用常量一方面可以提高代码的可读性 另一方面可以使代码易于维护 比如一段代码中 经常用到字符串 hello 可以通过如下声明 constmyConst hello 注意 const不支持IE浏览器显示 因此当编辑IE浏览器浏览的网页时需要慎用常量 变量 值可以变化的量称为变量 变量是一个已命名的容器 变量名代表其存储空间 变量命名规则变量名可以是数字 字母 下划线 或符号 第一个字符必须是字母 下划线或符号 变量名不能包含空格和加号 减号等符号 变量名严格区分大小写 如myString与mystring代表两个不同的变量 变量名不能使用JavaScript中的关键字 变量声明和赋值 在JavaScript中 变量由关键字var声明 语法如下 varrecord 在声明变量时可以对变量进行赋值 也可以同时声明多个变量 并同时给多个变量赋值 在JavaScript中 变量声明不是必须的 第一次给变量赋值时 就已经声明该变量 但声明变量有助于及时发现代码中的错误 因此在使用变量之前先进行声明是一种好的习惯 类型转换 JavaScript是一种无类型语言 为数据类型的转换提供了灵活的处理方式 如果某个类型的值需要用于其他类型的值的环境中 JavaScript就自动将这个值转换成所需要的类型 这种转换方式被称为隐式转换 隐式转换如声明一个变量record 并给它赋值为86 表示record是一个数值类型的变量 现在改变record的值 将字符串 良好 赋值给变量record record转换为字符串型变量 隐式转换在大多数情况下可以随时处理数据类型之间的转换 但有些情况是不行的 如 average record 5 当record值是一个字符串时 该语句就会发生错误 类型转换 显式转换将字符串转换为数值 JavaScript提供parseInt 和parseFloat 两个内置函数将表示数值的字符串转换为合法的数值 parseInt 5xyz 5parseInt 0 xA3 163parseFloat 5 21abc 5 21parseFloat s14 32 NaN将数值转换为字符串 当遇到的表达式中含有混合数据类型时 JavaScript会倾向于字符串 变量的作用域 JavaScript中变量的作用域分为全局变量和局部变量 对于用关键字var声明的变量 在函数内定义的称为局部变量 在函数外定义的称为全局变量 不用var声明的变量无论在函数内还是函数外都默认是全局变量 全局变量的作用域是整个脚本 整个HTML文档 局部变量的作用域在定义的函数内 只能被其下面的语句块和子函数使用 表达式和运算符 表达式是变量 值和运算符按一定的规则连接起来的 有意义的式子 运算符是表达式的主要组成部分 有算术运算符 关系运算符和逻辑运算符 算术运算符在使用时总是按照一定的顺序来计算 下表中运算符是按优先级从低到高排列的 优先级最低 优先级最高 如果按照优先级计算顺序不能得到预期的结果 可以用括号 来改变优先级 当表达式中不止一类运算符时 先处理算术运算符 再处理关系运算符 最后处理逻辑运算符 算术运算符 JavaScript常用算术运算符 关系运算符 JavaScript常用关系运算符 逻辑运算符 JavaScript常用逻辑运算符 语言基础操作案例 相关代码 语言基础操作varx 这是一个字符串 声明变量vary 76 varz 6 varr vara 321abc varb 3 21abc varc abc123 document write 变量x的初始值为 x 显示变量初始值document write 变量y的初始值为 y document write 变量z的初始值为 z document write 变量r的初始值为 r x y 改变变量的值document write document write y变量赋值给x变量后 x的值为 x document write y变量赋值给x变量后 y的值为 y 相关代码 r x z 计算表达式document write document write 计算表达式x z的值为 r r x z x 2 3document write 计算表达式x z x 2 3的值为 r document write document write 数据类型的隐式转换 数据类型隐式转换y y变为一个字符串 document write 变量y被重新赋值后值为 y document write document write 数据类型的显式转换 数据类型显示转换document write 利用parseInt 将字符串变量a转换为数值变量 parseInt a document write 利用parseFloat 将字符串变量b转换为数值变量 parseFloat b document write 利用parseInt 将字符串变量c转换为数值变量 parseInt c 条件语句的使用 if语句if语句是JavaScript的主要条件语句 一般形式为 if 条件表达式 语句块 条件语句的使用 如果条件表达式结果为假的时候也需要进行指定动作 则可以通过关键字else实现 形式为 if 条件表达式 语句块 else 语句块 条件语句的使用 JavaScript提供了一种条件表达式的简写形式 结构如下 条件表达式 语句1 语句2 该语句的意义是 如果条件成立 执行语句1 否则执行语句2 一个if语句只能进行一个条件判断 包含两个分支 而在实际应用中条件通常不止一个 遇到此类情况时可以通过if语句的嵌套来实现 条件语句的使用 switch语句switch 表达式 case值1 语句块1 break case值2 语句块2 break case值n 语句块n break default 语句块n 1 条件语句的使用 switch后面的表达式通常是变量 语句使用中需要注意以下3点 表达式值依次与case后面的值做比较 如果与某个值相匹配 那么其后的语句块就会被执行 若所有的值都不匹配 就执行default后面的语句块 case本身不能改变代码流程 需要和break联用 break用于结束当前case语句 并跳至switch末尾 break不是必须有的 如果没有break 会继续执行当前case后的所有case语句 无论是否匹配 case后面必须是常量表达式 并且每个case后面表达式的值必须互不相同 条件语句的使用案例 本案例效果是根据对话框输入的成绩得到不同的提示框 如果输入的不是数值 提示 输入的不是数值 请重新输入 成绩在0 59之间提示 成绩不合格 成绩在60 69之间提示 成绩合格 成绩在70 79之间提示 成绩中等 成绩在80 89之间提示 成绩优良 成绩在90 100之间提示 成绩优秀 输入成绩不在以上范围的提示 输入成绩无效 请重新输入 相关代码 条件语句使用varrecord prompt 输入考生成绩 if isNaN record alert 输入的不是数值 请重新输入 else record Math floor record 10 switch record case0 case1 case2 case3 case4 case5 相关代码 alert 成绩不合格 break case6 alert 成绩合格 break case7 alert 成绩中等 break case8 alert 成绩优良 break case9 case10 alert 成绩优秀 break default alert 输入成绩无效 请重新输入 break 循环语句的使用 while语句当需要重复执行某些语句的时候 可使用循环语句 while语句可以实现循环 语句结构如下 while 条件表达式 循环体 循环语句的使用 while语句包含4个重要组成部分 循环变量 条件表达式 循环体 改变循环变量值的语句 循环变量是控制循环结构的关键 它需要有一个初始值 条件表达式是包含循环变量的一个逻辑表达式 只有条件为真时才执行循环体 否则跳出循环执行大括号后的语句 循环体是需要反复执行的语句 为了保证循环能够实现 在循环体语句中 必须包含一条改变循环变量值的语句 当执行完一次循环体后 重新判断新的循环变量值是否符合条件 循环语句的使用 do while语句do while循环是循环语句的另一种形式 与while循环的不同在于前者条件表达式在循环末尾 后者在循环开头 do while语句结构如下 do 循环体 while 条件表达式 因为条件表达式在循环末尾 因此 不管条件表达式是否成立 循环体语句至少会执行一次 循环语句的使用 for语句for语句是JavaScript提供的第三种循环形式 for语句结构如下 for 表达式1 表达式2 表达式3 循环体 其中3个表达式的作用如下 表达式1为循环变量赋初值 表达式2给出循环条件判断 表达式3用来改变循环变量的值 循环语句的使用 for in语句for in语句通常用来遍历对象的每一个属性或是数组的每一个元素 例如 for iinobj document write i 值为 obj i 如果obj是一个对象 则循环变量i表示obj对象的每一个属性 obj i 表示该属性的值 如果obj是一个数组 则循环变量i表示序号 obj i 表示第i个数组元素 循环语句的使用案例 本案例效果是根据消息提示框的提示依次输入所有学生的各科成绩 并最终将输入结果以表格形式显示 相关代码 循环语句使用vari 0 varname newArray 李丽 王明 周山 刘玉 李红 刘昊 苏静 张雨 王平 周周 定义学生数组varkm newArray 英语 高数 C语言 动态脚本 数据结构 定义科目数组document write 姓名 相关代码 for ninkm 显示标题行 document write km n document write for ninname 每个学生成绩信息为一行 document write name n while i record i document write i 0 document write 跳转语句的使用 break语句无穷循环可能会导致浏览器无法退出甚至无法响应用户的操作 而且JavaScript不会生成错误信息提示无穷循环 因此 在创建循环时 应尽量避免出现无穷循环 尽管无穷循环在编程中不被提倡 但也有特殊情况 比如 可能希望程序一直运行 直到响应用户某个操作时停止 这就需要用break语句强制退出循环 基本结构如下 while true 循环体 if 条件表达式 break 跳转语句的使用 continue语句利用continue语句也可以跳出循环体 但与break语句不同的是 continue用来结束本次循环 例如 while i 100 i if i 4 0 continue total total i 该语句的意义是将小于等于100的能被4整除的数相加求和 当i不能被4整除时 执行continue语句 结束本次循环 即跳过求和语句 继续进入下一次循环 跳转语句的使用案例 本案例效果是随机生成0 100间的随机整数 如果是3的倍数 就在页面中显示 如果生成的是0 则结束 最后利用提示框提示循环执行次数和显示的值的个数 相关代码 跳转语句使用varn 0 varm 0 while true n varmy random Math floor Math random 100 if my random 0 相关代码 break if my random 3 0 document write my random m else continue alert 共产生 n 个随机数 其中3的倍数有 m 个 异常处理语句的使用 throw语句throw语句的作用是创建exception 异常 通常与try catch语句配合使用 用来控制程序流程并产生精确错误消息 语句结构如下 throw exception exception可以是字符串 整数 逻辑值或者对象 异常处理语句的使用 try catch finally语句try catch finally语句为异常处理语句 为程序出现意外和异常时提供解决方法 语法结构如下 try 语句块 catch exception 语句块 finally 语句块 异常处理语句的使用 3个关键字的作用列举如下 try语句块 定义异常 将可能产生错误的语句定义在try中 异常可以是人为引发的 比如代码输入错误 也可以是通过throw语句抛出的 catch语句块 定义异常处理 将异常处理语句放在catch中 该语句块是可选项 finally语句块 可以省略 无论是否发生异常都会执行 通常将关闭资源的语句放在finally中 以确保程序能在处理完异常后自动再次投入运行 该语句块也是可选项 异常处理语句执行的流程是 运行到try块时 如果有异常抛出 则转到catch块 catch块执行完毕后 执行finally块的代码 如果没有异常抛出 执行完try块 也要去执行finally块的代码 异常处理语句的使用案例 本案例效果是在消息提示框中输入一个值 如果输入的值在0 100之间 不抛出错误信息 提示 输入的成绩为 如果输入的值小于0 抛出错误信息 提示 成绩不能为负数 如果输入值大于100 抛出错误信息 提示 成绩不能大于100 如果输入的不是数值 抛出错误信息 提示 输入的不是数值 无论输入值是什么 给出相应提示后再提示 成绩输入完毕 相关代码 异常处理语句使用varx prompt 输入考生成绩 try if x100 throw err2 elseif isNaN x throw err3 alert 输入的成绩为 x 相关代码 catch er if er err1 alert 成绩不能为负数 if er err2 alert 成绩不能大于100 if er err3 alert 输入的不是数值 finally alert 成绩输入完毕 其他语句的使用 this语句this是面向对象语言中的一个重要概念 在面向对象语言中 this通常用来指向运行时的当前对象 但由于JavaScript是解释执行的 因此this的指向是在运行时才确定的 在JavaScript中 this通常指向的是正在执行的函数本身 或者在运行时指向该函数所属的对象 with语句with语句用来指定一个对象 在with语句块中 没有指定对象名的属性和方法都被假定为该对象的属性和方法 with语句在一般情况下只是减少了一些打字时间 但是在处理DOM DocumentObjectModel 文档对象模型 对象时 会变得非常有用 其他语句的使用 new语句new语句用来创建一个对象 但是JavaScript是一门基于原型的语言 JavaScript没有类的概念 这一点与面向对象的Java语言是不同的 因此在new语句的使用上要格外注意 delete语句delete语句用来删除对象中动态添加的属性或数组中的元素 语句结构如下 deleteexpression expression参数是一个有效的JavaScript表达式 通常是一个属性名或数组元素 delete语句只用来删除对象中的属性 对象本身不会被删除 其他语句的使用案例 本案例效果是定义一个学生对象 包含学号 姓名和英语 高数 C语言 动态脚本 数据结构5门成绩 该对象还提供输出信息和计算总成绩两个方法 相关代码 其他语句使用functionStudent no name english mathe m c js data s this no no this name name this english english this mathe m mathe m this c c this js js this data s data s this showStudent function 相关代码 document write 学号 this no 函数的使用 函数的定义在JavaScript的实际应用中 通常需要较长的脚本来实现具体功能 如果将所有脚本都直接放在标签中 会导致程序的可读性下降 解决这个问题的一个好办法 就是把整个脚本分割成具有相对独立功能的几段脚本 把相关的脚本组织在一起 并给它们命名相应的名称 这种组合形式称为函数 使用函数前 必须先定义 在HTML中 当网页被加载时标签首先被执行 因此函数通常被定义在部分 以保证在使用前已经被定义 函数的定义方法如下 function函数名 参数列表 函数体 函数的使用 function是函数定义的关键字 函数名的命名规则与变量命名规则相同 函数名后面的括号用来定义参数 多个参数间用逗号 分隔 实现功能的脚本被定义在花括号 中 JavaScript中所有函数都属于function对象 因此可以以定义变量的方式 利用Function对象的构造函