javascript基础知识总结

来源:互联网 发布:em算法求混合高斯 编辑:程序博客网 时间:2024/06/06 21:38

1.1  什么是脚本语言

在学习JavaScript之前,首先来了解一下脚本语言(Scripting Language)。脚本语言就是一种简单的程序,它由一些ASCII码组成,并可以用“记事本”等文本编辑器直接对其进行开发。

有些程序,如CC++Java等则必须先经过编译,将源代码转换为二进制代码之后才可执行。而像PerlJavaScriptVBScript等则不需要事先编译,只要利用合适的解释器便可以执行代码。

网站发展的初期,所有的程序都是在服务器端执行,然后再将执行结果发送到客户端。随着客户端计算机的功能越来越强大,CPU速度越来越快,如果将部分简单的操作交给客户端的计算机处理,这样就可以大大提高服务器的工作效率。这时候网页脚本语言就应运而生了,因为这种脚本语言能够与一般的HTML语言交互使用。在读取网页的同时,脚本语言编写的小程序也被传输到客户机上,并在客户机上执行。

1.2  JavaScript简介

JavaScript早期是由Netscape(网景)公司研发出来的一种在Netscape浏览器上执行的程序语言。它不仅包含了数组对象、数学对象,还包括一般语言所包含的操作数、控制流程等结构组件。用户可以利用它设计出交互式的网页内容,但这些网页不能单独执行,必须由浏览器或服务器执行。

开发JavaScript的最初动机是想要减轻服务器数据处理的负荷,能够完成如在网页上显示时间、动态广告、处理表单传送数据等工作。随着JavaScript所支持的功能日益增多,不少网页编制人员转而利用它来进行动态网页的设计。Microsoft公司所研发的IE网络浏览器在以前的版本中是不支持JavaScript语言的,但在IE 4.0之后也开始全面支持JavaScript,这使得JavaScript成为两大浏览器的通用语言。

从结构来说,JavaScript是一种基于对象和事件驱动的安全脚本语言。使用它的目的是与HTML超文本标记语言和Java脚本语言一起实现在一个Web页面中链接多个对象,起到与Web客户的交互作用,从而可以开发客户端的应用程序等。

在上面已经提到JavaScript只能在HTML脚本中才能得以执行。那么,如何在HTML语言中植入一个JavaScript脚本呢?以下是一个JavaScript脚本结构示例:

<script language="JavaScript">

……

</script>

Language指定了一个JavaScript语言。但现在也可以不用写该属性,因为目前大部分浏览器都将其设为默认值。一段JavaScript代码可以放置于HTML中的任意部位,但多数情况下将其放于<HEAD></HEAD>区段中。因为一些代码可能需要在页面装载起始就开始运行。但如果愿意,放置在任何位置都是可以的,甚至可以在HTML外部装入一个JavaScript程序。如下例所示:

<script language="JavaScript" src="url">

……

</script>

这里的url就是一个外部的JavaScript程序,在Netscape中只承认以后缀名为.js的程序,而IE对这个要求就比较宽松,只要它符合MIME格式即可。如果有很多的页面需要该段程序,只需编写一个外部程序就可以在多个页面中进行调用。当一句代码结束后应在末尾添加一个分号,表示一个完整的句子,也可以将其省略,这样并不影响程序的运行。在程序中的//<--……-->标记则是一段注释的开始。Example.htmJavaScript的一个简单实例。代码如下:

<html>

<head>

<title>这是一个JavaScrip程序的例子!</title>

</head>

<body>

<script language="JavaScript">

document.write("<h1>欢迎学习JavaScript</h1>");

</script>

<img src="E:\javascript\001.gif">

</body>

</html>

Example.htm的运行结果如图1-1所示。

 

1-1  JavaScript实例

1.3  JavaScriptJava的关系

常常会有人问到JavaScriptJava有什么区别,甚至有人误认为JavaScript就是Java。虽然JavaScriptJava确实有一定的联系,但它们并不像我们所想象的那样联系紧密。甚至可以肯定地说它们有很大的区别。JavaScriptJava的区别主要表现在以下几个方面:

q JavaScriptJava是由不同的公司开发的不同产品。JavaScriptNetscape公司的产品,其目的是为了扩展Netscape Navigator功能。Java是由Sun Microsystem公司开发的一种面向对象的程序设计语言,类似于C++,它需要多种编译器和支持文件才能运行。

q JavaScript是基于对象的,它是一种脚本语言。它基于对象和事件驱动,因而它本身提供了非常丰富的内部对象供设计人员使用。而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序也必须设计对象。

q JavaScriptJava在浏览器中所执行的方式不一样。JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户端,即JavaScript语句本身随Web页面一起下载下来,由浏览器解释执行。而Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它通过编译器或解释器实现独立于某个特定的平台编译代码。

1.4  JavaScript的基本构成

JavaScript脚本语言同其语言一样,有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。JavaScript提供了5种基本的数据类型用来处理数字和文字而变量提供存放信息的地方表达式则可以完成较复杂的信息处理。

1.4.1  基本数据类型

JavaScript中的基本数据类型可分为5种。

