Javascript实例教程.docx

onClick="CreateWindow（）">

Javascript实例教程

（2）创建折叠式导航菜单

为了创建折叠式的导航菜单，你可以在网页的最前面部分以下代码：

--Begin

functionformHandler（）{

varURL=document.form.site.options

[document.form.site.selectedIndex].value;

window.location.href=URL;

//End-->

}

那在网页上如何调用呢？

以下是具体代码：

下面是全部的代码：

--Begin

functionformHandler（）{

varURL=document.form.site.options

[document.form.site.selectedIndex].value;

window.location.href=URL;

//End-->

}

连接到….

太平洋网络学院

中文雅虎

263网站

美国在线

//www.neworiental.org">北京新东方

Javascript实例教程（3）探测浏览器插件

利用Javascript可以探测在网络浏览器中的插件程序，但是值得指出的是否，它只在NetscapeNavigator有效。

下面的代码显示了怎样探测audio/midi类型插件程序：

--

varcan_play=false;

varmimetype='audio/midi';

if（navigator.mimeTypes）{

if（navigator.mimeTypes[mimetype]!

=null）{

if（navigator.mimeTypes[mimetype]

.enabledPlugin!

=null）{

can_play=true;

document.write（'

HIDDEN=TRUELOOP=FALSEAUTOSTART=FALSE>'）;

}

}

}

functionplaySound（）{

if（document.embeds&&can_play）{

if（navigator.appName=='Netscape'）

document.embeds[0].play（）;

else

document.embeds[0].run（）;

}

}

functionstopSound（）{

if（document.embeds&&can_play）

document.embeds[0].stop（）;

}

//-->

那在网页上如何调用呢？

以下是具体代码：

"stopSound（）">

HEIGHT="100"BORDER="0">

你可能对于一些其它的编程语言很熟悉，比如C++或者Java等等，它们也是可以创建对象的，现在最新的VB版本VB.NET也具有了更好的面向对象功能-----创建对象。

从本质上讲，创建对象的想法只是为了创建一个简单的实体，这个实体包含了许多属性和方法。

以下是一个对象构造器的例子：

functionPerson（name,age,colour）{

this.name=name;

this.age=age;

this.colour=colour;

}

然后，我们可以这样来调用Person构造器：

varsomebody=newPerson（"Patrick",22,"red"）;

或者从用户那里得到输入数值：

varpName=prompt（"Whatisyourname?

"）;

varpAge=prompt（"Howoldareyouthisyear?

"）;

varpColour=prompt（"Whatisyourfavouritecolour?

"）;

varsomebody=newPerson（pName,pAge,pColour）;

所有在JavaScript中得构造器，就象在Java中，都可以利用new关键字来进行调用。

当一个person利用它的属性{"Patrick",

22,"red"}被创建（或者说被构造）的时候，这些数值就可以访问了，比如：

somebody.name,or

somebody["name"]

"Patrick"

somebody.age,or

somebody["age"]

22

somebody.colour,or

somebody["colour"]

"red"

因为我们利用name增加了Person的属性，所以它们必须通过name来被引用，这点在后面的代码中可以看到。

如果我们使用数字，那么我们就必须使用数字来引用，比如要用somebody[0]，而不用somebody.name。

Javascript的数组和对象（比如

forms,images,frames,…）都允许这两种方法。

另外地，数组和对象都有一个本质的属性，即length（长度）。

我们在编制程序的时候，可以这样来使用它：

objectName.length，它返回对象包含的元素或者属性的个数。

Javascript实例教程（4）探测浏览器插件

你可能对于一些其它的编程语言很熟悉，比如C++或者Java等等，它们也是可以创建对象的，现在最新的VB版本VB.NET也具有了更好的面向对象功能-----创建对象。

从本质上讲，创建对象的想法只是为了创建一个简单的实体，这个实体包含了许多属性和方法。

以下是一个对象构造器的例子：

