从示例直接学习JavaScript

JavaScript是一种描述语言，它可以直接嵌入到HTML文件中。通过JavaScript可以实现不经网络传输直接对用户事件（如鼠标的操作）进行回应，就好象在客户机上执行一样。目前Internet上已经有不少的JavaScript程序。

JavaScript与Java很相似，但Java更复杂、而且需要编译，而JavaScript则是比较容易理解的语言，JavaScript程序员可以不那么注重程序技巧，所以许多Java的特性在JavaScript中并不支持。

JavaScript是由Netscape公司推出的，Netscape Navigator 2.0以上版本的浏览器都能支持它。本文通过一些示例来介绍JavaScript的基本功能，读者如需要有关的详细内容，请直接通过WWW到Netscape公司或国内相关站点获得。

示例1：在页面中写入字符

JavaScript是直接写在HTML文件中的。本例用JavaScript在页面中写入一些字符。

JS1.html:

<html>
<head>
<title>我的第一个JavaScript文件! </title>
</head>
<body>
<br>
这是正常的HTML文档。
<br>
<script language="JavaScript">
    document.write("这是 JavaScript 写出的字符!")
</script>
<br>
现在回到HTML。
</body>
</html>

以上HTML文件用支持JavaScript的浏览器进行查看，就会看到以下三行字：

这是正常的HTML文档。
这是JavaScript写出的字符！
现在回到HTML。

这一示例并没有太大的用处，它只是演示了<script>标签的使用。<script>标签可以放在HTML文件中的任何地方。

示例2：函数的使用

这个示例介绍函数（function）的使用。在JavaScript中，函数通常是在HTML文件中<body>部份得到调用，因而函数应该在<body>前予以定义（一般写在<head>里），以便在<body>部分中使用到函数时它已被读取。另外，<script>标签的有关描述语法部分，最好用注释符号将它括起来，以免不支持JavaScript的浏览器读到时不能理解。

JS2.html:

<html>
<head>
  <script language="JavaScript">
    function pushbutton() {
       alert("嗨！你好！");
    }
 </script></head>
<body>
<form>
  <input type="button" name="Button1" value="Push me" onClick="pushbutton()">
</form>
</body></html>

用Netscape来浏览上述HTML文件时，应该会在窗口中显示一个Push Me按钮，用鼠标单击此钮时会弹出一个窗口，写着：“嗨！你好！”

这样的效果是如何产生的呢？浏览页面时，<head>内的函数首先会被载入并保存在内存中，接着一个<form>标签<input type =”button”…..>产生一个接钮，然后，onClick指令告诉浏览器，单击按钮时执行函数pushbutton()，而这个函数已经在内存中了。

onClick是JavaScript预定义的事件处理器（Handler），它指向当Click（单击）事件发生时的动作。此外，JavaScript还定义了onBlur（blur：用户从窗体元素中移走焦点）等事件处理器。

pushbutton()函数中用到的alert方法，也是JavaScript事先定义好的，它弹出一个对话框，并附带一个“确定(OK)”按钮。作为一种程序语言，JavaScript定义了许多方法，可以连接到Netscape公司去获得较完整的信息。

示例3：读入Form的输入信息

下一个示例演示如何从输入型表格中读入用户键入的信息。显然，这也是由函数来实现的。

JS3.html:

<html>
<head>
<script language="JavaScript">
<!--  hide script from old browsers
  function GetName(str) {
    alert("你好！"+ str+"！");  }
// end hiding contents -->
</script>
</head>
<body>
请输入姓名：
<form>
  <input type="text" name="name" onBlur="GetName(this.value)" value="">
</form>
</body>
</html>

此例中首先值得注意的是JavaScript的语法说明部分用HTML的注释符号（即 <!- 与 ->）括了起来，以避免不支持JavaScript的浏览器产生错误。注释的顺序为：<script>在先，接着是注释的开头 <!-，然后是内容，再后是注解尾 ->，最后是 </script>。另外，JavaScript本身也可以有注释，和C++与Java一样，它的注释行符号为 //，正如此例所示。

