?? javascr2.html
字號:
<html>
<head>
<TITLE>JavaScript 簡介 ─ 第 2 集</TITLE>
<script language="LiveScript">
<!-- Hiding
function hello() {
alert("哈羅!");
}
function RandomNumber() {
timenow=new Date();
num=Math.abs(Math.sin(timenow.getHours()*timenow.getMinutes()*timenow.getSeconds()));
return num;
}
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 background="ee.jpg">
<CENTER><font size=6 color=#FF0000>
JavaScript 簡介<BR></font>
<FONT SIZE=4 color=blue>第 2 集</FONT></CENTER>
<p>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<p>
<br>
<br>
<a name="status"><FONT SIZE="+2" color=green> 范例 5：</FONT></a><P>
在這一部分首先要為你展示的 JavaScript 特性是將你的滑鼠移到這個不同顏色<P>
的<a href="../../tppmsgs/msgs0.htm#44" tppabs="http://202.96.217.5/~xiaoyi/tpage.htm" onMouseOver="window.status='Just another stupid link...'; return true">連結</a>上面，此時看看瀏覽器下的狀態列有何結果。然後這樣的功能我們可以<P>
與 JavaScript 的功能相結合。好，現在再將你的滑鼠移到本處不同顏色的<a href="" onMouseOver="hello()">連結</a>上<P>
面，你應該會發現有一個視窗出現，是吧？！如何！怎麼做到的呢？以下就是<P>
這一個連結的作法：
<pre>
<a href="tpage.htm" onMouseOver="window.status='Just another stupid link...'; return true">
</pre>
在這兒你只要在傳統 <a> 的標簽中加入 <I>onMouseOver</I> 的 method，就可達成你要的<P>
效果了。這里的<I> window.status</I> 是用來讓你可以在 WWW 瀏覽器的狀態列上顯示<P>
一些訊息用的。在語法中，你可以看到訊息部分是用 ' 括起來的部分，而非以 " 括<P>
起來，在訊息部分結束之後，必須加上 <I>; return true</I>。
<P>
好了，利用以上的特性可以很簡單的完成第二個連結的例子！相當簡單，以 <P>
<I>onMouseOver</I> 的 method 然後配合事件發生時去呼叫函數 <i>hello()</i> 就行了，不再<P>
多加解釋了，作法如下：
<pre>
<html>
<head>
<script language="LiveScript">
<!-- Hiding
function hello() {
alert("哈羅!");
}
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>
</pre>
<p>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<P>
<a name="date"><FONT SIZE="+2" color=green> 范例 6：</FONT></a>
<p>
接下來我們要告訴你一個使用日期和時間的例子。在第一部分中，你已看過了 <P>
<I>lastModified</I> 的用法和作法?，F在要告訴你的并非是印出網路上伺服器或文件<P>
修改日期，而是你個人客戶端機器的日期和時間。以下就是執行結果：
<br>
<br>
現在時間是： 15:32<BR>今天日期為： 10/11/98
<P>
做法如下：
<PRE>
<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>
</PRE>
在本例中，我們必需首先建立一個日期變數，這可以由 <I>today= new Date()</I>來完成。<P>
如果沒有特別指定時間與日期的話，瀏覽器將會采用本地客戶端機器的時間，若將<P>
它放入變數 <I>today</I> 中。這兒要注意的是：我們并沒有宣告 <I>today</I> 這個變數的型態，<P>
這和 Java 或其他的程式語言在用到變數之前必需先加以宣告的方式有相當大的不<P>
同。在完成<I> today</I> 的日期變數後，我們等於建立了一個具有本地時間與日期的物件<P>
(object)。接著就可以使用 <I>get... </I> 的 method 以取得<I> today</I> 這個物件的時間和日期。<P>
請注意 <I>getMonth</I> 這個 method 所取得的月份范圍是由 0~11，所以必須加 1 以代<P>
表真正的 1 月至 12 月?？赐暌陨系睦俞?，想想你可以使你的文件變得有點<P>
智慧，例如：某個文件有時效限制的話，你可以利用我們在上一部份的<A HREF="../../tppmsgs/msgs0.htm#45" tppabs="http://202.96.217.5/~xiaoyi/javascr.htm#ex4">范例 4</A><P>
中所提到的功能和這一個范例中所學習到的功能，設計一個讓你的文件在 第10天<P>
以後讀到的話就會告訴讀者："喂！這篇已過時了！"的程式，試試看，并不難！<P>
<BR>
除以上功能外，在建立日期物件時你也可以事先設定日期如下：<P>
<CENTER><I>docStarted= new Date(96,0,13)</I></CENTER><P>
首先是年（西元），接著是月（但記得減 1），再接著是日。同樣的方法也可以<P>
加上時間的設定，如下：<P>
<CENTER><I>docStarted = new Date(96,0,13,10,50,0)</I></CENTER><P>
前三個是日期的年、月、日，接著是時、分、秒。最後，我們必須提醒你，<P>
JavaScript 并沒有實際的日期型態，但是它卻能毫不費力地顯示出日期和時間，<P>
原因是它是從 1 / 1 / 1970 0：0h 開始以 ms(milli seconds) 來計算目前的時間的，<P>
這聽起來似乎有些復雜，但你倒不用擔心，它有標準的共用函數可以 計算，<P>
你只要知道如何用就可以了！
<BR>
<P>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<P>
<A name="random"><FONT SIZE="+2" color=green> 范例 7：</FONT></A>
<P>
接下來我們要為你介紹一個可以產生亂數的函數，也是以 JavaScript 所寫的。<P>
這個函數只是利用了一點小技巧而已，而這種技巧在大部分的編譯器(compiler)中，<P>
大都是如此（或類似）計算出亂數來的。我相信 JavaScript 最後應也會以相似的方<P>
法來產生這樣的 method ，如果它會提供這樣功能的話。以下是此函數的結果：
<P>
這是一個計算產生的亂數：
.17577887797942549
<P>
以下是這個作法的寫法：
<PRE>
<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>
</PRE>
<P>
我們的做法是以上一個范例中的時間函數；它會出現一個很大的數，<P>
利用這個數再加以運算即可！例如：將它拿來做正弦函數（sin）的運<P>
算，得到的數再做絕對值的運算，結果可以得到一個介於 0 與 1 間的<P>
實數。因為時間的改變是 ms 為單位，而且你絕不會獲得相同的數字。<P>
不過這個做法并不適合拿來快速的連續產生一系列的亂數，但如果你<P>
是不定時，久久的用一次，那效果就不錯了！
<P>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<P>
<A name="win"><FONT SIZE="+2" color=green> 范例 8：</FONT></A>
<P>
JavaScript 的一個重要特點是它可以制作視窗。你可以產生一個的視窗，并且<P>
在此視窗中載入 HTML 文件，完全以 JavaScript 來航游網際網路（Internet ）。<P>
接下來的范例就是告訴你如何開啟一個視窗并且寫點東西進去，你可先試試<P>
按一下范中之接 鈕看看！
<P>
<FORM>
<INPUT type="button" name="Button1" value="Push me" onclick="WinOpen()">
</FORM>
<P>
原始程式如下：
<PRE>
<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>
</PRE>
這兒你又看到用按鈕來啟動函數。這次的函數 <I>WinOpen()</I>是藉著一個 <I>open</I><P>
的 method 來產生一個新的視窗。第一對雙引號("")是用來描述欲載入至視窗<P>
中的文件 URL 位置。如果留者空白的話，那就會呈現一個空白視窗，并可以<P>
透過 JavaScript 寫入東西！下一對雙引號內的內容是這個新開啟視窗的名字，<P>
你可以喜歡給它任意一個名字，但不可加入空白，如用<I> Display Window </I>的話便<P>
會出現錯誤訊息，請注意。接下來的一連串雙引號內所 指定的是該視窗<P>
的相關性質(properties)，這些蠻有趣的，你可以指定要不要有工具棒(toolbar) 、<P>
卷軸(scrollbar)，等等，例如：如果你寫 <I>toolbar = yes</I>，那就會在你所產生出<P>
來的視窗中出現一排工具列。以下有許多你可以改變的視窗特性，請注意它們<P>
字中間不可以有空白：
<P>
toolbar<BR>
location<BR>
directories<BR>
status<BR>
menubar<BR>
scrollbars<BR>
resizable<BR>
copyhistory<BR>
width=<I>pixels</I><BR>
height=<I>pixels</I><BR>
<P>
以上的<I> pixels</I> 部分，你可以填入點數的數值，這數值是告訴瀏覽器這個視窗的<P>
大小。在開啟視窗，并且將它稱為 <I>msg</I> 以後，就可以開始寫些東西到視窗中了。<P>
你可以寫入一般正規的 HTML 語法文字。哇！這可不得了了，也就是說，你可以<P>
利用先前使用者在 form 表格中輸入給你的文章直接將它回應至瀏覽器上來了！這些<P>
功能在幾個月前大概還只能用 CGI 才能達到喔！現在你不用 CGI 也可以做了！<P>
<P>
<HR WIDTH="80%" ALIGN="center" SIZE="3"><P>
<CENTER><A href="script.htm" tppabs="http://202.96.217.5/~xiaoyi/script.htm" TARGET=_top>回主目錄</A></CENTER><P>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<P>
<CENTER>希望你能對我的介紹感到還算不錯。由於 JavaScript 尚未完全發展完成，<P>
并且很可能會再繼續地做一些更動，希望這兒的范例到時都還能執行，在<P>
JavaScript 更多特性完成後，我也會繼續地再為你介紹一些新的范例的！</CENTER>
<BR><P>
<HR WIDTH="80%" ALIGN="center" SIZE="3">
</BODY>
</HTML>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -