Javascript实例教程

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Javascript实例教程(1) 创建弹出式窗口
开始我们的第一个教程吧。

利用Javascript创建弹出式窗口的目的实际上是打开另外的浏览器窗口。

你可以设置这个浏览器窗口的一些属性，如高度、宽度以及是否让该窗口有一个状态条或者工具条。

在下面的例子中，我将窗口设置为：350
x 400，即高度为350像素，宽度为400像素；其中也包括了另外的一些设置，如滚动条；而将其它的设置（如状态条、菜单条）都设置为没有（no）。

下面是具体的代码，你可以将它放置到网页的前面：
<SCRIPT LANGUAGE = "JavaScript">
function CreateWindow(){
msgWindow=window.open("pop_win.html","displayWindow", "toolbar=no,width=350,height=400,directories=no,
status=no,scrollbars=yes,resize=no,menubar=no")
}
</SCRIPT>
仔细体会一下这段代码，其实就只用到一个window.open函数，是不是很简单呀！你也许会问：那怎么调用这段代码呢？其实你不用着急，下面马上会给出：
<FORM><INPUT TYPE = "button" VALUE = "创建窗口"
onClick = "CreateWindow()"></FORM>
Javascript实例教程(2) 创建折叠式导航菜单
为了创建折叠式的导航菜单，你可以在网页的最前面部分以下代码：<SCRIPT LANGUAGE="JavaScript">

}
</SCRIPT>
那在网页上如何调用呢？以下是具体代码：
<CENTER>
<FORM name = "form">
<SELECT NAME="site" SIZE=1 onChange ="formHandler()">
<OPTION VALUE="">连接到….
<OPTION VALUE="">太平洋电脑网
<OPTION VALUE="">中文雅虎
<OPTION VALUE="">263网站
<OPTION VALUE="">美国在线
<OPTION VALUE="">北京新东方
</SELECT>
</FORM>
</CENTER>
下面是全部的代码：
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE="JavaScript">

}
</SCRIPT>
</head>
<FORM name = "form">
<SELECT NAME="site" SIZE=1 onChange ="formHandler()"> <option value="">连接到…. </option>
<option value="">太平洋网络学院</option>
<option value="">中文雅虎 </option>
<option value="">263网站 </option>
<option value="">美国在线 </option> <option value="">北京新东方
</option>
</SELECT>
</FORM>
效果实现：
Javascript实例教程(3) 探测浏览器插件
利用Javascript可以探测在网络浏览器中的插件程序，但是值得指出的是否，它只在Netscape Navigator有效。

下面的代码显示了怎样探测audio/midi类型插件程序：
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
那在网页上如何调用呢？以下是具体代码：
<A HREF="#" onMouseover="playSound()" onMouseOut= "stopSound()"><IMG SRC="image.gif" WIDTH="100"
HEIGHT="100" BORDER="0"></A>
你可能对于一些其它的编程语言很熟悉，比如C++或者Java等等，它们也是可以创建对象的，现在最新的VB版本也具有了更好的面向对象功能-----创建对象。

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

以下是一个对象构造器的例子：
function Person(name, age, colour) {
= name;
this.age = age;
this.colour = colour;
}
然后，我们可以这样来调用Person构造器：
var somebody = new Person("Patrick", 22, "red");
或者从用户那里得到输入数值：
var pName = prompt("What is your name?");
var pAge = prompt("How old are you this year?");
var pColour = prompt("What is your favourite colour?");
var somebody = new Person(pName, pAge, pColour);
所有在JavaScript中得构造器，就象在Java中，都可以利用new关键字来进行调用。

当一个person利用它的属性{"Patrick",
22, "red"}被创建（或者说被构造）的时候，这些数值就可以访问了，比如：
因为我们利用name增加了Person的属性，所以它们必须通过name 来被引用，这点在后面的代码中可以看到。

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

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

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

我们在编制程序的时候，可以这样来使用它：objectName.length，它返回对象包含的元素或者属性的个数。

Javascript实例教程(4) 探测浏览器插件
你可能对于一些其它的编程语言很熟悉，比如C++或者Java等等，它们也是可以创建对象的，现在最新的VB版本也具有了更好的面向对象功能-----创建对象。

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

