訪客留言簿

星期五, 10月 19, 2007

簡單實用的幾個 JavaScript 範例

前言

本文不適合給以下對象看:

  • 完全不懂 HTML 、 CSS 、 JavaScript 或任何程式語言的人 - 因為我不會談太多規則,所以你至少要有能分析判斷架構跟規則的能力。(當然你可以把這篇當成殺時間的文章看,畢竟內容挺簡單的,不要想太多專有名詞定義的話。)
  • 沒用純文字編輯器看過、寫過網頁原始碼的人 - 所謂夏蟲不可語冰,沒看過原始碼的話,我下面要講的原始碼當然也看不懂多少。
  • 想要找到完全合乎你要求的語法的人 - 這裡只是舉些不同語法相互組合,還有我覺得有用就抄寫下來的例子而已,需要更多符合你需求的例子,請找 W3Schools

基本的 JavaScript 輸出方式

只要先用 HTML 寫一個 JavaScritp 定義區,就可以輸出執行 JavaScript 了。

可是沒有開啟 JS 功能的瀏覽器看不到,所以要注意向後支援的問題。最簡單的做法是在 script 結束標籤後,加寫個 noscript 的 HTML 元素,把不能顯示 JS 時,要給人看的東西放在裡面就好。(不過你在我下面的隨機背景一例中會看到另一種做法,那是因為我的處理目標是 CSS 的關係,所以直接利用 CSS 優先順位規則,在有啟用 JS 時,才用 JS 內的 CSS 優先取代原本的 CSS 規則,沒有的時候就用原先的 CSS ,所以可以不必畫蛇添足再用 noscript 向後支援。)

例一: JavaScript 定義區與文字輸出
<script language="JavaScript">
<!--
document.write("輸出字串");
-->
</script>
<noscript>替代輸出字串</noscript>

上例中,可以發現到,除了宣告 JavaScript 外,還用了備註字元的 <!----> ,這是為了避免有瀏覽器看不懂 JavaScript 的 script 元素怎麼處理,結果錯誤輸出 JS 指令內容的問題。

然後注意一下,每個 document.write 要結束,並接下一個 document.write 時,請一定要加分號 ; 隔開,其它在宣告變數等的時候也一樣。(嫌麻煩的話,全都加分號結束也行。)

其它輸出 JavaScript 要注意的規則

JavaScript 中的註解字元

每一行中,在 // 之後的字,瀏覽器全都會當成註解文字,不會執行也不會顯示。

另外為了不讓 --> 被解讀為 JavaScript 內容,記得也要加上註解字元。

例二:註解字元
<script language="JavaScript">
<!--
// 註解文字,這一行不會執行顯示。
document.write("輸出字串"); //也可以放在行末來註解某一行指令
//-->
</script>
跳脫字元

當你輸出的字串中,有含一些指令會用到的特殊字元時,要把該字元當一般字串輸出,就需要在前面用反斜線 \ 讓該字元跳脫特殊字元,變成一般字串值來輸出。

例三:跳脫字元
<script language="JavaScript">
<!--
document.write("\"輸出字串\""); 
//-->
</script>
document.write 的規則
  1. 裡面可以塞字串跟變數,也可以直接塞 HTML 跟 CSS 。
  2. 就算寫了兩個 document.write ,兩者在實際顯示出來時也不會換行的,請搭配 HTML 使用。
  3. 其它有想到再寫。

輸出 JavaScript 變數

變數,代表這裡面的值是不確定的,需要額外宣告才可以取得字串或數值。

使用時,一定要先宣告變數名稱,然後輸出時才可以指定變數要怎樣輸出。

例四:輸出變數
<script language="JavaScript">
<!--
var test = 123 //宣告一個叫做 test 的變數,同時宣告變數的值是 123 。
document.write("輸出字串" + test + test ); //字串加上變數一同輸出,請注意字串才要用引號 " 包住,變數是不必用引號的,但是要跟字串或其它變數連接輸出時,兩者間一定要加個加號 +
document.write(test+test);
//-->
</script>

輸出隨機背景圖片的例子

簡單說,要在使用者每次進入或刷新頁面時,輸出隨機的什麼來,那就會需要用到矩陣 Array 跟隨機值 random 之類的東西。

以輸出隨機背景圖片為例,首先你要先學會宣告一個變數,然後變數的值會等於一個矩陣,然後再一個個指定矩陣內含的值(字串或變數)有哪些;接著為了輸出這矩陣中的某張圖,你必須用 random() 來取得一個位於 0 跟 1 中間的隨機值,並乘上矩陣內的圖片張數,再利用 floor() 取得該乘積去小數點後的整數值;最後將 floor() 取出的值,代入要輸出的矩陣值中,就可以取得設定好要隨機輸出的圖片了。

話不多說,下面是搭配 HTML+CSS 輸出隨機背景圖片的例子,因為有加註解跟標色,所以慢慢看一定看得懂的,各位加油吧。

例五:搭配 HTML+CSS 隨機輸出背景圖片
<!-- 隨機切換背景圖片 -START- -->
<style type="text/css">
<!--
/* 註解:在 CSS 定義區內,每一行用 /* 跟 */ 包起的字,都會變成註解文字,可是註解文字內請不要再有註解符號,不然會出問題。 */
/* 說明:為了避免使用者未啟用 JavaScript ,還有不要搶走優先權,所以把預設值的 CSS 寫在這兒。 */
/* 授權:能開網頁原始碼看到這些源碼,也能理解內容的人,都可以自由使用這些程式碼部分,至於註解請視情況自行處理。 */
.bgimg_clover_point {
 display:block;
 margin:1em 0;
 padding:0;
 width:140px;
 height:600px;
 background:url("http://XXX.OOO/e.jpg") 
 }
* > .bgimg_clover_point {
 margin:1em auto;
 }
-->
</style>
<script language="JavaScript"> 
<!-- 
// 註解:在 JavaScript 定義區內,每一行寫在雙斜線//後面的都會變註解文字,不會產生任何實質作用。
// 說明:利用 randon() 取得 0~1 間的隨機數值後,乘以圖片數,取整數值出來,再把取得的值套入要輸出的變數中,這樣跟變數所用的值一樣編號的圖就會跑出來。
// 授權:能開網頁原始碼看到這些源碼,也能理解內容的人,都可以自由使用這些程式碼部分,至於註解請視情況自行處理。
// 第一步:先宣告代表圖片連結的變數名稱(可更改)為 CloPoiImg ,並建立存放圖片的矩陣。
var CloPoiImg = new Array(4); //←數字請填寫圖片張數減去一的值
// 第二步:在變數 CloPoiImg 的矩陣中,在由 0~(n-1) 排列的手動指定值中,填入需要代入的字串(這裡因為是要放圖所以是填圖片所在超連結)。
CloPoiImg[0] = "http://XXX.OOO/a.jpg" ;
CloPoiImg[1] = "http://XXX.OOO/b.jpg" ;
CloPoiImg[2] = "http://XXX.OOO/c.jpg" ;
CloPoiImg[3] = "http://XXX.OOO/d.jpg" ;
CloPoiImg[4] = "http://XXX.OOO/e.jpg" ;
// 第三步:利用數學式取得隨機整數
var RandNum = Math.floor(Math.random()*5); //←數字請填寫圖片張數的值
// 第四步:輸出取得的變數值,並套用到希望輸出的格式中。另外在這裡會看到反斜線\,這叫做跳脫字元,是加在某些特殊字元前面,讓程式知道要把這裡的特殊字元當字串看,而不是當成指令來執行用的。
document.write("<style type='text/css'><!--");
document.write(".bgimg_clover_point { background: url(\"" + CloPoiImg[RandNum] + "\") }");
document.write("--></style>")
//-->
</script>
<a href="http://XXX.OOO/" class="bgimg_clover_point">哼哼哈嘻</a>
<!-- 隨機切換背景圖片 -END- -->

其它待寫的

  1. 依照時間輸出不同字串 - Word=new Array(n); date=new Date(); hour=date.getHours(); TimeMssg=Word[hour];
  2. 滑鼠移上去時顯示說明文字(工具提示,tooltip) - getElement(title); onMouseOver onMouseOut
  3. 跟 JS 沒關的 CSS 筆記 - ime-mode:disabled; table-layout:fixed

參考資料

2 comments:

鐵人 提到...

請問document.form1.1_留言類別.value.length == 0
有規定form1後面的元素,第一個字元必須是英文嗎?
我如果在前面加入數字要讓表單欄位排序,但是我的驗證欄位語法就會失效,加入反斜線好像也不行ㄟ,謝謝指導。

wini 提到...

鐵人 你好。

雖然我不太懂 form 跟大部分的 Javascript 用法,但是「 document.form1.1_留言類別 」這格式,看起來很像是在操作 id 名稱為 1_留言類別 的 form 元素?

如果那個數字開頭的地方是對應 id 屬性的話,那麼 id 的值,的確是不可以用數字開頭的。

(如果不是的話,可能要請你上別的網站詢問了。)

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權