4.1 JavaScript基础_Dreamweaver CS3 Ajax网页设计入门与实例详解-QQ阅读男频都市网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

4.1 JavaScript基础

JavaScript用于在HTML文档中编写客户端脚本代码。当用户在客户端浏览器中打开HTML网页时，浏览器就会执行该网页内嵌或导入的JavaScript代码，用户通过交互式操作更改网页的内容和外观，实现了仅用HTML和CSS所不能实现的效果。

4.1.1 JavaScript概述

JavaScript语言是NetScape公司为其Web浏览器Navigator开发的脚本语言，其前身叫做LiveScript。自从Sun公司推出Java语言之后，Netscape公司引进了有关Java语言的概念，将原有的LiveScript重新进行设计并重命名为JavaScript。

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，它是通过嵌入或导入标准的HTML语言来实现的。把JavaScript脚本语言与HTML、CSS结合起来，可以在一个网页中链接多个对象，实现与网络客户的交互。以前，许多人对JavaScript有一种误解，认为利用JavaScript只能编写一些花里胡哨的网页特效，不过是雕虫小技，没有多大用场。然而自从Ajax技术登场以来，JavaScript作为Ajax的核心技术而备受关注。

1.JavaScript的优点。

概括地讲，JavaScript具有以下优点。

（1）简单性。JavaScript是一种脚本编写语言，它采用小程序段的方式实现程序设计。与其他脚本语言一样，JavaScript也是一种解释性语言，它提供了一个简单方便的开发过程。JavaScript的基本结构形式与C、C++、Visual Basic、Delphi十分类似，但不像这些语言一样需要事先进行编译，而是在程序运行过程中一边解释一边执行。JavaScript与HTML、CSS结合在一起，可以实现与用户的交互式操作。

（2）动态性。JavaScript是动态的，它可以直接对用户操作做出响应，不需要经过Web服务器程序处理。JavaScript对用户操作的响应是以事件驱动的方式进行的。所谓事件，通常是指在网页中执行了某种操作所产生的动作，例如单击鼠标、移动窗口、选择菜单命令等都可以视为事件。当事件发生后，可能会引起事件响应，响应的具体内容需要通过编写事件处理程序来实现。

（3）跨平台性。JavaScript语言依赖于浏览器本身，而与操作系统环境无关，只要在计算机上能运行支持JavaScript的浏览器，就可以正确地执行JavaScript程序。

（4）节省与服务器端的交互时间。随着Internet的迅速发展，有许多Web服务器提供的服务需要与访问者进行交互，以检验访问者的身份及其可使用的服务内容等，这项工作通常通过在服务器端编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程不仅增大了网络的通信量，也影响了服务器的服务性能。JavaScript是一种基于客户端浏览器的语言，当用户在浏览器中填写表单时，验证的交互过程可以通过浏览器对嵌入或导入HTML文档的JavaScript代码进行解释执行来完成，即使是必须调用服务器端验证程序，也可以通过Ajax技术以异步请求的方式把用户输入并通过验证的信息提交给远程服务器进行处理，从而极大地减少了服务器的开销。

2.JavaScript与Java

虽然JavaScript语言与Java语言有一定联系，但它们之间的联系并不像想象中的那样紧密。JavaScript与Java的区别体现在以下两个方面：

（1）它们分别是两个公司开发的不同产品。JavaScript是Netscape公司的产品，其设计目的旨在扩展Netscape Navigator浏览器的功能，是一种可以嵌入网页中的基于对象和事件驱动的解释性语言。Java则是Sun公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发。

（2）JavaScript是一种基于对象的脚本语言，它可以嵌入HTML文档中，用来实现用户与浏览器的交互，以及浏览器与服务器的异步通信。Java则是一种真正的面向对象的程序设计语言，即使是开发简单的程序，也必须基于类来创建对象。

3.JavaScript与ECMAScript、JScript

ECMA（欧洲计算机制造协会）于1999年在JavaScript 1.5的基础上制定了ECMAScript程序语言规范（ECMA-262标准），该规范被ISO（国际标准化组织）采纳并作为浏览器使用的脚本程序的统一标准。

