🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 09月22日

針對 Web 開發初學者的教學課程（包括如何設定 Visual Studio Code）

引言

網頁開發包含了 HTML、JavaScript 和 CSS 三種語言，並且有各種框架可供選擇，對於初次接觸網頁開發的人來說，可能不知道從何開始。因此這次我製作了一個可以體驗一整套網頁開發的初學者教學。

我會以易於理解的方式進行解釋，希望能吸引你閱讀到最後。

在此需要注意的是，為了能夠更容易理解，我會簡化說明。另外，我們將不使用 React 或 Vue，僅專注於基本概念。如果有錯誤或說明不夠清楚的地方，歡迎留言告訴我。

那麼，開始吧！

建立開發環境

如果你的開發環境已經準備好了，可以跳過這一步。

安裝 Visual Studio Code

Visual Studio Code 是 Microsoft 提供的免費原始碼編輯器，通常稱為 VSCode。其特點是可以透過擴充功能進行自訂化。

我們將安裝這個最強的工具。

請從上面的連結中安裝適合你系統的版本。

設定 Visual Studio Code

我們將設定 Visual Studio Code 使其更易於使用，現在啟動它。接下來的說明將假設除了「其他擴充功能」以外的項目都已經進行過設定。（關於自動保存的部分，在頁面更新時手動保存即可，不必過於擔心。）

(可選) 語言設為中文

在左側的螢幕上，你應該會看到各種圖示，例如檔案標記和放大鏡等。

其中一個方框聚集的圖示是開啟擴充功能的菜單，請點擊此圖示。

然後在搜尋欄中輸入 Japanese Language Pack for Visual Studio Code，你會看到帶有地球儀標誌的擴充功能出現在最上面，進行安裝。如果出現「信任嗎？」的提示，請點擊「信任」。安裝完成後，重新啟動 VSCode，你應該會看到界面顯示為中文。

(推薦) 啟用自動保存

從上方的菜單點擊「檔案」，然後選擇「自動保存」，這樣可以啟用自動保存功能。當你修改檔案時，系統將自動保存，這樣你就不必手動保存，特別是在之後的網頁開發中，修改內容能即時反映出來，十分方便。

(推薦) 安裝擴充功能 Live Server

這個擴充功能在本地開啟自己的網站時非常便利，因此建議安裝。（如果使用 Vue 等框架則無法使用此功能。）在擴充功能的搜尋欄輸入 Live Server，應該能找到一個發出紫色信號的圖示，請安裝它。

其他擴充功能

像是在修改開始標籤和結束標籤時，能自動配對的 Auto Rename，以及在編輯器中顯示錯誤的 Error Lens 等等，各種各樣的擴充功能可供選擇，建議你多加探索，這樣自訂的過程會非常有趣！

本次目標

這次我們將製作一個簡易的計算機，用於從稅前金額計算稅後金額。

顏色方面你可以隨意設置，喜歡什麼顏色都可以。

開始撰寫 HTML

首先，請在你喜歡的地方建立一個稅金計算網站的資料夾，然後打開 Visual Studio Code（以下簡稱 VSCode），從檔案中選擇「開啟資料夾」，然後選擇剛剛建立的資料夾。這裡不太確定 Windows 是否能使用，但在 Mac 上，你可以用 Finder 展示資料夾，然後將資料夾拖到 VSCode 的應用程式圖示上來開啟。

在 VSCode 的左側應該有一個名為「資源管理器」的部分。（資料夾名稱會顯示在這個地方）如果未顯示，可以點擊左側選單的檔案圖示來顯示資源管理器。（如果已經顯示，再點擊一次則會隱藏。)

當鼠標懸停在資料夾名稱上時，你應該會看到一個帶有加號的檔案圖示和一個帶有加號的資料夾圖示，這分別是用來在當前開放的資料夾內創建新檔案或資料夾的按鈕。

這次我們按下檔案圖示，命名為 index.html。

index.html 將用來實作網站的首頁。如果要為其他頁面新增 HTML 檔案，則可以隨意命名。

了解 HTML

