重金屬AI工程師的Coding分享

6個帥到爆的HTML5電子書翻頁效果,不學嗎??

想轉職程式工程師的你一定不能錯過本HTML5基礎系列!本篇是(13)-SVG路徑動畫

想轉職程式工程師的你一定不能錯過本HTML5基礎系列!本篇是(12)-SVG基本圖形動畫 
SVG 基本圖形動畫

前端工程師 們可以使用 <animate> 元素來繪製 SVG 動畫。
首先我們可以先來繪製一個方形，並且將動作設定在三秒鐘內往右移動，接下來重複相同的動作 3 次。

HTML5 原始碼與結果如下所示：
See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.
以上所有的

HTML5 標籤說明如下：

<attributeName>
屬性名稱，就是當你指定了這個屬性，就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移，水平移動的座標為 x，所以該例中 attributeName 為 x。若為垂直移動的話，attributeName 則為 y。

<from>
動畫開始時的屬性值。

<to>
結束動畫時的屬性值。

<dur>
動畫持續時間。

<repeatCount>
動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3；若要動畫無限重複的話， repeatCount 則設為 indefinite。

<fill (freeze | remove)>
這裡的 fill 不代表填色，而是指定動畫結束時的屬性，屬性可選 freeze 或是 remove，remove 是預設值，也就是動畫結束之後，圖形返回原本的狀態，而 freeze 則是在動畫結束後，固定在結束的狀態

 
 
參考連結:
HTML5菜鳥入門課程(1)-7個內容模組簡介

HTML5菜鳥入門課程(2)-三大基本元素排版



HTML5菜鳥入門課程(3)-文章標題,選項與網頁側欄元素排版

前端工程師不可不知的網頁顏色代碼,今天直接整理給你!

前端工程師入門款小常識-CSS碼特性一下就上手!

前端工程師必知第二課-CSS碼的Class選擇器宣告法


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

想轉職程式工程師的你一定不能錯過本HTML5基礎系列!本篇是(11)-用SVG向量圖取代點陣圖.

想轉職程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(10)-Drag and Drop API(下).
 
數據傳輸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菜鳥入門課程(1)-7個內容模組簡介

HTML5菜鳥入門課程(2)-三大基本元素排版

HTML5菜鳥入門課程(9)-Drag and Drop API(上)

前端工程師不可不知的網頁顏色代碼,今天直接整理給你!

前端工程師入門款小常識-CSS碼特性一下就上手!

前端工程師必知第二課-CSS碼的Class選擇器宣告法


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

 
想轉職程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(9)-Drag and Drop API(上).
 
HTML5 Drag & Drop API-讓元素變得可拖曳
過去在網頁裡面要靠HTML4實現 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菜鳥入門課程(7)-Web Storage 瀏覽器儲存

HTML5菜鳥入門課程(8)-Geolocation API簡介

HTML5菜鳥入門課程(10)-Drag and Drop API(下)


靠這三技能,前端工程師向"不專業"說再見~(1)RWD基礎觀念


靠這三技能,前端工程師向"不專業"說再見~(2)流動布局


靠這三技能,前端工程師向"不專業"說再見~(3)媒體查詢

達內教育開幕　培養台灣IT人才進入全球企業 ​​​​​​​

想轉職程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(8)-Geolocation API簡介.
 
什麼是地理位置定位 (Geolocation) API?
在進行 HTML5 網頁設計時，前端工程師可利用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量，一定要獲得使用者同意才可使用。對於具有GPS（如智慧型手機等）的設備，地理位置更為準確。
用法
使用 Geolocation 的主要方法是 getCurrentPosition，可以讀取到用戶設備的當前地理位置。語法如下：
(※以下的語法通通都是寫在 Javascript裡)
navigator.geolocation.getCurrentPosition();
參數：
 
呈現數據
地理位置定位 (Geolocation API) 可以使用兩種方式呈現：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 (東北)

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

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

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

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


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

 
 
參考連結:

想轉職程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(7)-Web Storage 瀏覽器儲存.

 
想轉職程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(6)-progress載入進度顯示條.
比起 HTML4，HTML5 新增的元素可說是應有盡有,多元富變化。其中還有 <progress> 元素，讓前端工程師可以用來顯示網頁的載入進度、或是上載、下載的進度等等。
想要在 HTML5 中使用 <progress> 元素載入進度條 (progress bar) 的語法與結果範例如下：
See the Pen progress bar by Tedutw (@Tedutw) on CodePen.
上述的 <progress> 標籤，最大值設定為 100%、最小值設定為 0%。其進度是固定在 22% (語法：<progress value="22" max="100">) 的。如果希望進度條的進度能隨著網頁實際 loading 進度顯示的話，則需要配合 javascript 來設定。


HTML5新增元素目錄：

 

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


2. header,nav與footer元素


3. article,section與aside元素


4. audio影片嵌入元素


5. video影片嵌入元素


6. progress載入進度顯示條

 
 
參考連結:


HTML5新手入門課程(5)-video影片嵌入

HTML5菜鳥入門課程(7)-Web Storage 瀏覽器儲存

HTML5菜鳥入門課程(8)-Geolocation API簡介

前端工程師必知第一課-CSS碼一秒搞清楚!

前端工程師必知第二課-CSS碼的Class選擇器宣告法

前端工程師必知第三課-CSS碼的ID選擇器宣告法

NOWnews 今日新聞

想轉職程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(5)-video影片嵌入.