Java瑪奇朵-非本科系的IT吃喝電玩日誌

正在使用HTML5的前端工程師夠了解瀏覽儲存器嗎?今天就來好好地向大家介紹一下~快學起來喔!!

今天的HTML5課程要來和大家分享一個變得超好用的工具!!那就是Drag and Drop!!她變得可以直接使用了~是不是很方便~
HTML5 Drag & Drop API-讓元素變得可拖曳
過去在網頁裡面實現 Drag & Drop 是很麻煩的，需要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制，讓前端工程師可直接使用 drag and drop 的功能，讓使用者透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。
所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性，如下例 (讓圖片變得可以拖曳)：
<img draggable="true" />
HTML5 Drag & Drop API 的範例
See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.
讓元素可拖放-HTML的部分
除了<a>、<img>，其他 HTML 裡的元素本來是被預設為不可以作為源元素的，也就是我們本來是「拖不動」 它的。但在 HTML5，只要為它加上 draggable="true" 屬性，它就能「被拖曳」了。下面是上例的 HTML 碼的一部分：
See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.
draggable 屬性上加了 draggable="true"，這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據，因此需要加上下面的代碼。這樣可以確保它可以被拖曳。
See the Pen HTML 5 Drag and Drop-2 by Tedutw (@Tedutw) on CodePen.
Javascript-添加拖曳特效
首先，我們想讓拖曳元素為半透明。我們可以監聽 dragstart 事件：
draggable.addEventListener（“dragstart”，（ev）=> {
ev.target.style.opacity = “。5” ;
}）;
See the Pen HTML 5 Drag and Drop-3 by Tedutw (@Tedutw) on CodePen.
然後我們監聽 dragend ，讓它在拖動結束後還原透明度：
draggable.addEventListener（“dragend”，（ev）=> {
ev.target.style.opacity = “” ;
}};
See the Pen HTML 5 Drag and Drop-4 by Tedutw (@Tedutw) on CodePen.
接下來，我們希望讓 「Drag Me」元素進入藍色的目標元素時，目標元素變成虛線。於是我們為所有的 dropzone 都監聽了 dragenter 及 dragleave 事件，這樣當我們拖動 「Drag Me」元素進入這些藍色的目標元素時，目標元素的邊框就變成虛線，直到「Drag Me」元素離開時變回實線：
let dropzones = document.querySelectorAll('.dropzone');
dropzones.forEach((dropzone) => {
dropzone.addEventListener('dragenter', (ev) => {
ev.preventDefault();
dropzone.style.borderStyle = 'dashed';
return false;
});
dropzone.addEventListener('dragover', (ev) => {
ev.preventDefault();
return false;
});
dropzone.addEventListener('dragleave', (ev) => {
dropzone.style.borderStyle = 'solid';
});
});
See the Pen HTML 5 Drag and Drop-5 by Tedutw (@Tedutw) on CodePen.
以上

Javascript 重點如下：
 

HTML 本身預設為幾乎所有的元素是無法拖曳的，所以上例在 dragenter 與 dragover 中使用 ev.preventDefault() 是為了阻止這樣的預設行為。

ev.target 指的是紅色的、寫著「Drop Me」的源元素、dropzone 是指藍色的目標元素，所以在 dragenter 中，我們用 dropzone 參數來修改樣式

以上我們完成「拖」的動作，接下來要處理「放」的結果，請見下篇：
其他閱讀
超級實用的HTML5入門課程(八):地理位置定位
超級實用的HTML5入門課程(九)下:Drag and Drop簡介
超級實用的HTML5入門課程(十):SVG簡介
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

大家都看過HTML5 Drag and Drop上篇了嗎?下篇一起看學得更多!!大家一起學習進步吧!!
數據傳輸DataTransfer
拖曳動作的目的，是為了對來源和目標元素做操作。為了完成整個操作，就需要在來源元素和目標元素間傳輸數據。在 HTML5 中，我們透過 Javascript 的 DataTransfer 完成數據傳輸。
我們在上例的 dragstart 時，就設置需要傳輸的數據，在 drop 中獲取需要的數據。 event.dataTransfer 提供了兩個主要函數：
 

setData(format, data)：用於添加數據，一般 format 對應於 MIME 類型字符串，常見的有 text/plain、text/html 及 text/uri-list 等，但同時也可以是任意自定義的類型；不幸的是 data 只能是 string 或 file。

getData(format)：用於獲取數據。

 
現在，我們的目的是要教

前端工程師將 「Drag Me」元素放到其它藍色的目標元素中，如此就需要傳輸它的 ID ，通過下面的 Javascript 語法來實現：
draggable.addEventListener（'dragstart'，（ev）=> {
ev.target.style.opacity = “。5” ;
//設置ID
ev.dataTransfer.setData（'text / plain'，ev.target.id）;
}）;
dropzones.forEach（（dropzone）=> {
dropzone.addEventListener（'drop'，（ev）=> {
ev.preventDefault（）
ev.target.style.borderStyle = 'solid' ;
//獲取ID const sourceId = ev.dataTransfer.getData（'text / plain'）
ev.target.appendChild（document .getElementById（sourceId）） }）}）;

 

在 dragstart 時，透過 setData 將 ID 放入 DataTransfer 中

在drop事件中，透過 getData 獲取元素 ID ，並透過 appendChild 加入到藍色的目標元素中。

 
結果如下：
See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

至此，這一個 HTML5 Drag&Drop API 的基礎範例教學就結束了。為了實現這麼一個簡單的拖曳 API 事件，就有 6 個事件要操作。因此從前端工程師入門教學的角度來說，HTML5 Drag&Drop API 的實現，其實並不容易。
 
 
 
其他閱讀
前端工程師不能錯過的HTML5:Drag and Drop簡介(上)
前端工程師不能錯過的HTML5:瀏覽儲存器Web Storage
前端工程師不能錯過的HTML5:地理位置定位
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

本篇HTML5入門課要跟大家介紹好用的地理位置定位,但要小心隱私權才行喔!!
什麼是地理位置定位 (Geolocation) API?
在 HTML5 網頁，前端工程師可使用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量，一定要獲得使用者同意才可使用。對於具有GPS（如智慧型手機等）的設備，地理位置更為準確。
用法
使用 Geolocation 的主要方法是 getCurrentPosition，可以讀取到用戶設備的當前地理位置。語法如下：
(※以下的語法通通都是寫在 Javascript裡)
navigator.geolocation.getCurrentPosition();
參數：

showLocation（必要項目）：是個函式，於瀏覽器成功判斷出位置後呼叫。

ErrorHandler（非必要）：是另一個函式，於發生問題，瀏覽器無法判斷出位置時呼叫。

options（非必要）：此參數能讓我們自訂geolocation運作的方式。

呈現數據
HTML5裡的地理位置定位 (Geolocation API) 可以使用兩種方式呈現：Geodetic(地理測量) 與 Civic(城市)：

Geodetic (地理測量) 直接呈現經緯度座標表示位置、水平線上的距離 (如公尺) 表示高度等

Civic (城市) 則用能使大多數人理解的方式呈現：城市名表示位置、樓層數表示高度等

 


屬性
Geodetic
Civic


Position (位置)
25.0,121.6
Taipei (台北)


Elevation (高度)
508 meters (508公尺)
101th floor (101樓)


Heading (以360度表示的方向)
234 degrees (234度)
City Centre (市中心)


Speed (速度)
5km/h (時速5km)
Walking (步行)


Orientation (手機的擺放方向)
45 degrees (45度)
North-East (東北)


 
 
 
 
其他閱讀
超級實用的HTML5入門課程(七):瀏覽儲存器Web Storage
超級實用的HTML5入門課程(九)上:Drag and Drop簡介
超級實用的HTML5入門課程(九)下:Drag and Drop簡介
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

