JavaScript

状态栏 (statusbar)显功能
日期物件
随数的产生
开启新窗囗

范例 5：

在这一部分首先要为你展示的 JavaScript 特性是将你的滑鼠移到这个不同颜色

的连结上面，此时看看浏览器下的状态列有何结果。然後这样的功能我们可以

与 JavaScript 的功能相结合。好，现在再将你的滑鼠移到本处不同颜色的连结上

面，你应该会发现有一个视窗出现，是吧？！如何！怎麽做到的呢？以下就是

这一个连结的作法：

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

在这儿你只要在传统 <a> 的标签中加入 onMouseOver 的 method，就可达成你要的

效果了。这里的 window.status 是用来让你可以在 WWW 浏览器的状态列上显示

一些讯息用的。在语法中，你可以看到讯息部分是用 ' 括起来的部分，而非以 " 括

起来，在讯息部分结束之後，必须加上 ; return true。

好了，利用以上的特性可以很简单的完成第二个连结的例子！相当简单，以

onMouseOver 的 method 然後配合事件发生时去呼叫函数 hello() 就行了，不再

多加解释了，作法如下：

<html>
<head>
<script language="LiveScript">
<!-- Hiding
function hello() {
alert("哈 罗!");
}
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>

范例 6：

接下来我们要告诉你一个使用日期和时间的例子。在第一部分中，你已看过了

lastModified 的用法和作法。现在要告诉你的并非是印出网路上伺服器或文件

修改日期，而是你个人客户端机器的日期和时间。以下就是执行结果：

现在时间是： 14:4
今天日期为： 6/3/2008

做法如下：

<script language="LiveScript">
<!-- Hiding
today = new Date()
document.write("现 在 时 间 是： ",today.getHours(),":",today.getMinutes())
document.write("<br>今 天 日 期 为： ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>

在本例中，我们必需首先建立一个日期变数，这可以由 today= new Date()来完成。

如果没有特别指定时间与日期的话，浏览器将会采用本地客户端机器的时间，若将

它放入变数 today 中。这儿要注意的是：我们并没有宣告 today 这个变数的型态，

这和 Java 或其他的程式语言在用到变数之前必需先加以宣告的方式有相当大的不

同。在完成 today 的日期变数後，我们等於建立了一个具有本地时间与日期的物件

(object)。接着就可以使用 get... 的 method 以取得 today 这个物件的时间和日期。

请注意 getMonth 这个 method 所取得的月份范围是由 0~11，所以必须加 1 以代

表真正的 1 月至 12 月。看完以上的例子後，想想你可以使你的文件变得有点

智慧，例如：某个文件有时效限制的话，你可以利用我们在上一部份的范例 4

中所提到的功能和这一个范例中所学习到的功能，设计一个让你的文件在第10天

以後读到的话就会告诉读者："喂！这篇已过时了！"的程式，试试看，并不难！

除以上功能外，在建立日期物件时你也可以事先设定日期如下：

docStarted= new Date(96,0,13)

首先是年（西元），接着是月（但记得减 1），再接着是日。同样的方法也可以

加上时间的设定，如下：

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

前三个是日期的年、月、日，接着是时、分、秒。最後，我们必须提醒你，

JavaScript 并没有实际的日期型态，但是它却能毫不费力地显示出日期和时间，

原因是它是从 1 / 1 / 1970 0：0h 开始以 ms(milli seconds) 来计算目前的时间的，

这听起来似　有些复杂，但你倒不用担心，它有标准的共用函数可以计算，

你只要知道如何用就可以了！

范例 7：

接下来我们要为你介绍一个可以产生乱数的函数，也是以 JavaScript 所写的。

这个函数只是利用了一点小技巧而已，而这种技巧在大部分的编译器(compiler)中，

大都是如此（或类似）计算出乱数来的。我相信 JavaScript 最後应也会以相似的方

法来产生这样的 method ，如果它会提供这样功能的话。以下是此函数的结果：

这是一个计算产生的乱数： 0.9836312285070992

以下是这个作法的写法：

<html>
<head>
<script language="LiveScript">
function RandomNumber() {
today = new Date();
num = Math.abs(Math.sin(today.getTime()));
return num;
}
</script>
</head>
<body>
<script language="LiveScript">
<!--
document.write("This is a random number:", RandomNumber());
// -->
</script>
</body>
</html>

我们的做法是以上一个范例中的时间函数；它会出现一个很大的数，

利用这个数再加以运算即可！例如：将它拿来做正弦函数（sin）的运

算，得到的数再做绝对值的运算，结果可以得到一个介於 0 与 1 间的

实数。因为时间的改变是 ms 为单位，而且你绝不会获得相同的数字。

不过这个做法并不适合拿来快速的连续产生一系列的乱数，但如果你

是不定时，久久的用一次，那效果就不错了！

范例 8：

JavaScript 的一个重要特点是它可以制作视窗。你可以产生一个的视窗，并且

在此视窗中载入 HTML 文件，完全以 JavaScript 来航游网际网路（Internet ）。

接下来的范例就是告诉你如何开启一个视窗并且写点东西进去，你可先试试

按一下范中之接钮看看！

原始程式如下：

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

这儿你又看到用按钮来启动函数。这次的函数 WinOpen()是藉着一个 open

的 method 来产生一个新的视窗。第一对双引号("")是用来描述欲载入至视窗

中的文件 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 才能达到喔！现在你不用 CGI 也可以做了！

什麽是JavaScript?
执行 JavaScript scripts
将scripts 语法嵌入HTML文件之中
第一个函数
输入型元件
日期功能 -- 最後修改期

JavaScript 是一种新的描述语言，此一语言可以被箝入 HTML 的文件之中。

透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路

来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)

