111年普考程式設計概要

二、目前以瀏覽器為主的應用程式大多以 JavaScript 進行前端程式的設計,請閱讀以下各小題程式碼,並回答問題。(每小題10分,共20分)

    ()使用 jquery 套件的 JavaScript,請回答每一列程式碼的意義。

1

2

3

4

5

6

7

8

9

10

11

12

13

let iconList = [ ];

 

for (const extId of fs.ls("/extension")) {

    let extension = fs.read(`/extension/${extId}/extension.js`);

    ext = eval(extension);

    iconList.push(fs.read(`/extension/${extId}/${ext.icon}`));

}

 

for (const [index, element] of Object.entries($("span.treeIcon"))) {

    if (typeof element === "object") {

        $(element).append(`<img src = "${iconList[index]}" >`);

    }

}

    ()以下程式碼請依執行先後說明執行的結果。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<button onclick = "dialog( )">Confirm</button>

<p id = "result"></p>

<script>

window.addEventListener('load', function( ) {

    alert('Hello!');

})

 

function dialog( ) {

    var message;

    if (confirm("Press a button!")) {

        message = "You pressed OK!";

    } else {

         message = "You pressed Cancel!";

    }

    document.getElementById("result").innerHTML = message;

}

</script>

 

答:

()

此題有爭議,說明如下:

1.此程式可能出自某個公司網頁程式的片段,使用自訂函式庫的作法。

2.fs Node.js 的用法,用於檔案處理。

3.Node.js 沒有 fs.ls fs.read 的用法,屬於 JavaScript 自訂函式庫。

4.JavaScript 自訂函式庫沒給定義及作法,出題方式很不恰當。

let iconList = [ ]; // 宣告一個名為 iconList 的空陣列

// 使用 for 迴圈依序取出位於「/extension」資料夾下的所有檔案,並且將每個檔案的檔名

// 賦值給 extId 變數

for (const extId of fs.ls("/extension")) {

    // 讀取位在「/extension/${extId}/extension.js」的檔案內容,將它賦值給 extension 變數

    let extension = fs.read(`/extension/${extId}/extension.js`);

    // extension 的內容作為 JavaScript 程式碼執行,並且將執行結果賦值給 ext 物件

    ext = eval(extension);

    // 將位在「/extension/${extId}/${ext.icon}」的檔案內容加入 iconList 陣列中

    iconList.push(fs.read(`/extension/${extId}/${ext.icon}`));

}

// 使用 for..of 迴圈依序取出選擇器為 span.treeIcon 的所有元素,並且將每個元素的索引與

// 值賦值給 index element 變數

for (const [index, element] of Object.entries($("span.treeIcon"))) {

    if (typeof element === "object") { // 如果 element 是一個物件,則執行以下程式碼

        // element 的內容中插入一個 img 元素,其 src 屬性的值為 iconList 陣列中

        // 索引為 index 的元素的值

        $(element).append(`<img src = "${iconList[index]}" >`);

    }

}

()

<!DOCTYPE html>

<html>

<head>

<title>Dialog Example</title>

</head>

<script>

window.addEventListener('load', function( ) {

    alert('Hello!');

});

function dialog( ) {

    var message;

    if (confirm("Press a button!")) {

        message = "You pressed OK!";

    } else {

        message = "You pressed Cancel!";

    }

    document.getElementById("result").innerHTML = message;

}

</script>

<body>

<button onclick = "dialog()">Confirm</button>

<p id = "result"></p>

</body>

</html>

說明:

1.程式碼註冊一個事件監聽器,在網頁載入完成後觸發,並且顯示一個訊息視窗,顯示文字「Hello!」。

2.使用者在按下「Confirm」按鈕後,會跳出一個確認對話框,詢問使用者要按下哪個按鈕。

3.如果使用者按下「確定」按鈕,對話框會消失,並且在網頁中顯示文字「You pressed OK!」。

4.如果使用者按下「取消」按鈕,對話框會消失,並且在網頁中顯示文字「You pressed Cancel!」。

arrow
arrow
    創作者介紹
    創作者 jacksaleok 的頭像
    jacksaleok

    國考資訊處理工作室(高考二級資訊處理/高考三級資訊處理/調查局三等/關務人員三等/地方特考三等)

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