web程序设计(第4版)_第5章

《web程序设计(第4版)_第5章》由会员分享，可在线阅读，更多相关《web程序设计(第4版)_第5章（161页珍藏版）》请在金锄头文库上搜索。

1、Web 程 序 设 计,(第4版),“十二五”普通高等教育本科国家级规划教材,目 录,第 1 章 Web编程基础知识 第 2 章 Web应用程序开发与运行环境 第 3 章 HTML与XML 第 4 章 层叠样式表CSS 第 5 章 Web客户端程序设计 第 6 章 Web服务器端程序设计 第 7 章 Web数据库程序设计 第 8 章 ASP.NET综合应用实例,第 5 章 Web客户端程序设计,5.1 脚本语言JavaScript 5.2 浏览器对象模型及应用 5.3 HTML DOM,Web客户端程序设计概述,网页设计要使用多种技术，包括HTML语言、脚本程序设计、CSS样式表以及美工技术等

2、。 动态网页，指的是按照访问者的需要，对访问者输入的信息作出不同的响应，提供响应信息。更进一步，动态网页设计技术又可分为客户端和服务器端，客户端动态网页设计技术主要使用层叠样式表（CSS）和在浏览器中执行的脚本程序，而服务器端动态网页设计技术主要使用ASP.NET、JSP、PHP等。,Web客户端程序设计概述,随着Web页面的内容和表现手法越来越丰富，将其结构、表现和行为分离成为趋势。 构建精良的Web页面一般有三个层次，分别是： 结构（Structure）层 表现（Presentation）层 行为（Behavior）层 对应的标准也分三方面：结构化标准语言（主要包括(X)HTML和XML）

3、、表现标准语言（主要指CSS）和行为标准（主要包括对象模型和脚本语言）。 Web客户端程序设计的主要内容是脚本语言和浏览器对象模型。,5.1 脚本语言JavaScript,脚本（Script）语言的概念源于UNIX操作系统，在UNIX操作系统中，将主要以行命令组成的命令集称为Shell脚本程序。Shell脚本程序具有一定的控制结构，可以带参数，由系统解释执行。除了UNIX Shell Script外，在UNIX环境下，具有强大的字符串处理能力的Perl语言也是脚本语言的典型代表。 传统脚本语言常用来编写执行一次性任务，通常以文本(如ASCII)保存，只在被调用时进行解释或编译。 而现在脚本和传

4、统编程语言之间的界限越来越模糊。在一些脚本语言中，有经验的程序员可以进行大量优化工作。 本章所讨论的脚本语言是指用于Web页面及程序设计的脚本语言，它们通常是嵌入式（嵌入到HTML文件中）的、具有解释执行的特征。,5.1.1 什么是脚本语言,JavaScript是一种嵌入在HTML文件中的脚本语言，它是基于对象和事件驱动的，能对诸如鼠标单击、表单输入、页面浏览等用户事件做出反应并进行处理。 JavaScript特点： （1）简单性 （2）基于对象 （3）可移植性 （4）动态性,5.1.2 JavaScript语言概述,5.1 脚本语言JavaScript,1JavaScript程序的编辑和调试

5、,5.1.3 JavaScript编程基础,可以用任何文本编辑器来编辑JavaScript程序 例如：NotePad。 需要将JavaScript程序嵌入HTML文件。 程序的调试在浏览器中进行。,5.1 脚本语言JavaScript,1JavaScript程序的编辑和调试,5.1.3 JavaScript编程基础,将JavaScript程序嵌入HTML文件的方法有两种： 在HTML文件中使用、标识加入JavaScript语句，这样HTML语句和JavaScript语句位于同一个文件中。其格式为： 其中，language属性指明脚本语言的类型。通常有两种脚本语言：JavaScript和VBSc

6、ript，language的默认值为JavaScript。标记可插入在HTML文件的任何位置。 将JavaScript程序以扩展名“.js”单独存放，再利用以下格式的script标记嵌入HTML文件： 方法将HTML代码和JavaScript代码分别存放，有利于程序的共享，即多个HTML文件可以共用相同的JavaScript程序。标记通常加在HTML文件的头部。,5.1 脚本语言JavaScript,1JavaScript程序的编辑和调试,5.1.3 JavaScript编程基础,一个简例： JavaScript简例 alert( “世界，你好!“ ); ,5.1 脚本语言JavaScript

7、,1JavaScript程序的编辑和调试,5.1.3 JavaScript编程基础,编写JavaScript程序时还要注意以下三点： JavaScript的大小写是敏感的，这点与C+相似。 在JavaScript程序中，换行符是一个完整的语句的结束标志；若要将几行代码放在一行中，则各语句间要以分号（；）分隔（习惯上，也可像C+一样，在每一个语句之后以一个分号结束）。 JavaScript的注释标记是双斜杠“/”之后的部分，或符号“/*”与符号“*/”之间的部分（与C+相同）。,5.1 脚本语言JavaScript,2数据类型,5.1.3 JavaScript编程基础,JavaScript有三种

