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 文件的結束標籤。

arrow
arrow
    文章標籤
    身心障礙人員四等程式設計概要
    全站熱搜

    jacksaleok 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