当NetScape公司把JavaScript成功应用于Navigator浏览器之后，Microsoft公司推出了应用于Internet Exploer浏览器的脚本语言并将其命名为JScript。JScript与JavaScript的大部分功能是相同的，不过也有个别内容不同。

当ECMAScript标准发布之后，NetScape公司和Microsoft公司都承诺，以后为其浏览器脚本语言开发新的功能时都将遵循该标准。目前JavaScript的最新版本为2.0，JScript的最新版本为5.7，两者都遵循尚未最后定稿的ECMAScript-262标准版本4。

4.1.2 编写JavaScript代码

要在网页中添加JavaScript脚本代码，主要有以下4种方式：通过在网页中添加script标记指定由脚本引擎解释执行的JavaScript代码；把JavaScript代码存储为单独的脚本文件（.js）并在网页中引用该文件；把页面元素的事件属性（如onclick等）设置为JavaScript代码；把超链接的href属性设置为JavaScript代码。

1.定义script脚本块

在HTML文档中，使用script标记指定由脚本引擎解释的页面中的脚本，语法如下：

        <script language="javascript" type="text/javascript">
          在这里编写JavaScript代码，由支持JavaScript的浏览器的脚本引擎执行
        </script>
        <noscript>
          在这里添加一些内容，由不支持JavaScript的浏览器显示
        </noscript>

script块可以放在网页首部（<head>与</head>之间），也可以放在网页主体的任何位置（<body>与</body>之间）。在一个HTML文档中，可以编写多个script块，在这些script块的JavaScript代码之间可以相互访问，如同所有代码都放在一个script块中一样。

一个文档中script对象的顺序也很重要，特别是在为一个或多个元素指定脚本事件句柄的情况下。如果script块内的代码未包含在函数内，则会在页面载入时立即执行。如果在函数外部的代码中引用了某个元素，则应将script块放在相应的HTML代码后面，否则会出现缺少对象的错误。

2.引用外部JavaScript文件

也可以把JavaScript脚本代码保存为单独的文件并以.js作为其扩展名，这种文件称为JavaScript脚本文件。在JavaScript脚本文件中可以直接编写代码，而不必把代码包含在script块中。要在HTML文档中引用一个外部脚本文件，在<script>标记中通过src属性指定该脚本文件的路径即可，此时不要在<script>与</script>标记之间放置任何内容。

例如，当在网页中添加Spry验证文本域构件时，Dreamweaver将会在网页首部自动生成以下script标记：

        <script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript">
        </script>

利用Dreamweaver CS3设计Ajax网页时，类似的情况是十分常见的。

3.设置页面元素的事件句柄

在HTML文档中，许多页面元素都有自己专用的事件集，通过设置事件句柄属性可以指定发生特定事件要执行的JavaScript代码。

例如，要在用户提交表单时对表单数据进行检验，可以对该表单的onSubmit事件句柄进行设置，源代码如下：

        <form name="form1" method="post" onsubmit="return check()">...</form>

其中check()是一个自定义JavaScript函数。当该函数返回true时，允许提交表单；当该函数返回false时，禁止提交表单。

又如，要在用户单击“关闭”按钮时关闭当前浏览器窗口，可对该按钮的onclick事件句柄进行设置，源代码如下：

        <input type="button" value="关闭窗口" onclick="window.close();" />

4.设置超链接的href属性

若要在用户单击超链接时执行JavaScript代码，则应通过<a>标记创建脚本链接，为此设置a元素的href属性值时，应添加JavaScript协议。

例如，要在用户单击“关闭窗口”链接时关闭当前窗口，可按照下面的方式设置a元素的href属性：

        <a href="javascript:window.close();">关闭窗口</a>

4.1.3 基本语法规则

开始编写JavaScript代码之前，首先应当对JavaScript的基本语法规则有所了解。这些语法规则主要包括以下几个方面。

1.区分大小写

JavaScript是对字母大小写敏感的。在编写JavaScript代码时，对于关键字、变量名、函数名及其他标识符必须采用一致的大小写形式。例如，if不能写成If或IF，while不能写成While或WHILE，等等。

在JavaScript中，许多对象和属性与其HTML标记或属性名称相同，在HTML中不区分大小写，在JavaScript中通常都是用小写形式表示。例如，按钮的onclick事件，在HTML中写成onclick、OnClick或onClick都是允许的，在JavaScript中则必须写成onclick。