处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。你也可

以想像成有一个可执行程式在你的客端上执行一样！目前已有一些写好的程式在

Internet 上你可以连过去看看，以下有一些计算器的例子，在 Nescape 上。

JavaScript 和 Java 很类似，但到底并不一样！ Java 是一种比 JavaScript 更复杂

许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者

可以不那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。

如需相关的更多资讯，可以去读读 Netscape 的有关 Netscape JavaScript 之介绍。

如何执行 JaveScript？范例 1：

JavaScript 如何执行呢？

Netscape 2.0 beta 3 版以上，就可以执行 JavaScript 的功能了，我们测试过至少

beta 3 版以上可以，其他种类的 WWW 浏览器如:Internet Expore 3.0也有此一功能。

以下我们就以一些例子来告诉你如何将 JavaScript 写在 HTML 文件中，并且体会

一下新语言的特性，我们从第一个例子开始：如何用 JavaScript 印出一串文字至

HTML 文件中：

<html>
<head>
My first JavaScript!
</head>
<body>
<br>
This is a normal HTML document.
<br>
<script language="LiveScript">
document.write("这是以 JavaScript 印出的!")
</script>
<br>
Back in HTML again.
</body>
</html>

如果你使用的 WWW 浏览器是 Netscape 2.0 beta 3 以上版本的话，那你就可以

看到相关的结果，而如果你的浏览器并非是可以支援 JavaScript 的话，那看起

来就会有一些怪怪的了，以上范例的结果如下：

This is a normal HTML document.
这是以 JavaScript 印出的!
Back in HTML again. 此一范例并没有太大的用处，它只是要告诉你如何使用<script>的标签，并

如何将它置於 HTML 的文件之中而已，这个新的标签你可以特它放在文件

中的任何地方。

范例 2：

接下来下一个例子所要介绍的是有关函数 (function) 的使用。请放心，函数并

非很难懂的东西，但它却相当有用。函数通常是在 HTML 文件中 <body ＞的

部份被呼叫，而理所当然地，它最好事先被宣告并放在 HTML 文件中 <body＞

的部份。好让在 <body＞部分中使用到函数时，它已确定被读取住来。另外，

