Web Development 網站開發 (5)

Javascript 可以控制的事情太多，最基本包含回應用戶的動作、控制網站資料的流向、動態調整網站要顯示的內容等等。

讓我們想像一下 Javascript 可以做到的一些例子：

點擊登入按鈕，彈出登入視窗。
把商品加到購物車。
判斷用戶是否登入。
從 Server 端讀取你的個人資料、好友列表等。
播放、暫停影片。
按讚、加入我的最愛。

由於現在的網站越來越複雜，允許用戶做各式各樣的操作，Javascript 的用量也越來越大，很容易寫太多不好維護。現代社會裡大部分的網站為了能更好的管理與拓展程式碼，幾乎都是使用框架來實作。常聽到主流的框架有 React、Angular、Vue。

第一個 Javascript 程式

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>

  <body>
    <script type="text/javascript">
      alert("Hello World");
    </script>
  </body>
</html>

index.html

我們在上面的例子用上了一小段 Javascript。利用 <script> 這個 tag 來告訴瀏覽器說我們在這個區塊裡面要寫 Javascript。alert("Hello World"); 是 Javascript 的語法，指示瀏覽器跳出一個印有 Hello World 的彈窗。

除了在 Html 直接使用 Javascript 的方式以外，我們還可以使用引用的方式把 .js 的Javascript 檔案引用進來。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>

  <body>
    <script src="index.js"></script>
  </body>
</html>

index.html

alert("Hello World");

index.js

以上的例子我們寫了兩份檔案分別為 index.html 與 index.js ，放在同一目錄下。我們可以經由 script 的 src 屬性來載入 js 檔案。值得注意的是，我們可以用 src 來載入外部的 js，也因此可以使用網路上大神們寫好的一些強大 js library，避免重複造輪子。

以下例子我們引入了 jQuery，jQuery 是一個開源的 js library，提供了很多方便的工具語法可以大幅減少我們用 Javascript 的開發時間。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>

  <body>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </body>
</html>

引入 jquery