2.空白符与换行符

在JavaScript中，忽略关键字、变量名、函数名、数字或其他各种元素实体之间的空格、制表符和换行符。不过，对于字符串常量包含的空格，JavaScript是不会忽略的。例如，JavaScript引擎不会把“Hello World”与“HelloWorld”视为相等的字符串。

3.语句结束符

在JavaScript中，使用半角分号“;”作为一个语句的结束标记。一个单独的分号也可以视为一个语句，这样的语句称为空语句。在JavaScript脚本块中，最后一个语句也可以省略分号结束符。

4.语句块

在JavaScript中，用花括号“{}”括起来的一个或多个语句组成一个语句块。例如，在if语句中可以用花括号指定测试表达式为真时要执行的语句块；在定义函数时，可以用花括号指定函数体的开始和结束。

5.注释内容

在JavaScript中，为代码添加注释有以下两种语法形式：

        // 注释文字
        /＊ 注释文字 ＊/

通过添加注释内容，使代码更容易理解并有利于程序的维护。调试程序时可以用注释标记把某些代码临时屏蔽起来，需要时取消注释标记即可恢复这些代码的功能。为了避免某些浏览器显示JavaScript代码，可以用HTML注释标记（）把这些代码括起来。

4.1.4 原始数据类型

在JavaScript语言中，数据类型分为两大类：原始数据类型和引用数据类型。原始数据类型包括数值、字符串、布尔型数据及特殊数据类型；引用数据类型包括对象、数组和函数。下面首先介绍原始数据类型。

1.数值

在JavaScript中，数值型数据分为整数和浮点数，所有数值均以双精度浮点数表示。用双精度浮点型可表示的整数范围为-253～253，可表示的最大浮点数为±1.7976×10308，最小浮点数为±2.2250×10-308。

数值型数据可用十进制数、十六进制数和八进制数表示。对于十进制数值，也可以使用科学计数法来表示，例如3e+12、-3.6E-6等。对于十六进制数值，应添加0x或0X作为前缀，例如0x1a3fde、0XFE6a等，前缀和数码中的字母都不分大小写。对于八进制数值，应添加数字0作为前缀，例如067、078等。十六进制数或八进制数都不能用科学计数法表示。

在数值型数据中，有以下两个特殊值。

（1）特殊值Infinify。当一个数值或数值表达式超过可表示的最大值时，将被赋值为特殊值Infinify，意即无穷大；当一个数值或数值表达式小于可表示的最小值时，将被赋值为-Infinify。所有Infinify值都相等，Infinify与其他数值运算的结果仍为Infinify。例如，一个正数除以0，结果为Infinify；一个负数除以0，结果为-Infinify。

（2）特殊值NaN。NaN的含义是“not a number”，即不是一个数字。例如，0除以0，结果为NaN。NaN是唯一一个不能与自身比较的值。使用isNaN方法可以检查一个值是否等于NaN值。

2.字符串

在JavaScript中，字符串是一个用双引号或单引号括起来的字符序列。例如，"Ajax网页设计"，"术语'CSS'"。在字符串中可以包含英文字母、数字、汉字及标点符号等。若要在字符串中包含回车换行符等特殊字符，则需要使用转义符。JavaScript中的转义字符如表4-1所示。

表4-1 JavaScr pt中的转义字符

由于字符串本身是通过双引号或单引号作为定界符的，因此在字符串中包含引号时需要进行转义。但在双引号中包含单引号或在单引号中包含双引号时，则不需要进行转义。

字符串数据类型与JavaScript的内置对象String相关联，String对象的属性和方法可以应用于字符串。例如，利用length属性可以求出字符串的长度，利用indexOf()方法可以确定一个字符串中是否包含另一个字符串，等等。

3.布尔型数据

布尔型数据只有两个值：true和false。这两个值不能用1和0来表示。

4.特殊数据类型

在JavaScript中，有以下两个特殊数据类型。

（1）undefined：表示不存在的值或尚未赋值的变量。若声明一个变量而未对其赋值，或者对变量赋予一个不存在的属性值，都将使该变量取得undefined值。