functionPerson（name,age,colour）{

this.name=name;

this.age=age;

this.colour=colour;

}

然后，我们可以这样来调用Person构造器：

varsomebody=newPerson（"Patrick",22,"red"）;

或者从用户那里得到输入数值：

varpName=prompt（"Whatisyourname?

"）;

varpAge=prompt（"Howoldareyouthisyear?

"）;

varpColour=prompt（"Whatisyourfavouritecolour?

"）;

varsomebody=newPerson（pName,pAge,pColour）;

所有在JavaScript中得构造器，就象在Java中，都可以利用new关键字来进行调用。

当一个person利用它的属性{"Patrick",22,"red"}被创建（或者说被构造）的时候，这些数值就可以访问了，比如：

somebody.name,or

somebody["name"]

"Patrick"

somebody.age,or

somebody["age"]

22

somebody.colour,or

somebody["colour"]

"red"

因为我们利用name增加了Person的属性，所以它们必须通过name来被引用，这点在后面的代码中可以看到。

如果我们使用数字，那么我们就必须使用数字来引用，比如要用somebody[0]，而不用somebody.name。

Javascript的数组和对象（比如forms,images,frames,…）都允许这两种方法。

另外地，数组和对象都有一个本质的属性，即length（长度）。

我们在编制程序的时候，可以这样来使用它：

objectName.length，它返回对象包含的元素或者属性的个数。

属性同样也可以从函数中来创建，这样，你只需要增加一行到Person函数中就可以创建属性了：

functionPerson（name,age,colour）{

this.name=name;

this.age=age;

this.colour=colour;

this.birthYear=（newDate（））.getYear（）-this.age;

}

以上的Person函数定义了第四个属性：

birthYear，它代表每一个Person的出生年份。

这里要注意，这一增加的行是调用一个内置的Date构造器，它返回一个包含了当前日期和时间的Date对象。

这是一个非常懒惰的方法来访问一个Date变量。

所以使用下面的代码会显得更准确些，更有可读性：

vartoday=newDate（）;

this.birthYear=today.getYear（）-this.age;

当然，有许多方法来对JavaScript程序进行“压缩”。

通过插入对象到代码中，你就可以处理绝大多数的变量。

这个Date对象比起我们上面定义的Person对象来说更复杂，因为它包括了访问方法（accessor/get）以及操作方法（manipulator/set）。

同时，增加简单的对象方法到JavaScript中是可能，下面是详细的例子代码：

--Hidefromolderbrowsers

functionPerson（name,age,colour）{

this.name=name;

this.age=age;

this.colour=colour;

this.birthYear=（newDate（））.getYear（）-this.age;

this.toString=printPerson;//这里定义thePerson.toString（）方法

this.isOlder=isOlder;//这里定义Person.isOlder（Person）方法

}

functionprintPerson（）{

vartext=this.name+"wasbornin"+this.birthYear+"
";

text+="andis"+this.age+"yearsold.

";

returntext;

}

functionisOlder（otherPerson）{//这里定义是否第一个人是更老的

return（this.age>otherPerson.age）;//返回布尔型数值

}

//下面的代码用于测试我们的函数

varbody1=newPerson（"Patrick",22,"red"）;

varbody2=newPerson（"Betty",21,"green"）;

document.write（body1）;//这里为Person.toString（）创建一个调用

document.write（body2）;

document.write（body1.name）;

document.write（（body1.isOlder（body2））?

"is":

"isnot"）;//是否更老？

document.write（"olderthan"+body2.name）;

//Stophiding-->

通过为Person对象重载Person.toString（）方法，我们可以将Person对象作为字符串显示出来。

每当Person对象被作为字符串引用的时候，pringPerson返回的数值就决定了该显示什么了。

上面脚本的输出如下所示：

Patrickwasbornin76

andis22yearsold.

Bettywasbornin77

andis21yearsold.

PatrickisolderthanBetty

从输出的结果我们可以看到年份是以两位数字表示的，如1976年只用76来表示。

