HTML

HTML 屬性應該用雙引號引起來。

label 屬性

for=“”

input 屬性

id=“”
type=“number/text/radio/checkbox/button/emial/submit”
min=“0”
max=“14”
placeholder=“”
required

button 屬性

id=“”
name=“”
type=“submit”

fieldset 屬性

id=“”

<fieldset id="breakfast"><legend>Breakfast</legend>
</fieldset>

select 屬性

id=“”
name=“”

option 屬性

id=“”
name=“”
value=“”
selected

div 屬性

id=“”
class=“”

script

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

getElementById

要訪問具有給定 id 名稱的 HTML 元素，可以使用 getElementById() 方法。

在編程中，在變量前面加上 is 或 has 是一種常見的做法，表示該變量代表布爾值。

output 變量是一個元素，它具有 classList 屬性，具有 .remove() 方法，接受一個字符串，表示要從元素中刪除的類。
classList 屬性具有 .add() 方法，它接受一個字符串來表示要添加到元素的類。

const output = document.getElementById('output');
output.classList.remove("hide"); 
output.classList.add("hide");

querySelectorAll

querySelectorAll() 方法返回與選擇器匹配的所有元素的 NodeList。 NodeList
是一個類似數組的對象，因此可以使用括號表示法訪問其中的元素。

document.querySelectorAll 返回 NodeList，它類似于數組，但不是數組。
但是，Array 對象有一個 .from() 方法，它接受類似數組的對象并返回一個數組。

注意：HTML input 字段的值在 JavaScript 中以字符串形式接收。 在執行任何計算之前，你需要將這些字符串轉換為數字。

null

JavaScript 中的 null 是一個特殊原語，表示故意缺少某個值。 在布爾上下文中，null 被認為是假的，在條件語句中其計算結果為 false。

循環

for...of

模版文字

JavaScript 具有一項稱為 模板文字 的功能，它允許你直接在字符串中插入變量。 模板文字用反引號 `` 表示，而不是單引號或雙引號。 可以通過用 ${} 包圍變量來將變量傳遞到模板文字中 - 變量的值將插入到字符串中。
const templateLiteral = Hello, my name is ${name}~!;

函數

接受參數類型的函數

function cleanInputString(str) {}

事件監聽器

addEntryButton.addEventListener("click", addEntry);
calorieCounter.addEventListener("submit", calculateCalories);

regex

要匹配字符串中的特定字符，可以使用正則表達式或簡稱**“regex”**。

JavaScript 中的正則表達式由正斜杠包裹的模式表示。

在 JavaScript 正則表達式中，??開頭斜杠 /和結尾斜杠 /?? 是正則表達式的??字面量定界符??，用于表示正則表達式的開始和結束。

• 要匹配任意數字，可以使用字符類 [0-9]。 這將匹配 0 和 9 之間的任意數字。
• 有一個簡寫字符類可以匹配任何數字：\d。 用這個簡寫替換你的 [0-9] 字符類。
• 正則表達式中的 + 修飾符允許你匹配出現一次或多次的模式。 要匹配數字模式一次或多次，請在每個數字字符類后添加加號。
• 字符串有一個 .match() 方法，它接受一個正則表達式參數。
• .match() 將返回匹配結果數組 - 包含第一個匹配項，如果使用全局標志，則包含所有匹配項。
• 當未找到匹配項時，match 方法返回 null。

[ ‘1e3’, index: 0, input: ‘1e3’, groups: undefined ]
match 方法返回一個包含字符串中找到的所有匹配項的數組。

以下是該信息的完整分類：

“1e3” 是與 /\d+e\d+/i 正則表達式匹配的值。
index: 0 是字符串中匹配值的索引。
input: ‘1e3’ 是匹配的原始字符串。
groups: undefined 是匹配的組。

1. ??基本語法??
   const regex = /pattern/flags;
   ? ??/pattern/??：兩個斜杠之間的內容是正則表達式的模式（pattern）。
   ? ??flags??（可選）：跟在最后一個斜杠后面的標志（如 g、i、m等），用于修改匹配行為。Regex 對此有一個標志 - i 標志，代表“不敏感”。