这个例子可以让用户输入姓名，输入后由<input>标签中的onBlur获知，于是调用GetName(str)函数来取得输入字符串，并将它显示在对话框中。函数GetName(this.value) 中的this.value是文本输入格式中所输入的值。

示例4：自动更新文档修改日期

HTML文档完成后，通常会在最后加上一行注明文件最后修改的日期，每次都要去修改这一行，有时难免会忘记。用JavaScript写一段程序，就可以每次都自动产生最后的修改日期了：

JS4.html:

<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
  <script language="JavaScript">
  <!--  hide script from old browsers
    document.write(document.lastModified)
  // end hiding contents -->
  </script>
</body>
</html>

document.lastModified参数就是文档最后修改日期。此参数曾被写作documeut.lastmodified，后来修改为现在的写法。JavaScript是区分大小写的，所以不能写错。

示例5：链接、状态栏与弹出窗口

众所周知，在浏览器中将鼠标移动到一个链接上，状态栏内会显示相关的内容。现在来看看如何利用JavaScript的特性控制浏览器状态栏的显示。

JS5-1.html:

<html>
<body>
Here is a <a href="testpage.htm" onMouseOver="window.status='Just another stupid link...'; return true">link</a>, please notice the STATUS BAR!
</body>
</html>

在浏览器中查看这个HTML文件，将鼠标移到链接处，状态栏显示的不是URL的内容！其原因就是将JavaScript的onMouseOver作为传统标签<a>的属性，并将window.satus（它也就是浏览器窗口状态栏的内容）作为属性内容。根据上例，window.status的内容是以单引号括起来的，而且其后必须加上; return true。

利用JavaScript 的这种特性，还可以产生一些有趣的效果。下面的HTML文件使得鼠标移到链接处就弹出一个窗口：

JS5-2.html:

<html>
<head>
<script language="JavaScript">
<!--  Beginning of JavaScript code
    function hello() {
        alert("您好！");
    }
// End of JavaScript code  -->
</script>
</head>
<body>
This <a href="" onMouseOver="hello()">link</a> can popup an alert window!
</body>
</html>

示例6：日期和时间函数

接下来是一个使用日期和时间的示例。在示例4中我们已经了解lastModified的用法。现在要显示客户端机器的日期和时间，而不是服务器上的文件修改日期。可用JavaScript编写这样一段程序：

JS6.html:

<html><body>
<script language="JavaScript">
<!-- Beginning of JavaScript code
  today = new Date()
  document.write("现在时间是：", today.getHours(), ":", today.getMinutes())
  document.write("<br>当前日期为：", today.getMonth()+1, "/", today.getDate(), "/", today.getYear());
// End of JavaScript code -->
</script></body></html>

在本例中，首先建立一个日期变量，由today = new Date() 来完成。这样，浏览器就会采用本地客户端机器的时间，并将它放入变量today中。注意，这里并没有声明today变量的类型，这和Java或其他程序语言在使用变量之前必须先声明的方式大不不同。建立today日期变量后，就等于建立了一个具有本地时间与日期的对象(object)。接着就可以使用getDate等方法来取得today这个对象的时间和日期。由于getMonth方法取得的月份范围是0~11，所以必须加1才真正是通常的月份。

除以上功能外，在建立日期对象时也可以事先设定日期：

docStarted= new Date(96,0,13)

同样的方法还可以加上时间的设定：

docStarted = new Date(96,0,13,10,50,0)

其实，JavaScript并没有实际的日期类型，但是它却同样能显示日期和时间，原因是它是从1970年1月1日0时开始以毫秒（ms）为单位来计算目前的时间的。不过程序员不需要自己换算，因为JavaScript有标准的公用函数。

示例7：随机数的产生