HTML 是一種標記語言（並非編程語言），用來實現網頁上的文字和按鈕等顯示元素。也就是說，顏色只有黑白，元素的佈局也無法隨意改動，並且按鈕也無法賦予功能。 HTML 是通過標籤來書寫的，以下是一些標籤的範例。（這些是 ChatGPT 幫我總結的，僅是一部分。）

通常有開標籤（如 <div>）和閉標籤（如 </div>），不過也有某些像 img 標籤一樣沒有閉標籤的情況。

標籤種類繁多，因此建議你在使用過程中慢慢記住。

<!DOCTYPE html> -> 宣告 HTML 文檔的類型（HTML5 時僅需這一行）
<html></html> -> 封裝整個 HTML 文檔的根元素
<head></head> -> 元數據（標題、樣式、文字編碼、外部文件加載等）
<body></body> -> 實際上在瀏覽器上顯示的內容

<!-- 元數據類 -->
<meta> -> 指定文字編碼及頁面資訊
<title></title> -> 在瀏覽器的標籤上顯示的標題
<link> -> 加載 CSS 文件等外部資源
<script></script> -> 寫入 JavaScript 代碼或加載外部 JS 文件
<style></style> -> 直接在 HTML 中寫 CSS

<!-- 標題與段落 -->
<h1></h1> ～ <h6></h6> -> 標題（數字越小越重要）
<p></p> -> 段落（撰寫一段文本）
<br> -> 換行

<!-- 文字裝飾 -->
<strong></strong> -> 強調（粗體）
<em></em> -> 強調（斜體）
<span></span> -> 包含行內元素

<!-- 清單 -->
<ul></ul> -> 無序清單（・）
<ol></ol> -> 有序清單（1. 2. 3.）
<li></li> -> 清單項目

<!-- 鏈接與圖片 -->
<a href=""></a> -> 超連結
<img src="" alt=""> -> 顯示圖片

<!-- 表格 -->
<table></table> -> 整個表格
<tr></tr> -> 行
<th></th> -> 標題儲存格
<td></td> -> 數據儲存格

<!-- 輸入表單 -->
<form></form> -> 整個輸入表單
<input> -> 文本框或按鈕等輸入元件
<textarea></textarea> -> 多行文本輸入
<select></select> -> 下拉選單
<option></option> -> 下拉選單選擇項
<button></button> -> 按鈕

<!-- 佈局 -->
<div></div> -> 彙總區塊元素（用於佈局）
<header></header> -> 頁面或區段的標題
<footer></footer> -> 頁面或區段的頁尾
<nav></nav> -> 導航部分
<section></section> -> 彙總章節或區段
<article></article> -> 文章或獨立內容

實際來寫寫看

VSCode 預設搭載了 Emmet 功能，當你在 HTML 檔案中輸入 ! 並立即按下 Enter 鍵時，將自動輸入以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

讓我説明其中的一些部分。

lang
網站的語言設定。若要更改 Emmet 所產生的代碼的 lang，請參考我之前寫的這篇文章。
head 標籤
head 標籤用於設定網站所需的設定、網站名稱（title）、稍後將提到的 CSS 的加載、直接書寫 CSS，或加入外部框架的代碼。title 可以自由更改，瀏覽器的標籤處會顯示這裡設置的內容。
body 標籤
書寫網頁本體的部分。基本上這部分是我們將專注的部分。

那麼，接下來我們就來看看目前的初始狀態頁面。請在 VSCode 的左側資源管理器中，右鍵點擊 index.html，選擇 Open with Live Server，或按右下角的 Go Live。
瀏覽器將自動啟動並顯示一個空白的頁面，這個頁面就是剛才創建的 index.html。當你在創建的網頁文件中保存時，這裡的頁面將自動更新，因此不需要每次重啟。另外，關閉時可以簡單地關閉瀏覽器標籤，但建議點擊 VSCode 右下角的 Port:5500 按鈕進行停止後，再關閉標籤會更好。（Port:5500表示在5500端口啟動的 localhost，localhost 就是目前正在使用的電腦。）