数值型:整数和浮点数统称为数值。所谓数值就是由数字及正负号所组成的数据类型,例如853.1415926等。

字符串型:是由多个单一的字符所组成的数据类型。在JavaScript中,“"”“'”括起来字符或数值,如"您好"、"学习'JavaScript' "等。

q 逻辑(布尔:用truefalse表示

null:它是JavaScript的保留值。因为JavaScript的大小写敏感性,因此它不同于如NullNULL等其他变量需要特别注意的是,null既不等于“0”,也不等于“空字符串”。

未定义(undefined)值:该值的顶级属性是未定义的,它也是一个保留值。在两种情况下可能得到一个未定义的值,一种是根本不存在的对象,另一种就是虽然已经声明,但却没有赋值。

JavaScript基本类型中的数据可以是常量,也可以变量。由于JavaScript采用弱类型的形式,因而一个数据的变量或常量不必作声明,而是在使用或赋值时确定其数据的类型。用户可以先声明该数据的类型,然后进行赋值

1.4.2  变量

变量(Variable)又称为标识符,是对应到某个值的符号。因为它所对应的值可能随程序的进行而变化,所以称为变量。变量的名称必须以大、小写的英文字母或下划线开头,但不能以数字开头,后面可以接数字或字母。由于JavaScript区分大小写,所以Aa将被视为两个不同的变量。

1.变量定义

JavaScript声明一个变量时,可以使用以下方式实现:

var Up,Down,Left,Right;

也可以直接给它赋值,如下:

x=3;

2.变量的作用范围

当在一个函数之外定义一个变量,那这个变量就叫做全局变量。全局变量可用于当前所有的文档。在函数内部定义的变量则叫做局部变量,它只作用于函数内部。用户可以通过指定窗口或框架的名字调用全局变量。例如,当一个框架文档中定义了名为phoneNumber的全局变量时,用户在子框架中就可以使用parent.phoneNumber引用该变量。

1.4.3  常量

JavaScript中用常量(Literals)来描述数值。常量是一些固定不变的值,不像变量那样随着程序的进行而变化,所谓常量就是保持不变的量。常量大致可分为以下几种:

1整型常量

JavaScript的常量通常又称字面常量,它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。

2.数组常量

一个数组常量是零或更多表达式的列表,它包含在一对方括号内。当使用数组常量来创建一个数组时,它的元素和长度即由所指定的值进行初始化。下面来看一个具体的例子,该例题有3个元素,其长度为3

apple=["fruit","China","vitamin"]

不必在数组常量中指定所有的元素。如果在一行中输入两个逗号,它会自动为没有指定的元素留出空间,如下例所示:

God=["Belial",,"Angel"]

该数组包含两个元素值和一个空元素,但要注意的是,如果把逗号放到数组的最后,那它将会被忽略不计。

3.布尔常量

布尔类型只有两种值:truefalse它主要用来说明一种状态或标志,以说明操作流程。JavaScriptC++是不一样的C++可以用10表示其状态JavaScript只能用truefalse表示其状态。


4.浮点数常量

一些浮点数组的例子就像后面给出的例子一样,如3.1415926-3.1E121e122E-12等。指数部分是在一个整数后跟一个“e”或“E”,它可以是一个有符号的数。一个浮点数组必须包含一个数字、一个小数点或“eE)”。

5.整数

一个整数可以是十进制、十六进制和八进制数。一个十进制常量由一串数字序列组成,它的第一个数字不能为0;如果第一个数字为0,则表示它是一个八进制数;若为0x,则表示它为一个十六进    制数。

6.字符串常量

字符串常量是零或若干封装在"”或“'”内的字符。如"ball"、'ball'、"6682"、"a line"等。可以在字符串常量中调用任何“字符对象”,而JavaScript会自动将字符串常量转换为一个临时字符常量。

7.特殊字符

C语言一样,JavaScript中同样有些以反斜杠/开头的不可显示的特殊字符通常称为控制字符。

1.4.4  表达式

表达式由常量、变量或运算符所组成,并生成一个单一值。如果一个语句返回一个值,那么它就是一个表达式。该值可能是一个数值、字符串或一个逻辑值。表达式有两种类型:一种是给变量赋一个值,另一种仅是一个简单值。例如,表达式3+4简单赋值为73.14也是一个表达式;复杂一点的表达式如x=7,即给变量x赋值为7JavaScript的表达式有如下几种类型:

数学表达式:计算值为数字,如8.45

字符串表达式:计算值为一个字符串,如"computer"

逻辑表达式:计算值为truefalse

1.4.5  运算符

JavaScript具有一元和二元两种运算符。二元运算符有两个操作对象,如3*4;一元运算符只有一个操作对象,如i++++i。另外,JavaScript还有三元运算符,而它则具有3个操作对象。

1.赋值运算符

赋值运算符是将右边的操作数赋予左边的操作对象,如x=y是将y的值赋给x。赋值运算符还具有简写形式,见表1-1

1-1  赋值运算符

运算符缩写形式

含    义

x+=y

x=x+y

续表

