申論題 - 阿摩線上測驗

申論題資訊

試卷：104年 - 104年關務人員、104年身心障礙人員、104年國軍上校以上軍官轉任考身障特考四等_資訊處理#29729
科目：程式設計
年份：104年
排序：0

申論題內容

六、試說明下列程式碼在瀏覽器上的呈現為何？（15 分）
＜!DOCTYPE html＞
＜html＞
＜body＞
＜p＞ line 1 ＜/p＞
＜p id="demo"＞＜/p＞
＜p＞ line 2 ＜/p＞
＜script＞
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
while (cars[i]) {
text += cars[i] + "＜br＞";
i++;
}
document.getElementById("demo").innerHTML = text;
＜/script＞
＜/body＞
＜/html＞

詳解 (共 1 筆)

詳解提供者：hchungw

這段HTML程式碼使用JavaScript在瀏覽器上建立了一個簡單的頁面，其中包含三個段落 (<p> 標籤)。 JavaScript 腳本遍歷 cars 數組，並將每個元素（加上一個 <br> 換行標籤）追加到變數 text 中。然後，這個腳本將 text 變數的內容設定為具有 id="demo" 的段落的 innerHTML，這樣就在該段落內動態地插入了數組中的車輛名稱，每個名稱後都跟著一個換行。

具體來說，頁面上的呈現將是：

第一個段落顯示 "line 1"
第二個段落（id為"demo"）將顯示數組 cars 中的每個元素，每個元素佔一行，如下所示：
BMW
Volvo
Saab
Ford
第三個段落顯示 "line 2"
這裡的 <br> 標籤用於HTML中的換行，所以每個車輛名稱後面都會換到新的一行。

因此，最終在瀏覽器上的呈現效果為：

arduino
Copy code
line 1
BMW
Volvo
Saab
Ford
line 2
這段程式碼示範如何使用JavaScript和DOM操作來動態變更網頁內容。