所以你可能想增加“19”到这两位数字的前面。

不幸的是，“千年虫”的问题使得你处理起来有点棘手。

而不同的浏览器处理Date对象的getYear（）方法是不同的。

Year（年份）

Navigator浏览器

IE3.x浏览器

IE4.x浏览器

1998

98

98

98

1999

99

99

99

2000

2000

100

2000

2001

2001

101

2001

你可以从上面表格中发现最新的浏览器支持1999年之后四位的年份格式（如2000、2001）。

不幸的是，老的浏览器处理年份的格式的时候给程序设计人员无尽的困惑。

我经常使用的具体解决方法如下所示，与大家共享：

varthisYear=（newDate（））.getYear（）;

thisYear=1900+（thisYear%1900）;

这里（thisYear%1900）作用是将年份转换位IE3.x格式并且增加1900以得到真实的年份（比如，2002年经过thisYear%1900转换位IE3.x格式位102，然后102再加上1900得到2002）。

上面这两条语句可以适用于从1900年到3799年的处理，现在看起来这么长的时间是足够使用了。

但是，为了避免类似于“千年虫”问题，我们应该再找出更好的解决方案，在本教程中就不给出了。

另外，新的ECMA标准包括了一个名为getFullYear（）的函数，它是返回完整的年份格式，但是这个函数只能被Navigator4支持，在IE中是不能使用的。

最后对程序再做一点改进，我们可以修改People构造器以转换年份为YYYY格式，具体代码如下：

this.birthYear=1900+（（（newDate（））.getYear（）-this.age）%1900）;

在JavaScript中使用对象的能力通常被许多程序设计人员所忽视。

但是从本教程中，你应该可以看到使用对象可以使程序员设计出功能更强大的应用程序来的。

Javascript实例教程（5）在一个表单中设置和检查Cookies

Cookie是一小段由浏览器储存起来帮助识别用户身份的信息。

在一个表单中设置和检查Cookies的实现需要两个文件来完成。

第一个文件为cookie1.html，这个文件需要有一些机理（下面例子的一个按钮）来检查是否有一个Cookie存在，然后再重定向至表单网页或者文档下载网页。

而第二个文件，即表单网页（cookie2.html），也是和重要的因为你将要在上面使用一点点JavaScript来设置Cookie，这个设置是在提交表单之前做的。

下面给出这文件：

第一个文件（cookie1.html）

--

functioncookieRedirect（hasCookieURL,noCookieURL）

{

varcurrentCookie=document.cookie;

if（currentCookie.indexOf（"formcomplete=yes"）!

=-1）{

window.location=hasCookieURL;

}else{

window.location=noCookieURL;

}

}

//-->

onClick="cookieRedirect（'doc.html','cookie2.html'）">

第二个文件（cookie2.html）

--

functionsendForm（objForm）

{

cookieExpires="Saturday,01-Jan-0300:

00:

00GMT";

document.cookie="formcomplete=yes;path=/";

//objForm.submit（）;

}

//-->

onClick="sendForm（document.testform）">

下面再给出需要用到的doc.html文件：

doc.html

Thisisthedocument

为了测试一下这个功能，你可以打开cookie1.html并点击中按钮，你将被带到表单网页。

如果你回到cookie1.html文件并点击按钮你就回直接连到文档去。

Javascript实例教程（6）利用Javascript进行密码保护

随着互联网的飞速发展，地球变得越来越小，人们可以跨越时间和空间得界限进行交流于合作。

但是随之也产生了一些肆意搞破坏的黑客，这就使得程序设计人员在编制应用程序中要考虑到黑客袭击这个问题，所以自然而然地就会想到保护。

本节教程将教你怎样利用Javascript进行密码保护。

利用JavaScript来对网页进行密码保护有几种方法。

最早的一种方法是依耐于用户而不知道目标文件名，代码如下：

--

functiongo（）{

window.location.href="+

doc