很多時候，網頁可以透過滑鼠事件來處理的！其中一個很簡單的滑鼠事件，就是點下去 (onclick) 的用法！ 許多時候，我們可以透過 button 來處理這樣的事件問題：

例題 7-2-1：搭配 onclick 展示 alert 計算的結果

1. 將 unit07-1-3.html 另存新檔為 unit07-2-1.html。
2. 將 document.write 該行註解
3. 在身體參數最底下，增加 button 的設計，並且在 botton 內部啟用 onclick 的效果，當按下按鈕時， 會使用警告視窗提示用戶計算的結果

根據 DOM 的模型，我們可以透過 javascript 的幾個方式來取得網頁上面的元件！同時，根據取得的元素的方法不同，而有不一樣的資料類型喔！ 舉例來說，使用 id (不是 class 喔！) 進行資料的取得將是『唯一』的，因此該資料的取得就會是單一的變數。而使用 name 或 標記 (tag) 來取得元素的話，因為網頁上很多元素會定義相同的名稱 (例如表單的單選資料) 或相同的標記 (例如清單的 li 或圖片的 img)，因此，這些方式取得的變數，就會是『陣列』的形式喔！

至於 javascript 取得網頁上面的元件方式中，必須要從『整個網頁 (document)』的角度去思考，因此，取得元素的控制權， 就會有底下的幾種語法：

• document.getElementById("id_name")：透過 id 名稱取得控制權，單一變數
• document.getElementsByName("name_name")：透過 name 取得控制權，陣列變數
• document.getElementsByTagName("tag_name")：透過標記的名稱取得控制權，陣列變數

要注意喔，javascript 與 HTML 不一樣，javascript 的語法是有大小寫分別的，所以，上面的 3 個語法中，Element 與 By 與 Id, Name, TagName 的大小寫部份要注意～另外，除了第一個是單一變數，所以使用 Element 之外，底下兩個是陣列變數，所以是複數的 Elements 喔！ 尾巴多了個 s 啦！

javascript 要處理取得的元素的控制權後，想要修改該元素的任何資料，都是使用小數點加上屬性的方式來處理的。 舉例來說，假設有個圖片的 HTML 碼寫這樣：

<img id="img1" src="dir1/img1.ipg" alt="check" />

那麼我們想要控制 img 的 src 時，基本上是這樣處理的：

document.getElementById("img1").src="newfilename.jpg";

看到了嘛？透過 getElementById 取得了 img1 的這個元素之後，將後續檔名的 src 修改掉了！就這麼簡單！ 如果要更改 style 呢？那就變成這樣：

document.getElementById("img1").style.border="1px solid grey";

例題 7-3-1：使用 這個檔案 的內容，並依據底下的方式設計網頁：

1. 建立 unit07-3-1.html。
2. 將上述的檔案內容加入此網頁中，先查看一下網頁的格式，了解一下幾個重點：
   • 在 Tag 內的屬性中， id 應該要是獨一無二的存在為主
   • 在 Tag 內的屬性中， name 可以出現在很多地方
   • 有時候可以直接抓取 Tag 來應用。
3. 使用『onclick="document.getElementById('mycode').style.border='1px solid gray'"』之類的方式，增加框線
4. 使用『document.getElementsByName('mytxt1')[0].style.color='green'』之類的方式，修改字體，注意那個 [0] 的項目， 因為 Name 取得的會是陣列，所以有多個陣列時，可以使用分號 (;) 持續撰寫 javascript
5. 使用『document.getElementsByTagName('h1')[0].style.color='blue'』修改 HTML 標籤的內容來修改 style 資訊。

不過，從上面的作法來看，一切的設計都是在 onclick 裡面處理，那麼整個動作似乎有點麻煩。又例如 getElementsByName 的項目， 因為取得的資料是陣列，因此若有多個項目，就得要在 onclick 裡面增加好多條設計，這樣實在有點麻煩。 此時，透過 function 的方式，就可以將這個動作簡化了。

使用 function 的方式有點像底下這樣：