新的HTML5讓Drag and Drop變得更好用的!!想了解詳情的話看這篇就對啦!!
HTML5 Drag & Drop API-讓元素變得可拖曳
過去在網頁裡面實現 Drag & Drop 是很麻煩的，需要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制，讓前端工程師可直接使用 drag and drop 的功能，讓使用者透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。
所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性，如下例 (讓圖片變得可以拖曳)：
<img draggable="true" />
HTML5 Drag & Drop API 的範例
See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.
讓元素可拖放-HTML的部分
除了<a>、<img>，其他 HTML 裡的元素本來是被預設為不可以作為源元素的，也就是我們本來是「拖不動」 它的。但在 HTML5，只要為它加上 draggable="true" 屬性，它就能「被拖曳」了。下面是上例的 HTML 碼的一部分：
See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.
draggable 屬性上加了 draggable="true"，這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據，因此需要加上下面的代碼。這樣可以確保它可以被拖曳。
See the Pen HTML 5 Drag and Drop-2 by Tedutw (@Tedutw) on CodePen.
Javascript-添加拖曳特效
首先，我們想讓拖曳元素為半透明。我們可以監聽 dragstart 事件：
draggable.addEventListener（“dragstart”，（ev）=> {
ev.target.style.opacity = “。5” ;
}）;
See the Pen HTML 5 Drag and Drop-3 by Tedutw (@Tedutw) on CodePen.
然後我們監聽 dragend ，讓它在拖動結束後還原透明度：
draggable.addEventListener（“dragend”，（ev）=> {
ev.target.style.opacity = “” ;
}};
See the Pen HTML 5 Drag and Drop-4 by Tedutw (@Tedutw) on CodePen.
接下來，我們希望讓 「Drag Me」元素進入藍色的目標元素時，目標元素變成虛線。於是我們為所有的 dropzone 都監聽了 dragenter 及 dragleave 事件，這樣當我們拖動 「Drag Me」元素進入這些藍色的目標元素時，目標元素的邊框就變成虛線，直到「Drag Me」元素離開時變回實線：
let dropzones = document.querySelectorAll('.dropzone');
dropzones.forEach((dropzone) => {
dropzone.addEventListener('dragenter', (ev) => {
ev.preventDefault();
dropzone.style.borderStyle = 'dashed';
return false;
});
dropzone.addEventListener('dragover', (ev) => {
ev.preventDefault();
return false;
});
dropzone.addEventListener('dragleave', (ev) => {
dropzone.style.borderStyle = 'solid';
});
});
See the Pen HTML 5 Drag and Drop-5 by Tedutw (@Tedutw) on CodePen.
以上

Javascript 重點如下：
 

HTML 本身預設為幾乎所有的元素是無法拖曳的，所以上例在 dragenter 與 dragover 中使用 ev.preventDefault() 是為了阻止這樣的預設行為。

ev.target 指的是紅色的、寫著「Drop Me」的源元素、dropzone 是指藍色的目標元素，所以在 dragenter 中，我們用 dropzone 參數來修改樣式

以上我們完成「拖」的動作，接下來要處理「放」的結果，請見下篇：
其他閱讀
前端工程師不能錯過的HTML5:Drag and Drop簡介(下)
前端工程師不能錯過的HTML5:瀏覽儲存器Web Storage
前端工程師不能錯過的HTML5:地理位置定位
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

HTML5入門篇又來啦!!今天要跟大家分享的是瀏覽儲存器!!更安全速度更快的瀏覽器你一定要試試!!
在 HTML5 之前，前端工程師要在用戶端瀏覽器儲存資料，會使用 cookies。HTML5 新增了 Web Storage 功能，取代了只能儲存 4kb 的 cookies。
Web Storage 的優點 (與 cookies 比較)：

更安全

過往儲存於 cookies 中的資料，會在用戶端瀏覽器與伺服器之間運行：因為每次用戶端瀏覽器送出 request 至伺服器時，cookies 就會跟著被夾帶，就會占用到頻寬，而 Web Storage 因為純粹運作於用戶端用戶端瀏覽器，不會在用戶端瀏覽器與伺服器之間運行，所以就不需要占用網路頻寬。

以往 cookies 最多只能儲存 4KB 的資料，而 HTML5 Web Storage 的儲存空間大得多，其容量依各個瀏覽器而不同，但是一般都至少有 5MB。

速度更快

 
Web Storage 有分兩種：sessionStorage() 和 localStorage()。二者的最大的差異在於「生命週期長短」。
數據的生命期
localStorage：儲存於 localStorage 的資料可永久保存，可以跨瀏覽器分頁、新視窗、甚至是關閉瀏覽器後再打開，localStorage 仍然會存在，永不逾期，除非被清除。
sessionStorage：sessionStorage 的生命周期只存在於瀏覽器的單一分頁，也就是另開新分頁的話，又是一個新的 sessionStorage。除非另外設定逾期時間，否則 sessionStorage 會於分頁、瀏覽器等被關閉時被清除。 ※以下的語法通通都是寫在 Javascript裡
有效範圍
儲存於 local storage 的資料可以跨分頁（tab）運作，session storage 則不行。
用法
sessionStorage 和 localStorage 的語法都簡單且類似。其資料都是以 key/value pairs 的形式儲存。
儲存資料
localStorage.setItem("Key名稱", "字串值");
取得資料
//this will print the value
alert(localStorage.getItem("Key名稱"));
移除資料
localStorage.removeItem("Key名稱");
移除所有資料
localStorage.clear();
以上的語法是以 localStorage 為例來示範，若是用儲存於 sessionStorage，把以上語法中的 「localStorage」 替換成 「sessionStorage」 即可。
 
 
 
