1、第19章 脚本技术,CSS样式表可以控制和美化网页的外观，是对网页的交互行为几乎无能为力。此时脚本语言提供了解决方案。所有的动态交互网页中都使用了脚本。目前流行的Ajax技术，其核心是使用了JavaScript脚本语言。那什么是脚本？脚本是一类解释性程序语言的总称。 目前主要的脚本语言有两种，即JavaScript和VBScript语言。两者都可以嵌入在HTML语言中执行，而且能够对网页元素对象进行控制。例如，使用脚本检查表单的有效性，而不必将数据传送到服务端。本章将介绍脚本语言的概念及其应用，在此将针对JavaScript语言进行介绍。,19.1 JavaScript简介,JavaScrip
2、t是由网景公司创造的一种脚本语言。最初命名为LiveScript，经过几番更改后命名为JavaScript。作为一门独立的语言，具备程序语言的基本特点和功能，主要用于联合HTML等Web语言构成动态网页。JavaScript目前在网络上应用十分广泛，几乎在所有的动态网页里都存在。目前，流行的Ajax从很大程度上也因JavaScript的存在而存在。,19.1.1 JavaScript的特点,JavaScript是一种解释性语言，所以其编写出的程序不需要编译就可运行，而且该语言是基于对象和事件驱动的脚本语言。 JavaScript有着广泛的支持性，几乎所有浏览器都支持，例如，Internet E
3、xplorer（IE）、Firefox、Netscape、Mozilla和Opera等。所以，用户不用担心JavaScript脚本不会执行。JavaScript语言的特点总结起来，有如下几点。 1基于对象的语言 2简单性 3安全性 4动态性 5跨平台性,19.1.2 插入JavaScript,JavaScript可以出现在HTML的任意地方。使用标记，可以在HTML文档的任意地方插入JavaScript。如果要在声明框架的网页（框架网页）中插入，就一定要在之前插入，否则会造成无法运行。其基本格式如下：,19.1.3 JavaScript 基本语法,既然JavaScript是一门独立的程序语言，
4、那么也有自己的语法。JavaScript程序中，其基本语句语法格式如下： ; 其中，分号“;”是JavaScript语言一个语句结束的标识符。虽然现在的浏览器都允许用回车键充当结束符号，但是保持使用分号作为结束符是一个良好的习惯。其语句块的格式如下： ; ; ,19.1.4 变量,变量就是可变的量，是用于存储某种和某些数值的存储单元。所储存的值可以是数字、字符或其他的一些东西。 1变量命名 每个变量都有其自己的名称，变量的命名要求如下： 只包含字母、数字和/或下划线。 必须以字母开头。 不能使用JavaScript 保留字。,19.1.4 变量,2变量声明 使用变量前，应该声明该变量。如果没有
5、声明变量，系统会进行隐式声明。声明变量格式如下： var = ;,19.1.4 变量,3数据类型 变量有多种数据类型，以表达不同类型的数据。变量可以用的数据类型如下： 整型：只能储存整数。可以是正整数、0或负整数，可以是十进制、八进制和十六进制。八进制数的表示方法是在数字前加0，如0123表示八进制数123。十六进制则是加0x，如0xEF表示十六进制数EF。,19.1.4 变量,4变量的赋值 一个变量声明后，可以在任何时候对其赋值。赋值的语法格式如下：= ;,19.1.4 变量,5JavaScript常数 在JavaScript中预先定义了一些特殊变量的值。其值不能更改，故称之为常数，主要常数
6、如下： null，是一个空值常量。如变量没有定义，或定义后没有赋值，其值就是null。如果返回一个不存在的对象时，其结果也是null。,19.1.4 变量,6变量范围 JavaScript 有两种变量范围：全局和局部。如果在任何函数定义之外声明了一个变量，则该变量为全局变量，且该变量的值在整个持续范围内都可以访问和修改。如果在函数定义内声明了一个变量，则该变量为局部变量。每次执行该函数时都会创建和释放该变量；且不能被该函数外的任何事物访问。,19.1.5 表达式与运算符,理解和定义变量后，需要对变量进行计算。计算方法与数学中的计算方法基本相同，也需要使用表达式与运算符，但也有细微的差别。本小节
7、介绍具体概念和使用方法。,19.1.5 表达式与运算符,1表达式 表达式就是由操作符、操作对象及标点符号等连接而成，对变量等进行赋值和计算等一系列操作的式子。可以说是变量、常量、布尔及运算符的集合。主要的表达式有算术表述式、字串表达式、赋值表达式以及布尔表达式等。,19.1.5 表达式与运算符,2运算符 运算符是用于完成操作的一系列符号，在JavaScript中有算术运算符，如、-、*和/等；有比较运算符，如!和等；有逻辑布尔运算符如！（取反）、&和 | 等；有字串运算如和等。在JavaScript中主要有双目运算符和单目运算符。,19.1.6 程序构成,JavaScript脚本语言的基本构成
8、是由控制语句、函数、对象、方法和属性等来实现编程的。 1程序控制流 在任何一种语言中，程序控制流都是必须的，该控制流能使整个程序结构明了，使之按一定的方式执行。JavaScript常用的程序控制流结构及语句如下： if条件语句,19.1.6 程序构成,2函数 函数为程序设计人员提供了一个非常方便的功能，符合模块化结构。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而使各部分充分独立，任务单一，程序清晰、易懂、易读和易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。,19.
9、1.6 程序构成,3事件驱动及事件处理 JavaScript是基于对象（object-based）的语言。与Java不同，Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动（event-driven）。该语言在图形界面的环境下，使得一切输入变得简单。通常鼠标或热键的动作称之为事件（Event）。,19.1.7 对象编程,1对象的基础知识 对象的概念源自对真实物理世界的抽象。对象是属性和方法的集合。属性是与对象相关的一个或一组值；方法用于操作属性的函数，但与函数又有区别，属性和方法是对象的成员。JavaScript支持4种类型的对象：内部对象、自定义对象、宿主给出的对象（如Inte
10、rnet浏览器中的window和document）以及ActiveX 对象（外部组件）。,19.1.7 对象编程,2JavaScript内部对象 JavaScript提供了一些非常有用的常用内部对象和方法，用户不需要用脚本来实现这些功能，这正是基于对象编程的真正目的。在JavaScript中提供了String（字符串）、Math（数值计算）和Date（日期）3种对象和其他一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了便利条件。 在JavaScript中对于对象属性和方法的引用，有两种情况：其一该对象是静态对象，即在引用,19.1.7 对象编程,3创建对象 使用JavaScript可
11、以创建自己的对象。虽然，JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建新对象的方法。 在JavaScript中创建一个新对象十分简单。首先定义一个对象，而后再为该对象创建一个实例。这个实例就是一个新对象，具有对象定义中的基本特征。,19.1.7 对象编程,4创建对象实例 一旦对象定义完成后，就可以为该对象创建一个实例，格式如下： NewObject=new object();,19.2 文档对象,前面介绍了JavaScript语言的基本语法。虽然该语法对于JavaScript脚本编写有着至关重要的作用，但是仅了解这些内容是不够的。如果要在网页中使用J
12、avaScript脚本进行控制其中的元素，那么文档对象是必不可少的。本小节中简单介绍文档对象。,19.2.1 文档模型树,文档对象是指在网页文档里划分出来的对象。在JavaScript能够涉及的范围内有如下几个“大”对象：window、document、location、navigator、screen和history等。如图19.1是一个文档对象模型树，可以看到对象下包含对象的层次关系。要引用某个对象，就要把父级的对象都列出来。例如，要引用某表单applicationForm的某文字框customerName，就要用document.applicationForm.customerName。
13、,19.2.2 Cookies的使用,Cookies其实是一个文本文件，用于存储与网站或网页的相关信息，但它的大小是有限制的。通过document的Cookie属性可以进行访问。一般来说，Cookies是通过CGI或高级的脚本程序等创建的，因此JavaScript提供了对Cookies 的全面访问权。 Cookies命名的限制与JavaScript的命名限制基本相同，没有不能用JavaScript关键字的限制，但是只能使用在URL编码中的字符。所谓URL编码字符是都用字母和数字，而没有其他的特殊符号，其值也必须遵循此规则。,19.3 Dreamweaver脚本行为,前面对JavaScript语
14、言进行介绍，虽然该语言相对其他语言，如C+来说要简单许多。但对于初学者还是存在一定的困难。Dreamweaver CS3提供了强大的脚本功能，其可以自动生成脚本代码，通过它提供的工具可以不动手编写代码便可实现多种效果。本小节将介绍Dreamweaver的脚本行为。,19.3.1 认识【行为】面板,Dreamweaver中的行为其实就是事件与动作的组合。事件的概念在前面已经介绍过了，动作是预先编写好用于控制元素对象的程序，从而产生需要的效果。例如交换图像动作，可以在事件驱动下改变图像。在Dreamweaver CS3中内置了许多行为动作，还可以从Adobe公司网站下载更多行为动作，如果精通Jav
15、aScript程序语言则可以自己设计新行为动作。打开【行为】面板，如图19.2所示。,19.3.2 行为应用,简单认识了行为之后，在此使用实例进行说明，如何在网页中应用强大的行为功能。 1弹出信息 2交换图像 3调用JavaScript 4改变属性 5打开浏览器窗口 6. 显示-隐藏层 7效果 8检查表单 9拖动AP元素,19.4 专家总结,本章介绍JavaScript的基本概念，以及JavaScript语言语法。JavaScript学习起来比较简单，但是对于其内部对象使用是重点也是难点。另外还有DOM文档模型，也是JavaScript学习的一个重点。JavaScript编程的学习需要多练习和多看优秀的程序，这也是学习程序的基本方法。 Dreamweaver CS3为初学者提供功能强大的行为，不编写任何JavaScript即可实现各种效果。行为使用较为灵活，灵活地组合使用可以创建出复杂和漂亮的效果。,