（2）null：表示空值，即表示没有任何值。null与undefined的区别在于，前者表示一个变量被赋予空值，后者则表示变量尚未赋值。

5.数据类型转换

在代码执行过程中，JavaScript将按照以下规则自动进行数据类型转换。

（1）其他数据类型转换为布尔值：

● undefined、null→false。

● 对于数值型，若为0或NaN，则转换为false，否则转换为true。

● 对于字符串，若为空串（即长度为0），则转换为false，否则转换为true。

● 其他对象→true。

（2）其他数据类型转换为数值：

● undefined→NaN。

● null→0。

● 对于布尔值，true→1，false→0。

● 对于字符串，若字符串内容为数字，则转换为相应的数字，否则转换为NaN。

● 其他对象→NaN。

（3）其他数据类型转换为字符串：

● undefined→"undefined"。

● null→"null"。

● 对于布尔值，true→"true"，false→"false"。

● 数值→NaN、0或数值对应的字符串。

● 对于其他对象，若存在，则转换为toString()方法的值，否则转换为"undefined"。

4.1.5 常量

常量是指在程序运行期间保持不变的数据。例如，123.56是数值型常量，"Ajax应用开发"是字符串常量，true和false都是布尔型常量。在脚本中可以直接输入和使用这些值。

4.1.6 变量

变量是一种便于使用的占位符，用于访问计算机的内存地址，该地址可以存储脚本运行期间可以更改的数据。使用变量并不需要了解数据在计算机内存中的地址，通过变量名即可查看或设置变量的值。

1.声明变量

在JavaScript中，使用关键字var来声明一个或多个变量，语法如下：

        var variable_name[=initial_value],variable_name[=initial_value],... ;

其中variable_name指定变量名。在JavaScript中，变量名必须以字母或下画线开头，后面可以跟字母、数字或下画线，并且变量名不允许包含空格，也不允许包含特殊字符（如“!”、“@”、“#”、“$”等）；此外，也不能使用JavaScript语言的关键字作为变量名，例如var、true都不能作为变量名来使用。变量名是区分大小写的。通常使用驼峰式或下画线式变量名，例如userName或user_name等。

=initial_value是可选项，表示在声明变量时对变量赋值，这个操作称为初始化。如果在声明变量时未指定初始值，则变量的默认值为undefined。在程序代码中，可以通过赋值语句来设置变量的值。JavaScript变量可以存储任何类型的数据。变量的数据类型在程序运行期间可能会有所变化。

在JavaScript中，在使用一个变量之前最好先对它进行声明。虽然声明变量在JavaScript中并不是必需的，但对变量先声明后使用通常是一种良好的编程习惯。

例如，下面的语句用于声明两个变量并对它们进行初始化：

        var user_name="Tina",age=20;

2.变量的作用域

变量的作用域是指变量在程序中的作用范围。根据作用域，可以把变量分为全局变量和局部变量。

（1）全局变量：是指在所有函数的外部声明的变量，它在整个JavaScript程序中起作用。全局变量可以不使用var关键字来声明。

（2）局部变量：是指在某个函数内部声明的变量，它仅在该函数内部起作用。函数的参数也是局部变量。局部变量必须使用var关键字来声明。即使在语句块中声明的变量，其作用域也是整个函数，而不是它所在的那个语句块。

在函数内部，局部变量的优先级高于全局变量。如果局部变量或函数参数与全局变量名称相同，则全局变量不起作用。

例4-1 声明变量并显示变量的值，网页运行结果如图4-1所示。

图4-1 声明变量示例

设计步骤

1 在Dreamweaver中打开Ajax站点，然后在本地站点根文件夹中创建一个文件夹并命名为chap04。

2 在文件夹chap04中创建一个HTML网页并保存为page4-01.html，把文档标题设置为“声明变量示例”。

3 切换到代码视图，在<body>标记之后输入以下JavaScript脚本块：

        <script language="javascript" type="text/javascript">
        var x=123.4567;
        var b=true;
        var string="Ajax网页设计";
        document.write("变量的初始值：<br />");
        document.write("x = "+x+"<br />");
        document.write("b = "+b+"<br />");
        document.write("string = "+string+"<br />");
        x=256e18;
        b=false;
        string="Adobe Dreamweaver CS3"
        document.write("<hr />");
        document.write("更改后变量的值：<br />");
        document.write("x = "+x+"<br />");
        document.write("b = "+b+"<br />");
        document.write("string = "+string+"<br />");
        </script>