其他閱讀
超級實用的HTML5入門課程(八):地理位置定位
超級實用的HTML5入門課程(九)上:Drag and Drop簡介
超級實用的HTML5入門課程(九)下:Drag and Drop簡介
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

有了HTML5的audio之後你還在用舊版的HTML4插入外掛播放音檔嗎?那就太落伍啦!!

今天的HTML5入門基礎課要來教大家好用的網頁內容相關語意元素!!學會了之後還能提升SEO優化喔!!

前端工程師幾乎天天都會用到的HTML5你都熟悉嗎?今天要和大家介紹的是嵌入影片的新增元素,別錯過!!
HTML5新增video元素-終於可以撥放影片了!
在 HTML5 版本出現之前，網頁排版只有<div>和<span>兩種元素而已，早已無法應付現今功能越來越齊全的網頁 —— 甚至連撥放影音的元素都沒有。在 HTML4，要在網頁中聽音樂或看到影片，只能透過像是 Flash 之類的外掛。 而 HTML5 中的 <video> 元素提供了可直接在網頁中嵌入影片檔的方式。
要在 HTML5 中使用 <video> 元素嵌入影片檔的語法與結果範例如下：
See the Pen video element pt.1 by Tedutw (@Tedutw) on CodePen.
上述的<vidio controls>標籤作用為叫出影片撥放介面(撥放、全螢幕音量控制等)。若如上述的例子，影片檔案太大的話，也可以在<vidio>標籤內指長寬，範例如下:
See the Pen video element pt.1-width&height by Tedutw (@Tedutw) on CodePen.
<source src="...">元素可以指定撥放的影片檔 URL，後方的「type="video/mp4"」為宣告媒體種類(media type)的指令，在此例中宣告檔案類型是 mp4 檔。 以下為檔案類型與媒體種類 (media type) 的對照：


檔案類型
媒體種類 (media type)


MP4
video/mp4


WebM
video/webm


Ogg
video/ogg


HTML5 支援的音訊檔案有三種：MP4、WebM 與 OGG。
<video> 與 </video> 標籤中夾帶的「Video is not supported by your browser」，中譯為：「你的瀏覽器不支援 video 元素」，平時不會出現，只會在當使用者使用的瀏覽器不支援 <video> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的視訊檔「.mp4」、「.webm」與「.ogg」。但是 IE 與 Safari 瀏覽器就就不支援副檔名為「.webm」與「.ogg」的視訊檔。
<video> 標籤中的「自動撥放」與「重複撥放」指令
上述提到，<video> 標籤可以讓音訊控制面板 (功能有撥放、暫停與音量控制) 顯現。除此之外，前端工程師還可以為 <video> 標籤下定義，指定音訊檔是否要自動撥放或是重複撥放。
自動撥放
如果在 <video> 標籤中指定「自動撥放(<video controls autoplay>)」的話 ，則嵌入的視訊檔會在網頁 loading 好後自動撥放，不會事先問使用者是否要撥放。語法如下： (可點右方的「Result」按鈕看結果，即會自動撥放視訊。)
See the Pen video element pt.2-auto by Tedutw (@Tedutw) on CodePen.
重複撥放
如果在 <video> 標籤中指定「重複撥放(<video controls loops>)」的話 ，則嵌入的視訊檔會在影片撥放完畢後自動重播。語法如下： (「Result」中的影片撥放結束後，即會自動重播視訊。)
See the Pen video element pt.2-loop by Tedutw (@Tedutw) on CodePen.


HTML5新增元素目錄：
 

1. HTML5的7個內容模組Content Models


2. header,nav與footer元素


3. article,section與aside元素


4. audio影片嵌入元素


5. video影片嵌入元素


6. progress載入進度顯示條

其他閱讀
超級實用的HTML5入門課程(三):網頁內容相關語意元素
超級實用的HTML5入門課程(四):嵌入音訊元素audio
超級實用的HTML5入門課程(六):載入進度的顯示條

重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？