賦予生命 JavaScript

重要度:⭐⭐⭐⭐⭐難度:⭐⭐⭐⭐

JavaScript

JavaScript 與許多人在高中課堂上學的Python一樣均為直譯式程式語言，不須經由編譯的過程，進而少了將原始碼轉為二進制的負擔。

JavaScript 的出現讓開發者得以用簡單快速的方式來處理網頁附加的圖片、特效與動畫。

除了基礎物件導向設計， JavaScript 相較其他語言有著更多的特性包括非同步設計與DOM API，這些額外的設計可以讓開發者針對使用者開發出更多互動模式，這也意味著 JavaScript 會提供呼叫與監聽事件的方法。

API(應用程式介面)

API 就像多功能服務台，您不用在乎背後的工作細節，就能取得想要資料。

API 通常由作業系統或是函式庫提供，而在 JavaScript，我們常常使用DOM API。

文件物件模型 (DOM)

文件物件模型由全球資訊網協會(W3C)制定，用於統一網頁規格，其並非JavaScript 的一部分，也可由其他語言存取。

以下是一個簡易的 DOM 模型，他是樹狀結構，根節點是文件。

你可能會認為所有的節點跟元素沒什麼不同但並不是如此，在下圖你可以看到 title 節點下的 文字節點 「 My title 」。

維基百科

透過操作DOM API可以改變DOM節點。

實例

以下模仿報導者設計的文章內容補充按鈕。

這裡透過 codepen 鑲入讓你與範例互動，JavaScript 便是應用的一部份。

你不會看見此處的引入標籤，因為他被 codepen 隱藏以簡化代碼。

上面這個範例也展現了 CSS 動畫也可透過 JavaScript 實現，引入 anime.js 便可使用現成的動畫庫。

互動對使用者體驗來講無比重要，尤其是以電子商務或報導為產品的網頁，你可能會問報導怎麼可以當成產品，甚至與使用者互動?

我的回答是可以，報導者便是一個優秀的例子，你可以在其網頁中的多媒體專題，看見其為讀者

打造的互動式數位報導(2018年《報導者》數位專題與資訊圖表作品)。