HT5-0002

Size: px

Start display at page:

Download "HT5-0002"

追麻
7 years ago
Views:

1 網頁程程式設計 HTML5 範例試卷認證說明與注意事項一本項考試包含測驗題題及操作題, 所需總時間為 100 分鐘, 時間結束前需完成所有考試動動作成績計算滿分為 100 分, 合格分數為 70 分二測驗題考試時間為 20 分鐘, 操作題考試時間為 80 分鐘, 唯測驗題剩剩餘時間會加至操作題測驗驗時間三測驗題為單複選混混合二十題, 每題 1 分, 小計 20 分操作題為三大題, 第一大題至第第二大題每題 25 分, 第三大題每題 30 分, 小計 80 分四需使用本機所附的瀏瀏覽器進行驗證五測驗題直接出現於電電腦螢幕, 請依序作答計時終了, 所填入入之答案將自動存檔, 且不不得再作更改六操作題所需的檔案皆皆於 C:\ANS.CSF 資料夾內讀取題目存檔方式, 請依題目指示儲存於 C:\ANS.CSF 資料夾, 測驗結束前必須自行存檔, 檔案名稱錯誤或未未自行存檔者, 均不予計分七操作題每大題之各評評分點彼此均有相互關聯, 作答不完整, 將影響各評分點之得分, 請特別注意題意內未要求修改之設定值, 以原始設定為準, 不需另另設八試卷內 0 為阿拉伯數數字,O 為英文字母, 作答時請先確認所所有滑鼠左右鍵位之訂定, 以右手操作方式為準, 操作者請自行對應鍵位九有問題請舉手發問, 切勿私下交談範例試卷 :HT Page 1/21

2 壹測驗題 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 範例試卷 :HT Page 2/21

3 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 範例試卷 :HT Page 3/21

4 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=" " value=" .com"/> </body> (A) 甲 (B) 乙 (C) 丙 (D) 無法執行 09. 關於表單資料的跨域通訊, 下列哪些網址會有跨域通訊的限制? ( 複選 ) (A) 與 (B) 與 (C) 與 (D) 與範例試卷 :HT Page 4/21

5 10. 如附圖所示, 在 <canvas> 標籤中, 若想將直線的端點設計為圓柱狀, 需使用下列哪一種屬性? (A) linestyle (B) linecap (C) lineround (D) linemode 11. 如附圖所示, 用 <canvas> 標籤繪製二次方曲線, 會使用下列哪一種方法? (A) arcto (B) curveto (C) quadraticcurveto (D) beziercurveto 12. 如附圖所示程式碼, 下列哪一項為執行結果? <svg xmlns=" 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) 丁範例試卷 :HT Page 5/21

6 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) 範例試卷 :HT Page 6/21

7 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); 範例試卷 :HT Page 7/21

8 17. 如附圖所示程式碼, 會產生下列哪一種效果? <svg xmlns=" 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); 範例試卷 :HT Page 8/21

9 19. 如附圖所示程式碼, 如果使用者不願意提供所在位置資訊, 在程式碼的 err 變數 ( 方框處 ), 將取得下列哪一種錯誤代號? <script> Navigator.geolocation.getCurrentPosition(successCallback,errorCallback); function errorcallback(error){ var err=error.code;} </script> (A) 3 (B) 2 (C) 1 (D) 如附圖所示程式碼, 在底線的位置, 要加入下列哪一段程式碼, 才能將使用者的選取的檔案顯示在網頁上? <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) 範例試卷 :HT Page 9/21

10 貳操作題 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 應如附圖一所示範例試卷 :HT Page 10/21

11 (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 應如附圖二所示範例試卷 :HT Page 11/21

12 4. 輸出結果參考圖 : 附圖一範例試卷 :HT Page 12/21

13 附圖二附圖三範例試卷 :HT Page 13/21

14 附圖四附圖五 5. 評分項目 : 設計項目配分得分 (1) 呈現結果如附圖一所示 4 (2) 呈現結果如附圖二所示 4 (3) 呈現結果如附圖三所示 9 (4) 呈現結果如附圖四所示 4 (5) 呈現結果如附圖五所示 4 總分 25 範例試卷 :HT Page 14/21

$二. 輸入提示檢查 1. 題目說明 : HTML5 新增了一些新類型的輸入元素及新屬性, 目前來說並不是所有的瀏覽器都支援, 此試題用來評核受測者是否了解, 對於不支援的瀏覽器該如何讓使用者有一樣的使用體驗 2. 作答須知 : (1) 使用 C:\ANS.$

15 二. 輸入提示檢查 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 瀏覽器呈現結果如附圖二所示範例試卷 :HT Page 15/21

16 (2) 帳號輸入的欄位中設定了 required 屬性, 使用 chrome 瀏覽器瀏覽 Form.html 網頁時, 按下送出按鈕後, 會檢查帳號欄位是否輸入, 沒有輸入將顯示錯誤訊息需求 : 讓 IE9 瀏覽器也具備上述功能, 使用 Chrome 瀏覽器呈現結果如附圖三所示; 使用 IE9 瀏覽器則會跳出如附圖四所示的視窗訊息 (3) 電子郵件輸入的欄位中設定了 placeholder 屬性, 所以 chrome 瀏覽器瀏覽 Form.html 網頁時, 會有輸入電子郵件的提示語, 當使用者在電子郵件輸入欄位中輸入文字時, 提示的字會自動清除, 如果將電子郵件輸入欄位中輸入的文字清除, 然後將滑鼠點選其他輸入欄位, 提示的字會再自動填回去需求 : 讓 IE9 瀏覽器也具備上述功能, 使用 Chrome 瀏覽器呈現結果如附圖五所示; 使用 IE9 瀏覽器呈現結果如附圖六所示 4. 輸出結果參考圖 : 附圖一附圖二附圖三附圖四範例試卷 :HT Page 16/21

17 附圖五附圖六 5. 評分項目 : 設計項目 (1) 使用 Chrome 及 IE9 分別測試, 網頁載入時, 皆要看到滑鼠游標在帳號的文字輸入方塊中閃爍 (2) 使用 Chrome 及 IE9 分別測試, 如果帳號未輸入, 按下 " 送出 " 按鈕時, 皆會出現未輸入帳號提示, 如附圖三及附圖四 (3) 使用 Chrome 及 IE9 分別測試, 網頁載入時, 皆要看到 " 請輸入電子郵件 " 的提示, 如附圖五及附圖六, 詳細點擊行為需見設計項目 (3) 的說明總分 25 配分得分範例試卷 :HT Page 17/21

18 三. 圖形繪製 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) 請根據選擇的畫筆顏色及畫筆粗細來繪製線條 ", 在其位置下面, 完成繪製線條功能程式範例試卷 :HT Page 18/21

19 (3) 在 " 千言萬語 " 的文字方塊中輸入文字後, 需將輸入在 " 千言萬語 " 中的文字寫到 canvas 中開啟 draw.js, 尋找註解 "//(4) 請將使用輸入到千言萬語中的文字, 寫到 canvas 中 ", 在其位置下面, 完成寫字功能程式 (4) 按下 [ 清除按鈕 ] 時, 清除 canvas 上的內容開啟 draw.js, 尋找註解 "//(5) 將 Canvas 中的資料清除 ", 在其位置下面, 完成清除功能程式 (5) 按下 [ 儲存按鈕 ] 後, 將 canvas 上的圖顯示在 <img> 的標籤上開啟 draw.js, 尋找註解 "//(6) 將 Canvas 中的圖顯示在 myimg 中 ", 在其位置下面, 完成顯示功能程式範例試卷 :HT Page 19/21

20 4. 輸出結果參考圖 : 附圖一範例試卷 :HT Page 20/21

21 附圖二 5. 評分項目 : 設計項目配分得分 (1) 根據設計項目一, 設計出如附圖二的介面 (2) 可以在繪圖區域中, 根據選取的畫筆顏色及畫筆粗細來繪製線條 (3) 可以將輸入的文字, 繪製到繪圖區域中 8 (4) 按下清除按鈕, 清除繪圖區域中的圖形 3 (5) 按下儲存按鈕, 將繪圖區域中的圖形顯示在繪圖區域的下面總分範例試卷 :HT Page 21/21

Microsoft Word 範例試卷編號：HT docx

Microsoft Word 範例試卷編號：HT docx 範例試卷編號 :HT5-0001 網頁程式設計 HTML5 範例試卷認證說明與注意事項一本項考試為測驗題, 所需總時間為 40 分鐘, 時間結束前需完成所有考試動作成績計算滿分為 100 分, 合格分數為 70 分二測驗題為單複選混合五十題, 每題 2 分三測驗題直接出現於電腦螢幕, 請依序作答計時終了, 所填入之答案將自動存檔, 且不得再作更改四試卷內 0 為阿拉伯數字,O