现在来利用JavaScript的时间函数来产生一个随机数。大部分编译器都是用类似的办法来产生随机数的。

JS7.html:

<html>
<head>
<script language="JavaScript">
<!-- Beginning of JavaScript code
function RandomNumber() {
  today = new Date();
  num = Math.abs(Math.sin(today.getTime()));
  return num;
  }
// End of JavaScript code -->
</script>
</head>

<body>
<script language="JavaScript">
<!--
  document.write("这是一个随机数：", RandomNumber());
// -->
</script>
</body>

</html>

本示例中将时间函数进行正弦运算，再做绝对值运算，从而产生一个0与1之间的数。这一做法虽不适合快速连续地产生一系列随机数，但如果只是偶尔用一下，效果还是不错的。

JavaScript中其实也提供了一个产生随机数的方法random()，用法如下：

document.write("The random number is:" + Math.random());

示例8：自行制作窗口

JavaScript的一个重要特点是它可以自行制作窗口。也就是说，可以用JavaScript产生一个窗口，并在此窗口中载入HTML文件，完全用JavaScript来控制Internet的流动。

下面的示例用JavaScript新开一个窗口，并往此窗口中写入一句话。

JS8.html:

<html><head>
<script language="JavaScript">
function WinOpen() {
  msg=open("","DisplayWindow","toolbar=no, directories=no, menubar=no");
  msg.document.write("<HEAD><TITLE>哈罗!</TITLE></HEAD>");
  msg.document.write("<CENTER><h2>这是<B>JavaScript</B>新开的窗口!</h2> </CENTER>");
}
</script></head>
<body><form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form></body></html>

本示例用Form产生一个按钮，当用户单击此按钮时启动函数WinOpen()，WinOpen()函数通过open方法来产生一个窗口。open方法中，第一个参数（第一对双引号）用来描述欲载入到窗口中的文件的URL位置，此参数如果为空，则产生一个空白窗口，并可以通过JavaScript内容。第二个参数的内容是新开窗口的名字，名字可以任意，但不能包含空格，例如Display Window就会出现错误。第三个参数指定窗口的相关属性(properties)，可以指定窗口是否包含工具栏(toolbar)、滚动条(scrollbar)等，例如如果填入toolbar = yes，就会在所产生的窗口中出现一工具栏。可以改变的窗口属性有：

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width = pixels
height = pixels

属性中的pixels处，可以填入像素点的值，以告诉浏览器新开窗口的大小。

开启一个窗口、并将其称为msg后，就可以往窗口内写入内容了。可以按HTML的语法格式写入任何内容，如上例所示。这样，就可以将用户在Form表格中键入的内容直接回应到浏览器上。这种功能以前只有用CGI才能实现。

示例9：在Frame中的运用

Frame是Netscape公司制订的一个HTML标记，在HTML 3.0中得到认同。Frame将一个窗口切成几个不同的部分，使一页窗口可以同时拥有多个独立的不同部分，各部分与不同的文档相联系，同时彼此间还可以相互沟通。这是目前相当流行的一种页面制作技术。

本文假设读者对Frame已有一定了解，介绍一个将JavaScript应用到Frame的示例。在这个示例中，可以单击一个窗口中的按钮，使另一个窗口中的文字发生变化。

JS9.html:

<HTML><HEAD>
<TITLE>示例9</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%">
    <FRAME SRC="frame1.html" name="fr1" noresize>
    <FRAME SRC="frame2.html" name="fr2">
</FRAMESET>
</HTML>

frame1.html:

<HTML><HEAD>
<script language="JavaScript">
<!-- Beginning of JavaScript code
    function hi() {
        document.write("Hi!<br>");
    }
    function hello() {
        document.write("Hello!<br>");
    }
    function yeah() {
        document.write("Yeah!<br>");
    }
// -->End of JavaScript code
</script>
</HEAD>
<BODY>
这是第 1 个Frame!
</BODY>
</HTML>