当一个person利用它的属性{"Patrick", 22, "red"}被创建（或者说被构造）的时候，这些数值就可以访问了，比如：
因为我们利用name增加了Person的属性，所以它们必须通过name 来被引用，这点在后面的代码中可以看到。

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

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

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

我
们在编制程序的时候，可以这样来使用它：objectName.length，它返回对象包含的元素或者属性的个数。

属性同样也可以从函数中来创建，这样，你只需要增加一行到Person 函数中就可以创建属性了： function Person(name, age, colour) { = name;
this.age = age;
this.colour = colour;
this.birthYear = (new Date()).getYear() - this.age;
}
以上的Person函数定义了第四个属性：birthYear，它代表每一个Person的出生年份。

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

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

所以使用下面的代码会显得更准确些，更有可读性：
var today = new Date();
this.birthYear = today.getYear() - this.age;
当然，有许多方法来对JavaScript程序进行“压缩”。

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

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

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

</SCRIPT>
通过为Person对象重载Person.toString()方法，我们可以将Person 对象作为字符串显示出来。

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

上面脚本的输出如下所示：
Patrick was born in 76
and is 22 years old.
Betty was born in 77
and is 21 years old.
Patrick is older than Betty
从输出的结果我们可以看到年份是以两位数字表示的，如1976年只用76来表示。

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

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

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

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

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

我经常使用的具体解决方法如下所示，与大家共享：
var thisYear = (new Date()).getYear();
thisYear = 1900 + (thisYear % 1900);
这里(thisYear % 1900)作用是将年份转换位IE 3.x格式并且增加1900以得到真实的年份（比如，2002年经过this Year%1900转换位IE 3.x格式位102，然后102再加上1900得到2002）。

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

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

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

最后对程序再做一点改进，我们可以修改People构造器以转换年份为YYYY格式，具体代码如下：
this.birthYear = 1900 + (((new Date()).getYear() - this.age) % 1900);
在JavaScript中使用对象的能力通常被许多程序设计人员所忽视。

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

Javascript实例教程(5) 在一个表单中设置和检查Cookies Cookie是一小段由浏览器储存起来帮助识别用户身份的信息。

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

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

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

下面给出这文件：
第一个文件（cookie1.html）
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="docdownload">
<INPUT TYPE="BUTTON" VALUE="Download document"
onClick="cookieRedirect('doc.html', 'cookie2.html')"> </FORM>
</BODY>
</HTML>
第二个文件（cookie2.html ） <HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="test.html" NAME="info">
<TABLE>
<TR>
<TD>First name</TD>
<TD><INPUT TYPE="TEXT" NAME="firstname"></TD>
</TR>
<TD>Last name</TD>
<TD><INPUT TYPE="TEXT" NAME="lastname"></TD>
</TR>
<TR>
<TD>Address</TD>
<TD><INPUT TYPE="TEXT" NAME="address"></TD>
</TR>
<TR>
<TD>City</TD>
<TD><INPUT TYPE="TEXT" NAME="city"></TD>
</TR>
<TR>
<TD>State</TD>
<TD><INPUT TYPE="TEXT" NAME="state"></TD>
</TR>
<TR>
<TD>Zip</TD>
<TD><INPUT TYPE="TEXT" NAME="zip"></TD>
</TR>
</TABLE>
<INPUT TYPE="BUTTON" VALUE="Download document"
onClick="sendForm(document.testform)">
</FORM>
</BODY>
</HTML>
下面再给出需要用到的doc.html文件：doc.html
<HTML><BODY><H3>This is the document</H3>
</BODY></HTML>
为了测试一下这个功能，你可以打开cookie1.html并点击中按钮，
你将被带到表单网页。

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

Javascript实例教程(6) 利用Javascript进行密码保护
随着互联网的飞速发展，地球变得越来越小，人们可以跨越时间和空间得界限进行交流于合作。

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

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

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

最早的一种方法是依耐于用户而不知道目标文件名，代码如下：
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
在网页中使用这段JavaScript脚本的方法为：
<FORM NAME="formName" onSubmit="return go()">
Enter Password: <INPUT TYPE="password" NAME="passwordName" V ALUE="" SIZE=8>
</FORM>
使用这段JavaScript脚本的一个缺点是用户可以检查源代码并发现文件目录的位置。