运算符缩写形式

含    义

x-=y

x=x-y

x*=y

x=x*y

x/=y

x=x/y

x%=y

x=x%y

x<<=y

x=x<<y

x>>=y

x=x>>y

x>>>=y

x=x>>>y

x&=y

x=x&y

x^=y

x=x^y

x|=y

x=x|y

 

2.比较运算符

比较运算符比较它的操作对象并返回一个逻辑值。操作对象既可以是数字也可以是字符串值。字符串的比较使用Unicode值按照字母顺序进行,见表1-2

1-2  比较运算符

运  算  符

描    述

示    例

等号(==

如果操作对象相等返回true,如果两个操作对象不为同一类型,JavaScript将尝试转换它们为一个适当的类型

5==var1

"5"==var1

5=='5'

不等于(!=

两个操作对象不相等,返回true

var1!=8

var2!="5"

绝对相等(===

如果操作对象相等并且类型相等,返回true

5===var1

绝对不等(!==

如果操作对象不相等并且/或不是同一类型,返回true

var1!=="5"

5!=='5'

大于(>

如果左边的操作对象大于右边的操作对象,返回true

var2>var1

大于或等于(>=

如果左边的操作对象大于或等于右边的操作对象,返回true

var2>=var1

var1>=5

小于(<

如果左边的操作对象小于右边的操作对象,返回true

var1<var2

小于或等于(<=

如果左边的操作对象小于或等于右边的操作对象,返回true

var1<=var2

var2<=7

 

3.算术运算符

算术运算符将数字值(常量或变量)作为操作对象并返回一个单一数字值。算术运算符见表1-3


1-3  算术运算符

运  算  符

描    述

实    例

%(取模)

二进制运算符,返回整数除法的余数

15%4返回3

++(增量)

一元运算符,操作对象加1;如果是前置++i,返回增量后的值,如是后置i++,返回增量前的值

i7++i返回8,而i++则返回7

--(减量)

一元运算符,操作对象减1;如果是前置--i,返回减量后的值,如是后置i--,返回减量前的值

i7--i返回6,而i--则返  回7

-(取反)

一元运算符,返回操作数的反数

i7,那么-i返回-7

 

4.按位运算符

按位运算符对操作数进行二进制数的位层运算,在比较两个值之前先将它们转化为二进制数,见表1-4

1-4  按位运算符

运  算  符

用    法

描    述

按位与

a&b

当两个操作数的每个对应位都为1时返回1

按位或

a|b

当两个操作数的对应位任意一个为1时返回1

按位异或

a^b

当两个操作数的对应位其中一个不为1且不全为1时返回1

按位非

~a

将操作数按位反转

左移

a<<b

将二进制数a左移b位,右边补零

带符号位右移

a>>b

将二进制数a右移b位,丢弃移动位

首位0填充右移

a>>>b

将二进制数a右移b位,丢弃移动位,并左边补零

 

下面先来看一下按位逻辑运算符是用什么方法进行工作的:先将操作数转化为二进制数并由01来表示,然后再将第一个操作数与第二个操作数之间按对应位进行操作,最后对运算符按对应位进行运算,结果按位配对。下面是一些按位运算的例子:

13&11结果为91101&1011=1001

13|11结果为151101|1011=1111

13^11结果为61111^1001=0110

按位移位运算符包括两个运算对象:第一个是被移位的量,第二个指定第一个对象被移动的位的数目。移位运算符将操作数转换为二进制数,并返回同左边类型相同的结果,见表1-5

1-5  移位运算符

运  算  符

描    述

实    例

<<(左移)

运算符按指定的数目按位左移第一个操作数,左移多余的位被丢弃,右边补零

11<<2结果为44,因为1011左移2位将变为101100,十进制为44

 

 

续表

运  算  符

描    述

实    例

>>(带符号位右移)

运算符按指定的数目按位左移第一个操作数,多余位被丢弃,最左边的位移到左边

11>>2结果为2,因为1011右移2位变为10,十进制数为2。同样地,-11>>2结果为-3,因为符号位被保留了

>>>(零填充右移)

运算符按指定的数目按位左移第一个操作数,多余位被丢弃,从左边补入0

13>>>2结果为4,因为1101右移2位为11,十进制数为3

 

5.逻辑运算符

通常逻辑运算符返回一个布尔值,但是&&”和“||”运算符还可以返回其中一个指定的操作数的值,见表1-6

1-6  逻辑运算符

运  算  符

用    法

描    述

&&

表达式1&&表达式2

逻辑与,如果它能转换为false,返回表达式1,否则返回表达式2;如果两个表达式都为真,&&返回true,否则返回false

||

表达式1||表达式2

逻辑或,如果它能转换为true,返回表达式1,否则返回表达式2;如果两个表达式都为真,||返回true,否则返回false

!

!表达式

逻辑非,如果表达式能转换为true,将返回false,否则返回true

 

6.字符串运算符

除了比较运算符外,用于字符串值的还有连结运算符,其将两个字符串值连结在一起。例如"好好"+"学习"就返回"好好学习"。此外,还可以使用简写的方式(+=)来进行表达。

7.特殊运算符

JavaScript特殊运算符包括以下几种类型:条件运算符、逗号运算符、delete、new、this、typeof、void。

当同一个命令行中存在多个运算符时,用户必须考虑运算符的优先级。优先级指的是复合运算进行计算时的先后顺序,对于所有的二元运算都是从左到右进行计算,当然也可以用圆括号来忽略优先级。表1-7给出了运算符及运算符类型。

1-7  运算符及运算符类型

运算符类型

运  算  符

逗号

,

赋值

=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=

条件

?:

逻辑或

||

逻辑与

&&

按位或

|

续表

运算符类型

运  算  符

按位异或

^

按位与

&

等于/不等于

==、!=

比较

< <=、> >=

按位移位

<<、>>、>>>

/

+、-

/

*、/、%

/增减量

!、~、-、+、++、--、typeof、void、delete

调用

( )

创建

new

成员

. []

1.5  JavaScript的基本语法

JavaScript的语法同其他编程语言类似,主要包括条件选择、循环、跳出3大类。下面将介绍构成这些语法的常用语句。

1.5.1  if条件选择语句

ifelse语句,如果条件为true,则执行if段语句;若为false,则执行else段语句。用法如下:

if(条件判定)

{

……语句1(条件为true时);

}

else

{

……语句2(条件为false时);

}

ifelse语句条件的结果值可以是truefalseJavaScript表达式。表达式可以是任何可执行的JavaScript语句,还可以在任意层被嵌套。具体实例如下面的IF.htm所示:

<script language="JavaScript">

function checkData ()

{

if (document.form1.three.value.length==3)

alert("OK!有效!");

else

{

alert("请输入三个字符,“"+document.form1.three.value+"”无效!");

return false

}

}

</script>

<form name="form1">

<center>

请输入字符:<input type="text"name="three"onChange="checkData()">

</center>

</form>

IF.htm文件的文本框内输入3个字符,单击鼠标左键,就会弹出一个警告框,如图1-2所示。否则就会弹出无效对话框,如图1-3所示。

         

1-2  有效的输入                                    图1-3  无效的输入

1.5.2  switch选择语句

switch语句允许程序给表达式求值,并用case标记来匹配表达式可能的值。如果匹配成立,程序将执行相应的语句。具体用法如下:

switch(表达式)

{

case:语句

break;

case:语句

break;

……

default:语句

}

下面来看一下switch语句执行的流程。如果case的值等于表达式的值,则执行它相应的语句;否则继续执行,直到遇到一个break语句,或者switch语句结束。这就是说如果没有使用break语句,那么将会出现多个case一起被执行的情况。如果没有case等于表达式的值,则跳转到default;如果在default也没有的情况下,则跳转到最后一步,继续执行switch代码末尾的语句。下面就来看一个switch语句的例题。

<script language="JavaScript">

{

for(i=0;i<6;i++)

switch(i)

{

case 0:

document.write("i is 0.<br>");

break;

case 1:

document.write("i is 1.<br>");

break;

case 2:

document.write("i is 2.<br>");

break;

case 3:

document.write("I is 3.<br>");

break;

default:

document.write("i is greater than 3.");

}

}

</script>

在上面的实例中,switch语句共执行了5次,每执行一次case就会换行。该语句一共执行了5次,但只有4case,所以default被执行了两次,如图1-4所示。

 

1-4  switch选择语句

1.5.3  do…while语句

dowhile将对语句进行循环执行,直到条件为false为止。用法如下:

do

{

语句

}

while(条件判断)

首先执行一个语句,然后重复循环执行该语句,直到条件表达式为false。下面来看一个do…while语句的实例。如下:

<script language="JavaScript">

var i=0;

do

{

i+=1;

document.write (i+"<br>");

}

while (i<10);

</script>

上面这个例子实现了从1~10的输出,do…while与while循环语句实现的结果很相似,所以一般不用do…while语句,而使用while循环语句。程序的执行结果如图1-5所示。

 

1-5  do…while语句

1.5.4  while循环语句

while语句只执行一个语句,直到指定的条件为false为止。其用法如下:

while(条件)

{

语句

}

该语句与 dowhile语句不同的是,它将在语句开始执行时检查条件是否为true,如果条件为false,它将不会执行下面的语句。下面就来看一个while循环语句的例子。

<sript language="JavaScript">

var loop=0;

while (loop<5)

{

document.write("<h1> while循环语句</h1>");

loop++;

}

</script>

在上例中将字体循环5次之后,退出程序执行,如图1-6所示。


1-6  while循环语句

1.5.5  for循环语句

for语句执行语句循环,直到条件为false为止。用法如下:

for([初始表达式];[条件];[增量表达式])

{

语句

}

for语句的初始表达式由一个表达式构成,该表达式只在执行循环前被执行一次。条件是一个布尔表达式,如果值为true,则下面的语句被执行;若为false,则循环结束。增量表达式在每次循环完后执行。语句是条件的值为true时要执行的语句,它可以是复合语句。下面就来看一个for语句的例子。

<script language="JavaScript">

for(i=0;i<10;i++)

{

document.write("<h2><font color=red>for循环语句例题演示</font></h2>");

}

</script>

在上例中将字体循环10次之后,退出程序执行,如图1-7所示。从这个例子中可以看出,for循环语句与while循环语句很相似,都是完成语句的循环。

 

1-7  for循环语句


1.5.6  break语句与continue语句

如何在执行程序时,让程序停止在我们想要停止的地方?如果要想继续执行,又该如何解决?下面就来看一下解决这个问题的break语句和continue语句

1break语句

break语句来中止一个循环,如switch语句。当在一个whiledowhileforswitch语句中,break就会立即终止最里层的循环或将控制权交给下面的语句执行。下面来看一个具体的实例。

<script language="JavaScript">

function BreakTest()

{

var i=1;

while(i<10)

{

document.write (i);

if(i==5)

break;

i++;

}

return("<h1>"+i+"</h1>");

}

document.write(BreakTest());

</script>

上面的例子显示的是从1~10,而在中间使用了break之后,就中断了正常的循环。因为i等于5,所以在输出到5之后就改为执行break语句,终止当前的循环,最后输出为标题1i值,如图1-8      所示。

 

1-8  break语句

2continue语句

continue语句用于重新开始一个whiledowhilefor语句。其用法如下:

continue [label];

其中[label]是可选的,它是指定断点处语句的标签。

执行continue语句会停止当前的循环,并从循环的开始处继续程序流程。这样对不同的循环类型有不同的影响:whiledowhile循环检查它们的条件,如果条件为true,则再次执行循环;for循环执行它们的递增表达式,如果测试表达式为true,则再次执行循环。下面是一个关于continue的例子。

<script language="JavaScript">

function skip()

{

var s=" ",i=0;

while(i<10)

{

i++;

document.write ("<b>"+i+"</b>");

if(i==5)

{

continue;

}

s+=i;

}

document.write ("<br>");

return("<b>"+s+"</b>");

}

document.write (skip());

</script>

从图1-9中可以看出第二行比第一行少了一个5,这就是continuebreak的不同之处。break是在到达指定的条件之后就不再继续执行程序,而continue则是在到达指定的条件之后继续执行下面的程序,直到完成为止。第一行中的10个数字是逐个输出变量i的值,而第二行是在执行了continue之后跳过了5,再输出字符串s的值,所以比第一行少一个字符5

 

1-9  continue语句

1.6  JavaScript的函数调用

函数是JavaScript中最基本的建构成员。函数是一个JavaScript过程,执行一个特定的任务。使用一个函数前,必须对它进行定义,然后在脚本中对它进行调用。


1.6.1  函数的定义与调用

函数的定义是由一系列的JavaScript关键字所组成的,主要包括函数的名称、函数的参数、函数的JavaScript语句。参数包含在由逗号分开的圆括号内,JavaScript语句包含在大括号内,该语句还可以调用另外的一个或多个函数。

通常可以在文档的头部定义函数,以便当文档被装载时函数首先载入;否则,有可能在文档正在被载入时,用户已经触发了一个事件而调用了一个还没有定义的函数,导致一个错误的产生。而一个函数的原型应该像下面的语句一样:

function square(number)

{

return number * number;

}

调用函数就是使用当前文档中所定义的函数,或者调用另一个窗口或框架定义的函数。调用时需要用指定的参数来执行一个特殊的行为。一个函数还可以进行递归,也就是说自已调用自己。

1.6.2  全局变量与局部变量

JavaScript变量可以在使用之前先进行声明,并对其赋值。通过使用Var关键字对变量作声明,而对变量作声明的最大好处就是能及时地发现程序中的错误。因为JavaScript采用的是动态编译,而动态编译是不易发现代码中的错误的,特别是在变量命名这方面。

对于变量还有另一个重要的属性,那就是变量的作用域。在JavaScript中同样有全局变量局部变量之分。全局变量是定义在函数之外的所有变量,其作用范围是整个函数。而局部变量是定义在函数体之内的,所以只对其所在的函数体有效。

1.6.3  可变参数的函数

函数的arguments是返回一个数组,它包含了传递给当前执行函数的每个参数。如arguments[i]functionName.arguments[i]。在这里的i是一个序列数,从零开始,因此传递给函数的第一个参数应当是arguments[0]arguments的整个长度由arguments.length来指定。

通过arguments的属性,函数可以很好地处理可变数量的参数。当不知道有多少个参数将传递给函数时,arguments就会发挥它的功能,可以用arguments.length决定实际传递给函数的参数数目,然后用arguments数组尝试每个参数。

1.6.4  预定义函数

JavaScript中共包含以下几个预定义函数。

 

1eval函数

eval函数对作为数字表达式的一个字符串进行求值。其语法如下:

eval(expr)

此处的expr是一个被求值的字符串参数。如果该字符串是一个表达式,那么eval求该表达式的值;如果该参数代表一个或多个JavaScript语句,则eval执行这些语句。eval函数可以用来把一个日期从一种格式转换为数值表达式或数字。

2isFinite函数

isFinite函数是计算一个参数以确定它是否是一个有限数值。其语法如下:

isFinite(number)

此处的number是一个数值。如果参数为非数字、正无穷数或负无穷数,该函数返回false,否则返回true

3isNaN函数

isNaN函数是计算一个参数以确定它是否为NaN(非数字)。其语法如下:

isNaN(testValue)

此处的testValue是想要计算的值。若结果为NaN,则返回true,否则为false

4parseIntparseFloat函数

这两个parse函数将字符串参数转换为一个数值。其语法如下:

parseFloat(str)

parseInt(str[,radix])

parseFloat分析它的字符串参数str,并尝试将其转换为一个浮点数,如果它处理的字符不是符号(+-)、数字、十进制小数点或指数,那么返回值到该位置停止,而忽略后面所有的字符;如果第一个字符不能转换为一个数值,那它将返回NaN

parseInt分析它的第一个参数str,并基于指定的基数radix或底数之上返回一个整数。例如,若基数为10则将其转化为十进制,为8则转化为八进制,为16则转化为十六进制。如果基数省略或它与首字符相矛盾时,JavaScript假定基数是基于字符串的第一个字符,当第一个字符不能转换为基于基数的数字时,它将返回NaN

5NumberString函数

NumberString函数是将一个对象转换为一个数字或字符串。其语法如下:

Number(objRef)

String(objRef)

此处的objRef是一个对象的引用。下面的例子将一个Date对象转换成为一个可读的字符串。

D=new Date (430054663215)

<!---下面它将返回为字符串:"Thu Aug 18 19:37:43 UTC+0800 1983"-->

x=String(D)

6escapeunescape函数

escapeunescape函数是将字符串进行编码或解码。其语法如下:

escape(string)

unescape(string)

escape函数将字符串转换为基于ISO Latin字符集的十六进制ASCII码。这个函数不与任何其他对象关联。但它实际上是JavaScript语言的一个固有部分,对于字母、数字以及字符将返回它们本身,而对于符号则返回它们的ASCII码,其形式为%xxx。例如语句document.write(escape(Hi!"))的返回结果为Hi%21。

unescape函数是返回一个基于其ASCII码值的字符,即对其进行解码。

1.7  JavaScript的对象

JavaScript是基于对象的简单程序。对象由JavaScript的变量或其他对象的属性、方法所组成的集合。方法是作为某个对象成员的函数,属性是作为对象成员的一个值、数组或对象的形式。下面就先来了解一下对象和它的属性。

1.7.1  对象的基本概述

JavaScript中,对象是对客观事物或事物之间关系的描述。JavaScript中可以使用以下几种对象:

q JavaScript内置对象,如DateMathString

q 用户自定义的对象。

q 由浏览器根据页面内容自动提供的对象。

q 服务器上固有的对象。

JavaScript中的对象由属性和方法两个基本元素构成。属性成员是对象的数据,方法成员是对数据的操作。在JavaScript中还提供了几个对象处理的语句,例如thisforinwithnew

1.7.2  对象属性

一个JavaScript对象具有各种各样的属性。可以用下面方法来访问一个对象的属性:

objectName.propertyName

需要注意的是,对象名和属性名都对大小写很敏感。用户可以通过给属性赋值来定义一个属性。例如,假设有一个对象名为Food,可用如下的方法来访问其属性:

Food.make="KFC";

Food.producing area="China";

Food.year=2005;

数组是用单一的变量名关联数值的一个序列。在JavaScript中,属性和数组是密切相关的。事实上,它们具有不同的界面和相同的数据结构,因此也可以像下面所给出的方法一样来访问Food对象的    属性。

Food["make"]="KFC";

Food["producing area"]="China";

Food["year"]=2005;

这类数组是一个关联数组,因为每个索引元素都通过一个字符串值关联。为了举例说明它是如何工作的,下面的函数显示对象的属性,并把对象和对象名作为参数传递给函数。

function show_props(obj, obj_name)

{

var result=" ";

for(var i in obj)

result+=obj_name+"."+i+"="+obj[i]+"\n";

return result;

}

如果函数调用show_props(Food,"Food"),将返回下面的结果:

Food.make=KFC;

Food.producing area=China;

Food.year=2005;

1.7.3  创建对象

JavaScript 1.2开始,就可以用对象初始化程序创建对象。另外,用户也可以首先创建一个构造函数,并用new运算符来创建该对象的实例。

1.对象初始化程序

除了用构造函数来创建对象外,还可以用对象初始化程序来创建对象。对象初始化程序技术是从C++中引用来的。它的用法如下:

objectName={property1:value1,property2:value2,...,propertyN:valueN}

这里objectName是新对象的名字。每个property是一个标识符,可能是一个名字、数字或字符串直接量。每一个value是赋予属性property值的表达式,objectName和赋值均为可选项。下面的例子创建了3个属性的对象myBenz。注意,属性engine本身是具有它自己的两个属性对象。

myBenz={color:"silvery white",wheels:4,engine:{cylinders:4,size:3.0}}

2.使用构造函数

除了上面所说的用对象初始化程序来创建对象外,还可以用构造函数来创建对象。创建一个函数来指定对象的名字、属性和方法来定义对象类。假设需要创建的对象类为car,它具有的属性包括makemodelyearcolor,可以按照以下方法来实现:

function car(make,model,year)

{

this.make=make;

this.model=model;

this.year=year;

}

现在就可以创建一个对象mycar,如下:

mycar=new car("Benz","S600",2000);

用户还可以给先前定义的对象添加一个属性,如mycar.color="silvery white",它并不会影响其他的同类对象。

3.索引对象属性

JavaScript中,对象也是一个数组。用户可以按名称来引用一个对象的属性和方法,也可以按其数组下标索引来引用。如果某文档有两个表单,其中第二个表单名为myForm。下面的方法是等价的:

document.myForm;

document.forms[1];                      <!--[1]HTML源顺序中属性forms的索引-->

document.forms["myForm"];

4.为对象类定义属性

可以用prototype属性在先前定义的对象类中加入一个属性,它可以被所有指定的对象类所共享。下面的代码为car类所有的对象添加一个color属性,并为car1color属性赋值。

car.prototype.color=null;

car1.color="black";

5.定义方法

方法是对象的集合,可以像定义标准函数一样定义一个方法。方法就是赋给某个对象的一个函数,还可以在对象构造函数中包含方法定义来定义对象类的方法。例如,下面的例子:

function displayCar()

{

var result="A Beautiful"+this.year+" "+this.make+" "+this.model;

pretty_print(result);

}

对于前面定义car的对象类,就可以如下来调用car对象类中每个对象的displayCar方法:

car1.displayCar()

car2.displayCar()

6.使用对象引用

JavaScript有一个特殊的关键字this,用它可以在一个方法中来引用当前的对象。当其用于form属性时,this关键字引用当前对象的父系表单。如下例,当用户按下按钮时,text对象内文本框内容将以其父系表单的名字myForm来代替原值Benz

<form name="myForm">

Form name:<input type="text" name="text1" value="Benz">

<input name="button1" type="button" value="Show Form Name"

onClick="this.form.text1.value=this.form.name">

</form>

7.删除对象

若想删除一个对象,可以用delete运算符来删除。如下例所示:

myobj=new Number();

delete myobj;                                  <!--删除对象并返回true-->

1.7.4  使用对象

本节就来讲述一下JavaScript的对象并解释如何来使用它们。通过本节的学习将会对对象有更加深入的了解。

1.关键对象

window对象是所有对象的“父”对象,可以在JavaScript应用程序中创建多个窗口。frame对象由框架文档中的FRAME标记所定义,frame对象同window对象具有相同的属性和方法,所不同的是它们的显示方式不同。下面列举了window对象一些很有用的方法。

q openclose:打开和关闭浏览器窗口,可以指定窗口的尺寸、内容以及是否有按钮条、地址框等属性。

q alert:显示一个警告对话框。

q confirm:显示一个有OKCancel按钮的确认对话框。

q prompt:显示一个输入值文本域的提示对话框。

q blurfocus:在窗口中移去或得到一个焦点。

q scrollTo:卷动窗口到指定的坐标。

q setInterval:在每个指定时间段对一个表达式赋值或调用一个函数。

q setTimeout:在指定的一段时间后对一个表达式赋值或调用一个函数。

在每一页都有一个document对象。因为它有writewriteln两个方法产生HTML,因此它也是一个最有用的对象之一。document对象是文档页AnchorAppletAreaFormImageLayerLinkPlugin对象的父对象。而在文档内的每一个表单都会产生一个Form对象,又因为一个文档可以包含多个表单,因此Form对象被存储到一个叫forms的数组中,第一个表单为forms[0],第二个为forms[1],依此类推。如下面给出的例子就可以来引用文档内第一个表单的第一个元素。

document.forms[0].elements[0]

location对象具有基于当前URL的属性,例如hostname属性是当前文档服务器和域名。它有两个方法:一种是reload强制窗口重载当前文档;另一种是replace从当前历史记录装载指定的URL

history对象则包含了客户曾经访问过的URL列表,可以用currentnext previous属性访问当前、下页、前页的历史记录,还可以用history数组访问别的历史记录值。也可以用go方法来重定向客户到任何历史记录,例如下面的代码装载客户倒数第二个历史记录。

history.go(-2)

navigator对象中包含了浏览器的版本信息,如appName属性指定浏览器的名字,appVersion属性指定浏览器的版本。navigator有两个方法:一是javaEnabled,指定Java是否有效;二是preference,可以用一个签名的脚本获取或设置各种用户参数。

2JavaScript映射及HTML布局

JavaScript对象属性值是基于HTML文档的内容,可以称为映射(reflection),因为属性值映射到了HTML中。为了更好地理解JavaScript映射,就需要了解浏览器是如何进行页面布局的。通常浏览器是从HTML文件的顶行开始往下读入并执行其语句,并顺序将其显示到屏幕上。因为有这个“向下”的过程,仅当读到它时JavaScript才对其映射。例如,只有当定义了一个表单后,JavaScript才将表单元素视为其对象,否则将会出错。

同样地,一旦页面布局已经发生,设置属性并不会影响它本来的值或外观。在document属性章节中,我们用了一个关于文档的标题的例子,但是却不能更改文档的标题,如果在JavaScript代码中写入以下内容:

document.title="Document属性"

那么就会得到一个错误信息。然而也有例外,也可以动态地改变表单元素的值。另外,用事件处理器也可以在布局完成后改变少数的其他属性,如document.bgColor

3document对象

document对象是JavaScript的基本对象之一,因此一个HTML文档中大多数都是它的属性。下面就来看一个关于document属性的实例。

document.myform.Button1.value=document.title

上面这个例子是在页面中出现一个按钮,当用鼠标单击之后,按钮上的字就会变成文档的标题。而document.title的意思就是获取文档的标题,并将值“Document属性”赋予按钮的value属性中去。

4write方法

文档的write方法显示输出信息,在脚本中可以做所有在普通HTML不能完成的工作,例如可以有条件地显示正文或使用变量。因此write方法是最常用的JavaScript方法之一。还可以用字符串的连结运算符将几个字符串连结为一个。

<head>

<script language="JavaScript">

function bar()

{

document.write("<hr>");

}

function output(headLevel,headText)

{

document.write("<H", headLevel, ">", headText, "</H",headLevel, ">");

}

</script>

</head>

<body>

<script language="JavaScript">

bar();

output(1,"JavaScript产生动态HTML");

{

document.write("<hr>");

}

</script>

</body>

上面这个例题演示的是使用JavaScriptwrite方法来实现动态的HTML,并在文本的上下方各加一条水平线,如图1-10所示。

 

1-10  write方法

1.7.5  其他内部对象

1Array对象

JavaScript可以使用预定义的Array对象及其方法提供对创建任何数据类型的数组的支持。数组是一套数值的序列,它由一个名字和索引所组成。创建数组有两种方法来定义一个数组。具体如下:

arrayObjectName=new Array(element0,element1,…,elementN)

arrayObjectName=new Array(arrayLength)

这里arrayObjectName既可以是存在的对象,也可以是一个新的对象。而element0,element1,,elementN是数组元素的值,arrayLength则是数组初始化的长度。

赋值及引用可以使用以下方法对数组进行赋值:

emp[0]="apple"

也可以在创建数组时给它赋值,如下:

emp=new Array(apple,orange,banana)

所有的数组元素第一个索引都是从0开始的,引用上面的第一个元素应当使用以下的格式:

emp[0]

2Boolean对象

Boolean对象是Boolean数据类型的包装器。每当Boolean数据类型转换为Boolean对象时,JavaScript都隐含地使用Boolean对象。可以用下面的语法来创建一个Boolean对象:

booleanObjectName=new Boolean(value)

不要将Boolean的原始值和Boolean对象的truefalse值相混淆。可选的value参数是新对象的初始Boolean值。如果该值省略,或者为falseundefinednullNaN以及空字符串,则该Boolean对象的初始值为false;否则,初始值为true。例如:

var b=new Boolean(false);

if (b)           <!--该表达式为true-->

3Date对象

JavaScript没有时间数据类,但可以用Date对象及其方法来取得日期和时间。Date对象有许多方法来设置、提取和操作时间,它没有任何属性。JavaScript处理时间的方法类似于JavaDate对象的范围为相对于197011日的前后100000000天。创建一个Date对象的方法如下:

dateObjectName=new Date([parameters])

dateObjectName是创建的Date对象名,它可以是一个新对象或已存在对象的属性,parameters可以是空白或者用字符串描述。

4Function对象

预定义的Function对象指定一个JavaScript字符串码,它可以像函数一样进行编译。其用法如下:

functionObjectName=new Function([arg1,arg2,...argn],functionBody)

functionObjectName是一个变量名或一个已存在的对象属性。functionBody是包含调用该函数时被执行的JavaScript代码块的字符串。下面的代码将一个函数赋予变量setBGColor,该函数设置了当前文档的背景色。

var setbgColor=new Function("document.bgColor='antiquewhite' ")

5Math对象

预定义的Math对象具有数学常量和函数的属性和方法。同样地,标准的数学函数也是Math对象的方法。与别的对象不同,不能自已创建一个Math对象,所有的Math对象都是预定义的,可以通过以下方法来使用多个的数学常量和方法。

with(Math)

{

a=PI*r*r;

y=r*sin(theta);

x=r*cos(theta);

}

6Number对象

Number对象代表数值数据类型和提供数值常数的对象。Number对象最主要的用途是将其属性集中到一个对象中,以及使数字能够通过toString方法转换为字符串。

7String对象

String对象可用于处理或格式化文本字符串,以及确定和定位字符串中的子字符串。不要将它同字符串常量相混淆。用户可以在一个字符串常量中调用任何String对象方法,JavaScript自动将字符串常量转换为一个临时的String对象并调用其方法,然后丢弃该临时的String对象。用户也可以在一个字符串常量中使用String.length属性。

原创粉丝点击