- 狀態(tài)欄 (statusbar)顯功能
- 日期物件
- 隨數(shù)的產(chǎn)生
- 開啟新窗囗
范 例 5:
在 這 一 部 分 首 先 要 為 你 展 示 的 JavaScript 特 性 是 將 你 的 滑 鼠 移 到 這 個 不 同 顏 色
的連 結(jié)上 面, 此 時 看 看 瀏 覽 器 下 的 狀 態(tài) 列 有 何 結(jié) 果。 然 後 這 樣 的 功 能 我 們 可 以
與 JavaScript 的 功 能 相 結(jié) 合。 好, 現(xiàn) 在 再 將 你 的 滑 鼠 移 到 本 處 不 同 顏 色 的連 結(jié)上
面, 你 應(yīng) 該 會 發(fā) 現(xiàn) 有 一 個 視 窗 出 現(xiàn), 是 吧?! 如 何! 怎 麼 做 到 的 呢? 以 下 就 是
這 一 個 連 結(jié) 的 作 法:
<a href="tpage.htm" onMouseOver="window.status='Just another stupid link...'; return true">
在 這 兒 你 只 要 在 傳 統(tǒng) <a> 的 標(biāo) 簽 中 加 入 onMouseOver 的 method, 就 可 達(dá) 成 你 要 的
效 果 了。 這 里 的 window.status 是 用 來 讓 你 可 以 在 WWW 瀏 覽 器 的 狀 態(tài) 列 上 顯 示
一 些 訊 息 用 的。 在 語 法 中, 你 可 以 看 到 訊 息 部 分 是 用 ' 括 起 來 的 部 分, 而 非 以 " 括
起 來, 在 訊 息 部 分 結(jié) 束 之 後, 必 須 加 上 ; return true。
好 了, 利 用 以 上 的 特 性 可 以 很 簡 單 的 完 成 第 二 個 連 結(jié) 的 例 子! 相 當(dāng) 簡 單, 以
onMouseOver 的 method 然 後 配 合 事 件 發(fā) 生 時 去 呼 叫 函 數(shù) hello() 就 行 了, 不 再
多 加 解 釋 了, 作 法 如 下:
<html>
<head>
<script language="LiveScript">
<!-- Hiding
function hello() {
alert("哈 羅!");
}
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>
范 例 6:
接 下 來 我 們 要 告 訴 你 一 個 使 用 日 期 和 時 間 的 例 子。 在 第 一 部 分 中, 你 已 看 過 了
lastModified 的 用 法 和 作 法。 現(xiàn) 在 要 告 訴 你 的 并 非 是 印 出 網(wǎng) 路 上 伺 服 器 或 文 件
修 改 日 期, 而 是 你 個 人 客 戶 端 機(jī) 器 的 日 期 和 時 間。 以 下 就 是 執(zhí) 行 結(jié) 果:
現(xiàn) 在 時 間 是: 14:4
今 天 日 期 為: 6/3/2008
做 法 如 下:
<script language="LiveScript">
<!-- Hiding
today = new Date()
document.write("現(xiàn) 在 時 間 是: ",today.getHours(),":",today.getMinutes())
document.write("<br>今 天 日 期 為: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>
在 本 例 中, 我 們 必 需 首 先 建 立 一 個 日 期 變 數(shù), 這 可 以 由 today= new Date()來 完 成。
如 果 沒 有 特 別 指 定 時 間 與 日 期 的 話, 瀏 覽 器 將 會 采 用 本 地 客 戶 端 機(jī) 器 的 時 間, 若 將
它 放 入 變 數(shù) today 中。 這 兒 要 注 意 的 是: 我 們 并 沒 有 宣 告 today 這 個 變 數(shù) 的 型 態(tài),
這 和 Java 或 其 他 的 程 式 語 言 在 用 到 變 數(shù) 之 前 必 需 先 加 以 宣 告 的 方 式 有 相 當(dāng) 大 的 不
同。 在 完 成 today 的 日 期 變 數(shù) 後, 我 們 等 於 建 立 了 一 個 具 有 本 地 時 間 與 日 期 的 物 件
(object)。 接 著 就 可 以 使 用 get... 的 method 以 取 得 today 這 個 物 件 的 時 間 和 日 期。
請 注 意 getMonth 這 個 method 所 取 得 的 月 份 范 圍 是 由 0~11, 所 以 必 須 加 1 以 代
表 真 正 的 1 月 至 12 月。 看 完 以 上 的 例 子 後, 想 想 你 可 以 使 你 的 文 件 變 得 有 點
智 慧, 例 如: 某 個 文 件 有 時 效 限 制 的 話, 你 可 以 利 用 我 們 在 上 一 部 份 的范 例 4
中 所 提 到 的 功 能 和 這 一 個 范 例 中 所 學(xué) 習(xí) 到 的 功 能, 設(shè) 計 一 個 讓 你 的 文 件 在 第10天
以 後 讀 到 的 話 就 會 告 訴 讀 者:"喂! 這 篇 已 過 時 了!"的 程 式, 試 試 看, 并 不 難!
除 以 上 功 能 外, 在 建 立 日 期 物 件 時 你 也 可 以 事 先 設(shè) 定 日 期 如 下:
docStarted= new Date(96,0,13)
首 先 是 年(西 元), 接 著 是 月(但 記 得 減 1), 再 接 著 是 日。 同 樣 的 方 法 也 可 以
加 上 時 間 的 設(shè) 定, 如 下:
docStarted = new Date(96,0,13,10,50,0)
前 三 個 是 日 期 的 年、 月、 日, 接 著 是 時、 分、 秒。 最 後, 我 們 必 須 提 醒 你,
JavaScript 并 沒 有 實 際 的 日 期 型 態(tài), 但 是 它 卻 能 毫 不 費 力 地 顯 示 出 日 期 和 時 間,
原 因 是 它 是 從 1 / 1 / 1970 0:0h 開 始 以 ms(milli seconds) 來 計 算 目 前 的 時 間 的,
這 聽 起 來 似 有 些 復(fù) 雜, 但 你 倒 不 用 擔(dān) 心, 它 有 標(biāo) 準(zhǔn) 的 共 用 函 數(shù) 可 以 計 算,
你 只 要 知 道 如 何 用 就 可 以 了!
范 例 7:
接 下 來 我 們 要 為 你 介 紹 一 個 可 以 產(chǎn) 生 亂 數(shù) 的 函 數(shù), 也 是 以 JavaScript 所 寫 的。
這 個 函 數(shù) 只 是 利 用 了 一 點 小 技 巧 而 已, 而 這 種 技 巧 在 大 部 分 的 編 譯 器(compiler)中,
大 都 是 如 此(或 類 似) 計 算 出 亂 數(shù) 來 的。 我 相 信 JavaScript 最 後 應(yīng) 也 會 以 相 似 的 方
法 來 產(chǎn) 生 這 樣 的 method , 如 果 它 會 提 供 這 樣 功 能 的 話。 以 下 是 此 函 數(shù) 的 結(jié) 果:
這 是 一 個 計 算 產(chǎn) 生 的 亂 數(shù): 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>
我 們 的 做 法 是 以 上 一 個 范 例 中 的 時 間 函 數(shù); 它 會 出 現(xiàn) 一 個 很 大 的 數(shù),
利 用 這 個 數(shù) 再 加 以 運 算 即 可! 例 如: 將 它 拿 來 做 正 弦 函 數(shù)(sin) 的 運
算, 得 到 的 數(shù) 再 做 絕 對 值 的 運 算, 結(jié) 果 可 以 得 到 一 個 介 於 0 與 1 間 的
實 數(shù)。 因 為 時 間 的 改 變 是 ms 為 單 位, 而 且 你 絕 不 會 獲 得 相 同 的 數(shù) 字。
不 過 這 個 做 法 并 不 適 合 拿 來 快 速 的 連 續(xù) 產(chǎn) 生 一 系 列 的 亂 數(shù), 但 如 果 你
是 不 定 時, 久 久 的 用 一 次, 那 效 果 就 不 錯 了!
范 例 8:
JavaScript 的 一 個 重 要 特 點 是 它 可 以 制 作 視 窗。 你 可 以 產(chǎn) 生 一 個 的 視 窗, 并 且
在 此 視 窗 中 載 入 HTML 文 件, 完 全 以 JavaScript 來 航 游 網(wǎng) 際 網(wǎng) 路(Internet )。
接 下 來 的 范 例 就 是 告 訴 你 如 何 開 啟 一 個 視 窗 并 且 寫 點 東 西 進(jìn) 去, 你 可 先 試 試
按 一 下 范 中 之 接 鈕 看 看!
原 始 程 式 如 下:
<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>
這 兒 你 又 看 到 用 按 鈕 來 啟 動 函 數(shù)。 這 次 的 函 數(shù) WinOpen()是 藉 著 一 個 open
的 method 來 產(chǎn) 生 一 個 新 的 視 窗。 第 一 對 雙 引 號("")是 用 來 描 述 欲 載 入 至 視 窗
中 的 文 件 URL 位 置。 如 果 留 者 空 白 的 話, 那 就 會 呈 現(xiàn) 一 個 空 白 視 窗, 并 可 以
透 過 JavaScript 寫 入 東 西! 下 一 對 雙 引 號 內(nèi) 的 內(nèi) 容 是 這 個 新 開 啟 視 窗 的 名 字,
你 可 以 喜 歡 給 它 任 意 一 個 名 字, 但 不 可 加 入 空 白, 如 用 Display Window 的 話 便
會 出 現(xiàn) 錯 誤 訊 息, 請 注 意。 接 下 來 的 一 連 串 雙 引 號 內(nèi) 所 指 定 的 是 該 視 窗
的 相 關(guān) 性 質(zhì)(properties), 這 些 蠻 有 趣 的, 你 可 以 指 定 要 不 要 有 工 具 棒(toolbar) 、
卷 軸(scrollbar), 等 等, 例 如: 如 果 你 寫 toolbar = yes, 那 就 會 在 你 所 產(chǎn) 生 出
來 的 視 窗 中 出 現(xiàn) 一 排 工 具 列。 以 下 有 許 多 你 可 以 改 變 的 視 窗 特 性, 請 注 意 它 們
字 中 間 不 可 以 有 空 白:
toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels
以 上 的 pixels 部 分, 你 可 以 填 入 點 數(shù) 的 數(shù) 值, 這 數(shù) 值 是 告 訴 瀏 覽 器 這 個 視 窗 的
大 小。 在 開 啟 視 窗, 并 且 將 它 稱 為 msg 以 後, 就 可 以 開 始 寫 些 東 西 到 視 窗 中 了。
你 可 以 寫 入 一 般 正 規(guī) 的 HTML 語 法 文 字。 哇! 這 可 不 得 了 了, 也 就 是 說, 你 可 以
利 用 先 前 使 用 者 在 form 表 格 中 輸 入 給 你 的 文 章 直 接 將 它 回 應(yīng) 至 瀏 覽 器 上 來 了! 這 些
功 能 在 幾 個 月 前 大 概 還 只 能 用 CGI 才 能 達(dá) 到 喔! 現(xiàn) 在 你 不 用 CGI 也 可 以 做 了!
- 什麼是JavaScript?
- 執(zhí)行 JavaScript scripts
- 將scripts 語法嵌入HTML文件之中
- 第一個函數(shù)
- 輸入型元件
- 日期功能 -- 最後修改期
JavaScript 是一種新的描述語言,此一語言可以被箝入 HTML 的文件之中。
透過 JavaScript 可以做到回應(yīng)使用者的需求事件 (如: form 的輸入) 而不用任何的網(wǎng)路
來回傳輸資料,所以當(dāng)一位使用者輸入一項資料時,它不用經(jīng)過傳給伺服端 (server)
處理,再傳回來的過程,而直接可以被客戶端 (client) 的應(yīng)用程式所處理。你也可
以想像成有一個可執(zhí)行程式在你的客端上執(zhí)行一樣!目前已有一些寫好的程式在
Internet 上你可以連過去看看,以下有一些計算器的例子,在 Nescape 上。
JavaScript 和 Java 很類似,但到底并不一樣! Java 是一種比 JavaScript 更復(fù)雜
許多的程式語言,而 JavaScript 則是相當(dāng)容易了解的語言。JavaScript 創(chuàng)作者
可以不那麼注重程式技巧,所以許多 Java 的特性在 Java Script 中并不支援。
如需相關(guān)的更多資訊,可以去讀讀 Netscape 的有關(guān) Netscape JavaScript 之介紹。
JavaScript 如何執(zhí)行呢?
Netscape 2.0 beta 3 版以上,就可以執(zhí)行 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 以上版本的話,那你就可以
看到相關(guān)的結(jié)果,而如果你的瀏覽器并非是可以支援 JavaScript 的話,那看起
來就會有一些怪怪的了,以上范例的結(jié)果如下:
This is a normal HTML document.
這是以 JavaScript 印出的!
Back in HTML again. 此一范例并沒有太大的用處,它只是要告訴你如何使用<script>的標(biāo)簽,并
如何將它置於 HTML 的文件之中而已,這個新的標(biāo)簽?zāi)憧梢蕴厮旁谖募?/span>
中的任何地方。
范例 2:
接下來下一個例子所要介紹的是有關(guān)函數(shù) (function) 的使用。請放心,函數(shù)并
非很難懂的東西,但它卻相當(dāng)有用。函數(shù)通常是在 HTML 文件中 <body >的
部份被呼叫,而理所當(dāng)然地,它最好事先被宣告并放在 HTML 文件中 <body>
的部份。好讓在 <body> 部分中使用到函數(shù)時,它已確定被讀取住來。另外,
<script> 標(biāo)簽的有關(guān)描述語法剖份,你可以用注解的符號將它括起來,以免舊
版或無法讀取 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 語法部份
的結(jié)果如下,你可以試著按按鈕看看有何結(jié)果產(chǎn)生!
在范例 2 中,將會產(chǎn)生一個按鈕,當(dāng)你用滑鼠去按它的時候,應(yīng)該會出現(xiàn)
一個視窗上面有“嗨! 你好”的字串,如何?不錯吧!這個結(jié)果是如何產(chǎn)生
的呢?首先,在 <head>內(nèi)的函數(shù)會被載入并存於內(nèi)存中,接著一個新
的 <form>標(biāo)簽 <input type ="button".....>將產(chǎn)生一個接鈕。然後,你可以
在後面看到 'onClick' 的指令,這就是告訴瀏覽器,當(dāng)該按鈕被按時,應(yīng)會執(zhí)行
onClick 後的函數(shù) 'pushbutton()',而這個函數(shù)在剛剛程式被載入時就已安放在
記憶體中了!請注意,在這個函數(shù)中我們用到了個新東西- alert 的 method,
是 JavaScript 事先定義好的,它會以對話視窗產(chǎn)生內(nèi)涵的訊息,并有一"確定"
(OK)的按鈕。 JavaScript 定義了許多的 method,你可以連至 Netscape 公司去
獲取較完整的訊息。我想這些 method 在不久的將來會有長長的一串可以夠你
學(xué)的,不過目前的 method 也已經(jīng)可以做出相當(dāng)多東西了!
接著下個例子將告訴你如何由一個輸入型表格中讀入使用者的輸入資料,
事實上,這也是加入個函數(shù)就可以達(dá)成的。
范例 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>
現(xiàn)在你可以試試結(jié)果如何:
請輸入你的名字:
(<!- ... ->) 此部分即我們之前所提到的它可以避免舊版本或是不支援 JavaScript
的 WWW 瀏覽器因為不認(rèn)識這些函數(shù)而產(chǎn)生錯誤。它的順序應(yīng) 該為 <script>
先,接著為注解的開頭 <!-,然後是內(nèi)容,注解尾 ->, 最後是 </script>。
另外要注意的一點是,語解尾那一行的開頭雙斜線 "http://" ,不可以省略,它代表了
JavaScript 的注解,若省略了的話, ->之前的字會被誤認(rèn)為是 JavaScript 的指令。
這個例子可以讓使用者輸入一段文字,然後再輸入完畢後經(jīng)由 <input>標(biāo)簽中的
"onBlur" 事件函數(shù)偵知,於是呼叫 Getname(Str)這個函數(shù)來加以取得輸入字串,
并將它顯示在對話視窗上!函數(shù) Getname(this.value) 中的 "this.value" 是你在文
字輸入格式中所輸入的值。
范例 4::
這個范例更是帥了!我們在 HTML 文件檔完成了以後,常會加上一行文件
最後修改的日期,現(xiàn)在你可不用擔(dān)心每次都要去改或是忘了改了。你可以
很簡單的寫一個如下的描述語法程式,就可以自動的為你每次產(chǎn)生最後修
改的日期了:
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
以上的 document.lastModified 叁數(shù)在 Netscape 2.0 beta 2 版時是被寫成
documeut.lastmodified 的,然而,之後的版本就改為 document.lastModified,
所以注意一下 ;JavaScript 本身是會區(qū)分大小寫的, lastmodified 與 lastModified
在它看來是不同的結(jié)果。
最後,在這一部分結(jié)束之前,要提醒你一點,像范例 4 ,的用法并非每一部
機(jī)器都是一樣的,例如:PC 上跑得很正確的,在工作站上不一定會有相同的
結(jié)果,所以,或許你仍得測一測不同機(jī)器的結(jié)果才會有所定論。當(dāng)然,這一切
是因為 JavaScript 還正在發(fā)展的原因,最新的訊息還是得去拜訪一下Netscape
公司才知道。也許你也不用奇怪,當(dāng)你隔周再來訪時,JavaScript 可能又作了
相當(dāng)大的改變了呢
在這個例子中又有新的東西了。首先,讓我們注意一下,在語法中的注解部分