为了寻求更好的安全措施，你应该通过放置一个缺省的文件（index.html）到JavaScript脚本里面来保护你的文件目录，这样当目录被请求的时候你的服务器总是发送过去。

如果你没有包括一个缺省的文件在你的文件目录，网络服务器就发送所有包含在你文件目录的所有文件，这正是不安全的隐患。

这里要指出的是，使用JavaScript来对一个文件进行密码保护也不是一个非常安全的方法。

为了达到较高的安全系数，这里推荐使用CGI 或者服务器函数，比如.htaccess。

Javascript实例教程(7) 利用Javascript基于浏览器类型的重定向
基于浏览器类型的重定向的实现可以通过使用JavaScript函数来检查erAgent的字符串“MSIE”，它将告诉你用户是否使用Microsoft Internet Explorer(微软的IE浏览器)。

通过修改
windows.location函数可以重定向到正确的URL（同意资源定位器）。

下面是详细的代码：
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
Click <A HREF="javascript:redirectClient('explorer.html',
'netscape.html')">here</A>
to redirect based on the user's browser.
</BODY></HTML>
点击此处去测试效果页
Javascript实例教程(8) 检验表单有效性
表单的有效性检验是JavaScript一个很有用的方面。

它可以用于检查一个给定的表单以及发现表单中的任何问题，比如一个空白的输入框或者一个无效的E-mail（电子邮件）地址，然后它可以通知用户并且就不会将这些错误的表单传给服务器以节省时间。

另外，除此以外，对表单标签的一些修改跟其它类型的脚本是类似的。

以下的例子是一个简单的表单，如下面表单所示。

你可以让名字的方框留空白或者输入一个电子邮件地址而没有@符号，即是输入错误的内容，看看
JavaScript是进行表单的有效性检验的。

姓名：
电子邮箱：
结果你可以发现如果你忘记输入某一特定类型的数据到表单中去，它就会警告你并且取消提交给服务器。

直到你键入了正确的信息，它才将表单发送给服务器。

下面我们来好好研究一下在Javascript中是如何进行表单的有效性检验的。

其中在表单有效性检验中最重要的代码是在表单标签处的一个时间处理器，这个时间处理器（onSubmit）必须返回真值的时候才提交表单。

以下是详细的表单代码：
<FORM NAME = "theform" ACTION = "mailto:" METHOD = "POST" ENCTYPE = "multipart/form-data"onSubmit="return
formCheck()">
当Submit（提交）按钮被按下的时候，这个时间处理器就被触发，它接着执行函数formCheck()，这个函数是用于检查表单中是否没有错误了。

formCheck()函数的代码如下：
function formCheck() {
if (er_name.value == "") {
alert("Please put in a name.");
return false;
}
if (document.theform.email.value.indexOf("@") == -1 || document.theform.email.value == "") {
alert("Please include a proper email address.");
return false;
}
}
首先，formCheck()函数判断是否用户名字输入为空。

如果为空，它也会警告用户并返回false值，这个表单也不会发送给服务器。

接着formCheck()函数是判断是否Email地址输入包含一个@符号或者是空的。

如果没有包含@符号或者是空的的任何一种情况，它就会警告用户并返回false值，这样这个表单就不会发送给服务器了。

以上的任何一种错误都不会将表单发送给服务器的，直到正确填写完整个表单之后才将表单发送给服务器。

以上程序的原理实质是获得表单中各元素的值“value”，然后加上是否等于“＝＝”某些设定的内容，或者说本身固有的内容（比如EMAIL的＠）。

按此你可以加以扩充它的功能，比如完善Email的检验功能，加上判断“＠”后的邮件服务器的地址和一点“.”。

如下图:
也可以增加对发信内容进行校验。

增加的代码是获得发信内容文本框的值：
document.theform.发信内容的文本框名.value == ""
点击此处去测试效果页，并获得源代码。

Javascript实例教程(9) 随机显示图片
有时你可以会在一些网站看到一些变化显示的图片，这除了可以利用Flash来制作之外，当然也可以利用本节教程介绍的方法来实现哦。

好吧，就开始我们的创作吧。

我们可以在网页的最前面部分添加以下的代码来创建一个随机的数字：
<SCRIPT>

</SCRIPT>
为了创建一个从1到10的随机数字，你可以rand(7)。

为了显示随机显示从num1.gif到num7.gif，你可以编写以下代码到你的网页中去：
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
一切OK了，你可以欣赏欣赏你的大作了。

直到现在你可能会对JavaScript多了一点体会：JavaScript功能是如此的强大。

我想这主要归功于JavaScript有许多功能函数。

点击此处去测试效果页面
Javascript实例教程(10) 创建"后退"按钮
利用Javascript创建一个“后退”连接在JavaScript中实现一个“后退”连接是相当容易的。

这个“后退”连接的功能的作用就象网页中“后退”按钮一样，具体你可以使用以下代码：
<FORM>
<input type=button value="Go Back"
onClick="history.back(-1)" >
</FORM >
你仔细点就会发现，这段代码实际上是使用了history.back()函数而已。

这点又是JavaScript功能函数强大的一个体现。

其中history.back(-1)代表你要连接到的前面一张网页。

如果你要往后回退5页,你可以使用history.back(-5)就搞定了。

我们翱翔于JavaScript中，我只能用一个字来表达我们的感受：“酷”。

点击此处去测试效果页面
Javascript实例教程(11) 隐藏script代码
对于JavaScript初学者来说，它们经常忘记在旧浏览器（比如Netscape Navigator 1.12）隐藏JavaScript代码。

你也许会问为什么要隐藏呢？原因很简单，就是旧的浏览器不支持JavaScript。

如果你不加以正确的措施，在旧的浏览器上将会显示你的JavaScript源代码，跟HTML 一样，所以你必须将JavaScript隐藏起来。

具体，你可以使用一些HTML语句来轻松实现从旧的浏览器中隐藏Javascript的目的。

具体代码如下：
<SCRIPT LANGUAGE="JavaScript">
 </SCRIPT>
支持JavaScript的浏览器将会解释这段代码，而旧的浏览器只会将它视为HTML，而它已经被注释了，所以达到了隐藏JavaScript代
码的目的。

你可能想增加一些文本到<NOSCRIPT>标签处，它可以让非JavaScript用户看到它们缺少什么：
<NOSCRIPT>This will only show up in older non-JavaScript capable browsers</NOSCRIPT>
事实上，不支持JavaScript的浏览器极少，即使有，使用那种浏览器的人几乎没有，在平时制作的过程中此标签可以忽略不做。

但话说回来，对于一个程序员，培养良好的编程习惯极为重要，那当然是从小事做起了。

Javascript实例教程(12) 鼠标移过时报警
利用Javascript产生鼠标移过时报警
为了产生鼠标移过时报警，首先你可以在网页的最前面添加一下JavaScirpt语句：
<script language="JavaScript">
<---hide from non-JavaScript browsers
function alertdave(){
window.alert("这是太平洋电脑网");
}
// end hide
</script>
为了调用这个alterdave()你可以编写以下语句：
<a href="/"
OnMouseOver="alertdave()"> <center>太平洋电脑网
</center></a>'
点击下面的去测试页看具体的例子，你将鼠标移动到“太平洋电脑网”上的时候，就会弹出一个对话框报警。

点击此处去测试效果页面
Javascript实例教程(13) 鼠标触发窗口
利用Javascript产生鼠标移过时弹出窗口
本节教程将介绍当鼠标移过图片的时候弹出一个窗口的设计。

这个弹出的窗口是一个标准的网页，你可以设置它的大小。

首先在网页的Header标签处加入以下代码：
<SCRIPT LANGUAGE="Javascript">
var popupwindow_window = null;
function popupwindow(status,url) {
if(status != 0) {
if(popupwindow != null) popupwindow.focus();
else {
var popupwindow = open(url, "popupwindow",
"width=350,height=225");
//这里设置弹出窗口的大小，宽度为350，高度为225. popupwindow_window = popupwindow;
}
} else {
if(popupwindow_window != null) popupwindow_window.close();
}
}
</SCRIPT>
那如何调用这个JavaScript脚本呢？具体代码如下：
This is your link <A HREF=""
onMouseover="popupwindow(1,'popupwindow.html')" onMouseout="popupwindow(0)"><img src="/images/picture.gif" hspace=0 vspace=0 border=0 alt="Network"></A>
这样你只要将鼠标移过图片picture.gif的时候，就会弹出一个宽度为350，高度为225的网页了。

