網頁程程式設計 HTML5 範例試卷 認證說明與注意事項 一 本項考試包含測驗題題及操作題, 所需總時間為 100 分鐘, 時間結束前需完成所有考試動動作 成績計算滿分為 100 分, 合格分數為 70 分 二 測驗題考試時間為 20 分鐘, 操作題考試時間為 80 分鐘, 唯測驗題剩剩餘時間會加至操作題測驗驗時間 三 測驗題為單 複選混混合二十題, 每題 1 分, 小計 20 分 操作題為三大題, 第一大題至第第二大題每題 25 分, 第三大題每題 30 分, 小計 80 分 四 需使用本機所附的瀏瀏覽器進行驗證 五 測驗題直接出現於電電腦螢幕, 請依序作答 計時終了, 所填入入之答案將自動存檔, 且不不得再作更改 六 操作題所需的檔案皆皆於 C:\ANS.CSF 資料夾內讀取 題目存檔方式, 請依題目指示儲存於 C:\ANS.CSF 資料夾, 測驗結束前必須自行存檔, 檔案名稱錯誤或未未自行存檔者, 均不予計分 七 操作題每大題之各評評分點彼此均有相互關聯, 作答不完整, 將影響各評分點之得分, 請特別注意 題意內未要求修改之設定值, 以原始設定為準, 不需另另設 八 試卷內 0 為阿拉伯數數字,O 為英文字母, 作答時請先確認 所所有滑鼠左右鍵位之訂定, 以右手操作方式為準, 操作者請自行對應鍵位 九 有問題請舉手發問, 切勿私下交談 範例試卷 :HT5-0001 Page 1/21
壹 測驗題 20% ( 為單 複選混合題, 每題 1 分 ) 01. 相對於傳統的 Cookie,HTML5 結合 JavaScript 儲存功能的好處, 不包 括下列哪一項? (A) 容量更大, 可以更彈性的儲存 (B) 將部分常用的網頁快取 (Cache) 起來 (C) 提供本地端 (Local)SQL 資料庫 (D) 運用鍵 - 值 (Key-Value) 來快速存取遠端資料庫 02. HTML5 提供下列哪些即時通訊支援?( 複選 ) (A) 即時的 WebSocket 連線 (B) 運用 JavaScript 來執行多執行緒 (Multi-Thread) 運算 (C) 通知服務的提示訊息 (Notifications), 以便於有新訊息在作業系統桌面即顯示訊息 (D) 提供即時通訊 (Instant Message) 功能 03. 如附圖所示程式碼, 關於其執行結果, 下列哪一項正確? <script type="text/javascript"> var x,x; x=1+2; X="3"+"4"; document.write(x+x); </script> (A) 1234 (B) 334 (C) 10 (D) 234 範例試卷 :HT5-0001 Page 2/21
04. 如附圖所示, 若要表示需刪除的文章內容, 用下列哪一種元素較適合? (A) del (B) ins (C) remove (D) line-through 05. 如附圖所示程式碼, 於 HTML 標籤中, 方框處的 div 元素及 p 元素, 應該各換成下列哪一種元素較為適合? <div> <img src="bubbles-work.jpeg"> Alt="Bubbles,sitting in his office chair,work on his latest project intently." <p>bubbles at work</p> </div> (A) <div> 改成 <section> <p> 改成 <cite> (B) <div> 改成 <article> <p> 改成 <dfn> (C) <div> 改成 <aside> <p> 改成 <strong> (D) <div> 改成 <figure> <p> 改成 <figcaption> 06. 如附圖所示, 若要將文字表示成如圖 lle 及 Me 的上標字效果, 應使用下列哪一種元素? (A) sub (B) sup (C) kbd (D) code 範例試卷 :HT5-0001 Page 3/21
07. 如附圖所示, 為下列哪一種語法所產生? (A) <input type="number"/> (B) <input type="range"/> (C) <input type="tel"/> (D) <input type="color"/> 08. 如附圖所示程式碼, 在 Chrome 瀏覽器會產生下列哪一種結果? <html> <body> <style>:invalid{background-color:grey;}</style> <input type="email" value="email.com"/> </body> (A) 甲 (B) 乙 (C) 丙 (D) 無法執行 09. 關於表單資料的跨域通訊, 下列哪些網址會有跨域通訊的限制? ( 複選 ) (A) http://www.tqc.com/a.js 與 http://www.tqc.com/b.js (B) http://www.tqc.com/test/a.js 與 http://www.tqc.com/script/b.js (C) http://www.tqc.com:8088/a.js 與 http://www.tqc.com/b.js (D) http://www.tqc.com/a.js 與 https://www.tqc.com/b.js 範例試卷 :HT5-0001 Page 4/21
10. 如附圖所示, 在 <canvas> 標籤中, 若想將直線的端點設計為圓柱狀, 需 使用下列哪一種屬性? (A) linestyle (B) linecap (C) lineround (D) linemode 11. 如附圖所示, 用 <canvas> 標籤繪製二次方曲線, 會使用下列哪一種方法? (A) arcto (B) curveto (C) quadraticcurveto (D) beziercurveto 12. 如附圖所示程式碼, 下列哪一項為執行結果? <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="60,80 60,60 40,60 40,40 20,40 20,20 0,20" style="fill:white;stroke:red;stroke-width:4"/> </svg> (A) 甲 (B) 乙 (C) 丙 (D) 丁 範例試卷 :HT5-0001 Page 5/21
13. 如附圖所示程式碼, 會產生下列哪一種結果? width:30px; height:10px; background-color:yellow; box-shadow:5px 5px 5px red; (A) 甲 (B) 乙 (C) 丙 (D) 丁 14. 如附圖所示程式碼, 假設有以下的 CSS 屬性選擇器 (Attribute Selectors) 設定, 所產生的網頁內容文字顏色應為下列哪一種? <style type="text/css"> div{color:red;} div[title]{color:black;} div[title=exam]{color:blue;} div[title~=exam]{color:green;} </style> <div title="css exam"> 網頁內容 </div> (A) 紅色 (Red) (B) 綠色 (Green) (C) 藍色 (Blue) (D) 黑色 (Black) 範例試卷 :HT5-0001 Page 6/21
15. 如附圖所示, 如果想讓附圖左的程式碼, 產出如附圖右的效果, 應該採用下列哪一種 CSS 設定? <div id="mystyle"> 網頁內容 <p><r> 網頁 </r> 內容 </p> (A) #mystyle p {background-color:white;color:black; }p r {background-color:black;color:white;} (B) #mystyle p {background-color:white;color:black; }p + r {background-color:black;color:white;} (C) #mystyle p {background-color:white;color:black; }p>>r {background-color:black;color:white;} (D) #mystyle p {background-color:white;color:black; }p~r {background-color:black;color:white;} 16. 如附圖所示, 該漸變 (Gradient) 效果可以用下列哪一段程式碼達成? (A) linear-gradient(middle,black,white); (B) linear-gradient(center,black,white); (C) linear-gradient(white,black,white); (D) linear-gradient(black,white,black); 範例試卷 :HT5-0001 Page 7/21
17. 如附圖所示程式碼, 會產生下列哪一種效果? <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialgradient id="grad" cx="20%" cy="20%" r="30%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" /> </radialgradient> </defs> <ellipse cx="200" cy="200" rx="50" ry="50" fill="url(#grad)"/> </svg> (A) 甲 (B) 乙 (C) 丙 (D) 丁 18. 如附圖所示, 該漸變 (Gradient) 效果可以用下列哪一段程式碼達成? (A) radial-gradient(center,while,black); (B) radial-gradient(center,black,while); (C) radial-gradient(white,black,white); (D) radial-gradient(circle,black,white); 範例試卷 :HT5-0001 Page 8/21
19. 如附圖所示程式碼, 如果使用者不願意提供所在位置資訊, 在程式碼的 err 變數 ( 方框處 ), 將取得下列哪一種錯誤代號? <script> Navigator.geolocation.getCurrentPosition(successCallback,errorCallback); function errorcallback(error){ var err=error.code;} </script> (A) 3 (B) 2 (C) 1 (D) 0 20. 如附圖所示程式碼, 在底線的位置, 要加入下列哪一段程式碼, 才能將使用者的選取的檔案顯示在網頁上? <script> Function fileviewer(){ var thefile=document.getelementbyid("file1").files[0]; var reader=new FileReader(); reader.onload=function(e){ var filecontent=e.target.result; document.getelementbyid("show").value=filecontent;} ;} </script> (A) reader.readasdataurl(thefile) (B) reader.readastext(thefile) (C) reader.readasarraybuffer(thefile) (D) reader.readasbinarystring(thefile) 範例試卷 :HT5-0001 Page 9/21
貳 操作題 80% ( 第一 二大題每題 25 分, 第三大題每題 30 分 ) 一. 多欄配置 1. 題目說明 : 本題需完成如下圖所示的網頁功能, 評核受測者是否了解如何使用 CSS3 所提供的版面配置的相關樣式, 在此試題中受測者應該避免使用 float 及 position 屬性來進行版面配置 2. 作答須知 : (1) 使用 C:\ANS.CSF\H501 路徑底下之相關檔案, 依設計項目作答, 完成之作答檔需依原路徑 原檔名儲存 (2) 使用記事本進行編輯, 完成之檔案可使用 Chrome 瀏覽器進行驗證 (3) 需注意瀏覽器相容性問題, 若有需要請加上前綴詞 3. 設計項目 : (1) 開啟 MultiColumn.css 找到註解 "/* 加入多欄版面樣式 */" 的位置, 增加如下樣式 : 多欄 :2 間隔線 : 寬度 樣式與顏色分別為 1px 虛線與綠色 間隔距離 :2em (2) 開啟 MultiColumn.css 找到註解 "/* 橫跨所有的欄 */" 的位置, 增加如下樣式 : 橫跨多欄 :all 設計完成的 MultiColumn.html 應如 附圖一 所示 範例試卷 :HT5-0001 Page 10/21
(3) 開啟 BoxFlex.css, 在 #deals 的樣式中, 加入如下樣式 : 顯示方式 :flex 容器內子元素的配置方向及根據容器中的空間允許換行 :row wrap 容器內子元素的配置位置 :center (4) 開啟 BoxFlex.css, 在.sale-item 的樣式中, 加入如下樣式 : 顯示方式 :flex 容器內子元素的配置方向及根據容器中的空間不允許換行 :column 容器內子元素的配置位置 :center (5) 開啟 BoxFlex.css, 在.sale-item > img 的樣式中, 加入如下樣式 : 將 img 移到所有內容的上面 :-1 配置位置 :center 設計完成的 BoxFlex.html 應如 附圖二 所示 範例試卷 :HT5-0001 Page 11/21
4. 輸出結果參考圖 : 附圖一 範例試卷 :HT5-0001 Page 12/21
附圖二 附圖三 範例試卷 :HT5-0001 Page 13/21
附圖四 附圖五 5. 評分項目 : 設計項目 配分得分 (1) 呈現結果如 附圖一 所示 4 (2) 呈現結果如 附圖二 所示 4 (3) 呈現結果如 附圖三 所示 9 (4) 呈現結果如 附圖四 所示 4 (5) 呈現結果如 附圖五 所示 4 總 分 25 範例試卷 :HT5-0001 Page 14/21
二. 輸入提示檢查 1. 題目說明 : HTML5 新增了一些新類型的輸入元素及新屬性, 目前來說並不是所有的瀏覽器都支援, 此試題用來評核受測者是否了解, 對於不支援的瀏覽器該如何讓使用者有一樣的使用體驗 2. 作答須知 : (1) 使用 C:\ANS.CSF\H502 路徑底下之相關檔案, 依設計項目作答, 完成之作答檔需依原路徑 原檔名儲存 (2) 受測者可以使用 JavaScript 或 jquery 完成此試題 (3) 使用記事本進行編輯, 測試環境預設為 IE10 瀏覽器, 受測者需參照下圖將 IE10 切換到 IE9 瀏覽器模式進行測試 3. 設計項目 : 以下三個項目提及 Chrome 與 IE 瀏覽器支援程度的不同, 為讓兩個瀏覽器對某些功能的顯示效果相同, 需編修特定內容 (1) 帳號輸入的欄位中設定了 autofocus 屬性, 使用 chrome 瀏覽器瀏覽 Form.html 網頁時, 滑鼠游標會自動出現在帳號輸入的欄位中, 但是使用 IE9 瀏覽器瀏覽 Form.html 網頁時, 就不具備此功能 需求 : 讓 IE9 瀏覽器也具備上述功能, 使用 Chrome 瀏覽器呈現結果如 附圖一 所示; 使用 IE9 瀏覽器呈現結果如 附圖二 所示 範例試卷 :HT5-0001 Page 15/21
(2) 帳號輸入的欄位中設定了 required 屬性, 使用 chrome 瀏覽器瀏覽 Form.html 網頁時, 按下送出按鈕後, 會檢查帳號欄位是否輸入, 沒有輸入將顯示錯誤訊息 需求 : 讓 IE9 瀏覽器也具備上述功能, 使用 Chrome 瀏覽器呈現結果如 附圖三 所示; 使用 IE9 瀏覽器則會跳出如 附圖四 所示的視窗訊息 (3) 電子郵件輸入的欄位中設定了 placeholder 屬性, 所以 chrome 瀏覽器瀏覽 Form.html 網頁時, 會有輸入電子郵件的提示語, 當使用者在電子郵件輸入欄位中輸入文字時, 提示的字會自動清除, 如果將電子郵件輸入欄位中輸入的文字清除, 然後將滑鼠點選其他輸入欄位, 提示的字會再自動填回去 需求 : 讓 IE9 瀏覽器也具備上述功能, 使用 Chrome 瀏覽器呈現結果如 附圖五 所示; 使用 IE9 瀏覽器呈現結果如 附圖六 所示 4. 輸出結果參考圖 : 附圖一 附圖二 附圖三 附圖四 範例試卷 :HT5-0001 Page 16/21
附圖五 附圖六 5. 評分項目 : 設計項目 (1) 使用 Chrome 及 IE9 分別測試, 網頁載入時, 皆要看到滑鼠游標在帳號的文字輸入方塊中閃爍 (2) 使用 Chrome 及 IE9 分別測試, 如果帳號未輸入, 按下 " 送出 " 按鈕時, 皆會出現未輸入帳號提示, 如 附圖三 及 附圖四 (3) 使用 Chrome 及 IE9 分別測試, 網頁載入時, 皆要看到 " 請輸入電子郵件 " 的提示, 如 附圖五 及 附圖六, 詳細點擊行為需見設計項目 (3) 的說明 總分 25 配分得分 8 8 9 範例試卷 :HT5-0001 Page 17/21
三. 圖形繪製 1. 題目說明 : 本題需完成如 附圖一 所示的繪圖功能, 評核受測者是否了解如何使用 HTML5 所提供的繪圖功能, 在網頁上繪製圖形 2. 作答須知 : (1) 使用 C:\ANS.CSF\H503 路徑底下之相關檔案, 依設計項目作答, 完成之作答檔需依原路徑 原檔名儲存 (2) 使用記事本進行編輯, 完成之檔案可使用 Chrome 瀏覽器進行驗證 3. 設計項目 : (1) 開啟 drawsomething.html 的網頁, 設計出如 附圖二 所示的網頁介面, 介面說明如下 : 畫筆顏色 : 使用色彩類型的輸入欄位來選擇色彩,id 名稱需命名為 color1 畫筆粗細 : 使用數值類型的輸入欄位來選擇數值資料, 並設定最小值為 2 最大值為 20, 按上下箭頭每次數值的改變為 2,id 名稱為 number1 千言萬語 : 使用文字類型的輸入欄位來輸入文字,id 名稱為 text1 繪圖區域 : 設計一個寬 600px 高 300px 以及 1px 實線綠色框線的 canvas,id 命稱為 mycanvas 清除按鈕 :id 名稱為 buttonclear 儲存按鈕 :id 名稱為 buttonsave (2) 在 canvas 的區域中, 按下滑鼠不放移動時, 需根據使用者選取的畫筆顏色及畫筆粗細來繪製線條 開啟 draw.js, 尋找註解 "//(2) 請根據選擇的畫筆顏色及畫筆粗細來繪製線條 ", 在其位置下面, 完成繪製線條功能程式 範例試卷 :HT5-0001 Page 18/21
(3) 在 " 千言萬語 " 的文字方塊中輸入文字後, 需將輸入在 " 千言萬語 " 中的文字寫到 canvas 中 開啟 draw.js, 尋找註解 "//(4) 請將使用輸入到千言萬語中的文字, 寫到 canvas 中 ", 在其位置下面, 完成寫字功能程式 (4) 按下 [ 清除按鈕 ] 時, 清除 canvas 上的內容 開啟 draw.js, 尋找註解 "//(5) 將 Canvas 中的資料清除 ", 在其位置下面, 完成清除功能程式 (5) 按下 [ 儲存按鈕 ] 後, 將 canvas 上的圖顯示在 <img> 的標籤上 開啟 draw.js, 尋找註解 "//(6) 將 Canvas 中的圖顯示在 myimg 中 ", 在其位置下面, 完成顯示功能程式 範例試卷 :HT5-0001 Page 19/21
4. 輸出結果參考圖 : 附圖一 範例試卷 :HT5-0001 Page 20/21
附圖二 5. 評分項目 : 設計項目配分得分 (1) 根據設計項目一, 設計出如 附圖二 的介面 (2) 可以在繪圖區域中, 根據選取的畫筆顏色及畫筆粗細來繪製線條 (3) 可以將輸入的文字, 繪製到繪圖區域中 8 (4) 按下清除按鈕, 清除繪圖區域中的圖形 3 (5) 按下儲存按鈕, 將繪圖區域中的圖形顯示在繪圖區域的下面 總分 30 8 8 3 範例試卷 :HT5-0001 Page 21/21