Live Server 預設設置為使用 Chrome 開啟，但若要更改瀏覽器，可以從 VSCode 左下角的齒輪圖示進入「設定」，在使用者標籤的搜尋欄中輸入 Live Server，即可跳轉至 Live Server 的設定項目，在其中可更改 Custom Browser 這一項。

顯示空白頁面的原因是因為在 body 標籤內沒有任何內容。那麼來試試在 body 標籤內輸入：

<p>Hello World!</p>

當你輸入 "p" 時，應該會出現建議，大致選擇雖然會有所不同，但只需按 Enter 鍵，即可顯示標籤。這樣再通過 Live Server 啟動的頁面查看，可以看到內容正確顯示。順帶一提，p 標籤是 paragraph 的縮寫，用於段落。

你可以繼續嘗試其他內容。

(到目前為止的代碼)
※ lang 設置為 ja。
※ 代碼左側的空白（縮排）請使用 Tab 鍵，而不是空白鍵。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

開始撰寫 JavaScript

了解 JavaScript

首先，讓我介紹 JavaScript。簡單來說，它是用於 實現功能的東西。也就是說，我們用 HTML 來放置元素，然後用 JavaScript 來賦予這些元素功能。雖然 JavaScript 的名稱與 Java 相似，但這兩者是完全不同的東西。

JavaScript 可以作為擁有 .js 擴展名的文件來創建，也可以寫在 HTML 文件的 script 標籤內。

其特點包括代碼的書寫方式不拘泥於固定標準，並且沒有 int 或 char 等型別，由 let 和 const 來聲明變數（還有 var，但基本上不使用）。

針對從未使用過程式編碼的人補充說明，變數就像是一個可以容納數字或字串等資訊的盒子，每個盒子內含的數據可能不同。因此，在聲明變數時，必須指定這個變數是用來裝哪些類型的值。

不過，JavaScript 不需要指定型別，變數所賦予的值會自動決定型別。
型別有 number（數值）、string（字串）、boolean（布林值）、object（陣列或函數等）、
undefined（未定義）、null（空值）、symbol、bigint 等多種類型。

先前提到要使用 let 和 const，下面是它們之間的區別：

型別	用途
let	可隨後更改的變數
const	隨後不可更改的變數

也就是說，在 let 的情況下，

// = 代表賦值
// JavaScript 的話 ; (冒號) 可以選擇性地使用
let n = 0;
n = 5;

這樣的操作是允許的，但在 const 的情況下，一旦聲明就無法再次修改。因此，使用 let 便可以實現所有要求，但在管理需要覆寫的用戶資料等情況下，使用 const 可以讓網站更為安全。
另外，兩者的變數名稱不能再次聲明。

實際來試試

接下來，我們將開始製作稅金計算機。JavaScript 提供了許多功能，因此我會逐步進行說明。

準備按鈕

首先，我們將創建一個按鈕，點擊後會通知用戶按鈕被按下了。

請先將 index.html 的 body 標籤內置空，並以 Emmet 準備好狀態。

按鈕可以使用 button 標籤來創建，但如果不使用 CSS，按鈕的外觀只有黑白兩色，因此製作美觀的按鈕比較困難，因此這次我們將使用現成的樣式。

這次我們選擇使用 Twitter 和 X 公司製作的 Bootstrap 5.3。這是提供大量免費元件以便高效製作網頁的資源。它還提供了圖示，非常方便。（類似的 Tailwind CSS 也有，但因為環境設置比較麻煩，所以這次選擇了 Bootstrap。）

你可以選擇在本地安裝並使用，但考慮到安裝過程繁瑣，我們將進行不安裝的方式。文檔中也有相同的說明，但我這裡稍微解釋一下，在 head 標籤內加入以下代碼：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

並在 body 標籤內加入如下代碼：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

HTML 是按自上而下的順序讀取的，因此請確保將 Bootstrap 的功能性代碼置於 body 標籤的最後。即使寫在 head 中也不會有問題（因為必須先讀取元件，然後再讀取動態功能的部分。接下來新增的代碼會寫在這個 script 標籤上方）。

