ASP程序设计第4章JavaScript脚本语言.ppt

ASP程序设计课件 2008 年 12 月 中国水利水电出版社 ASP程序设计 第四章 JavaScript脚本语言 本章导读 本章导读： JavaScript是一种基于对象和事件驱动并具有安全性能的脚本 描述语言。利用JavaScript可进一步增强网页的人机交互性、 方便操作和控制各种浏览器对象，实现控制浏览器外观、状 态和运行方式的目的，从而减轻服务器端负担。 本章要点： n数据类型 n常量和变量 n运算符 n内置对象与函数 n程序结构 n浏览器对象 ASP程序设计 第四章 JavaScript脚本语言 4.1.1 JavaScript的语法特性 4.1.2 JavaScript脚本语法结构 4.1 JavaScript语言概述 ASP程序设计 第四章 JavaScript脚本语言 JavaScript的字母区分大小写的； JavaScript语句一般以分号（;）作为结束符； 一条语句可以写在多行，一条语句写在多行时用续行符斜杠 （/）；多条语句也可以写在一行，多条语句写在一行时， 每条语句一定要加结束符分号(;) JavaScript的注释符号包括多行注释符/*和*/和单行注释符 号/； 分支结构、循环结构、自定义函数等程序段包含多条语句时 称为语句块，应该置于一对大括号内内； JavaScript忽略程序中的空格、换行和制表符，除非这些 符号是字符串或正则表达式中的一部分. 4.1.1 JavaScript的语法特性 ASP程序设计 第四章 JavaScript脚本语言 JavaScript脚本的嵌入位置和运行方式都比较自由， 既可以直接嵌入当前文档，又可以独立存放在外部文件中， 运行方式既可以直接运行，也可以根据需要伴随事件运行。 其基本格式如下： 1直接嵌入，直接运行。 通过标记对直接嵌入在当前文件中。 2外部引入，直接运行。 将JavaScript程序以扩展名“.js”的文件单独存放，再利用 标记的src属性引入外部文件，其语法格式如下： 4.1.2 JavaScript脚本语法结构 ASP程序设计 第四章 JavaScript脚本语言 3直接嵌入，事件触发。 通过事件触发方式执行JavaScript的方法或函数主 要有两种： 一种是在HTML标记的属性中设置JavaScript的事件 处理函数，事件被视为HTML标记的属性 。如下 格式所示： 4.1.2 JavaScript脚本语法结构 ASP程序设计 第四章 JavaScript脚本语言 另一种在JavaScript对象的属性中设置 JavaScript的事件处理函数，事件被视为 JavaScrip对象的属性。 function showAlert() username=document.myform.text1.value; if (username=) alert(“用户名不能为空“); document.myform.mybutton.onclick = showAlert; 4.1.2 JavaScript脚本语法结构 ASP程序设计 第四章 JavaScript脚本语言 4.2.1 JavaScript数据类型 4.2.2 JavaScript常量 4.2.3 JavaScript变量 4.2.4 JavaScript运算符 4.2.5 运算符号的优先级 4.2 JavaScript的数据结构 ASP程序设计 第四章 JavaScript脚本语言 JavaScript语言是一种弱类型的脚本语言，数 据类型通常分为六种： 数值型：即Number，由09的数字字符，正负号 ，小数点组成，如2.6、3.14等等。 逻辑型：即Boolean，只包括true（真）和false（ 假）两个值，在JavaScript中，整数0约定为false ，非0整数约定为true。 字符型：即String，是用单引号或双引号定界的字 符串序列，字符包括英文、汉字、空格或数字。 4.2.1 JavaScript数据类型 ASP程序设计 第四章 JavaScript脚本语言 对象型：即Object，对象是方法和属性的集合体 。 未定型：即Undefined，一个已经声明但还没有 赋值的变量，或者表示一个对象的属性根本不存 在。 空值型：即Null，表示变量没有值或不是一个对 象，即什么也不是。在JavaScript中 typeof 运算 符将报告 null 值为 Object 类型 注：可用typeof运算符测试一个数据的类型。 4.2.1 JavaScript数据类型 ASP程序设计 第四章 JavaScript脚本语言 根据数据类型的不同，常量可分为: n数值型常量 n字符型常量 n逻辑型常量 n转义字符 4.2.2 JavaScript常量 ASP程序设计 第四章 JavaScript脚本语言 对变量的声明未作强制性规定。可以不声明，而直接 赋值使用；也可以先声明，后赋值使用，声明的同 时还可以赋值。声明多个变量时，变量名之间用逗 号（,）隔开。 JavaScript用var命令声明变量，并且无须指明数据 类型，其数据类型由变量值的类型决定的，变量命 名必须以字母（大小写均可）、下划线(_)或美元 符 ($)开头，变量名称不能使用Javascript语法保 留的关键字。 4.2.3 JavaScript变量 ASP程序设计 第四章 JavaScript脚本语言 JavaScript脚本提供了极其丰富的运算符，包 括赋值、条件、算术、字符连接、关系、逻 辑和位运算符。 1. 条件运算符 4.2.4 JavaScript运算符 ASP程序设计 第四章 JavaScript脚本语言 2.赋值运算符 4.2.4 JavaScript运算符 ASP程序设计 第四章 JavaScript脚本语言 3.算术运算符 4.2.4 JavaScript运算符 ASP程序设计 第四章 JavaScript脚本语言 4.比较运算符 4.2.4 JavaScript运算符 ASP程序设计 第四章 JavaScript脚本语言 5.逻辑运算符 4.2.4 JavaScript运算符 ASP程序设计 第四章 JavaScript脚本语言 6.位运算符 4.2.4 JavaScript运算符 ASP程序设计 第四章 JavaScript脚本语言 7.其它运算符位 4.2.4 JavaScript运算符 ASP程序设计 第四章 JavaScript脚本语言 JavaScript的运算符优先级同其它编程 语言一样有一套规则，首先计算算术运算符 ，然后计算比较运算符，最后计算逻辑运算 符。具有相同优先级的运算符按从左至右的 顺序求值。各运算符优先级顺序如下表所示 （自上而下，优先级从高到低）： 4.2.5 运算符号的优先级 ASP程序设计 第四章 JavaScript脚本语言 函数是由事件驱动的或者可被重复调用的， 可执行的一段命名的代码块。函数是将程序 块的程序代码隐藏起来，使用函数名称进行 调用和传递参数。 JavaScript拥有两种函数，一种是系统内置 函数，另一种是自定义函数。常用内置函数 见下表所示： 4.3 内置函数 ASP程序设计 第四章 JavaScript脚本语言 4.4.1 分支结构 1.ifelse语句 2.switch 语句 4.4.2 循环结构 4.4 3 break和continue语句 4.4 程序结构 ASP程序设计 第四章 JavaScript脚本语言 1.ifelse语句 单分支结构 这是一种简单分支结构，省略了else子句，条 件为true 时执行语句,语法结构如下： if (条件表达式) 语句序列 说明：先计算条件表达式的值，如果返回true 就执行语句序列，反之不执行。当语句序列只 有一句时，还可以省略。 4.4.1 分支结构 ASP程序设计 第四章 JavaScript脚本语言 n二分支结构 nif.else 语句定义了两个可执行语句块，条件为true 或 false 时分别执行其中一支语句块。语法结构如下： nif (条件表达式) n语句序列1 n nelse n语句序列2 n n说明：先计算条件表达式的值，如果返回true时运行语句序 列1，如果返回 false 时运行语句序列2。 4.4.1 分支结构 ASP程序设计 第四章 JavaScript脚本语言 n多分支结构 nif. else 语句还可以进行多分支选择，实现对多个条件依次进行判断选 择。语法结构如下： nif(条件语句1) n语句序列1 nelse if(条件语句2) n语句序列2 nelse if(条件语句3 ) n语句序列3 n nelse n语句序列n 4.4.1 分支结构 ASP程序设计 第四章 JavaScript脚本语言 n说明： n如果条件表达式1成立，那么就执行语句序列1。 n如果条件表达式1不成立，那么就判断条件语句2 是否成 立，如果条件语句2成立，那么就执行语句序列2。 n如果条件表达式2不成立，那么就判断条件语句3 是否成 立，如果条件语句3成立，那么就执行语句序列3。 n依此类推，如果ifelse中的判断条件都不成立，那么就 执行语句序列n。 4.4.1 分支结构 ASP程序设计 第四章 JavaScript脚本语言 n2.switch 语句 n使用多个else if 子句往往会使程序变得难以理解， 在多个条件中进行选择的更好方法是使用switch语 句。 nswitch语句是ifelse if 语句的一种变通形式，可 以从多个语句块中选择执行其中的一个语句块。 switch语句提供的功能与if. else if 语句类似，但 是可以使代码更加简练易读。其语法格式如下： 4.4.1 分支结构 ASP程序设计 第四章 JavaScript脚本语言 nSwitch(变量或表达式) ncase 值1: n语句序列1;break; ncase值2: n语句序列2;break; n ncase值n: n语句序列n;break; ndefault: n语句序列n+1;break; n 4.4.1 分支结构 ASP程序设计 第四章 JavaScript脚本语言 n说明：switch语句在其开始处使用一个只计 算一次的简单测试表达式。表达式的结果将 依次与分支结构中case值比较。如果匹配， 则执行该case 关联的语句块。Default子句 指明例外情况，当表达式和所有的case子句 中值都不同时，则会执行这些语句。 4.4.1 分支结构 ASP程序设计 第四章 JavaScript脚本语言 n循环结构用于重复执行一组语句的结构， JavaScript提供了5种循环结构。现介绍如下： n语法结构一： nwhile (条件) n语句序列 n n说明：先判断条件，当条件为 true 时才会执行循 环体语句 4.4.2 循环结构 ASP程序设计 第四章 JavaScript脚本语言 n语法结构二： ndo n语句序列 nwhile(条件) n说明：先无条件执行循环体一次，然后再判 断条件，当条件为 true时才会继续执行循环 体。 4.4.2 循环结构 ASP程序设计 第四章 JavaScript脚本语言 n语法结构三： nfor (;) n语句序列 n n说明：指定循环次数,使用计数器重复运行语 句 4.4.2 循环结构 ASP程序设计 第四章 JavaScript脚本语言 n语法结构四： nfor( in ) n语句序列 n n说明：遍历循环，遍历对象中的每个属性或 者遍历数组中每个元素，并重复执行循环体 语句。 4.4.2 循环结构 ASP程序设计 第四章 JavaScript脚本语言 n语法结构五： nwith对象名称 n n语句序列 n n说明：针对对象执行一组语句，所有这些语 句都假定引用指定的对象。 4.4.2 循环结构 ASP程序设计 第四章 JavaScript脚本语言 n默认情况下，循环语句将进行无休止地循环 执行，除非循环条件表达式的值为假。如想 提前中断或跳过循环，需在句块中添加 break 或continue语句就可以了。 nbreak语句中断所有循环，而continue语句 则跳过本次循环的剩余语句，然后开始下一 次循环。 4.4 3 break和continue语句 ASP程序设计 第四章 JavaScript脚本语言 4.5.1 函数定义 4.5.2 函数的调用 4.5.3 变量的作用域 4.5.4 函数对象定义 4.5 function函数 ASP程序设计 第四章 JavaScript脚本语言 nfunction语句主要用来定义静态函数，当然 也可以定义函数对象，定义静态函数的语法 结构如下： nfunction 函数名 (形参1,形参2) n局部变量定义 n函数执行部分 nreturn 表达式 n 4.5.1 函数定义 ASP程序设计 第四章 JavaScript脚本语言 n说明： n函数以function 定义开始； n形参可有可无，形参定义时不能赋值，多参数之 间用逗号（,）隔开，如没有形参，函数名后仍然 包含空括号( )； n一对大括号内包含的程序行是函数主体，任何 时候不能省略大括号，即使其内部只有一条程序 ； n在函数的内部，参数可以直接当作变量来使用， 并可以用var语句来建立一些新的变量。 4.5.1 函数定义 ASP程序设计 第四章 JavaScript脚本语言 nreturn语句后表达式为函数所要的返回的值，若 函数结束时没有return语句，则函数为返回一个 Undefined类型的数据； n实参调用与形参定义有无没有关系，即使没有定 义形参，仍然可以传入参数，此时可以通过 argumnets对象（Arguments Array，参数数组 对象），来获取参数的个数及其参数的值； n还可以创建自定义函数对象。有关自定义函数对 象请参阅4.5.4节 4.5.1 函数定义 ASP程序设计 第四章 JavaScript脚本语言 n格式1：varname=函数名（实际参数） / 有返回值时用 n格式2：函数名（参数值） /无返回 值时用 n说明：形参和实参可以同名。 n函数调用时，参数传递存在两种方式： n当实参是数值时，按值传递； 4.5.2 函数的调用 ASP程序设计 第四章 JavaScript脚本语言 当实参是变量时，根据数据类型的不同，参 数传递的方式有所不同。数据类型为数字， 字符串和布尔型时执行按值传递。数据类型 为对象，数组，字符串对象，函数时执行按 地址传递。需要注意的是，如果将对象和数 组传入函数，虽然执行按地址传递，但是不 能在函数中改变对象和数组本身，只能更改 对象和数组的元素。 4.5.2 函数的调用 ASP程序设计 第四章 JavaScript脚本语言 n变量的作用域是指变量起作用的范围。按照 变量作用的范围，JavaScript变量有两种， 即局部变量和全局变量。 n局部变量：在函数内用var声明的变量，其 作用域仅局限于该函数内 n全局变量：作用域是整个HTML文件，包括 在函数外用var声明的变量和在函数内未用 var声明的变量 4.5.3 变量的作用域 ASP程序设计 第四章 JavaScript脚本语言 n使用function语句建立函数对象（建构函数）一般 包括2到4个步骤，具体方法如下： n1.定义函数对象，新增函数对象的方法和属性； n2.定义函数对象的方法，如果函数对象定义时，新 增了方法，则定义此方法； n3.建立对象实例（副本），用new命令建立对象实 例，建立对象实例时，可以同时传入属性值，也可 以建立对象实例后，再设置属性值 。 4.5.4 函数对象定义 ASP程序设计 第四章 JavaScript脚本语言 4.6.1 String对象 4.6.2 Math对象 4.6.3 Array对象 4.6.4 Date对象 4.6.5 Number对象 4.6.6 Boolean对象 4.6.7 Function对象 4.6.8 Object对象 4.6 JavaScript内置对象 ASP程序设计 第四章 JavaScript脚本语言 nJavaScript语言的典型特性就是对象，一切皆对 象，甚至连数据，数据类型等等都可以当作对象 。将变量和相关处理函数封装成对象，每个对象 都有自己的属性和方法。属性可以访问对象的数 据，方法主要用来处理数据的函数。JavaScript 支持4种对象：内置对象、自定义对象、浏览器 对象和ActiveX对象。 nJavaScript提供了11种内置对象，其中常用内置 对象如图所示。 4.6 JavaScript内置对象 ASP程序设计 第四章 JavaScript脚本语言 n在JavaScript中，内置对象一般不能直接使用，需要使用 new命令创建该对象的实例，然后通过对象实例间接使用 该对象及其属性和方法。 nJavaScript对象可以视为一个数组，对象属性就是数组的 元素，所以也可以使用数组索引序号或者索引名（属性名 ）的方式访问对象属性，具体引用有下列三种方式： n使用点（.）运算符 nuniversity.Name=“安徽省“ n通过下标实现引用 nuniversity0=“安徽省“ n通过字符串的形式实现 nuniversity“Name“=“安徽省“ 4.6 JavaScript内置对象 ASP程序设计 第四章 JavaScript脚本语言 n格式：var 对象实例名=new String(“字符串“); n说明：建立字符串对象，使用时注意以下几点： n关键字new和String可同时省略，省略关键字时 ，隐性建立一个string对象，可以使用string对象 的方法，但不可使用prototype和expando属性； nString对象提供了一个属性，即length，用来返 回字符串的长度，其用法为：对象实例名.length ； 4.6.1 String对象 ASP程序设计 第四章 JavaScript脚本语言 nString对象提供了一组方法，用于对字符串的处 理 nJavaScript采用Unicode编码，1个汉字 和1个西文字符都是算一个字符。 nString对象还提供了一些格式字符方法 n使用时注意方法名、关键字的大小写。 4.6.1 String对象 ASP程序设计 第四章 JavaScript脚本语言 n格式：Math.方法|属性 n说明：利用该对象的属性和方法实现数学运 算，使用时注意以下几点： n不能用new创建该对象而直接使用； n数学常数被定义成该对象的属性，其属性 名全部采用大写， n常用的数学运算函数被定义成该对象的方 法，其方法名全部采用小写 4.6.2 Math对象 ASP程序设计 第四章 JavaScript脚本语言 n格式：var 数组名=new Array(数组大小|数组元素 列表); n说明：建立数组对象，使用时注意以下几点： n数组对象提供了一个属性，即length，用于取得 数组的元素个数； n数组大小具有自动扩展机制，可以指定数组的大 小，也可以不指定数组的大小； n通过索引下标可以引用数组元素，下标起始值从 0开始计数； 4.6.3 Array对象 ASP程序设计 第四章 JavaScript脚本语言 n数组中的各元素值的类型可以各不相同； n建立数组对象时，也可同时指定数组元素 的值； n关键字new和Array可同时省略，省略关 键字时，需将数组元素列表放在一个方括号 中，多元素之间用逗号隔开； n不能直接建立二维或多维数组对象，不过 数组元素的内容可以是数组对象，从而间接 建立多维数组； 4.6.3 Array对象 ASP程序设计 第四章 JavaScript脚本语言 n格式：var 实例名=new Date(value); n说明：创建日期和时间的对象实例，使用时注意以 下几点： n缺省值时，自动保存当前系统的日期和时间； nDate对象提供了很多方法用于设置和获取日期和 时间 n也可以创建指定日期的对象实例，如var thday=new Date(2008,9,1);； n也可以创建指定时间的对象实例，如var thtime=new Date(2008,9,1,10,15,0,0);； 4.6.4 Date对象 ASP程序设计 第四章 JavaScript脚本语言 n格式：var 实例名=new Number(value) n说明： n可以将数字作为Number对象访问； n可以通过为构造函数指定一个参数值来创建一 个Number对象，如： nmyNum = new Number(100) n也可以不用创建对象直接使用，如： ndocument.write(“NaN = “ + Number.NaN + “) nNumber对象提供的3个属性 和2个方法 4.6.5 Number对象 ASP程序设计 第四章 JavaScript脚本语言 n格式：var 对象实例名= new Boolean(value) n说明： n可以将布尔值当作对象访问； n参数value可以是true或false，也可以是 任意类型的值，但值null、“（长度为0的字 符串）、NaN、0将变成false，其它值变成 true。 4.6.6 Boolean对象 ASP程序设计 第四章 JavaScript脚本语言 n格式：var 函数名 = new Function(“参数 1“, “参数2“, “参数3“, “函数体“); n说明：自定义函数对象，使用时注意以下几 点： nFunctino()对象（又称构造函数，不是 function语句），可以定义多个形式参数， 形参名以字符串形式出现，多参数之间用逗 号（,）隔开； 4.6.7 Function对象 ASP程序设计 第四章 JavaScript脚本语言 n函数体是可选的，可以包含任何 JavaScript语句，多语句之间需用分号（;） 隔开； n如果定义的函数没有参数，那么可以只需 给构造函数传递一个字符串（即函数的主体 ）即可； nFunction()对象定义函数时并没有定义函 数名，因而用Function()创建的未命名函数 有时被成为“匿名函数”。 4.6.7 Function对象 ASP程序设计 第四章 JavaScript脚本语言 n格式：var 对象实例名= new Object(value) n说明：创建一个自定义对象实例或自定义对 象，使用时注意以下几点： nObject对象是派生所有其他对象的对象， 包括内置对象； nObject对象的属性和方法，及其扩展的方 法和属性可以派生给所有其他对象； nObject对象提供了2个属性 和2个方法 4.6.8 Object对象 ASP程序设计 第四章 JavaScript脚本语言 4.7.1 Window对象 4.7.2 Document对象 4.7.3 History对象 4.7.4 Navigator对象 4.7.5 Location对象 4.7.6 Link对象 4.7.7 Screen对象 4.7.8 External对象 4.7.9 窗体验证 4.7 浏览器对象 ASP程序设计 第四章 JavaScript脚本语言 nJavaScript将浏览器本身，网页以及网页的 HTML元素等都用相应的对象来表示，这些对象 及对象之间的层次关系统称为DOM（Document Object Model，文档对象模型又称为浏览器对 象），浏览器对象是一个上下包含关系的层次结 构的对象模型，上层包含很多下层子对象，上下 对象之间是一种从属关系。 n在这种从属关系结构模型中，Window（窗口） 对象是浏览器对象层次结构中最高层，所有其他 对象都可以视为Window对象的属性。浏览器对 象模型如图所示。 4.7 浏览器对象 ASP程序设计 第四章 JavaScript脚本语言 nwindow（窗口）对象是浏览器对象层次结构中最 高层，window对象代表浏览器的整个窗口。每个 窗口都是window对象的实例，引用实例可以通过 以下名称表示： nwindow或self：表示当前窗口； ntop：代表最顶层窗口； nparent：代表当前窗口的父窗口； nopenner：由open打开的窗口。 n各从属对象可采用如下方式进行访问： nwindow.子对象1.子对象2.属性名或方法名 4.7.1 Window对象 ASP程序设计 第四章 JavaScript脚本语言 n1window对象的方法 n如图所示： n2window对象的属性 nname属性：用于指定窗口的名称，可以使用a标记的target属性指定 窗口的名称，也可以使用open方法打开一个指定名称的新窗口。 ndefaultstatus属性：用于设置或读取浏览器窗口状态栏中的默认显 示信息。例如，可以在window对象的onload事件过程中编写以下语句 ： n nstatus属性：用于设置或读取浏览器窗口状态栏中显示的临时信息。 例如，可以在某张图片的onmouseover事件过程中编写以下代码： nwindow.status = “这是一张图片。“ nscreenLeft属性：传回左边界的坐标。 nscreenTop属性：传回上边界的坐标 4.7.1 Window对象 ASP程序设计 第四章 JavaScript脚本语言 document对象表示在浏览器窗口或其中一个 框架中显示的HTML文档，通过该对象的属性 和方法可以控制页面的外观和内容。 1. document对象方法 2. document对象属性 4.7.2 Document对象 ASP程序设计 第四章 JavaScript脚本语言 nhistory对象包含用户已经浏览过的url集合，提供 了浏览器的导航按钮功能，可以通过文档的历史记 录来浏览文档。history对象拥有以下主要属性和 方法。 n length属性：返回历史记录表中的url数目。 n back方法：从历史记录表中返回上一页。 n forward方法：从历史记录表中返回下一页。 n go(num)方法：在历史记录表中跳转到指定的 页，num小于0为上一页，反之下一页。 4.7.3 History对象 ASP程序设计 第四章 JavaScript脚本语言 navigat