《JavaScript基础》PPT课件.ppt

第11章JavaScript基础 第11章JavaScript基础 11 1概述11 2JavaScript基础11 3变量 数据类型和表达式11 4控制语句11 5函数11 6对象11 7错误捕获和处理11 8内部JavaScript和外部JavaScript11 9注释 11 1JavaScript概述 在第一章里面我们已经知道 Ajax的关键组件之一就是JavaScript语言 在Ajax出现之前 JavaScript一直被程序员看作是 玩具语言 它能做的事情就是 让你的鼠标周围围绕了很多的小星星 标题栏里面出现跑马灯效果 点击某个对象的时候出现爆炸效果 等等 因为当时JavaScript仅仅使用在浏览器端 而浏览器端不能仅仅通过JavaScript就与服务器端通信 于是JavaScript一直默默无闻的做丑小鸭 但是 当Google使用JavaScript使客户端与服务器端异步通信获得了成功后 这个丑小鸭才越来越多的获得了人们的目光和赞誉 这一切还是必须归功于IE5带来的XMLHttpRequest 11 1JavaScript概述 首先 JavaScript不是Java 虽然它们的名字听起来有些像 但它们之间完全没什么联系 它们的共同点也微乎其微 JavaScript是由网景公司开发人员BrendanEich发明的 最初名称是Mocha 后来更名为LiveScript 最后确定名称为JavaScript 1995年网景公司第一次在浏览器 Netscape2 0 中引入这个语言以来 这个名称一直与Java混淆在一起 后来 微软也推出了自己的JavaScript 叫做Jscript 最初Jscript只能运行在IE上 到目前为止 这两者之间几乎没有区别了 当然 我们在书写的时候 尽量避免使用 Jscript 名称 因为很多浏览器并不知道这个名字 11 2 1构建JavaScript编程环境 JavaScript程序是一个文本文件 可以用任意文本编辑器 如记事本 直接编辑 到本书出版时 市面上仍没有一个可以像在VisualStudio中编辑C 那样方便的编辑器来编辑JavaScript 但是仍然有不少的好工具可供我们使用 工欲善其事必先利其器 优秀的IDE可以使程序员减少大量的工作量 编者在这里推荐使用免费的Aptana http www A 另外诸如Intellij NetBeans Eclipse EditPlus等均可使用 在确定了编辑工具后 我们还要创建调试环境 IE和 11 2 1构建JavaScript编程环境 FireFox下都有JavaScript调试器 我们这里推荐使用IE8和FireFox FireBug IE8下自带了开发人员工具 我们可以在菜单工具 开发人员工具 F12 找到 FireBug是FireFox下的一个插件工具 可以到Mozilla网站上免费下载 安装完成后 可在菜单查看 FireBug F12 找到 两个工具均可设置断点后逐行调试 并且可查看变量值的变化 DOM信息 JavaScript错误等信息 建议将IE8菜单工具 Internet选项 高级将 禁用脚本调试 取消 由于IE系列和FireFox类浏览器在JavaScript使用中 有很多地方是不一样的 所以建议开发者两者都进行安装 11 2 1构建JavaScript编程环境 编者的经验是安装IE8 具有兼容IE7的功能 和FireFox 另外安装一个绿色版的IE6进行调试 建议编写的所有程序尽量在多种版本浏览器下进行测试 现在有很多软件企业生产了一些多版本兼容浏览器 由于编者没有进行过详细测试 在这里不多做介绍 有兴趣的读者可以自己进行测试 评估 11 2 2入门示例 我们先来看一个简单的示例 在这个示例中 我们构建了一个HTML页 其中有一个按钮 文字是 弹出提示信息 当用户点击按钮时 弹出一个消息框 例11 1alertMsg htm例11 1弹出提示信息 在这里创建了一个alertMsg函数functionalertMsg 调用alert方法弹出提示信息alert 按钮被点击了 注意 不能省略 11 2 2入门示例 将上述代码保存后 用浏览器直接打开时 默认安全设置会组织JavaScript在本地执行 浏览器工具栏下方会出现提示栏 图11 1 提示 为了有利于保护安全性 InternetExplorer已限制此网页运行 信息 可以使用鼠标左键点击后 允许阻止内容 图11 2 在IE或FireFox中点击按钮后 均会弹出提示信息 按钮被点击了 如图11 3和图11 4所示 在后面的叙述中 若浏览器返回结果都一致 我们不再二者都列出 11 2 2入门示例 图11 1IE阻止JavaScript执行 图11 2允许阻止的内容 11 2 2入门示例 图11 3在IE中显示 图11 4在FireFox中显示 11 2 2入门示例 从上面的例子我们可以看出 JavaScript是以代码块的方式内嵌在HTML代码中的 在浏览器中被执行并得到最终结果 标记可以省略language javascript 属性 浏览器默认识别为JavaScript functionalertMsg 调用alert方法弹出提示信息alert 按钮被单击了 注意 不能省略 上面的代码块定义了一个名称为 alertMsg 参数为空的函数 这个函数只有一个功能 就是弹出一个消息框 内容为 按钮被点击了 函数使用大括号 和 将所有该函数代码包围 11 2 2入门示例 在块中 可定义多个function来实现复杂应用 同时也可以将实现特定的功能模块的JavaScript封装为 js文件 更加方面的进行调用 后面我们会详细讲到 这里的标记创建了一个按钮 第三个属性为 onclick alertMsg 表示该按钮被点击后 调用一个名称为 alertMsg 的函数 这个函数已经在和标记间载入了 我们可以看到 处在标记和间的函数必须通过一个触发才能执行 不在标记和间的JavaScript是按照载入顺序执行的 11 2 2入门示例 例11 2scriptLoad htm例11 2脚本加载正在加载页面alert 脚本在页面加载过程中被执行 当消息框被关闭后才能继续加载其他脚本后的内容在IE中运行 将产生下面的结果 11 2 2入门示例 如图11 5所示 页面在加载过程中 遇到了块 并执行 同时也由此中断了页面流 页面一直停顿在消息框显示状态 而第二个标签一直处于等待 图11 5页面加载中执行脚本 11 2 2入门示例 载入状态 并未显示出来 通过这样的方式 我们可以将JavaScript代码块放到其他标签或页面代码中 确保在页面处理的时候正确的执行它 当用户点击了确定按钮后 标签内容出现在页面中了 图11 6页面完成载入 11 2 3JavaScript的交互方法 在JavaScript中 人机交互有四种方法 警告对话框 确认对话框 提示对话框 window write 警告对话框给用户一个提示内容和一个确认按钮 用alert 方法实现 如图11 3所示 确认对话框与警告对话框相比 增加了一个取消按钮 确认对话框使得用户可以对目前的操作进行确认 是继续操作 还是取消操作 用confirm 方法实现 提示对话框在确认对话框的基础上 再增加一个用于信息输入的文本框 参考图11 8 用prompt 方法实现 另外在网页上显示信息的方法还有document write 方法 11 2 3JavaScript的交互方法 1 alert方法JavaScript使用alert 方法编写警告对话框 其标准格式为 window alert content 在编程中 习惯用简写格式 alert content alert 的参数是一个作为警告用的字符串 例11 1和例11 2中给出了alert 的简单用法 仅仅使用该方法来编写警告对话框 在其他情况下 可以在alert 中使用转义字符来控制警告对话框的信息显示格式 例如 alert x1 x1 tx2 x2 n nx1 x2 x1 x2 nx1 x2 x1 x2 11 2 3JavaScript的交互方法 2 confirm 方法在JavaScript中 用confirm 方法编写确认对话框 该方法的简化格式为 confirm content 例11 3confirm 方法示例 confirm 方法示例confirm 方法示例 11 2 3JavaScript的交互方法 W3CGoogle百度程序使用超级链接元素 在该元素中设置属性onClick来调用confirm 方法 程序运行结果如图11 7 如果选择 确定 则链接到相应的网站 否则取消链接 11 2 3JavaScript的交互方法 3 prompt 方法在JavaScript中 用prompt 方法编写提示对话框 格式如下 varinput prompt promptcontent defaultcontent 其中 第一个参数是提示文本 第二个参数是文本框中的默认值 一般情况下 默认值用空字符串 代替 如果省略默认值 则会在文本框中出现 undefined 字样的默认值 通过该方法输入的数据被赋给变量input 11 2 3JavaScript的交互方法 图11 7confirm 方法示例 11 2 3JavaScript的交互方法 例11 4prompt使用示例 prompt 方法示例varstudentName prompt 输入学生姓名 prompt 方法示例在脚本中使用了prompt 运行结果如图11 8 11 2 3JavaScript的交互方法 图11 8prompt 方法示例 11 2 3JavaScript的交互方法 4 document write 方法在JavaScript中 除了使用上述方法外 还可以使用document write 方法来显示信息 与它们不同的是 该方法显示的信息将作为网页的内容出现在网页中 在例11 4程序的varstudentName prompt 输入学生姓名 后面增加一行 document write 你好 studentName 同学 程序的显示结果如图11 9 图11 9document write 方法示例 11 3变量 数据类型和表达式11 3 1数据类型 在JavaScript中 包含数值型 字符串型和布尔型三种基本数据类型 1 数值型整型数是不含小数点的数 可以用十进制 八进制 或十六进制表示 但习惯上使用十进制数据表示 使用八进制数时 需要在数据值前冠以 0 如八进制数235应该写成0235 使用十六进制数是 需要在数据值前冠以 0 x 如12ff表示成0 x12ff 浮点数是带小数点的数 取值范围为 1 7976 10318 1 7976 10318 最小的取值为5 10 324 11 3 1数据类型 2 字符串型在JavaScript中 字符串是用单 双引号作为定界符括起来的一个字符序列 如 123 Wearestudents 我在学习 思考 工作 等等 都是JavaScript中有效字符串 注意 单双引号均采用英文符号 如果字符串中需要包含单引号或双引号时 需要用双引号嵌套单引号来定界 或用单引号嵌套双引号来定界 如 他说 我要去昆明 表示了字符串 我要去昆明 两边的单引号是串的内容 又如 他说 我要去昆明 则表示了字符串 我要去昆明 两边的双引号是串的内容 11 3 1数据类型 3 布尔型在JavaScript中 布尔型数据只有两种取值 一个是true 真 一个是false 假 用于判断一个逻辑表达式的 真 或者 假 11 3 2变量 1 布尔型变量定义在JavaScript中 定义变量非常简单 各种类型的变量都可以用var关键词进行定义 在定义变量时 变量的类型是根据初始化时数据值的类型来确定的 varName Sex Age在给变量赋初值之前 Name Sex Age三个变量的类型是不确定的 是undefined类型 只有对变量赋给初值后 变量的类型才确定下来 如 Name 张三 Sex 男 Age 20 此时 Name和Sex是字符串型 而Age是整型 11 3 2变量 有时需要在定义变量时就给变量进行初始化 如 定义变量并赋值varstudent1 张三 varstudent2 李四 2 变量作用域被定义在函数内的变量只能够被当前函数范围内被访问 在函数外声明的变量被认为是全局变量 能够被当前网页内部的任意JavaScript函数访问 11 3 3表达式 表达式是用运算符把常量 变量连接起来 形成具有某种含义的计算语句 在JavaScript中 有算术表达式 逻辑表达式和条件表达式 1 表达式和运算符使用算术运算符连接的变量和常量的计算语句叫算术表达式 在JavaScript中 常用的算术运算符为 加 减 乘 除 取余数 自加 自减 例11 6算术运算示例算术运算 11 3 3表达式 functionarithmeticOperation varx1 15 varx2 10 alert x1 x1 tx2 x2 n nx1 x2 x1 x2 nx1 x2 x1 x2 算术运算示例在alert 函数中使用了转义字符 n 换行 t 制表符 来控制输出格式 11 3 3表达式 图11 10算术运算示例 11 3 3表达式 当使用 连接的是字符串时 表达式的结果是把两个字符串首尾相连 如 varstudents student1 student2 此时 students的内容为 张三李四 自加 和自减 运算符的语法与C语言的一致 例如 varx 0 varsum 0 x sum sum x 结果为b 1 sum 1 11 3 3表达式 2 逻辑表达式在JavaScript中 逻辑表达式有两类 一类是比较表达式 一类是逻辑表达式 比较表达式使用比较运算符连接 因为其运算结果是逻辑值 真 或 假 所以把它归为逻辑表达式 常用的比较运算符为 等于 不等于 大于等于 大于 y z的结果为真 逻辑表达式使用逻辑运算符连接 常用的逻辑运算符为 非 与 或 11 3 3表达式 functioncompareOperation varx1 15 varx2 10 alert x1 x2 把例11 5的函数arithmeticOperation 改为上述函数compareOperation 则例11 5的显示结果如图11 11 图11 11逻辑运算示例 11 3 3表达式 3 位运算表达式在JavaScript中 位运算是把变量值按照该值的二进制数进行操作的运算 主要用于根据位运算的结果进行程序流程控制 JavaScript先把数值转换为32位的二进制数 然后进行运算 常见的位运算符有 右移 按位与 按位或 例如 15 2 3 15 2 2 15 2 15 11 3 3表达式 4 其他表达式在JavaScript中 除了上述运算外 常用的还有条件表达式 逗号表达式 条件表达式使用符号 表示 设a b c为表达式 条件表达式的形式为 a b c含义为如果表达式a成立 则取表达式b的值 否则取c的值 例如 state age 60 retired working 表示如果年龄大于60 状态为 退休 否则为 工作 11 3 3表达式 逗号表达式使用多个逗号把多个语句捆绑在一起 表达式的值是最后一个语句的值 例如 varx y zvarxyz x 1 y 2 z 3 alert xyz 运行结果为xyz 3 11 4 1条件控制 在JavaScript中常用的条件控制语句有if if else switch 1 if语句没有else的if语句用来执行较为简单的操作 没有分支 格式为 if expression statement 当expression的值为真时 执行statement语句 否则程序将跳过此if语句 如果statement为单条语句时 statement前后不需要块操作符 否则 多条语句必须用 把多个表达式括起来 例如 根据两个变量a b的当前值判断是否交换a b两个变量值 11 4 1条件控制 vara 1 b 2 if a b vartemp a a b b temp 2 if else 语句含有else的if语句形成双分支结构 当紧跟在if后的条件表达式为真时 执行else前的语句 否则执行else后的语句 该语句的格式为 if expression statement1 elsestatement2 11 4 1条件控制 例如 vara 1 b 2 if a b a elseb 上面的语句可以用条件表达式来简写成 vara 1 varb 2 a b a b 用上述语句修改例11 6的程序 代码如下 结果显示在图11 12中 图11 12if条件语句示例 图11 12if条件语句示例 11 4 1条件控制 3 switch语句当需要对多个变量进行判断时 会采用if语句的多重嵌套 这时会形成非常复杂的逻辑结构 对于初学者来讲 这是困难的 在JavaScript中 使用switch语句可以方便地代替多个if语句的并排使用 使代码更易阅读 执行效率更高 switch语句的格式为 switch expression casecondition1 statement1 break casecondition2 statement2 break caseconditionn 1 statementn 1 break 11 4 1条件控制 default statementn JavaScript将根据expression的值选择n 1个操作的一个来执行 如果没有条件符合 则执行default后的语句 例如 下面的语句将根据用户的权限来选择该充当哪个角色 varprivilege 1 switch userPriv privilege case1 alert 超级管理员 break case2 alert 一般用户 break default alert 无此权限 11 4 1条件控制 在上面程序中 每一个分支中 除default分支外 都有break语句做跳出分支作用 在所有分支都不符合条件时 则执行default分支 上面程序 若privilege 6 则提示信息为 无此权限 11 4 2循环 JavaScript中可以使用while do while for三种方法完成循环或迭代的处理 1 while循环 while循环vara prompt 请输入一个整数 varb prompt 请输入另一个整数 while a b a 结果a 12 do while循环 do while循环vara prompt 请输入一个整数 varb prompt 请输入另一个整数 11 4 2循环 do a while a b 结果a 2与while循环不同的是 while循环先判断 后执行 do while循环是先执行 后判断 3 for循环 for循环vara 1 b 50 for vari 0 i b i a a 3 结果a 151 11 5函数11 5 1函数定义 在JavaScript中 函数的本质是一个对象 用户可以根据自己的需要来设计函数 然后调用 函数的定义格式为 functionfunctionName parameter1 parameter2 parameterN statements 其中 function是定义函数的关键词 functionName为函数名 为其他程序调用该函数提供依据 parameter1 parameterN为形式参数 如果函数没有参数 则称函数为无参函数 调用该函数时 不需要使用参数 如果函数含有参数 则在调用该函数时必须给定参数值 这时的参数叫实参 11 5 1函数定义 函数的功能可以是一个结构非常复杂的算法 也可以是一个简单的输入或输出语句 下面是只有简单输入输出语句的函数 functionoutput varname prompt 请输入姓名 alert 欢迎你 name 函数直接把结果输出出来 没有必要定义参数 11 5 2函数调用和参数传递 对于含有参数的函数 调用时需要为参数定义实际值 这时 在函数中需要返回计算结果 JavaScript中函数计算结果的返回用return语句来实现 我们用一个逻辑结构稍微复杂的函数定义和带参数的函数调用的例子来说明函数的参数传递 例11 6根据学生的成绩来划分学生成绩的等级 分数 90为 优秀 89 分数 80为 良好 79 分数 70为 中等 69 分数 60为 及格 分数 60为 不及格 使用if嵌套来定义分类函数classify 11 5 2函数调用和参数传递 functionclassify score vargrade if score 90 grade 优秀 elseif score 80 grade 良好 elseif score 70 grade 中等 elseif score 60 grade 及格 elsegrade 不及格 returngrade classify score 函数中的score是形式参数 在函数classify score 中定义了变量grade来存放分类结果 函数 11 5 2函数调用和参数传递 的最后一行用returngrade 语句返回该变量的值 这个值也是函数的返回值 调用函数classify score 的函数inOut 定义如下 functioninOut varstudentScore prompt 输入学生成绩 alert 该生的成绩为 classify studentScore classify score 函数的形式参数score在函数调用时用实参studentScore来传递参数值 该值通过prompt 来输入 这样就可以实现带参数的函数调用 把这两个函数放到例11 6的中代替原函数arithmeticOperation 11 5 2函数调用和参数传递 修改后的程序如下 函数调用functionclassify score vargrade if score 90 grade 优秀 elseif score 80 grade 良好 elseif score 70 grade 中等 elseif score 60 grade 及格 elsegrade 不及格 11 5 2函数调用和参数传递 returngrade functioninOut varstudentScore prompt 输入学生成绩 alert 该生的成绩为 classify studentScore 函数调用示例该程序的运行结果如图11 13和图11 14 11 5 2函数调用和参数传递 图11 13函数调用示例之数据输入 图11 14函数调用示例之分类结果 11 5 2函数调用和参数传递 例11 7函数调用示例2函数调用functionalertMsg userName varwelcomeMsg welcome userName alert 欢迎您 welcomeMsg functionwelcome reqName return 欢迎您 reqName 11 5 2函数调用和参数传递 函数中的参数可以自己定义 在本例中 传递的参数本质都是一样的 是从button中获得的 张三 在函数alertMsg中 参数名称被定义成了userName 而在welcome函数中 参数名称为reqName 对于参数名称定义 一般按照个人的习惯 并无强制规定 需要注意的是 参数必须区分大小写 我们将该程序运行并点击按钮 得到下面的结果 在函数中 可以使用return语句返回函数结果 如本例中的语句 这个语句将返回由字符串 欢迎您 和alertMsg函数中传递过来的userName值组合而成最终结果 return 欢迎您 reqName 11 5 2函数调用和参数传递 图11 14函数调用示例2 11 6对象 对象的概念来自面向对象 Object oriented 编程 面向对象编程需要学习和掌握类 对象 属性 方法 继承 封装等概念 关于这些概念的讨论需要较大的篇幅 鉴于本书不是专门讨论面向对象方法的 所以我们省略关于这些概念的讨论 感兴趣的读者可以参考面向对象方法学和面向对象编程方面的专业书籍 为了更好理解JavaScript中对象的定义和实例化概念 我们先分析一个实例 例11 8用构造器来构造对象 然后对对象进行实例化操作 11 6对象 构建对象 使用构造器function来构造对象functionshirt name price 在构造器中声明属性this name name this price price 实例化对象varlacoste newshirt 鳄鱼 320 00 varpualFrank newshirt 大嘴猴 430 00 弹出提示信息 11 6对象 弹出提示信息alert lacoste name lacoste price alert pualFrank name pualFrank price 动态添加属性lacoste size XXL alert lacoste size 运行该程序 得到如下效果 11 6对象 图11 15创建对象 11 6对象 使用function这样定义函数的方式构造一个对象 这个函数就称之为构造函数 构造函数名称即为对象名 构造函数的参数 是对象的属性值 或其他变量 构造器函数内 使用this 属性名称 的方式创建对象属性 在本例中 对象名称为shirt 对象属性在构造器函数内使用this name和this price来创建 两个属性名称分别为name和price 在创建属性完成后 紧接着将传入构造器的参数对应属性进行赋值 this name name 第一个name是属性名称 第二个name是属性值 和this price price 11 6对象 functionshirt name price 在构造器中声明属性this name name this price price 紧接着 程序实例化了对象 实例化对象的时候 仍然选择使用了var定义的方式 在赋值符号 后 使用 new 关键字定义新实例来自某个对象 本例中为shirt 实例化对象的属性值在对象名后用逗号 分割 varlacoste newshirt 鳄鱼 320 00 而对实例属性 可以写为 实例名称 属性 的方式 下面的代码使用消息框显示了实例lacoste的name属性值和price 11 6对象 属性值 alert lacoste name lacoste price JavaScript还允许对实例动态的添加属性 在本例中 我们动态的为实例lacoste添加了size属性 并且赋值为XXL lacoste size XXL 除了以上介绍的对象知识外 JavaScript还可以在构造器中声明函数 可以将上面代码修改为 functionshirt name price 在构造器中声明属性this name name this price price this alertMsg function alert 品牌 this name 价格 this price 11 6对象 实例化对象varlacoste newshirt 鳄鱼 320 00 varpualFrank newshirt 大嘴猴 430 00 调用函数lacoste alertMsg pualFrank alertMsg 程序保存并运行后 得到如下结果 图11 16构造器内声明函数 11 7错误捕获和处理 JavaScript使用的错误捕获与很多高级语言类似 通过try catch finally程序块构建错误捕获和处理机制 程序仍然是尝试执行try块内代码 如果出现错误 捕获它并执行catch块内代码 最终无论怎样都执行finally块内代码 我们把例11 8的错误进行一下捕获 例11 9catchErr htm例11 10错误捕获functionshirt name price 在构造器中声明属性 11 7错误捕获和处理 在构造器中声明属性this name name this price price this alertMsg function alert 品牌 this name 价格 this price 实例化对象varlacoste newshirt 鳄鱼 320 00 varpualFrank newshirt 大嘴猴 430 00 调用函数try lacoste alertmsg catch e alert e 11 7错误捕获和处理 finally alert finally块内的内容最终都会执行 将代码保存后运行 我们能看到首先弹出错误信息 其次执行finally块中的内容 11 8内部JavaScript和外部JavaScript 通常情况下 程序员会把通用的过程或函数封转为一个独立的 js文件 这个文件和我们上面叙述的代码没有任何区别 仅仅在于存在于服务器的形式不一样 类似我们前面讲过的内部CSS和外部CSS形式 对于在页面中引用这个文件 我们可以在页面的和之间写入引用代码来完成 在本书中 为了保持程序的一致性和易读性 除了标准通用函数外 其他JavaScript均采用内部JavaScript方式来完成 在实际软件项目中 程序员应该根据实际情况来确定使用哪种方式 11 9注释 使用 前导对一行代码进行注释 如 循环取出根节点中内容 使用 和 注释代码块 如 authorwoods 封装XPath paramxmldoc执行查找的节点 paramsXpathXPath表达式 注释可根据个人习惯来进行 编者通常使用第1种方法对具体代码做注释 使用第2种方法对函数或过程作总说明