8、数据类型：数值型、逻辑型和字符型。 （1）数值型。数值型数据包括整数和浮点数。整数可以是十进制、八进制和十六进制数，八进制值以0开头，十六进制值以0x开头。例如：100（十进制），021（八进制），0x5d（十六进制）。 以下是浮点数例子：2.57，1.3e6，2，7e-10。 （2）逻辑型。逻辑型数据有true和false两种取值，分别表示逻辑真和逻辑假。 （3）字符型。字符型数据的值是以双引号“ “或单引号 括起来的任意长度的一连串字符。注意反斜杠“”是转义字符，常用的转义序列有： n换行符 t水平制表符 r回车符 b退格符,5.1 脚本语言JavaScript,3常量和变量,5.1.3

9、JavaScript编程基础,（1）常量 常量是在程序中其值保持不变的量。 JavaScript的常量以直接量的形式出现，即在程序中直接引用值，如“欢迎您”、28等。 常量值可以为整型、实型、逻辑型及字符串型。 另外，JavaScript中有一个空值null，表示什么也没有，如试图引用没有定义的变量，则返回一个null值。,5.1 脚本语言JavaScript,3常量和变量,5.1.3 JavaScript编程基础,（2）变量 变量是在程序中值可以改变的量。 JavaScript用关键字var声明变量，或使用赋值的形式声明变量。例如： var str; /*声明变量str*/ num1=10;

10、 /*说明num1为整型，并将其值赋为10*/ num2=3.02e10; str1=“欢迎您“;,5.1 脚本语言JavaScript,3常量和变量,5.1.3 JavaScript编程基础,（2）变量 JavaScript命名变量的规则是： 变量名必须以字母（大小写均可）打头，只能由字母（大小写均可）、数字（09）和下划线“_”组成； 变量名长度不能超过1行，并且不能使用JavaScript保留字作变量名； 变量名字母区分大小写。,5.1 脚本语言JavaScript,JavaScript的保留字,5.1.3 JavaScript编程基础,5.1 脚本语言JavaScript,4运算符和表

11、达式,5.1.3 JavaScript编程基础,运算符 JavaScript的运算符包括： 赋值运算符 算术运算符 字符串运算符 逻辑运算符 关系运算符 位运算符,5.1 脚本语言JavaScript,4运算符和表达式,5.1.3 JavaScript编程基础,赋值运算符。JavaScript提供6个赋值运算符，它们是基本赋值运算符“=”，复合赋值运算符：+=、-=、*=、/=和%=，功能是将一个表达式的值赋予一个变量。,赋值运算符简记形式表,5.1 脚本语言JavaScript,4运算符和表达式,5.1.3 JavaScript编程基础,算术运算符。算术运算符的操作数和结果都是数值型值。算术

12、运算符及位运算符可与赋值运算符结合形成简记形式,赋值运算符简记形式表,5.1 脚本语言JavaScript,4运算符和表达式,5.1.3 JavaScript编程基础,字符串运算符。字符串运算是JavaScript中使用最多的运算。字符串运算符只有一个“+”，即字符串连接运算。 参与字符串连接运算的两个操作数如果都是字符串，则直接合并；否则，操作数会先被转变为字符串，再进行合并。 例如： var str1=“欢迎您“+“访问本页“; /变量str1的值为“欢迎您访问本页” var str2=“现在是“+10+“月“; /变量str2的值为“现在是10月”,5.1 脚本语言JavaScript,

13、4运算符和表达式,5.1.3 JavaScript编程基础,逻辑运算符。逻辑运算符的运算对象和结果都是逻辑值。 逻辑运算符有三个： & 与运算 是双目运算。当两个操作数都为true时，结果为true，其他情况下结果均为false。 | 或运算 是双目运算。当两个操作数中至少有一个为true时，结果为true，否则结果为false。 ! 非运算 是单目运算。结果是操作数的值取反。,5.1 脚本语言JavaScript,4运算符和表达式,5.1.3 JavaScript编程基础,关系运算符。关系运算符用于数值及字符串值的比较，返回比较判断的结果。 关系运算符的运算结果是逻辑值。 关系运算包括： =

14、 相等 ！= 不等 大于 = 大于或等于 例如：x=100，y=20 利用关系运算符、逻辑运算符及括号可以组成复杂的表达式。例如： （！（a=9）&（x=100）| （a!=9）,5.1 脚本语言JavaScript,4运算符和表达式,5.1.3 JavaScript编程基础,位运算符。位运算符将操作数作为二进制值处理，返回JavaScript标准的数值型数据。 位运算符都是双目运算，包括： & 按位与 | 按位或 按位异或 右移 右移，零填充 例如： 15&8的结果为8（1111&1000） 15|8的结果为15（1111|1000） 158的结果为7（1111|1000）,5.1 脚本语言JavaScript,4运算符和表达式,5.1.3 JavaScript编程基础,JavaScript运算符的优先级由高到低排列如下： ( ) 高 + - ! * / % + - = = != & | & | ?= = += -= *= /= %= 低,5.1 脚本语言JavaScript,4运算符和表达式,5.1.3 JavaScript编程基础,表达式 表达式是由常量、变量、运算符、函数和表达式组成的式子，任何表达式都可求得单一值。 根据表达式值的类型，JavaScript的表达式有三类： 算术表达式。其值是一个数值型值。例如