那麼請打開 Bootstrap 官方網站的「文件」標籤，並查看左側的 Components 中的 Buttons 頁面。你會看到有各種各樣的按鈕變化可供選擇。每種按鈕都有對應的 HTML 代碼，請隨意挑選。這次我們使用 Primary 按鈕。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
    <button type="button" class="btn btn-primary">Primary</button>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

當在 Live Server 中查看頁面時，左上角應該會增加一個按鈕。這是理所當然的，按下後不會有任何反應，因此我們來實現日志輸出功能。（日志通常用於開發者進行操作確認或監控等。）

※ title 需要更改為合適的樣子。

使用 function 和 console.log 及註解

現在讓我們來創建 JavaScript 檔案。在資源管理器中，與 index.html 相同位置創建 script.js。（script.js 是一個常見的名稱。）在這裡實現按鈕按下後的處理邏輯。請編寫以下代碼。

// 按鈕被按下時執行
function alertButton(){

}

在 JavaScript 中，函數是用 function 宣告的。函數是將多個操作彙總為一個的，當相同操作需要多次進行時非常方便。這次我們將其稱為 alertButton 函數。() 中可以傳遞參數（即從外部傳遞值到函數內進行處理），並可以用 return 將處理結果返回到呼叫函數的地方。函數的命名建議使其表意明確，不容易混淆。

那麼讓我們將上述的函數改寫如下。下方代碼左側帶有 +（加號），僅是為了便於讀者知曉這段程式碼是添加的，實際編寫時請勿添加，接下來出現的 -（減號）也是同樣道理。

// 按鈕被按下時執行
function alertButton(){
    console.log("按鈕被按下了");
}

// 是註解，執行時會被忽略，通常用來記錄備註或保留修改前的程式碼。HTML 的註解為:

<!--  -->

在 VSCode 中，可將光標懸停在要註解的行或進行範圍選擇後，同時按下 Ctrl (Command) + / 鍵來進行註解。若在空行執行該命令，則僅會輸入註解代碼。此功能適用於所有語言檔案。

console.log 則用於輸出日志。

在處理完成後，我們需要從 index.html 中加載 script.js。打開 index.html，在 body 標籤內的 Bootstrap 的 script 標籤之前或之後，加入以下代碼：

<script src="script.js"></script>

目前這樣做僅僅是讀取了腳本，但沒有從按鈕上呼叫函數，所以需要在 button 標籤內添加：

onclick="alertButton()"

最終代碼為：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

※ 需要注意的是，onclick 實際上不太推薦使用，使用 JavaScript 的 addEventListener 更佳。但這一類的內容可等到熟悉網頁開發後再考慮，因此目前使用 onclick 應該沒問題。
※ 這裡所說的都是以 Chrome 為預設，如果使用其他瀏覽器基本上也同樣適用。
打開 Live Server 後，在右上角點擊三個點的圖示，然後選擇「其他工具」中的「開發者工具」，你將看到顯示出一個充滿開發者設計感的介面。選擇上面的 Console 標籤。（如果沒有請按 >> 從中選擇）

在 Console 中可以查看 console.log 輸出的消息。此時請嘗試點擊按鈕。

這樣就應該出現「按鈕被按下了」的消息。

目前打開的就是開發者工具，這個工具可以查看日志、切換至手機尺寸的畫面、觀察效能、檢查代碼等許多用途。這裡打開後，再按下重新載入按鈕上右鍵，可以同時清除快取並重新載入。

使用輸入表單

接下來我們準備一個輸入表單。在 Bootstrap 的 Forms 中可以找到 Form control 和 Input group，這一次我們想從頭開始製作。雖然說是從頭開始，其實只需編寫一行代碼。

下面的代碼要添加在 button 標籤下方。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
    <input type="number" min="0" placeholder="金額">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

因為這次需要進行金額計算的，所以設置了最小值（min）為 0，使得僅能接受 0 以上的數字。當然也能設定最大值（max）。

placeholder 是在輸入框空白時，提供給用戶的提示訊息，讓用戶了解預期該輸入什麼內容。

