1. 問題：請解釋什麼是DOM？

    回答： DOM（文件物件模型 Document Object Model）是一個跨平台和語言獨立的介面，讓程式能夠讀取和更新文件的內容、結構以及樣式。DOM 將 HTML、XML 或 SVG 文件表示為節點和物件的樹狀結構，讓開發者可以用 JavaScript 操作這些節點，進行新增、移除或修改頁面的元素和內容。

    Untitled

  2. 問題：CSS 箱子模型（Box Model）包含哪些元素？

    回答： CSS 箱子模型由四個部分組成：內容（Content）、內邊距（Padding）、邊框（Border）和外邊距（Margin）。內容區域存放實際的內容，內邊距圍繞著內容區域，邊框圍繞著內邊距，最外層的外邊距則是盒子和其他元素之間的空白區域。

    Untitled

  3. 問題：請解釋 CSS 預處理器及其優點。

    回答： CSS預處理器，如 Sass / SCSS、LESS 或 Stylus，是一種腳本語言，允許開發者使用變數、函式、混合（mixins）和其他高級功能來寫CSS，這些腳本在處理過程中被編譯成標準的 CSS 檔案。預處理器的使用可以提高 CSS 的維護性、可讀性和重用性，並可以加快開發流程。

    Untitled

  4. 問題：請解釋什麼是響應式網頁設計？

    回答： 響應式網頁設計（Responsive Web Design 簡稱 RWD）是一種網頁設計方法論，目的是使網站能夠對各種不同的裝置和螢幕尺寸提供最佳瀏覽體驗。這通常通過使用 CSS 彈性盒子排版（CSS Flexible Box Layout）、媒體查詢（Media Query）和可伸縮的圖片來實現，確保無論在桌面、平板或是手機上，網站都能有效地呈現並操作。

    Untitled

  5. 問題：請解釋const、let和var的作用域差異。 答案: **const和let是塊級作用域（block scope），意味著它們定義的變數只在包含它們的塊或for 循環內有效。而var則是函式作用域（function scope）或全局作用域（global scope），在函式內部使用var**聲明變數時，該變數屬於函式作用域；如果在函式外部使用，則該變數屬於全局作用域。

  6. 問題：const、let和var在同一作用域下宣告同名變數的行為有何不同？ 答案: 在相同作用域下，**const和let不允許重複宣告相同名稱的變數；嘗試這樣做會導致語法錯誤。相反地，var允許在同一作用域內重複宣告同名變數，如果不在嚴格模式（strict mode）下，var**甚至允許未經宣告就賦值使用，這可能會導致預期之外的行為和錯誤。

  7. 問題：請解釋const、let和var在Hoisting（變數提升）方面的行為。 答案: **var宣告的變數會發生變數提升，意味著在代碼執行之前，變數已經被提升到其作用域的頂部，但是變數的賦值操作不會提升。而const和let**宣告的變數會被提升，但如果在聲明之前讀取它們，會因為變數存在暫時性死區 (Temporal dead zone, TDZ) ，導致一個參考錯誤（ReferenceError）。

  8. 問題：var、const和let是在JavaScript的哪個版本中引入的？ 答案: **var是JavaScript誕生時就存在的變數宣告關鍵字，而const和let**則是在ECMAScript 6（ES6/ES2015）中引入的，作為新增的變數宣告方式，以提供更好的作用域控制和減少變數提升導致的錯誤。

  9. 問題：請解釋在JavaScript中，函式聲明（Function Declaration）和函式表達式（Function Expression）在變數提升（Hoisting）方面的行為有何不同？ 答案: 在 JavaScript 中，函式聲明會被完全提升，允許你在聲明之前調用函式。而函式表達式的提升取決於宣告方式：使用**var宣告的函式表達式，變數名被提升但函式本身不會，導致提前調用時變數為undefined；若用let或const**，提前調用會因為 TDZ 的原因報錯。

  10. 問題：解釋==和===的不同。

    回答： 在JavaScript中，==是等值比較運算符，它在比較之前會進行類型轉換，如果兩個操作數類型不同，JavaScript 會嘗試將它們轉換成相同類型再進行比較。相反，===是嚴格等值比較運算符，不會進行類型轉換，如果兩個操作數的類型不同，直接返回false。

  11. 問題：解釋 Cookie、Local Storage、Session Storage 的差別。

    回答： Cookie用於存儲小量資料，隨 HTTP 請求發送，有大小和時間限制。LocalStorage提供長期儲存，不隨請求發送，容量較大。SessionStorage類似LocalStorage，但資料僅在工作階段（Session）期間有效，關閉標籤頁後清除。

    特性 Cookie LocalStorage SessionStorage
    設定方式 1. 伺服器通過 HTTP Response Header 設定
    1. JavaScript | JavaScript | JavaScript | | 資料大小限制 | 約 4KB | 約 5MB | 約 5MB | | 資料生命周期 | 可設定過期時間，過期後自動刪除 | 沒有時間限制 | 瀏覽器標籤頁打開期間，關閉後刪除 | | 資料共享 | 每次 HTTP 請求都會附帶，影響效能 | 不隨 HTTP 請求發送 | 不隨 HTTP 請求發送，不同標籤頁間不共享 | | 主要用途 | 需自動夾帶在 HTTP 請求中的狀態，通常拿來辨認使用者 | 需長期儲存的狀態 | 儲存工作階段間的一次性狀態，如操作資料 |

  12. 問題：請解釋 JavaScript 的閉包（Closure）是什麼？

    回答： 閉包是 JavaScript 的一個重要概念，指的是一個函式和其周圍的狀態（詞法環境）的組合。在 JavaScript 中，當一個函式返回另一個函式時，該返回的函式會保留對原函式範疇中變數的引用。這使得即使外部函式已經執行完畢，內部函式仍然可以訪問外部函式的變數。

  13. 問題：什麼是執行上下文（Execution Context）在JavaScript中的意義？

    回答： 在 JavaScript 中，執行上下文是一個抽象的概念，它表示當前程式碼的執行環境。每當函式被呼叫時，就會創建一個新的執行上下文，這個上下文包含了函式的參數、局部變數和這個函式能夠訪問的其他資料。

  14. 問題：請解釋 JavaScript 中的事件冒泡和事件捕獲。

    回答： 事件冒泡（Event Bubbling）和事件捕獲（Event Capturing）是 DOM 事件傳播的兩個階段。事件捕獲階段從最外層的元素開始接收事件，然後逐級向下傳播到事件的目標元素；事件冒泡階段則是事件從目標元素開始，然後逐級向上傳播到最外層的元素。預設情況下，事件處理器是在冒泡階段被執行的，但可以通過新增事件監聽器時設定使用捕獲階段。

    Untitled

  15. 問題：請解釋事件委派是什麼以及它的好處。

    回答： 事件委派（Event Delegation）是一種 JavaScript 事件處理方法，它利用了事件冒泡的原理，將事件監聽器新增到一個父元素上，而不是將事件監聽器新增到多個子元素上。這樣當子元素上的事件被觸發並冒泡到父元素時，可以在父元素上處理這些事件。事件委派的好處包括減少記憶體使用、避免為每個子元素新增事件監聽器，以及動態元素的事件處理。

    Untitled

  16. 問題：請解釋 JavaScript 的原型繼承是如何工作的。

    回答： JavaScript 的繼承（Inherit）是基於原型（Prototype）的。每個 JavaScript 物件都有一個指向另一個物件的原型屬性，這個指向的物件就是其原型。當試圖訪問一個物件的屬性或方法時，如果該物件本身沒有這個屬性或方法，JavaScript 會繼續在這個物件的原型鏈上尋找，直到找到或達到原型鏈的末端。

    Untitled

  17. 問題：什麼是 JavaScript 的非同步程式設計，並提供一個例子？

    回答： 非同步程式設計是指允許程式在等待某個長時間運行的任務（例如，I/O 操作如網絡請求或檔案讀寫）完成時，繼續執行其他任務的程式設計方式。JavaScript 中實現非同步程式設計的方法有多種，包括回調函式、Promises 和 async/await。例如，使用Promise進行網絡請求：

    javascriptCopy code