frame2.html:

<HTML><BODY>
这是第 2 个Frame!<p>
<FORM NAME="buttonbar">
    <INPUT TYPE="button" VALUE="Hi!" onClick="parent.fr1.hi()">
    <INPUT TYPE="button" VALUE="Hello!" onClick="parent.fr1.hello()">
    <INPUT TYPE="button" VALUE="Yeah!" onCLick="parent.fr1.yeah()">
</FORM>
</BODY>
</HTML>

在这个示例中，浏览器首先读入JS9.html，它建立基本的Frame，并将frame1.html和frame2.html分别读入到上、下的两个Frame中，它们分别叫做fr1和fr2。如果熟悉Frame的制作，本示例并不难理解。在fr2中安排了三个按钮，单击时会调用frame1.html中定义的函数，onClick=”parent.fr1.hi()”表明此调用是通过父辈的子对象fr1来实现的。

示例10：状态栏文字的滚动显示

如果经常逛WWW，会发现很多页面显示出滚动显示的文字，最常见的是状态栏中的滚动文字。这用JavaScript实现起来并不困难。

我们先来看一个简单的例子。它定义了一个函数StatusBar(txt)，使单击“显示”或“清除”按钮时显示或清除状态栏中的文字。清除实际上就是以空字符串填充。这里，需要注意引号和分号的使用。

JS10-1.html:

<html><head>
<script language="JavaScript">
<!-- Beginning of JavaScript code
function StatusBar(txt) {
   window.status = txt;
}
// End of JavaScript code-->
</script></head>
<body>
<form>
<input type="button" name="look" value="显示" onclick="StatusBar('显示状态栏信息');">
<input type="button" name="erase" value="清除" onclick="StatusBar('');">
</form></body></html>

示例5中曾用onMouseOver在状态栏显示文字：

<a href="tpage.htm" onMouseOver="window.status='Just another stupid link...'; return true">

鼠标移开时状态栏文字仍不消除。象上例那样写一个清除的函数当然可以，但有一个问题：很难调用要清除的文字，因为没有测知鼠标移开的方法或属性。下面的示例提供了一种办法，它设置一个时间，超时后使状态栏文字清除。

JS10-2.html:

<html><head>
<script language="JavaScript">
<!-- Beginning of JavaScript code
function MoveOver(txt) {
    window.status = txt;
    setTimeout("erase()",1000);
}
function erase() {
    window.status="";
}
// End of JavaScript code-->
</script>

</head><body>
Here is a <a href="testpage.htm" onMouseOver="MoveOver(' Just another stupid link...'); return true;"> link</a>, please notice the STATUS BAR!
</body></html>

此例中，MoveOver(txt)和前面的StatusBar(txt)相比多了一个setTimeout()，它是用来设置多长时间后启动一个动作。也就是说，在本例中，MoveOver一开始就调用，而erase()则在1000毫秒后调用。

在这个示例中，超时后并不会重新设定启动，但如果在erase()中再调用一次（递归调用），就可以使状态栏的文字滚动起来。这就是滚动显示文字的基本原理。

下面就是一个使状态栏文字滚动显示的示例。

JS10-3.html:

<html><head>

<script language="JavaScript">
<!-- Beginning of JavaScript code
var scrtxt="状态栏文字的滚动显示，可根据需要进行修改";
var lentxt=scrtxt.length;
var width=65;
var pos=1-width;

function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;  }
  if (pos<0) {
    for (var i=1; i<=Math.abs(pos); i++) {
      scroller=scroller+" ";
    }
    scroller=scroller+scrtxt.substring(0,width-i+1);
  }
  else
    {scroller=scroller+scrtxt.substring(pos,width+pos);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
}
// End of JavaScript code-->
</script>

<body onLoad="scroll();return true;">
此处是Home Page的正文！
</body></html>

