簡單實用的幾個 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

參考資料

• W3Schools
• JavaScript Note