Web Development 網站開發 (5) - Javascript 介紹

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.htmlindex.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
Huaying Tsai

Huaying Tsai

擅長 Python, Javascript, React, GraphQL。 想寫寫一些適合新手的程式語言教學文。 想推廣現代社會學習多元技能的風氣,建立了技能交換的平台 - https://thoth.tw
台灣