[工学]WEB程序设计课件 第3章__脚本语言.ppt

第3章 脚 本 语 言 n1 . 什么是脚本语言 n2 . JavaScript语言 n3 . VBScript语言 n4 . 其他脚本语言 n 本 章 小 结 n脚本程序设计在Web程序 设计中占有很重要的地位 ，无论是客户端动态页面 设计，还是动态网站设计 中的服务器端编程，使用 最多的就是脚本语言。在 众多的脚本语言中，使用 最广泛的是JavaScript和 VBScript。本章将详细讲 述这两种脚本语言的基本 语法和应用，同时对其他 一些脚本语言也将做简单 介绍 1 1 3.1 什么是脚本语言 n脚本（script）语言的概念源于Unix系统 ，在Unix系统中，将主要以行命令组成的 命令集称为Shell脚本程序 n应用于Web页面设计的脚本语言 ： JavaScript、VBScript以及用于编写CGI脚 本程序的Perl、Shell Script等 n大大提高了客户端的交互性，使用非常简 单、灵活，利用它可以设计客户端动态网 页 n客户端脚本程序和服务器端脚本程序 2 2 3.2 JavaScript语言 3 3 3.2.1 JavaScript语言概 述 nJavaScript具有如下特点： （1）简单性 （2）基于对象 （3）可移植性 （4）动态性 4 4 JavaScript语言与Java语言的差别 : nJava是由Sun公司推出，主要应用于网络程序设计， 对于非程序设计人员来说不易掌握；而JavaScript主 要用于编写网页中的脚本，易于学习和掌握 nJava程序可以单独执行，但JavaScript程序只能嵌入 HTML中，不能单独运行 nJava具有严格的类型限制，JavaScript则比较宽松 nJava程序的编辑、编译需要使用专门的开发工具而 JavaScript程序时只要用一般的文本编辑器即可 5 5 3.2.2 JavaScript编程基础 nJavaScript程序的编辑和调试： 可以用任何文本编辑器来编辑JavaScript脚本程序 ，例如：NotePad。然后需要将JavaScript程序嵌 入到HTML文件中程序的调试在浏览器中进行 JavaScript程序嵌入HTML文件的方法有以 下两种: (1).在HTML文件中使用，标记加 入JavaScript语句，这样HTML语句和JavaScript语 句位于同一个文件中。其格式为 6 6 （2）将JavaScript程序以扩展名“.js”单独存放，再利 用以下格式的标记嵌入HTML文件中： 一个简例： JavaScript简例 alert( “世界，你好!“ ); 查看效果 7 7 n编写JavaScript程序时还要注意以下 几点： （1）JavaScript的大小写是敏感的，这一点与 C+相似。 （2）在JavaScript程序中，换行符是一个完整的语 句结束标志；若要将几行代码放在一行中，则各语 句间要以分号（；）分隔 （3）JavaScript的注释标记是/之后的部分，或 /*与*/之间的部分（与C+相同） 8 8 n数据类型: I. 数值型: 数值型数据包括整数和浮点数。 整数可以是十进制、八进制和十六进制数，八进制 值以0开头，十六进制值以0x开头。 例如：100（十进制），021(八进制)，0x5d(16 进制) 浮点数例子：2.57，1.3e6，2，7e-10 II. 逻辑型:逻辑型数据有true和false两种取值，分别 表 示逻辑真和逻辑假 III. 字符型:字符型数据的值是以双引号“ “或单引号 括起来的任意长度的一串字符。注意“”是转义字符，常 用的转义字符序列有： n 换行符 t 水平制表 符 r 回车符 b 退格符 9 9 n常量和变量 常量:常量是在程序中其值保持不变的量 变量:变量是在程序中其值可以改变的量 JavaScript命名变量的规则: （1）变量名必须以字母（大小写均可）开头，只能由字母 （大小写均可）、数字（09）和下划线（_）组成 （2）变量名长度不能超过一行，并且不能使用JavaScript 保留字作为变量名 （3）变量名字母区分大小写 1010 表3-1 JavaScript的保留字 1111 4.运算符和表达式 I. 运算符:JavaScript运算符包括赋值运算符、算术运 算符、字符串运算符、逻辑运算符、关系运算符和位运 算符等6类 赋值运算符 :基本赋值运算符“=”，复合赋值运 算符+=， =，*=，/=和%= 算术运算符 : 如下： 1212 n字符串运算符：字符串运算是JavaScript中使用最多的运算 ，它只有一种“+”运算，即字符串连接运算 n逻辑运算符和关系运算符 ：逻辑运算符有： 1414 下面举例说明函数的定义和调用方法（例 31显示指定数的阶乘值 ）： 函数简例 function factor(num) var i,fact=1; for (i=1;i document.write(“调用factor函数，5的阶乘等于：“,factor(5),“ 。“); 查看效果 1515 n【例3-2】 设计一个求累加和的函数，默认时 求 1+2+1000 ，否则按照用户所指定的开始值和终止值求和。 程序如下： function sum(StartVal,EndVal) var ArgNum = sum.arguments.length; /用户给出的参数个数 var i,s=0; if (ArgNum = 0 ) StartVal = 1; EndVal = 1000; else if (ArgNum = 1 ) EndVal = 1000; for (i = StartVal; i“); document.write(“给出一个参数调用函数sum:“,sum(500),“); document.write(“给出二个参数调用函数sum:“,sum(1,50),“); 查看效果 1616 【例3-3】 变量作用域示例 变量作用域示例 var i, j=10;/全局变量 function output( ) var j=0;/局部变量 i=100;/全局变量 j+; j+; document.write(“ j=“,j); document.write(“ i=“,i); i+; document.write(“尚未调用函数output()，所以i无定义，不能引用！“); document.write(“j的初始值=“,j,“); document.write(“调用output()，观察函数的输出！“); output(); document.write(“调用output()后，观察函数对i,j的影响：i=“,i,“ j=“,j); 查看效果 1717 6.流程控制 n条件转移语句： if (condition) statements1 else statements2 nwhile循环语句： while (condition) statements nfor循环语句 ： for (exp1；exp2；exp3) statements ncontinue和break语句： continue语句强制本轮循环结束，进入下一轮循环 break语句强制结束循环 1818 【例3-4】 本例使用for循环语句计算10 ！ var i,factor; factor=1; for (i=1;i 查看效果 1919 7.事件触发和处理 n由鼠标或热键引发的一连串程序的动作，称为事件驱动 n对事件进行处理的程序或函数，称为事件处理程序 表3-4 JavaScript常用事件表 2020 【例3-5】 本例说明MouseOver和MouseOut事件 用法 n页面被加载到浏览器中，将显示图3-3左边的页面，当鼠标放于页面中的小方块图标 或超链接文字“软件设计”上时，该位置将显示一个钩状图标，如图3-3右所示 图3-3 MouseOver和MouseOut事件处理示例 查看源代码 查看实际效果 2121 8.综合举例：一个简易计算器的设计 【例3-6】 简易计算器设计。所设计的简易计算器界面如图所 示 查看源代码查看源代码 查看实际效果查看实际效果 2222 3.2.3 JavaScript对象 nJavaScript对象概述 引用JavaScript内建对象 由浏览器环境中提供，即引用浏览器对象 创建自定义对象 自定义对象 这部分介绍自定义对象的创建方法 2323 【例3-7】 “书”对象的定义 function print( ) /方法成员定义，输出各属性成员值 document.write(“书名为“++“); document.write(“作者为“+this.author+“); document.write(“出版社为“+this.publisher+“); document.write(“出版时间为“+this.date+“); document.write(“印数为“+this.num+“); function book(name,author,publisher,date,num) /构造函数 =name; /书名，属性成员 this.author=author; /作者，属性成 员 this.publisher=publisher;/出版社，属性成员 this.date=date; /出版时间，属性成员 this.num=num;/印数，属性成员 this.print=print;/方法成员 2424 n构造函数从形式上看与普通函数 相同，但它也有其特殊性： n构造函数的名字就是对象的名字 n在构造函数中常使用关键字this来为对象的 属性成员和方法成员初始化，this本身是一 个特殊对象，即当前构造函数正在创建的 对象 n每个对象都必须定义构造函数 2525 3.对象的引用 n要引用对象，必须先用保留字new创建对象的实例 。在JavaScript中，对象是对具有相同特性的实 体的抽象描述，而对象实例则是具有这些特性的单 个实体 u创建对象实例的方法 ：var对象实例名=new对象名（实 在参数表） u对象属性成员的引用格式：对象实例名.属性成员名 u对象方法成员的引用格式：对象实例名.方法成员名 2626 4.有关对象操作的语句 nfor.in语句。这是一条循环语句，其格式 如下：for (变量名 in 对象实例名) nwith语句 ，其语法格式如下： with object /在其中引用object的成员时，可不加前缀 2727 n【例3-8】 下列函数Show显示其参数对象各个 属性的 值，它可作为一个通用函数使用 function person(name,age) /定义对象person =name; this.age=age; function book(title,author,publisher,price) /定义对象book this.title=title; this.author=author; this.publisher=publisher; this.price=price; function Show(obj) /定义通用函数Show var prop; for (prop in obj) document.write(objprop+“ “); document.write(“); var obj1=new person(“Mary“,20); var obj2=new book(“语文“,“集体编“,“人民教育出版社“,5.5); Show(obj1); Show(obj2); 查看效果2828 3.2.4 常用的内建对象和函 数 n数组 在JavaScript中，数组数据结构可通过对象来实现，具体 有如下两种实现方式： 使用JavaScript的内建对象Array 使用自定义对象的方式创建数组对象 内建对象Array 创建数组对象实例，格式如下： var 数组名=new Array(数组长度值) 数组元素的引用，格式如下： 数组名下标值 2929 n内建对象Array数组的特点： n数组元素不要求数据类型相同 n数组长度可以动态变化 nArray对象的属性和方法： join 该方法返回由数组中所有元素连接而成的 字符串。 reverse 该方法逆转数组中各元素，即将第一个元 素换 为 最后一 个，将最后一个元素换为第一个。 sort 对数组中的元素进行排序 3030 【例3-9】 一个Array对象应用示例 图图3-5 3-5 例例3-93-9的初始显示的初始显示 图3-6 例3-9选择“D书”后的显示 查看源代码查看源代码 查看实际效果查看实际效果 3131 自定义数组对象 n除了直接使用JavaScript的Array对象实现数组外，由于数 组是一个对象，所以也可以像自定义对象那样实现数组。 定义数组对象: 例如： function arrayName(Size) /Size是数组的长度 this.length=Size; for(var i=0; i标记，只是该标记的 language属性值必须指定。其语法如下： 例如： . alert(“您刚才按了按钮1。“) 查看效果 4242 3.3.2 VBScript基本语法 nVBScript的数据类型 nVBScript只有一种数据类型，即variant（变体 类型） nvariant是一种特殊的数据类型，根据使用的方 式，它可以包含不同类别的信息，即根据实际 使用的上下文环境，决定它所代表的数据内容 是“字符串”还是“数值”。 4343 表3-8 variant的子类型 4444 2.VBScript常量 nVBScript常量是具有一定含义的名称，其 值是固定不变的。VBScript中使用const 语句定义常量，例如： const MyString=“这是一个字符串“ const Sum_N=20 const CurrDate=#10-11-2000# n VBScript定义了一批常量保留字，例如 vbString，vbByte等，它们是系统的预定义常量， 其名字都以“vb”开头 4545 3.VBScript变量 n变量及其声明 n一种方式是使用Dim语句 ： Dim clickCount Dim Top,Bottom,Left,Right n一种方式是通过在VBScript程序中直接使用变 量名来隐式地声明变量 ： Num=0 MyName=“Mary 4646 n变量名 必须以字母开头 中间不能包含句点（.） 长度不超过255个字符 在变量的作用域范围内必须惟一 u变量的作用域与生存期 u标量变量和数组变量 u只包含一个值的变量称为标量变量，而数组变量则是包含 多个相关值的变量 4747 4.运算符和表达式 n算术运算符 ： 求幂 负号 * 乘法/ 除法 整除 mod取余 + 加法减法 n比较运算符： = 等于 不等于 大于 = 大于或等于 Is 是否为同一对象 4848 n连接运算符 ：VBScript的连接运算符为+或&，用于连接 字符串 n逻辑运算符： Not逻辑“非” And逻辑“与” Or逻辑“或” Xor 逻辑“异或” Eqv逻辑“等价” Imp 逻辑“蕴涵” n运算符的优先级 n表达式：根据表达式值的类型，VBScript表达式 分为算术表达式、字符串表达式、逻辑表达式3种 4949 5.流程控制 n条件语句： uIfThenElse语句 If 条件表达式 Then 语句组1 Else 语句组2 End If uSelect Case语句 Select Case 表达式 Case值1 语句组1 Case值2 语句组2 Case Else 语句组n End Select 5050 n循环语句 uForNext语句 For 计数器变量=初值 To 终值 Step 步长 语句组1 Exit For 语句组2 Next uFor EachNext语句 For Each 变量 In 数组或对象集合 语句组1 Exit For 语句组2 Next 5151 【例3-11】 设计如图3-8所示的页面，初始3个文本框均 为空，单击“单击此处”按钮后，在3个文本框中分别显示“ 文本1”、“文本2”和“文本3”。本例定义一个对象数组Obj ，利用循环语句将Obj各项的值赋予各个文本框 图3-8 For EachNext语句示例查看源代码查看源代码查看实际效果查看实际效果 5252 uWhileWend语句 While 条件表达式 语句组 Wend uDoLoop语句 Do While|Until 条件表达式 Do 语句组1 语句组1 Exit Do Exit Do 语句组2 语句组2 Loop Loop While | Until 5353 6.过程与函数 u过程Sub u函数Function Function 函数名(参数表) 语句组1 函数名=返回值 Exit Function 语句组2 函数名=返回值 End Function Sub过程名(参数表) 语句组1 Exit Sub 语句组2 End Sub 5454 【例3-12】 本例定义一个求阶乘函数Factor(n)，它返回 n!；并定义过程Output，它从输入文本框“InputText”读 取输入值，调用Factor计算输