如果說 HTML 負責建構網頁的骨架、CSS 負責網頁的外觀，JavaScript 就是負責網頁的「動作程式」，這篇教學將會介紹 HTML 裡三種套用 JavaScript 的方法。
原文參考：HTML 套用 JavaScript
所有範例可使用 JS Bin、CodePen 或 JSFiddle 進行線上實作，或使用筆記本編輯，不用安裝任何軟體 ( 參考：使用 HTML 編輯器 )
JavaScript ( 簡稱 JS ) 是目前廣泛被用於 HTML 的腳本語言 ( scripting language )，由於 JavaScript 的直譯語言特性 ( interpreted language )，不需要事先編譯，就能透過瀏覽器直接執行，JavaScript 時常用來處理網頁的互動、網頁前後端的串接...等。JavaScript 除了在網頁裡運行，也能應用在其他領域 ( 例如後端伺服器 )。
此外，由於 JavaScrpit 的開頭是 Java，也導致初次接觸 JavaScript 的人常會將 JavaScript 和 Java 混淆，當 JavaScript 剛推出時，原本要命名為 LiveScript，但因為行銷策略改名為 JavaScript ( 由於當時 Java 程式語言相當普及 )，便成為了混淆的主因，但 JavaScrpit 和 Java 其實沒有什麼關聯性 ( 語法也差很多 )。
要在 HTML 套用 JavaScript，有下列三種方法：
- 事件屬性：在支援事件屬性的元件裡，可在事件屬性中撰寫 JavaScript。
- 內部撰寫：在 HTML 裡的
<script></script>標籤裡撰寫 JavaScript。- 外部載入：透過 HTML 的
<script src="main.js"></script>標籤載入外部 JavaScript 檔案。
「事件屬性」方法表示「在支援事件屬性的元件裡，可在事件屬性中撰寫 JavaScript」( 參考：事件屬性 )，例如下方的範例，網頁開啟後點擊按鈕，網頁就會彈出一個警告視窗。
<button onclick="alert('ok');">我是按鈕</button>
「內部撰寫」方法表示「在 HTML 裡的 <script></script> 標籤裡撰寫 JavaScript」( 通常會將 <script></script> 放在要控制元素的後方，或是 body 元素的最下方 )，例如下方的範例，網頁開啟後點擊按鈕，網頁就會彈出一個警告視窗。
<button>我是按鈕</button>
<script>
document.querySelector('button').addEventListener('click',function(){
alert('ok');
})
</script>
「外部載入」方法，表示「透過 HTML 的 <script src="main.js"></script> 標籤載入外部 JavaScript 檔案」( 通常會放在 <head></head> 裡或 body 元素的最下方 )，例如下方的範例，網頁開啟後會載入外部的 main.js 檔案，點擊按鈕，網頁就會彈出一個警告視窗。
外部 main.js 內容：
document.querySelector('button').addEventListener('click',function(){
alert('ok');
})
HTML 內容：
<script src="main.js"></script>`
<button>我是按鈕</button>
通常要做出比較多互動性，或要串接後端伺服器的網頁，內容一定少不了 JavaScript 的輔助，熟悉 HTML 和 CSS 之後，下一步就得開始熟悉 JavaScript 囉～
大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^
iThome鐵人賽
看影片追技術