?? javascr7.html
字號:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb_2312-80">
<title>網頁教學網->>免費教程</title>
<link rel="stylesheet" type="text/css" href="samp.css">
<script language="JavaScript">
<!-- Hide
function erase() {
window.status="";
}
function stat(txt) {
window.status = txt;
setTimeout("erase()",1500);
}
function test(form, button) {
if (button.name == "button1") test1(form);
if (button.name == "button2") test2(form);
}
function test1(form) {
if (form.text1.value == "")
alert("您 沒 寫 上 任 何 東 西， 請 再 輸 入 一 次 !");
else {
alert("嗨 "+form.text1.value+"! 您 已 輸 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("這 不 是 正 確 的 e-mail address! 請 再 輸 入 一 次 !");
else alert("您 已 輸 入 完 成 !");
}
function setfocus() {
document.first.text1.focus();
return;
}
// -->
</script>
</head>
<body background="backgr.gif">
<table border="0" WIDTH="750" valign=top>
<tr>
<td width="150" valign=top><br><br><br>
</td><td width="150">
</td><td width="450">
<br>
<h1 align="center" size="6">第 7 集</h1>
<HR WIDTH="100%" ALIGN="center" >
<p>
<br>
<br>
<p>
輸 入 表 單 (form) 對 某 些 Internet 上 的 網 頁 而 言 是 很 重 要 的。 通 常 form 的 輸 入 內 容 會 被 送 回 server
中 做 處 理。 JavaScript 具 有 確 認 輸 入 值 的 功 能， 可 以 事 先 確 保 這 些 值 是 屬 於 "合 法 的"，
進 而 避 免 將 錯 誤 的 輸 入 值 送 回 server。 首 先 我 將 告 訴 您 如 何 對 form 的 輸 入 做 確 認 的 工 作， 再 來
我 將 會 提 到 用 JavaScript 將 資 料 送 回 server 的 可 能 性。<p>
咱 們 開 始 吧 ! 我 先 寫 一 個 簡 單 的 語 法。 在 下 面 我 加 了 兩 個 text- 元 件 (element)， 請 將 您 的 大 名 寫
入 第 一 個 空 格， 并 將 您 的 e-mail address 寫 入 第 二 個 空 格。 您 可 在 這 兩 個 空 格 中 任 意 輸 入 并 按 下
按 鈕。 您 也 可 以 不 輸 入 任 何 東 西 就 按 下 按 鈕 試 試 !
<form name="first">
請 輸 入 您 的 大 名 :<br>
<input type="text" name="text1">
<input type="button" name="button1" value="輸 入 測 試" onClick="test1(this.form)">
<P>
請 輸 入 您 的 e-mail address :<br>
<input type="text" name="text2">
<input type="button" name="button2" value="輸 入 測 試" onClick="test2(this.form)">
<P>
</form>
對 第 一 個 空 格 而 言， 若 您 沒 有 鍵 入 任 何 東 西， 電 腦 便 會 出 現 一 個 錯 誤 訊 息， 并 請 您 再 輸 入 一 次。
當 然， 此 空 格 會 把 任 何 輸 入 的 字 串 都 視 為 "合 法 的" 輸 入， 它 無 法 辨 認 出 您 輸 入 的 名 字 是 正 確 的
或 是 胡 的。 即 始 您 輸 入 的 是 數 字， 它 也 會 把 此 數 字 當 成 您 的 大 名。 例 如 您 輸 入 '17'， 它 將 會
顯 示 '嗨 ! 17'。
<br>
第 二 個 空 格 就 設 計 得 稍 微 復 雜 一 點 了。 您 可 試 著 輸 入 一 個 簡 單 的 字 串 - 例 如 您 的 大 名， 它 將 會
顯 示 錯 誤 訊 息， 并 請 您 再 輸 入 一 次 (除 非 您 輸 入 的 字 串 含 有 @ ...)。 這 個 空 格 的 確 認 標 準 是 檢 視
您 輸 入 的 字 串 中 是 否 含 有 @ 。 即 使 只 輸 入 一 個 @， 它 也 會 被 視 為 合 法 的 輸 入 --- 雖 然 這 也 不 是
正 確 的 e-mail address。 所 有 Internet 的 e-mail address 皆 含 有 @ ， 因 此 對 e-mail address 輸 入 值
做 此 種 確 認 工 作 是 很 適 合 的。<p>
接 下 來 看 看 上 述 功 能 的 原 始 碼 吧 :<p>
<pre>
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("您 沒 寫 上 任 何 東 西， 請 再 輸 入 一 次 !")
else {
alert("嗨 "+form.text1.value+"! 您 已 輸 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("這 不 是 正 確 的 e-mail address! 請 再 輸 入 一 次 !");
else alert("您 已 輸 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="輸 入 測 試" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="輸 入 測 試" onClick="test2(this.form)">
</body>
</pre>
<p>
先 看 看 body- 之 後 的 HTML 語 法。 我 們 嵌 入 了 兩 個 text 元 件 和 兩 個 按 鈕。 第 一 個 按 鈕 呼 叫
test1(...)， 第 二 個 按 鈕 呼 叫 test2(...)。 <i>this.form</i>這 個 變 數 會 將 此 form 的 名 字 (在 此 例 中 就 是 <i>first</i>)
傳 給 函 式 (function)， 以 便 能 正 確 將 元 件 "定 址" (address)。 <br>
test1(form) 的 功 用 在 於 檢 查 您 是 否 輸 入 字 串 (亦 即 檢 查 是 否 為 "空 字 串") ? 此 項 工 作 是 由
<i>if(form.text1.value == "")...</i> 所 執 行。 'form' 這 個 變 數 將 會 接 收 由 'this.form' 所 傳 來 的 值。 但 我 們
如 何 在 test1(...) 中 抓 取 我 們 所 輸 入 的 字 串 呢?您 可 利 用 'value' 這 個 變 數 再 加 上 'form.text1' 來 抓 所
輸 入 的 字 串。 然 後 將 它 和 " " 比 較， 檢 查 是 否 為 "空 字 串"。 若 是 "空 字 串" 則 表 示 并 無 輸 入 任 何
東 西， 那 麼 Netscape 將 會 出 現 警 告 并 要 求 您 再 輸 入 一 次。 若 test1(...) 檢 查 結 果 并 非 "空 字 串"，
則 會 出 現 "您 已 輸 入 完 成 !" 的 訊 息。 請 注 意， 即 使 只 輸 入 一 個 空 白 (space)， test1(...)也 會 將 之
視 為 合 法 輸 入。 當 然， 您 也 可 以 略 施 小 技 來 排 除 上 述 可 能 性， 我 相 信 這 很 容 易。<br>
現 在 請 看 <i>test2(form)</i>。 在 此 函 式 中 我 們 利 用 相 同 的 方 法 來 檢 測 輸 入 值 是 否 為 空 字 串， 但 是 我 在
if- 指 令 中 加 入 了 額 外 的 檢 測 功 能。 || 這 個 符 號 代 表 OR 運 算 子 (operator)， 您 可 在 第 六 章 中 學 習
它 的 用 法。<br>
if- 指 令 用 來 檢 測 第 一 與 第 二 個 比 較 式 是 否 其 中 之 一 為 "真"?若 有 其 中 之 一 為 "真"， 則 整 個 if- 指
令 即 為 "真"， 如 此 便 會 執 行 其 後 的 指 令。 換 句 話 說， 若 您 沒 有 輸 入 任 何 字 串 或 您 輸 入 的 字 串 中
沒 有 包 含 '@'， 均 會 被 視 為 "不 合 法" 輸 入。
<p>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<p>
<br>
<a name="submit"></a>
您 知 到 有 幾 種 方 法 可 用 來 送 出 form 的 內 容 嗎?最 簡 單 的 方 法 就 是 利 用 e-mail 來 送 出 form 的 內
容。 我 下 面 介 紹 的 方 法 就 是 屬 於 這 一 種。 若 您 不 想 利 用 e-mail 來 送 出 form 的 內 容 且 想 讓 server
能 自 動 處 理 form 的 輸 入 值， 此 時 此 刻 只 有 CGI 能 做 得 到。 譬 如 您 想 做 一 個 類 似 Yahoo 可 以 讓
使 用 者 迅 速 得 到 結 果 的 搜 尋 引 擎 (search engine)， 您 就 必 須 使 用 CGI。 如 此 一 來 使 用 者 才 不 需 等
待 系 統 管 理 者 處 理 form 的 輸 入 值， 而 可 由 server 自 動 處 理 并 迅 速 將 處 理 結 果 報 告 給 使 用 者。
目 前 JavaScript 無 法 達 到 此 種 功 能。 即 使 您 想 制 做 一 個 "訪 客 簽 名 簿" (guestbook)， 也 不 可 能 利
用 JavaScript 來 叫 server 自 動 將 資 料 加 入 網 頁 中。 目 前 只 有 CGI 能 做 到 如 此。 但 您 可 以 制 做 一
個 利 用 e-mail 傳 送 使 用 者 資 料 的 guestbook， 只 是 您 需 以 手 動 (manual) 方 式 來 處 理 使 用 者 所 傳 來
的 資 料。 若 您 一 天 不 是 收 到 很 多 使 用 者 送 來 的 資 料 的 話， 這 也 未 嘗 不 可。<br>
以 下 語 法 只 使 用 到 普 通 的 HTML 語 法， 并 不 需 用 到 JavaScript ! 只 有 當 您 想 在 資 料 送 出 前 做 一
些 確 認 工 作 的 話， 才 需 用 到 JavaScript。 雖 然 目 前 有 些 瀏 覽 器 無 法 使 用 mailto- 這 項 指 令， 我 相
信 較 新 版 的 瀏 覽 器 都 會 支 援 這 個 指 令。
<p>
<pre>
<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>您 喜 歡 我 的 網 頁 嗎 ?</H3>
<INPUT NAME="choice" TYPE="RADIO" VALUE="1">一 點 也 不 喜 歡。<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>簡 直 浪 費 我 的 時 間。<BR>
<INPUT NAME="choice" TYPE="RADIO" VALUE="3">這 簡 直 是 Net 上 最 爛 的 站 臺。<BR>
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>
</pre>
上 述 語 法 可 藉 由 e-mail 收 到 使 用 者 對 您 網 頁 的 觀 感。 唯 一 的 困 擾 是 您 可 能 會 收 到 內 容 類 似 密 語
(cryptic) 的 mail。 mail 內 容 的 空 格 (space) 有 時 會 以 '+' 代 替， 有 時 會 以 '%20' 代 替。 看+起+來+
就+像+這+樣。 我 相 信 網 路 上 應 有 某 種 程 式 可 將 收 到 的 mail 轉 換 成 "可 讀" 的 語 句。<p>
<p>
<HR WIDTH="80%" ALIGN="center" SIZE="2">
<p>
<br>
<a name="focus"></a>
另 外 有 一 種 不 錯 的 應 用 可 使 您 的 表 單 輸 入 更 具 "親 和 性" (user-friendly)。 您 可 以 指 定 一 開 始 先"定
焦" (focus)於 哪 個 元 件 (element， 簡 單 的 說 就 是 輸 入 項)。 或 是 您 可 讓 瀏 覽 器 "定 焦" 於 使 用 者 輸
入 錯 誤 的 表 單。 換 句 話 說， 瀏 覽 器 將 會 把 mouse 的 游 標 放 在 您 "定 焦" 的 元 件 上， 如 此 一 來 使 用
者 便 不 需 在 輸 入 字 串 之 前 按 一 下 mouse。 請 看 這 項 功 能 的 原 始 碼 : <p>
<pre>
function setfocus() {
document.first.text1.focus();
return;
}
</pre>
<p>
這 項 語 法 是 將 "定 焦" 放 在 第 一 個 text- 元 件 上 (以 本 章 為 例， 就 是 在 "請 輸 入 您 的 大 名" 的 空 格 中
有 游 標 在 閃 爍)。 您 必 需 在 語 法 中 指 定 您 想 "定 焦" 的 表 單 名 字 (以 本 章 為 例， 就 是 <i>first</i>) 和 元 件
的 名 字 (以 本 章 為 例， 就 是 <i>text1</i>)。 若 您 在 一 開 始 載 入 網 頁 時 就 想 "定 焦" 於 某 個 元 件 上， 只 要
在 <body>- tag 中 利 用 onLoad- 即 可 :<p>
<pre>
<body onLoad="setfocus()"><p>
</pre>
</font>
<p align=center><a href=./index.htm>[返回]</a></p>
</td></tr></table>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -