104年身心障礙人員四等程式設計概要
|
六、試說明下列程式碼在瀏覽器上的呈現為何？（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> |
答：
|
<!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> |
執行結果：
line 1
BMW
Volvo
Saab
Ford
line 2
說明：
這段程式碼是一個網頁，將使用 JavaScript 在網頁上展示一個包含汽車品牌的陣列。讓我們逐步解釋它在瀏覽器上的呈現：
1.<!DOCTYPE html>：宣告網頁的文件類型是 HTML。
2.<html>：HTML 文件的開始標籤。
3.<body>：網頁的主要內容部分。
4.<p> line 1 </p>：一個段落元素，顯示 "line 1"。
5.<p id="demo"></p>：
另一個段落元素，有一個 id 屬性為 "demo"。這個段落用來放置由 JavaScript 生成的內容。
6.<p> line 2 </p>：一個段落元素，顯示 "line 2"。
7.<script>：這個標籤內的內容是 JavaScript 程式碼的部分。
8.var cars = ["BMW", "Volvo", "Saab", "Ford"];：
宣告了一個陣列變數 cars 包含了四個汽車品牌。
9.var i = 0;：宣告了一個變數 i 並將其初始化為0，這個變數將用來迭代陣列。
10.var text = "";：宣告了一個空字串變數 text，用來累積每個汽車品牌的文字。
11. while (cars[i]) {：
這是一個 while 迴圈，它會在陣列的每個索引上執行，只要陣列中的元素存在。
12.text += cars[i] + "<br>";：
將陣列中的汽車品牌加到 text 字串中，同時在每個品牌後面加上 <br> 換行標籤。
13.i++;：將索引 I 遞增，以便在下一次迭代中處理下一個汽車品牌。
14.document.getElementById("demo").innerHTML = text;：
尋找具有 id 屬性為 "demo" 的元素 (即剛剛那個空段落)，並且將剛剛生成的汽車品牌文字內容賦值給它的 innerHTML，從而在網頁上顯示汽車品牌列表。
15.</script>：JavaScript 程式碼的結束標籤。
16.</body>：網頁內容的結束標籤。
17.</html>：HTML 文件的結束標籤。
留言列表
國考資訊處理解答 (7)
