10. 作業
作業說明
一、說明
做兩個網頁，第一個網頁是一份表單，使用者輸入一些資料，然後將資料傳到第二個網頁顯示出來，給使用者做確認；然後第二個網頁可以讓使用者回前一頁去修改資料。
form.html 完成示意(有套用 CSS)：
confirm.html 完成示意(沒有套用 CSS)：
詳細說明請依照以下步驟製作開發。
二、前置
建立 html5/homework 資料夾，然後在該資料夾內，建立以下兩個檔案，檔名分別是 form.html、confirm.html。
然後確認本機端網址可以連，例： http://127.0.0.1:5500/homework/form.html 。
也在作業資料夾下，建立 css/form.css。
第一個網頁：form.html
步驟一、樣式、商品數量、清空資料按鈕
更新 form.html 檔：
form.html 檔，body 標籤內放以下原始碼：
<article class="info">
<form action="#" method="#" id="the_form">
<div class="content_block">
<div class="left_block">
<input type="file" id="p_file">
<div id="preview" class="drop_zone">
<span class="text">預覽圖</span>
</div>
</div>
<div class="right_block">
<div class="block">
<label>商品名稱：</label>
<input type="text" id="p_name" autocomplete="off">
</div>
<div class="block -middle">
<label>商品數量：</label>
<input type="range" min="1" max="10" value="1" id="p_count">
<span id="p_count_value" data-default="1"></span>
</div>
<div class="block">
<label>經度：</label><input type="text" id="lng" readonly>
<label>緯度：</label><input type="text" id="lat" readonly>
</div>
</div>
</div>
<footer class="footer">
<div class="action_block">
<div class="left_block">
<button type="button" id="btn_fullscreen">進入全螢幕模式</button>
</div>
<div class="right_block">
<button type="reset">清空資料</button>
<button type="submit" id="btn_submit">送出資料</button>
</div>
</div>
<p>是否有支援全螢幕模式：<span id="fullscreen_enable"></span></p>
<p>是否有支援地理資訊定位：<span id="geolocation_enable"></span></p>
</footer>
</form>
</article>完成以下：
1、樣式：form.html 頁面，載入 form.css 檔案。
2、商品數量：一進到頁面，商品數量的 span 標籤要顯示 1；拉動滑桿，商品數量的 span 標籤，要跟著連動。(滑桿需綁定事件：mousemove、touchmove、touchend或直接綁定 input 事件 )。
3、清空資料按鈕：針對 form 標籤，綁定 reset 事件，當 「清空資料」 按鈕，按下去之後，商品數量的 span 標籤，應回到 1。(註：span 標籤上有 data-default 屬性來表示預設值。)
步驟二、網頁畫面進入全螢幕模式
完成以下：
1、一進到頁面，「是否有支援全螢幕模式」 旁邊的藍色背景 span 標籤，要顯示 「是」 或 「否」。
2、「全螢幕按鈕」按下去，網頁要進入全螢幕模式，按鈕裡的文字要變成 「退出全螢幕模式」；如果按鈕再按一次，網頁要退出全螢幕模式，按鈕裡的文字要變成 「進入全螢幕模式」。
步驟三、使用 Geolocation 取得使用者位置經緯度
在 form.html 檔當中，加以下的 CSS：
input[disabled]{
background: #efefef !important;
cursor: not-allowed;
}完成以下：
1、一進到頁面，就抓取使用者的經緯度資料，若使用者同意，就將取得的經緯度資料，放到經緯度欄位。若使用者不同意，就將經緯度欄位加上 disabled 屬性。
2、一進到頁面，「是否有支援地理資訊定位」 旁邊的藍色背景 span 標籤，要顯示 「是」 或 「否」。
3、當使用者按下 「清空資料」 按鈕時，因為也會將經緯度欄位清空，所以要再次抓取經緯度，放回欄位上。
步驟四、使用 Drag and Drop 拖曳檔案
在 form.html 檔當中，加以下的 CSS：
#preview.-on{
box-shadow: 5px 5px 15px white inset, -5px -5px 15px white inset;
}提示：
drop事件要加上e.preventDefault()，才能夠允許取得檔案總管拖曳過來的檔案。e.dataTransfer.files：可以取得從檔案總管拖曳過來的檔案(即FileList)。
完成以下：
1、dragenter 事件觸發時，替 #preview 元素加 -on 這個 class；
dragleave 事件觸發以及 drop 事件觸發時，替 #preview 元素移除 -on 這個 class。
2、從自己電腦檔案總管，拖曳圖檔到頁面上的 「預覽圖」 區域，取得 FileList 物件，在 Console 中印出來看。
步驟五、透過 File 物件顯示預覽圖
從 「自己電腦」 拖曳圖片檔案，或點選 「預覽圖」 來選圖，都要呈現預覽圖。為簡化，做選一張圖就好。也就是 「預覽圖」 區域，僅顯示一張圖。
完成以下：
1、點擊 「預覽圖」 區域，跳出選圖的彈窗，然後將圖片在 「預覽圖」 區域呈現，圖片需加上 preview_img 這個 class，才不會太大張。
2、預覽圖顯示成功後，如果使用者再點擊選圖，然後按 「取消」，預覽圖區域需回到原介面。
3、從電腦的檔案總管，用拖曳的方式，也要能呈現預覽圖。結果同上。
4、按下 「清空資料」 按鈕，也要將「預覽圖」區域，回到原來的介面。
步驟六、使用 Session Storage 儲存資料
做到這邊，共有以下幾個資料可以取得，假設都是必填：
商品名稱
商品數量
商品圖片(Base64)
使用者位置經緯度
完成以下：
1、在按下 「送出資料」 按鈕時，將以上資料存到 Session Storage，並且將頁面導向到 confirm.html 頁面。
導向到 confirm.html 頁面的程式，可使用：
location.href = "./confirm.html";定義存資料到 Session Storage 的格式：
key的名稱為：form_datavalue的格式為以下範例：
{
p_name: "這是商品名稱",
p_count: "5",
img_base64: "abdee",
position: {
lng: "121.12345",
lat: "21.12345"
}
}第二個網頁：confirm.html
步驟一、從 Session Storage 取得資料並顯示在頁面上
將 sessionStorage 的資料，顯示在 confirm.html 網頁上，只要能將資料放到頁面上即可，資料有：
商品名稱
商品數量
位置資訊經度
位置資訊緯度
商品圖
步驟二、使用 Web Worker 計時
在 homework 資料夾內，建立 js 資料夾，然後在其內建立 worker_countdown.js 檔案。
使用 worker 來倒數計時 10 秒，10秒內要確認資料，若數完 10 秒，則畫面停住就不再計時；需在 10 秒內按下 「確認」 按鈕然後，結束 worker 的倒數計時。
步驟三、重填，使用 history 返回前頁
接續上個步驟，倒數完 10 秒之後，返回前一頁重填資料；或按下 「
重填」 按鈕，返回前一頁重填資料。返回前一頁時，需判斷
sessionStorage.getItem("form_data")是否有資料，若有的話，需將資料填回到原本的表單。若按下 「清空資料」 按鈕，也需將
sessionStorage裡的資料清空。
繳交方式
最晚繳交日期：0/(日) 晚上 12 點之前。
請將 homework 資料夾壓成壓縮檔，然後透過以下網址繳交：
前端班： https://frontend.tibame.com/
Java 班： https://java.tibame.com/
參考作法
Last updated