【代码说明】

在上述脚本中，通过调用document对象的write方法向文档中写入HTML代码。

4 按F12键，在浏览器中查看网页运行结果。

4.1.7 运算符与表达式

常量、变量、运算符和表达式是所有编程语言的组成要素。前面已经讨论了常量和变量，下面来介绍运算符和表达式。

JavaScript运算符按照功能可以分为算术运算符、比较运算符、逻辑运算符、赋值运算符、位运算符及其他运算符。常量、变量、函数和运算符一起组成了表达式。通过执行运算符指定的运算可以求出表达式的值，该值可以借助赋值语句赋予一个变量，也可以作为某个函数的参数。例如，在例4.1中，"x = "+x+"<br/>"就是一个表达式，其值被用做document.write()方法的参数。

1.算术运算符

算术运算符分为一元运算符和二元运算符，用于执行加法、减法、递增、递减、乘法和除法等运算。JavaScript算术运算符如表4-2所示。

表4-2 JavaScript算术运算符

递增和递减运算符，是修改存在变量中的值的快捷方式。包含这种运算符的表达式的值，依赖于该运算符是在变量前面还是在变量后面。

请看下面的例子：

        var j,k;
        k=2;
        j=++k;            // 递增发生在表达式被求值前，所以将3赋给了变量j

与上面的例子形成对照的是：

        var j,k;
        k=2;
        j=k++;            // 递增发生在表达式被求值后，所以将2赋给了变量j

2.关系运算符

关系运算符都是二元运算符，用于比较两个表达式的大小关系，运算结果是一个布尔值，可以取true或false。JavaScript关系运算符在表4-3所示。

表4-3 JavaScript关系运算符

使用关系运算符<、>、<= 或 >= 时，试图将expr1和expr2都转换为数字。若两个表达式均为字符串，则按字典序进行字符串比较。若其中一个表达式为NaN，则返回false。

使用相等运算符==或不相等运算符!=时，若两个表达式的类型不同，则试图将它们转换为字符串、数字或布尔值。

3.逻辑运算符

逻辑运算符用于对布尔值进行运算，其结果为true或false。逻辑运算符包括逻辑与、逻辑或和逻辑非。JavaScript逻辑运算符如表4-4所示。

表4-4 JavaScript逻辑运算符

4.位运算符

JavaScript位运算符如表4-5所示。

表4-5 JavaScript位运算符

5.赋值运算符

在JavaScript中，赋值运算符（=）用于给变量或属性赋值，语法如下：

        result=expr

其中，result为任何变量或属性，expr为任何表达式。

赋值运算符和其他运算符一样，除了把值赋给变量外，使用它的表达式还有一个值。这就意味着可以像下面这样把赋值操作连起来写：

        i=j=k=2;

执行完上述语句后，变量i、j和k的值都等于2。

在JavaScript中，某个运算符与赋值运算符组合在一起可以形成复合赋值运算符，例如+=、-=、*=、/=、%=等。复合赋值运算符先进行某种运算，然后用运算结果进行赋值。

下面以复合赋值运算符+=为例来说明。+=称为加法赋值运算符，其作用是将变量值与表达式值相加，并将和赋给该变量。语法如下：

        result+=expr

这个加法赋值运算符的作用等效于一个赋值运算符和一个加法运算符，即：

        result=result+expr

6.特殊运算符

除了前面介绍的各种运算符之外，JavaScript还提供了一些特殊运算符，这些运算符如表4-6所示。

表4-6 JavaScript特殊运算符

7.运算符优先级

在JavaScript中，使用关键字、运算符、变量及文字可以组合成表达式，用来生成字符串、数字或对象。当在表达式中包含多种不同运算符时，应按照如表4-7所示的优先级来执行这些运算，具有较高优先级的运算符先于较低优先级的运算符执行，具有相同优先级的运算符按从左至右的顺序求值。

表4-7 JavaScript运算符优先级