普考申論題
111年
[資訊處理] 程式設計概要
第 一 題
📖 題組：
目前以瀏覽器為主的應用程式大多以 JavaScript 進行前端程式的設計，請閱讀以下各小題程式碼，並回答問題。（每小題 10 分，共 20 分）
目前以瀏覽器為主的應用程式大多以 JavaScript 進行前端程式的設計，請閱讀以下各小題程式碼，並回答問題。（每小題 10 分，共 20 分）
📝 此題為申論題，共 2 小題
小題 (一)
使用 jquery 套件的 JavaScript，請回答每一列程式碼的意義。
1 let iconList = [];
2
3 for (const extId of fs.ls("/extension")) {
4 let extension = fs.read(`/extension/${extId}/extension.js`);
5 ext = eval(extension);
6 iconList.push(fs.read(`/extension/${extId}/${ext.icon}`));
7 }
8
9 for (const [index, element] of Object.entries($("span .treeIcon"))) {
10 if (typeof element === "object") {
11 $(element).append(`<img src="${iconList[index]}" >`);
12 }
13 }思路引導 VIP
這是一道程式碼逐行解釋題。考生應展現對 JavaScript ES6 語法（let, 樣板字串, for...of, 解構賦值）以及 jQuery 的理解。解題順序應先觀察第一個迴圈（讀取擴充元件資料並收集圖片路徑），再觀察第二個迴圈（將圖片動態插入 DOM 節點）。特別注意 eval() 與 Object.entries() 的作用。
小題 (二)
以下程式碼請依執行先後說明執行的結果。
1 <button onclick="dialog()">Confirm</button>
2 <p id="result"></p>
3 <script>
4 window.addEventListener('load', function () {
5 alert('Hello!');
6 })
7
8 function dialog() {
9 var message;
10 if (confirm("Press a button!")) {
11 message = "You pressed OK!";
12 } else {
13 message = "You pressed Cancel!";
14 }
15 document.getElementById("result").innerHTML = message;
16 }
17 </script>
1 <button onclick="dialog()">Confirm</button>
2 <p id="result"></p>
3 <script>
4 window.addEventListener('load', function () {
5 alert('Hello!');
6 })
7
8 function dialog() {
9 var message;
10 if (confirm("Press a button!")) {
11 message = "You pressed OK!";
12 } else {
13 message = "You pressed Cancel!";
14 }
15 document.getElementById("result").innerHTML = message;
16 }
17 </script>
思路引導 VIP
本題考查事件觸發順序（Event Flow）。考生需區分「頁面載入完成事件」與「使用者點擊事件」。必須明確指出哪一部分是頁面一開啟就發生，哪一部分是操作後才發生，並描述 confirm() 互動視窗對程式流向的影響。