此例中使用了和上面相同或部分相同的函数，setTimeout()通知计时器在时间到时去调用scroll()函数，使得滚动文字往前进一格。在函数的一开始，有一些计算部分，它们主要是用来确定文字应该从什么位置开始，一开始必须加一些空白在字的左边，让文字部分能尽可能靠右，然后再一字字的将空白减少，于是产生文字向前滚动的效果。

以本示例为基础，应该比较容易写出在窗口中设计滚动文字的JavaScript 程序了。

示例11：数组的使用

在程序设计中，数组（Array）都是十分重要的。几乎每一种程序语言都有提供某种程度的数组使用。但是，JavaScript语言的文档中没有关于数据的说明！不过，在JavaScript中还是能够实现同样的功能的。

在JavaScript中，定义数组可通过下面的函数实现：

function initArray() {
    this.length = initArray.arguments.length
    for (var i = 0; i < this.length; i++)
    this[i+1] = initArray.arguments[i]
}

这虽然不是Netscape定义的库函数，但还是可以将它当作一个标准函数来使用的。例如，如果要定义一个3个元素值分别为17、18和19的数组，可以写成

    var MyArray= new initArray(17,18,19);

这样，17、18和19 三个值就会分别赋给数组的前三个元素。数组元素的值也可以是字符串，如

    var VeryCool = new initArray("This","is","cool");

甚至可以这样写

    var Mixedup= new initArray(17,"yah!",103);

下面的示例定义数组Mixedup，并输出其结果。

JS11.html:

<html><body>
<script language="JavaScript">
<!-- Beginning of JavaScript code
function initArray() {
    this.length = initArray.arguments.length
    for (var i = 0; i < this.length; i++)
    this[i+1] = initArray.arguments[i]
}
var Mixedup= new initArray(17,"yah!",103,"不知所云");
  document.write("元素 1: "+Mixedup[1]+"<br>");
  document.write("元素 2: "+Mixedup[2]+"<br>");
  document.write("元素 3: "+Mixedup[3]+"<br>");
  document.write("元素 4: "+Mixedup[4]+"<br>");
// End of JavaScript code -->
</script></body></html>

示例12：浏览不同的文件

大家知道，在Netscape浏览器中有Back和Forward两个按钮，用于在链接的历史记录中来回跳转。JavaScript中提供了类似的方法：history.back() 和history.forward()。这两个方法等效于history.go(-1) 与history.go(1)。但有时需要的不是在历史记录中跳转，而是要回到本身文件的上一个连接文件，这与浏览器中的Back按钮功能是不相同的。下面的示例比较了这两种情况。

JS12.html:

<html><body>
<FORM NAME="buttonbar">
    <INPUT TYPE="button" VALUE="Back" onClick="history.back()">
    <INPUT TYPE="button" VALUE="JavaScript Back" onClick="location='JS11.html'">
    <INPUT TYPE="button" VALUE="Forward" onCLick="history.forward()">
</FORM></body></html>

示例13：单击一次鼠标读入两个文件

有时存在这种需要，希望单击一次鼠标能同时读入两个不同的文件。实现这种功能有两种作法。第一种办法是创建一个按钮来调用函数，让函数将两个不同的文件读入不同的Frame或打开新的窗口。

作为示例，创建三个Frame，第一个用来安置按钮，单击此钮时将后两个Frame改变为Frtest1.html和Frtest2.html。

JS13.html:

<HTML><HEAD>
<title>JavaScript creates three Frames</title>
</HEAD>
<FRAMESET COLS="295,*">
    <FRAMESET ROWS="100%,*">
      <FRAME SRC="loadtwo.html" NAME="fr1">
    </FRAMESET>
    <FRAMESET ROWS="75%,25%">
      <FRAME SRC="cell.html" NAME="fr2">
      <FRAME SRC="cell.html" NAME="fr3">
    </FRAMESET>
</FRAMESET>
</HTML>

loadtwo.html:

<HTML><HEAD>
<script language="JavaScript">
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
  }
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="Load2Files" onClick="loadtwo('Frtest1.html', 'Frtest2.html')">
</FORM>
</BODY>
</HTML>

单击按钮的动作产生对函数loadtwo() 的调用，并将两个字符串传递到函数中，而根据函数laodtwo的定义，fr2将读入第一个字符串指定的文件，fr3读入第二个字符串所指定的文件。如果需要用不同的按钮来读入不同的文件，只需要重复这个函数，并将不同文件的URL当作字符串传入该函数即可。

第二种办法结合正常的超链接。可以将第一个HTML文件放在第一个Frame中：

<a href="Getfr2.html" target="fr2">Click here!</a>

然后在文件Getfr2.html的 <Body> 标签中加上一个onLoad的属性：

<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;">
呜啦！
</BODY>
</HTML>

示例14：本地校验用户输入内容

Form对于HTML文件的重要性是勿容置疑的。用户输入到Form中的内容常常必须传回服务器端进行处理。但在JavaScript中，用户输入的数据可以在传回之前先在本地加以确认修正。

下面的示例在客户端本地对用户输入的姓名和Email地址进行确认。对姓名的确认比较简单，只要有文字输入就算正确；而在Email地址中，则必须包含一个 @ 符才能校验通过。否则，将给出错误信息，请用户重新输入。

JS14.html:

<html><head>
<script language="JavaScript">
<!-- Bebinning of JavaScript code
function ChkName(form) {
  if (form.text1.value == "" ｜｜ form.text1.value == " ")
    alert("请输入姓名!")
  else {
   alert("Hi, "+form.text1.value+"! 输入正确!");
  }
}
function ChkEmail(form) {
  if (form.text2.value == "" ｜｜ form.text2.value.indexOf('@', 0) == -1)
    alert("不合法的 Email 地址!");
  else alert("OK! Email 地址正确!");}
// End of JavaScript code -->
</script></head>

<body>
<form name="first">
请输入姓名:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="检查输入" onClick="ChkName(this.form)">
<P>
请输入 E-mail 地址:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="检查输入" onClick="ChkEmail(this.form)">
</body>
</html>

目前来看，本地校验用户输入内容的功能还是比较有限的，往往不可避免地要将输入内容传回服务器端。将数据送回服务器最简单的做法是用Email寄回，这用HTML中Form的功能就可实现，不必使用JavaScript。如果想要迅速根据用户输入数据返回结果，则一般还得使用CGI才行。

从示例直接学习JavaScript

示例1：在页面中写入字符

示例2：函数的使用

示例3：读入Form的输入信息

示例4：自动更新文档修改日期

示例5：链接、状态栏与弹出窗口

示例6：日期和时间函数

示例7：随机数的产生

示例8：自行制作窗口

示例9：在Frame中的运用

示例10：状态栏文字的滚动显示

示例11：数组的使用

示例12：浏览不同的文件

示例13：单击一次鼠标读入两个文件

示例14：本地校验用户输入内容

Windows 95使用技巧集锦

从Windows 95拨号进入Internet

Windows 95中文件Msdos.sys的设置

JavaScript的几个基本问题

Java小应用程序中的动画技术

OSI模型缘何失败？

一条评论

发表回复取消回复

2026 年 9 月
日	一	二	三	四	五	六
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

示例1：在页面中写入字符

示例2：函数的使用

示例3：读入Form的输入信息

示例4：自动更新文档修改日期

示例5：链接、状态栏与弹出窗口

示例6：日期和时间函数

示例7：随机数的产生

示例8：自行制作窗口

示例9：在Frame中的运用

示例10：状态栏文字的滚动显示

示例11：数组的使用

示例12：浏览不同的文件

示例13：单击一次鼠标读入两个文件

示例14：本地校验用户输入内容

类似文章

一条评论

发表回复 取消回复

发表回复取消回复