<button type="button" onclick="myfunction()">
	Click me to display Date and Time.
</button>

<script>
function myfunction() {
	document.getElementById('mycode').style.border = '1px solid gray';
	....
}
</script>

<p id="demo"></p>

也就是說，你可以加入許多的程式碼在一個 function 裡面，然後透過 onclick 的功能去呼叫出來執行， 這樣當然直觀許多！而不是讓一堆程式碼亂亂的卡在 HTML 的標籤內。

例題 7-4-1：嘗試使用 function 處理

1. 將 unit07-3-1.html，另存新檔為 unit07-4-1.html。
2. 在第一個按鈕定義 mycodef() 函數，且 mycodef 函數會進行：
   • 指定一個變數名稱為 mycode，這個變數名稱會取得 mycode 這個 id 的元素資訊
   • 變更 mycode 的框線，例如 1px solid gray
   • 變更 mycode 的內部留白，例如 10px
   • 變更 mycode 的背景顏色，例如 lightyellow
   • 相關的 javascript 適用的 CSS style 屬性與值，請參考文末的 W3C 網站資料。
3. 在第二個按鈕處定義 mytxt1f() 函數，且 mytxt1f 函數會進行：
   • 指定一個變數名稱為 mytxt1，這個變數名稱會取得 mytxt1 這個 name 的元素資訊，取得的資料為陣列喔！
   • 變更 mytxt1 第 0 個陣列的顏色是灰色
   • 變更 mytxt1 第 1 個陣列的顏色是灰色
4. 在第三個按鈕處定義 mytxt2f() 函數，且 mytxt2f 函數會進行：
   • 指定一個變數名稱為 mytxt2，這個變數名稱會取得 mytxt2 這個 name 的元素資訊，取得的資料為陣列喔！
   • 變更 mytxt2 第 0 個陣列的顏色是白色，且背景色會是藍色
   • 變更 mytxt2 第 1 個陣列的顏色是白色，且背景色會是藍色
5. 在第四個按鈕處定義 myh1f() 函數，且 myh1f 函數會進行：
   • 指定一個變數名稱為 myh1，這個變數名稱會取得 h1 這個標籤 (tag) 的元素資訊，取得的資料為陣列喔！
   • 變更 myh1 第 0 個陣列的顏色是綠色，且背景色會是淺黃色

透過取得網頁上面的元素，並且透過變數來讓取得的資料變成一個簡單的變數，方便進一步處理，這就可以對你的網頁進行大幅度的變更， 也讓你的使用者可以透過點擊或者其他相關的輸入，來跟你的網頁互動了。

其實 javascript 在網頁上可以做非常非常多的事情，除了取得網頁元件來進行修改其 CSS 屬性之外，也可以透過 .innerHTML 或 .outerHTML 來修改元件內部資料，或者是整個元件 (含 tag 本身) 的資料喔！這個 .innerHTML 或 .outerHTML 也是得要搭配 getElement(s)By{Id,Name,TagName} 的設計。

例題 7-5-1：使用 innerHTML 功能，修改元件內部的資料

1. 將 unit07-4-1.html，另存新檔為 unit07-5-1.html。
2. 將 這個檔案的內容 貼到網頁上
3. 建立需要的腳本：
   • 建立名為 mydate 的變數，變數為取得 mydate 這個 id 的元件
   • 透過 mydate 指定內容變為使用 Date() 這個 javascript 內建函數，取得瀏覽器端的時間

如上所示，透過 .innerHTML 就可以修改元件內的資料。不過，如果你還想要修改標記本身，那就得要透過 .outerHTML 的修訂了。

例題 7-5-2：使用 outerHTML 功能，修改元件內部的資料

1. 將 unit07-5-1.html，另存新檔為 unit07-5-2.html。
2. 修改腳本：
   • 透過 outerHTML 的功能，將 p 改變成為 pre 的標記
   • 要注意，變更標記的時候，需要連同內容一起加入，所以，可能需要以 AAA + BBB + CCC 的方式累加， 亦即 javascript 內，是以加號 (+) 進行字串的累加。