JavaScript·JavaScript 第 2 集 -- 追寻梦想＞编程乐园

Javascript教程篇

第 2 集

在这一部分首先要为你展示的 JavaScript 特性是将你的滑鼠移到这个不同颜色的连结上面, 此时看看浏览器下的状态列有何结果。然後这样的功能我们可以与 JavaScript 的功能相结合。好, 现在再将你的滑鼠移到本处不同颜色的连结上面, 你应该会发现有一个视窗出现, 是吧？！如何！怎麽做到的呢？以下就是这一个连结的作法：

在这儿你只要在传统 <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 的用法和作法。现在要告诉你的并非是印出网路上伺服器或文件修改日期, 而是你个人客户端机器的日期和时间。以下就是执行结果：

做法如下：

<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 , 如果它会提供这样功能的话。以下是此函数的结果：

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

以下是这个作法的写法：

<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 也可以做了！