第4章 客户端脚本语言.ppt

第4章客户端脚本语言 了解脚本语言基本概念了解JavaScript基本语法了解JavaScript事件处理了解JavaScript常用内置对象 教学目的 教学内容 由于HTML所提供的页面信息绝大多数都是静态的 通过浏览器显示给用户后页面内容固定不变 缺少动态的和交互的效果 因此各种脚本语言应运而生 它们实现了客户端页面的动态效果 提高了页面的交互性 同时使用简单 方便 4 1客户端脚本语言简介 应用于客户端WEB程序设计的脚本语言弥补了HTML语言的不足 大大增强了客户端WEB页面的动态性和交互性 通常我们将脚本语言嵌入到HTML文档中 由浏览器直接解释执行 它的功能较为强大 我们可以在客户端使用脚本语言实现不同的页面动态效果 如页面显示图片的变化等 也可以利用脚本语言在客户端进行基本的输入数据的正确性检查 提高客户端与服务器端数据传输的效率和正确性 4 1 1客户端脚本语言的作用 目前较为常用的是JavaScript和VBScript 它们既可以用于服务器端WEB程序开发 也可以用于客户端WEB程序开发 JavaScript具有Java语言的许多特性 但是应用于HTML页面比Java更简单有效 VBScript具有与VisualBasic几乎相同的语法结构 4 1 2常见的脚本语言 JavaScript是一种嵌入HTML的脚本语言 它不需要编译 在客户端可以通过浏览器解释执行 JavaScript具有跨平台 基于对象和事件驱动的特点 同时它也具有一定的安全性 4 2JavaScript脚本语言概述 程序代码见程序清单4 1 运行结果 将JavaScript代码嵌入HTML文件的方法有两种 直接在HTML文件中使用HTML中的 标记 其描述形式为 JavaScript语句段将JavaScript程序代码和HTML文件分别编写 并将JavaScript程序代码以扩展名 js 保存 然后在HTML文件中通过标记将指定的JavaScript文件导入进来 其描述形式为 4 2 1初识JavaScript程序 JavaScript代码的书写的几点说明 JavaScript区分大小写 JavaScript中使用换行符作为一条语句的结束标志 如果需要将几条语句放在同一行书写 可以在各条语句间使用分号 进行分隔 JavaScript中注释语句的描述形式有两种 可以使用 或 标记JavaScript的注释语句 4 2 1初识JavaScript程序 JavaScript提供了四种基本的数据类型 分别是数值型 字符串型 布尔型和空值 数值型数据包括整数和浮点数 字符型数据是用双引号 括起来的字符串或单引号 括起来的字符 布尔型数据可以取true和false两个值 空值null 4 2 2常见的数据类型 变量就是在程序中值可以改变的量 命名规则变量名必须是以字母或下划线 开头 由字母 数组和下划线共同组成的字符串 命名变量名时不能使用JavaScript的关键字作为变量名 声明方法 有两种 使用关键字 var 声明变量 描述形式为 var变量名或var变量名 变量值不使用关键字 var 直接使用赋值语句声明变量 描述形式为 变量名 变量值 4 2 3变量 常量就是在程序中值保持不变的量 在JavaScript中常量可以是整型 布尔型 字符型等 4 2 4常量 JavaScript中运算符可以分为赋值运算符 算数运算符 逻辑运算符 关系运算符 字符串运算符和位运算符七类 4 2 5运算符 赋值运算符 表4 1赋值运算符使用方法 4 2 5运算符 算术运算符 表4 2算术运算符使用方法 4 2 5运算符 逻辑运算符 表4 3逻辑运算符使用方法 4 2 5运算符 关系运算符 表4 4关系运算符使用方法 4 2 5运算符 字符串运算符字符串运算符为 表示字符串的连接运算 如 varstr he llo str的值为字符串 hello 4 2 5运算符 位运算符 表4 5位运算符使用方法 4 2 5运算符 对象对象包含属性和方法两部分 对象的属性和方法的访问方式对对象中属性的访问可以通过 对象名 属性名 的方式进行 同样 要调用对象中定义好的方法可以通过 对象名 方法名 的形式实现 也可以将对象的属性看作是一个属性数组 因此可以通过访问数组下标的形式访问对象的属性 数组下标可以用数字或者属性名表示 4 2 6对象和数组 若student是一个定义过的对象 它包含name stunum和age三个属性 当我们要给这三个属性赋值时可以通过以下方式实现 方式一 student name John student stunum 12345 student age 20方式二 student 0 John student 1 12345 student 2 20方式三 student name John student stunum 12345 student age 20 4 2 6对象和数组 自定义对象使用关键字function来声明 其语法形式为 function对象名 属性列表 this 属性1 参数1this 属性2 参数2 this 方法1 函数1this 属性2 函数2 创建对象实例使用new关键字 4 2 6对象和数组 如要定义一个student对象 它的属性为name stunum和age 可以通过以下语句实现 functionstudent Name StuNum Age this name Namethis stunum StuNumthis age Age vars newstudent John 12345 20 4 2 6对象和数组 数组对象JavaScript中没有定义基本的数组类型 我们可以通过内置对象Array来创建数组对象 创建数组对象实例的方法 var数组名 newArray 或var数组名 newArray 数组长度 Array对象的属性和方法属性有length 用来描述数组的长度join 方法用于将数组的所有元素连接成字符串返回reverse 方法用于将数组的所有元素逆序sort 方法用于对数组元素按字母顺序进行排序程序代码见程序清单4 2 运行结果 4 2 6对象和数组 JavaScript中包含顺序 分支和循环三种控制结构 顺序结构按照程序语句出现的先后顺序依次执行 分支结构包括条件语句if else和选择语句switch case 循环结构包括for循环和while循环 4 3JavaScript的控制流程 if条件语句的基本语法形式如下 if 条件表达式 语句段1 else 语句段2 if条件嵌套 if 条件表达式1 语句段1 elseif 条件表达式2 语句段2 elseif 条件表达式3 语句段3 else 语句段N 4 3 1条件语句if else 基本语法形式如下 switch 表达式 case值1 语句段1breakcase值2 语句段2break default 语句段Nbreak 4 3 2选择语句switch case for语句的基本语法形式如下 for 初始化表达式 条件表达式 增量表达式 循环体语句段 while语句的基本语法形式如下 while 条件表达式 循环体语句段 do while语句的基本语法形式如下 do 循环体语句段 while 条件表达式 4 3 3计数循环语句for for in语句是用来对已知对象的所有属性进行循环操作的循环语句 它不需要使用计数器来控制循环次数 也无需知道对象的属性个数就可以进行相关操作 基本语法形式如下 for 变量名in对象名 循环体语句段 程序代码见程序清单4 3 运行结果 4 3 4循环语句for in with语句提供了对对象的属性和方法的访问方式 基本语法形式如下 with 对象名 语句段 4 3 5with语句 如对于程序清单4 3中的函数displayProp obj 我们可以使用with语句替换for in语句 functiondisplayProp obj varproperty 使用with语句访问对象obj中的所有属性with obj document writeln name document writeln stunum document writeln age document writeln 4 3 5with语句 在JavaScript可以通过定义函数来封装在程序中需要重复使用的功能模块代码 这样可以使程序结构清晰 并且易于维护 函数要先定义后使用 通常将函数定义放在HTML文件的标记内 然后可以在标记内调用已经定义好的函数 4 4JavaScript的函数 函数的定义要使用关键字function 其基本的语法形式为 function函数名 参数1 参数2 参数n 函数体语句段return表达式 4 4 1函数的定义 程序代码见程序清单4 4 运行结果 4 4 2函数调用 JavaScript具有事件驱动的特点 事件就是用户对计算机所进行的相关操作 如鼠标的移动 鼠标键的点击等等 4 5JavaScript的事件处理 JavaScript具有事件驱动的特点 事件可以理解为用户和WEB页面的交互操作 通常是由鼠标或热键的动作引发的 事件驱动 EventDriver 就是鼠标或热键所引发的一系列动作 4 5 1事件处理 对事件进行处理的函数称为事件处理程序 EventHandler 或事件处理方法 4 5 2事件处理方法 程序代码见程序清单4 5 运行结果 表4 6JavaScript常用事件及处理方法 4 5 3JavaScript预定义的事件处理器 常用的内置对象除了我们在前面介绍的Array对象 见4 2 6节 外 还有String Math和Date对象 4 6JavaScript内置对象 String对象创建String对象方法很简单 只要声明一个变量并将其初值赋值为一个字符串即创建了一个String对象的实例 如 vars student 创建了一个名为s的String对象 4 6JavaScript内置对象 表4 7String对象的常用属性和方法 4 6JavaScript内置对象 Math对象Math对象是一个静态对象 即它本身就是系统定义的一个实例 不需要再进行创建可直接使用 因此要调用Math对象定义的方法可以直接通过 Math 方法名 等方式实现 4 6JavaScript内置对象 表4 8Math对象的常用属性和方法 4 6JavaScript内置对象 Date对象创建Date对象实例的语法形式为 var对象实例名 newDate 参数 如 vartoday newDate vardate1 newDate May6 200810 21 30 vardate2 newDate 2008