一、功能都要自己寫!?

前面幾天我們都是使用 JavaScript 本身提供的功能。像是：
document.querySelector() 可以找到 HTML、
addEventListener() 可以讓網頁聽懂使用者的操作，甚至還可以自己建立元素、修改內容。

但如果今天我想做出一個很特別的網頁效果該怎麼做呢 ? 例如我想做很順的動畫、3D效果，甚至是滑鼠移過去就有很漂亮的回應，難道每一個效果都要從零開始研究、自己寫嗎？

這告訴你完全不用。
這時候就可以使用 Library（函式庫）。

二、Library到底是什麼?

先從 Library 這個英文單字來看是圖書館的意思，圖書館裡有很多很多的資料及知識，在這裡概念雷同，把他比喻成 「別人已經幫你準備好的工具箱」，裡面可能已經有很多寫好的功能，我們只需要把它放進自己的專案，就可以直接使用。例如我們前面自己寫：

button.addEventListener("click", function() {
    // 做一些事情
});

如果有一個 Library 已經幫我們處理好很複雜的動畫功能，我們就可以直接使用它提供的方法，而不用自己從最底層開始撰寫。

而接下來這 30 天，我們就會用到兩個很重要的 Library：

GSAP 和 Three.js

三、GSAP和Three.js

1. GSAP

是用來製作動畫的 JavaScript Library。例如讓文字、圖片、HTML 元素移動、縮放、旋轉，甚至製作更複雜的動畫效果。

2. Three.js

是用來做 3D 的 JavaScript Library。我們可以利用它建立 3D 場景、加入物件、攝影機和光線，讓網頁不只是平面的。

這裡很重要的一點:

Library 並不是取代 JavaScript，而是建立在 JavaScript 上的工具。

四、結論

既然我們都已經認識 Library 是什麼了，那問題來了，我們要如何將 Library放進我們的作品裡，要如何讓它被我們使用呢?

這就是接下來要解決的問題，下一篇我們就要認識 JavaScript 世界裡很常見的工具： npm