HTML 套用 JavaScript - HTML 教學

发布日期:2025-11-24 05:56:13 分类:office365桌面应用 浏览:4385

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 元素的最下方 ),例如下方的範例,網頁開啟後點擊按鈕,網頁就會彈出一個警告視窗。

外部載入

「外部載入」方法,表示「透過 HTML 的 標籤載入外部 JavaScript 檔案」( 通常會放在 裡或 body 元素的最下方 ),例如下方的範例,網頁開啟後會載入外部的 main.js 檔案,點擊按鈕,網頁就會彈出一個警告視窗。

外部 main.js 內容:

document.querySelector('button').addEventListener('click',function(){

alert('ok');

})

HTML 內容:

`

小結

通常要做出比較多互動性,或要串接後端伺服器的網頁,內容一定少不了 JavaScript 的輔助,熟悉 HTML 和 CSS 之後,下一步就得開始熟悉 JavaScript 囉~

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~