2. ??與 RegExp構造函數的區別??
   JavaScript 支持兩種方式創建正則表達式：
   ? ??字面量形式??（使用 /…/）：
   const regex = /ab+c/i; // 匹配 “ab+c”，忽略大小寫
   ? ??構造函數形式??（使用 new RegExp()）：
   const regex = new RegExp(“ab+c”, “i”); // 同上
   ??區別??：
   ? 字面量形式 (/…/) 在??代碼解析時??編譯，適合靜態模式。
   ? RegExp構造函數在??運行時??編譯，適合動態生成的正則表達式。

3. ??斜杠 /在正則模式中的轉義??
   如果正則表達式本身需要匹配 /字符，必須用 ``轉義：
   const regex = /https://example.com/; // 匹配 “https://example.com”
   ? 在 RegExp構造函數中，由于模式是字符串，斜杠不需要額外轉義：
   const regex = new RegExp(“https://example\.com”); // 同上

4. ??總結??
   形式 | 語法 | 適用場景
   —|—|—
   ??正則字面量?? | /pattern/flags | 固定模式，代碼更簡潔
   ??RegExp構造函數?? | new RegExp(“pattern”, “flags”) | 動態模式（如用戶輸入）

??關鍵點??：
? /…/是正則表達式的??字面量表示法??，類似于字符串的 "…"或 ‘…’。
? 斜杠 /本身不是正則語法的一部分，只是 JavaScript 的語法標記。
? 如果模式包含 /，必須轉義為 /。

注意需要使用反斜杠字符 \ 來轉義 + 符號，因為它在正則表達式中具有特殊含義。

在正則表達式中，簡寫字符類允許你匹配特定字符，而無需在模式中寫下這些字符。
速記字符類前面帶有反斜杠（\）。
字符類 \s 將匹配任何空白字符。

舉例

const regex = /±\s/; 按順序匹配特定字符
將你的 ±\s 模式轉變為字符類。const regex = /[±\s]/; 匹配特定字符中的一個

const regex = /±\s/;
const regex = /[±\s]/;
這兩個 JavaScript 正則表達式看起來相似但有重要區別：

1. const regex = /±\s/;
   ? 匹配確切的字符序列：加號 +后跟連字符 -后跟一個空白字符
   ? 例如會匹配 "± "這樣的字符串
   ? 這里的 +是轉義加號，-是普通連字符，\s是空白字符

2. const regex = /[±\s]/;
   ? 匹配字符類中的任意一個字符：
   ? +普通加號（在字符類中不需要轉義）
   ? -連字符（因為它位于字符類的末尾，所以被解釋為字面量）
   ? \s任何空白字符
   ? 例如會匹配 “+”、"-"或任何空白字符（空格、制表符等）

關鍵區別：
? 第一個是匹配特定序列，第二個是匹配字符類中的任意單個字符
? 在字符類 []中，+不需要轉義，-如果在開頭或結尾也不會有特殊含義

正則表達式還可以采用特定標志來改變模式匹配行為。
標志被添加在結束的 / 之后。 g 標志代表“全局”，它將告訴模式在找到匹配項后繼續查找。

String

JavaScript 提供了 .replace() 方法，使你可以用另一個字符串替換字符串中的字符。 此方法接受兩個參數。 第一個參數是要替換的字符序列，可以是字符串或正則表達式模式。 第二個參數是替換匹配序列的字符串。

由于字符串是不可變的，replace 方法返回一個替換字符后的新字符串。

字符串有一個 .match() 方法，它接受一個正則表達式參數。 .match() 將返回匹配結果數組 - 包含第一個匹配項，如果使用全局標志，則包含所有匹配項。

match 方法返回一個包含字符串中找到的所有匹配項的數組。

當未找到匹配項時，match 方法返回 null。 (JavaScript 中的 null 是一個特殊原語，表示故意缺少某個值。 在布爾上下文中，null 被認為是假的，在條件語句中其計算結果為 false。)

toLowerCase()
將字符串轉換為小寫時，可以使用 toLowerCase() 方法。 此方法返回轉換為小寫的調用字符串值。

Math

Math.abs() 是一種內置的 JavaScript 方法，它將返回數字的絕對值。

Array

Array.from()

container 的 innerHTML 屬性設置為空字符串。 這將清除該輸入容器的所有內容
container.innerHTML = ‘’;
清除input的值：budgetNumberInput.value = ‘’;
清除 output 元素的文本。 你可以通過將 innerText 屬性設置為空字符串來實現此目的。
output.innerText = ‘’;

innerText 和 innerHTML 的區別在于 innerText 不會呈現 HTML 元素，而是將標簽和內容顯示為原始文本。