111年普考程式設計概要
二、目前以瀏覽器為主的應用程式大多以 JavaScript 進行前端程式的設計,請閱讀以下各小題程式碼,並回答問題。(每小題10分,共20分) (一)使用 jquery 套件的 JavaScript,請回答每一列程式碼的意義。
(二)以下程式碼請依執行先後說明執行的結果。
|
答:
(一)
此題有爭議,說明如下:
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!」。