input 標籤可以依據 type 的不同來生成按鈕或核取方塊等元件。詳情可參考以下網站。

接下來，我們想在按鈕按下時從輸入表單中獲取用戶所填寫的值。

為了獲取值，我們需要使用 id。在此例中，id 是為了特定識別某個元素而為其命名，可以用於最終要應用的 CSS 或在站內跳轉的目的。

接下來，請將 index.html 和 script.js 修改如下。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
    <input type="number" min="0" placeholder="金額" id="inputForm">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

// 按鈕被按下時執行
function alertButton(){
    console.log("按鈕被按下了");
    let inputNum = document.getElementById("inputForm").value;
}

使用 document.getElementById("id名") 可以獲取 HTML 中特定 ID 的元素資訊。之後，再使用 .value 可以獲取指定 ID 內容的值。

若變數名或函數名中包含兩個詞以上，通常會使用駝峰式大小寫，即2字後的每個單詞皆以大寫字母開頭。

這樣我們只是將用戶輸入的值獲取到了 JavaScript 中，接下來將其顯示在 HTML 上。請追添加如下代碼。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
    <input type="number" min="0" placeholder="金額" id="inputForm">
    <p id="num"></p>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

// 按鈕被按下時執行
function alertButton(){
    console.log("按鈕被按下了");
    let inputNum = document.getElementById("inputForm").value;
    const num = document.getElementById("num");
    num.innerHTML = inputNum;
}

首先說明一下 index.html 的部分，我們加入了一個 p 標籤並設置了 id 為 num。此標籤用於顯示 inputForm 的內容。你也可以使用 div 標籤或 span 標籤，但因為希望使用之前未用過的標籤，所以選擇了 p 標籤。

接下來解釋一下 script.js 中新增的代碼。我們首先通過 document.getElementById("num") 來獲取剛剛新增的 p 標籤。將獲取的元素存儲至 num 變數中，這裡使用 const 進行存儲，意味著此變數無法被重新指定。你可以使用 let，這裡使用 const 是希望讓你了解其用法。
然後，將 inputNum 的值賦給 num.innerHTML。.innerHTML 是將獲取的 HTML 標籤內容設置到其中，簡單來說即是將內容放入：

<p>(這裡)</p>

其中的 inputNum 是從具有 id 為 inputForm 的元素獲取的值，故而使用 innerHTML 來顯示出來。

.innerHTML 也能夠如同 .value 一樣：

document.getElementById("num").innerHTML;

可輕鬆寫成一行，反之也可以將標籤獲取與處理分別進行。

還有其他方法可用於顯示文本內容，例如 .innerText 和 .textContent 等各種方式，建議你研究看看。
（某些標籤或許無法使用 .innerHTML，此時可以使用 .innerText 或 .textContent 來達成。）

實現計算處理

接下來，我們將設置稅率，然後將其應用於用戶輸入的金額並顯示出來。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
    <input type="number" min="0" placeholder="金額" id="inputForm">
    <input type="number" min="0" placeholder="税率 (%)" id="tax">
    <p id="num"></p>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

// 按鈕被按下時執行
function alertButton(){
    console.log("按鈕被按下了");
    let inputNum = document.getElementById("inputForm").value;
    const tax = document.getElementById("tax").value;
    const num = document.getElementById("num");

    let result = inputNum * (1 + tax / 100);
    num.innerHTML = result;
}

在 index.html 中添加了一個用於設定稅率的 input 標籤，並賦予 id 為 tax。在 script.js 中，將此 input 標籤的值賦予常數 tax，然後將計算結果儲存於 result 變數中。此過程中，= 為賦值，/ 表示除法，* 為乘法，() 在數學中有相同的效果。最終將計算出來的結果透過 num.innerHTML 顯示出來。

接下來讓我們實際在 Live Server 中檢視一下整體效果。

若輸入 100 元和 10% 的稅率，則計算的過程中，可能會出現誤差問題，這是因為「四捨五入誤差」造成的，若想進一步了解，建議自行查閱。