Javascript实例教程(14) JS代替CGI
使用Javascript代替CGI
你可能对CGI脚本比较熟悉，利用CGI你可以通过表单将数字或者变量从一个网页上传递到另外一个网页。

当然，你可以利用“POST”将变量以独立的线程进行传递而不显示在浏览器中，或者利用“GET”将变量编码到URL。

JavaScript不能在变量在服务器端被处理的时候利用POST方法；但是你可以注意到当你提交一个使用GET方法的表单的时候，定位条上在文件名之后包含了额外的信息，比如：
/mypage.html?name=Mike&age=33
利用JavaScript我们可以访问这些变量，具体可以使用一个相关的数组合来实现，如下所示：
<SCRIPT language="JavaScript1.1">

</SCRIPT>
以上代码的作用是从浏览器的定位条上将变量提取出来并将它们存储在一个相关的数组合中。

在网页的其它部分任何的变量都可以这样被引用，如：valueOf["variablename"]，当然这些引用要在SCRIPT标签中。

作为一个测试，我们可以利用for .. in loop循环语句列出所有的被传递的变量。

这允许我们循环掉出所有相关数组的内容而不管我们是不是直到这些变量的名字。

具体代码如下：
<SCRIPT language="JavaScript">

</SCRIPT>
这时候就会输入以下的内容：
name=Mike
age=33
这个例子虽然没什么用，但是它只是为了向你显示程序是如何工作的。

这些变量现在就可以用在填充表单元素的内容，或者显示图片或者创建其它的网页内容，总之可以实现CGI能实现的内容。

Javascript实例教程(15) 日期函数
Date（日期）对象可以使用Date()构造器来创建，在前面的教程中我们已经介绍了Date()构造器，这里就不重复叙述。

它没有参数，返回的数值就是当前的日期。

下面的表格显示了为日期构造器的有效输入：
这里作点补充：月份是从0开始的，比如一月份=0，二月份=1，三月份=3等等。

从上面可以看出创建一个日期对象是相对地简单，以下的表格是一系列的函数可以用于改变或者访问这些对象的属性：
日期访问方法
这里注意：IE浏览器的一些版本返回Timezoneoffset数值是用错误的符号，比如用”-”代替”+”等等。

日期设置方法
其它的日期方法
所有的这些函数引用于独立的日期对象。

如果你具有深厚的Java编程背景，那么你可以将它们认为是Date类的一些公共的方法而已。

下面给出一个典型的例子来设置日期对象到当前时间加1年：
var nextYear = new Date(); // 初始化日期对象
nextyear.setYear(nextYear.getYear() + 1); // 增加1年
实际上，parse函数是Date对象的一个方法，而不是一个独立的日期变量，如果使用Java术语，它就称为Date类的一个静态方法。

这个正是我们为什么使用Date.pase()而不使用somedate.parse()的原因啦。

Javascript实例教程(17) 使用字符串函数
字符串对象提供了许多方法，但是很少的程序设计人员充分利用它们，这对于一个程序员来说，不能不说这是一种缺陷。

字符串提供的方法可以用于操作字符、产生HTML标签以及搜索字符串等等。

下面首先说说什么是字符串。

在JavaScript语言中，字符串就是一种对象。

就象在Java中，它们不是作为一系列的字符被存储的，所以字符串的操作必须使用内置的构造器和设置函数来完成。

在后来的版本中有了字符串构造器和更多的关于对象的概念。

在这个层次上说，字符串是由字母而不是数字组成的变量，这就是字符串的概念。

举个例子，一些有效的字符串为"Hello", "Bob", "Bob2", "33", "33.3"，而33或者33.3就不是字符串了。

所有的字符串有一个共同的属性，称为长度，这个长度返回了字符串中字符的个数。

最常用的字符串方法是：indexOf()、charAt()和substring()。

因为这几个方法在JavaScript中经常出现，所以下面我对它们进行详细说明：
indexOf()函数
这个函数允许你判断一个字符串是否存在于一个更长的字符串中以及它所处的位置。

它等价于C语言中的strstr函数以及Visual Basic。