版或无法读取 JavaScript 的浏览器读到，而误会了意思！

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

如果你是使用 Netscape 2.0 beta 3 以上的浏览器，那以上 JavaScript 语法部份

的结果如下，你可以试着按按钮看看有何结果产生！

在范例 2 中，将会产生一个按钮，当你用滑鼠去按它的时候，应该会出现

一个视窗上面有“嗨! 你好”的字串，如何？不错吧！这个结果是如何产生

的呢？首先，在 <head＞内的函数会被载入并存於内存中，接着一个新

的 <form＞标签 <input type ="button".....＞将产生一个接钮。然後，你可以

在後面看到 'onClick' 的指令，这就是告诉浏览器，当该按钮被按时，应会执行

onClick 後的函数 'pushbutton()'，而这个函数在刚刚程式被载入时就已安放在

记忆体中了！请注意，在这个函数中我们用到了个新东西－ alert 的 method，

是 JavaScript 事先定义好的，它会以对话视窗产生内涵的讯息，并有一"确定"

(OK)的按钮。 JavaScript 定义了许多的 method，你可以连至 Netscape 公司去

获取较完整的讯息。我想这些 method 在不久的将来会有长长的一串可以够你

学的，不过目前的 method 也已经可以做出相当多东西了！

接着下个例子将告诉你如何由一个输入型表格中读入使用者的输入资料，

事实上，这也是加入个函数就可以达成的。

范例 3：

<html>
<head>
<script language="LiveScript">
<!--  hide script from old browsers
function getname(str) {
alert("哈罗! "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>

现在你可以试试结果如何：

请输入你的名字：

(<!- ... -＞) 此部分即我们之前所提到的它可以避免旧版本或是不支援 JavaScript

的 WWW 浏览器因为不认识这些函数而产生错误。它的顺序应该为 <script＞

先，接着为注解的开头 <!-，然後是内容，注解尾 -＞，最後是 </script＞。

另外要注意的一点是，语解尾那一行的开头双斜线 "//" ，不可以省略，它代表了

JavaScript 的注解，若省略了的话， -＞之前的字会被误认为是 JavaScript 的指令。

这个例子可以让使用者输入一段文字，然後再输入完毕後经由 <input＞标签中的

"onBlur" 事件函数侦知，於是呼叫 Getname(Str)这个函数来加以取得输入字串，

并将它显示在对话视窗上！函数 Getname(this.value) 中的 "this.value" 是你在文

字输入格式中所输入的值。

范例 4：：

这个范例更是帅了！我们在 HTML 文件档完成了以後，常会加上一行文件

最後修改的日期，现在你可不用担心每次都要去改或是忘了改了。你可以

很简单的写一个如下的描述语法程式，就可以自动的为你每次产生最後修

改的日期了：

<html> <body> This is a simple HTML- page. <br> Last changes: <script language="LiveScript">  </script> </body> </html>

以上的 document.lastModified 叁数在 Netscape 2.0 beta 2 版时是被写成

documeut.lastmodified 的，然而，之後的版本就改为 document.lastModified，

所以注意一下；JavaScript 本身是会区分大小写的， lastmodified 与 lastModified

在它看来是不同的结果。

最後，在这一部分结束之前，要提醒你一点，像范例 4 ，的用法并非每一部

机器都是一样的，例如：PC 上跑得很正确的，在工作站上不一定会有相同的

结果，所以，或许你仍得测一测不同机器的结果才会有所定论。当然，这一切

是因为 JavaScript 还正在发展的原因，最新的讯息还是得去拜访一下Netscape

公司才知道。也许你也不用奇怪，当你隔周再来访时，JavaScript 可能又作了

相当大的改变了呢

在这个例子中又有新的东西了。首先，让我们注意一下，在语法中的注解部分

JavaScript

JavaScript

如何执行 JaveScript？ 范例 1：

你可能感兴趣的:(JavaScript)

如何执行 JaveScript？范例 1：