fetch('<https://api.example.com/data>')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

  18. 問題：請解釋什麼是事件循環，以及它是如何工作的？

    回答： 事件循環（Event Loop）是 JavaScript 的一個工作機制，用於在單執行緒（Single Thread）環境中處理非同步事件。JavaScript 引擎使用事件循環來協調事件、用戶互動、腳本、渲染、網絡請求等的執行。事件循環的核心是一個不斷檢查任務佇列（Macro Task Queue）是否有待處理任務的過程，如果有，就取出一個消息並執行相應的回調，直到消息佇列清空。 而每一個 Macro Task 執行結束後，會查找 Micro Task Queue 內是否有 Micro Task 可以執行，有的話會逐筆執行，才進行重渲染；然後才會執行 Macro Task Queue 下一個 Macro Task，不斷循環。

    Untitled

    Untitled

  19. 問題：請解釋 JavaScript 中的 this 關鍵字如何工作。

    回答： 在JavaScript中，**this關鍵字指的是函式當前的執行上下文。它的值取決於函式是如何被呼叫的，而不是如何被定義的。在全域範圍內，this指向全域物件；在方法內部，this指向呼叫該方法的物件；在事件處理函式中，this通常指向觸發事件的元素；在箭頭函式中，this**被設定為它被創建時的上下文。

  20. 問題：解釋什麼是模組化 JavaScript，以及它的好處。

    回答： 模組化 JavaScript 是一種將 JavaScript 程式碼分割成可重用模組的程式設計方法。每個模組都有自己的範疇，僅暴露出必要的公共介面（Public Interface）供其他模組使用，而隱藏其內部實現細節。這種方法的好處包括提高程式碼的可維護性、可重用性和可測試性，以及更容易管理依賴關係。使用如 ES Module 或 CommonJS，開發者可以將程式碼組織得更加清晰和模組化。

    Untitled