HTML 套用 JavaScript
如果說 HTML 負責建構網頁的骨架、CSS 負責網頁的外觀,JavaScript 就是負責網頁的「動作程式」,這篇教學將會介紹 HTML 裡三種套用 JavaScript 的方法。
快速導覽:
什麼是 JavaScript?
套用 JavaScript 的三種方法
事件屬性、內部撰寫、外部載入
所有範例可使用 JS Bin、CodePen 或 JSFiddle 進行線上實作,或使用筆記本編輯,不用安裝任何軟體 ( 參考:使用 HTML 編輯器 )
什麼是 JavaScript?
JavaScript ( 簡稱 JS ) 是目前廣泛被用於 HTML 的腳本語言 ( scripting language ),由於 JavaScript 的直譯語言特性 ( interpreted language ),不需要事先編譯,就能透過瀏覽器直接執行,JavaScript 時常用來處理網頁的互動、網頁前後端的串接...等。JavaScript 除了在網頁裡運行,也能應用在其他領域 ( 例如後端伺服器 )。
此外,由於 JavaScrpit 的開頭是 Java,也導致初次接觸 JavaScript 的人常會將 JavaScript 和 Java 混淆,當 JavaScript 剛推出時,原本要命名為 LiveScript,但因為行銷策略改名為 JavaScript ( 由於當時 Java 程式語言相當普及 ),便成為了混淆的主因,但 JavaScrpit 和 Java 其實沒有什麼關聯性 ( 語法也差很多 )。
套用 JavaScript 的三種方法
要在 HTML 套用 JavaScript,有下列三種方法:
事件屬性:在支援事件屬性的元件裡,可在事件屬性中撰寫 JavaScript。
內部撰寫:在 HTML 裡的 標籤裡撰寫 JavaScript。
外部載入:透過 HTML 的 標籤載入外部 JavaScript 檔案。
事件屬性
「事件屬性」方法表示「在支援事件屬性的元件裡,可在事件屬性中撰寫 JavaScript」( 參考:事件屬性 ),例如下方的範例,網頁開啟後點擊按鈕,網頁就會彈出一個警告視窗。
內部撰寫
「內部撰寫」方法表示「在 HTML 裡的 標籤裡撰寫 JavaScript」( 通常會將 放在要控制元素的後方,或是 body 元素的最下方 ),例如下方的範例,網頁開啟後點擊按鈕,網頁就會彈出一個警告視窗。
document.querySelector('button').addEventListener('click',function(){
alert('ok');
})
外部載入
「外部載入」方法,表示「透過 HTML 的 標籤載入外部 JavaScript 檔案」( 通常會放在
裡或 body 元素的最下方 ),例如下方的範例,網頁開啟後會載入外部的 main.js 檔案,點擊按鈕,網頁就會彈出一個警告視窗。外部 main.js 內容:
document.querySelector('button').addEventListener('click',function(){
alert('ok');
})
HTML 內容:
`
小結
通常要做出比較多互動性,或要串接後端伺服器的網頁,內容一定少不了 JavaScript 的輔助,熟悉 HTML 和 CSS 之後,下一步就得開始熟悉 JavaScript 囉~
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~