前衛金屬大團今年MV,預測人工智慧主宰的未來!?

前衛金屬大團今年MV,預測人工智慧主宰的未來!?
前衛金屬大團今年MV,預測人工智慧主宰的未來!?

人工智慧主宰的未來到底會如何?快來看看前衛金屬大團2019年發行的第14張專輯吧!


前衛金屬樂團Dream Theater在今年的新歌「Paralyzed」的MV中,預言以AI人工智慧主導的未來

在 AI人工智慧尚未完全主導我們未來的產業以前,現在已有許多電影、小說、音樂等藝術作品都有以 AI人工智慧為創作主題。來自美國、由柏克萊 (Berklee) 音樂學院高材生主導、也是當今重金屬音樂界中最具影響力、最具開創性的前衛金屬樂團 Dream Theater 在今年 2019 發行的第 14 張錄音室專輯 「Distance Over Time」 也是以即將成為主流的 AI人工智慧機器人做為主題、未來為時空背景,創作音樂與影像。


Dream Theater 以 AI人工智慧為主題,貫穿 2019 年發行的第 14 張錄音室的專輯 「Distance Over Time」

在專輯裡中的主打曲目之一「Paralyzed」被拍成音樂錄影帶,以拿著人類骨骸的 AI 機器人為開場,影片中敘述在不久的將來, AI人工智慧機器人將會在沒有人類的狀況下,持續進化並且持續生產出更多的機器人。搭配著吉他手 John Petrucci 與鍵盤手 Jordan Rudess 流暢又有淡淡哀傷的小調音色此起彼落、2011 年新加入的鼓手 Mike Mangini 沉重的雙大鼓交錯、還有主唱 James LaBrie 的渾厚歌聲,完美呈現了AI人工智慧為主流產業的未來。


當代最具影響力的前衛金屬樂團 Dream Theater 目前的 line-up 包含主唱 James LaBrie (中)、吉他手 John Petrucci (右一)、貝斯手 John Myung (左二)、鍵盤手 Jordan Rudess (左一) 與鼓手 Mike Mangini (右二)。(圖片網址:https://metalheadzone.com/wp-content/uploads/2019/03/dream-theater-2019.jpg)

這張專輯在推出後也在音樂圈子中獲得好評:AllMusic 4顆星、Metacritic 也給予 82 的高分評價,在 2019 年 2 月 22 日發行的當天,iTunes 就把這張專輯列入百大最佳專輯榜中。

而該專輯的封面,是 AI 人工智慧機器人的手握著人類頭骨的畫面,符合著專輯主題 「Distance Over Time」 。想不到這樣的創意被美國的紐約時報抄襲,該報社發行的雜誌,其中一期的封面也是機器人的手握著人類頭骨。可見人工智慧成為產業的趨勢已是不爭的事實,將會主導著各行各業的未來。如果你也想在未來卡位 AI 產業,就先來熟悉 Python 程式語言吧!

 

 

 

 

推薦文章:
人工智慧寫作能力勝過人類,文章新聞真假難辨!


玩這個會上癮!和Google人工智慧玩圖片猜一猜!


蒙娜麗莎不僅會笑還會眨眼睛?!全靠人工智慧辦到了!


達內課程先就業再付款- 中時電子報


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤


前端工程師必備知識之CSS字體單位解釋(上)-絕對單位篇

菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?

菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?
菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?

在學HTML5的時候,常常聽到前輩說SVG圖檔比點陣圖還好用,到底該怎麼用呢?

何謂 SVG?

在以往網頁設計常使用的圖片檔如 jpg、png、gif 等都是以點陣圖模式呈現,但是目前時下最流行的 RWD 響應式網頁是可以隨著螢幕調整網頁布局,點陣圖隨著螢幕大小縮放就會有模糊失真的疑慮,因此HTML5的向量的 SVG 是不錯的解決方法。

SVG(Scalable Vector Graphics,可縮放向量圖形)是 W3C 制定的開放性網路標準之一,此圖片格式再網頁中能以向量格式呈現圖片。網頁設計師可先在 Adobe Illusrator 中畫好向量圖形並存成 SVG 檔,在放在網頁中。運用方式其實就跟 .jpg、.png、.gif 等圖片檔一樣,但不同的是 SVG 檔不會因尺寸的改變而失真,日後要修改時也可直接開啟檔案修改,相當方便。

如何置入 SVG 影像到網頁中?

如同 .jpg、.png、.gif 的方式,SVG 圖檔使用 img 標籤被置入到 HTML5 檔中,如下方所示:

<img src="image.svg" alt="" height="300" />

使用 SVG 畫圖形

要用 SVG 畫出簡單的圖形,首先前端工程師要使用 SVG 標籤製作「畫布」。要賦予其畫布的長寬 (width、height) 屬性,如下例所示:

<svg width="1000" height="1000"></svg>

在此我們先舉「畫圓形」為例子,如下所示:

<svg width="2000" height="2000">
   <circle cx="80" cy="80" r="50" fill="magenta" />
</svg>
  • – cx 圓心之x軸座標
  • – cy 圓心之 y 軸座標
  • – r 半徑
  • – fill 填滿色彩
  • – stroke 圓形外框

結果如下所示:

See the Pen svg circle by Tedutw (@Tedutw) on CodePen.

同理, SVG 也可以用來「畫方形」。標籤中的「circle」要改成「rect」,半徑與圓心的屬性都要換成長與寬,原始碼與結果如下所示:

See the Pen svg rect by Tedutw (@Tedutw) on CodePen.

同理可證, SVG 標籤改成「line」,x1 與 y1 定義第一點的座標、x2 與 y2 定義第二點的座標,原始碼與結果如下所示:

See the Pen svg line by Tedutw (@Tedutw) on CodePen.

三邊以上的摺線,前端 工程師可用 SVG 「polyline」(多點折線)標籤,並為五點定義座標分別為 10 10, 60 60, 110 10,160 60 與 210 10 原始碼與結果如下所示:

See the Pen svg polyline by Tedutw (@Tedutw) on CodePen.

SVG 繪製橢圓形 (ellipse) ,標籤屬性的下法與上述的「circle」類似,差別在於水平與垂直的半徑可以分別使用「rx」與「ry」來定義,原始碼與結果如下所示:

See the Pen svg ellipse by Tedutw (@Tedutw) on CodePen.

三邊以上的形狀,用 SVG 繪製多邊形 (polygon) 的原始碼與結果如下所示::

See the Pen svg polygon by Tedutw (@Tedutw) on CodePen.

 

 

 

推薦文章:
HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器


菜鳥前端工程師的HTML5新手指南(一)-七大內容模組有哪些?


前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


Java課程、UI課程、程式課程、網路行銷課程推薦


從七大點告訴你Python和Java有何不同!!


網頁設計AWD 要怎麼做才能對 SEO 無痛呢?這就告訴你!

真的假的?!人工智慧可以預測電影票房?

真的假的?!人工智慧可以預測電影票房?
真的假的?!人工智慧可以預測電影票房?

人工智慧竟然可以預測電影票房?!到底無影謀?


同樣是蝙蝠俠的主題,2005 年開拍的 《黑暗騎士三部曲》 的質感、票房、影評成績遠遠高於 1997 年充斥著大卡司的 《蝙蝠俠4:極凍人》

隨著人工智慧時代來臨,影視特效、技術的進步,拍片的門檻降低,也大幅增加了影片的產量。但與此同時,雷片的數量也隨之變多。同一系列的電影、劇本,會因為導演、選角、取景的差異而有著截然不同的結果。例如蝙蝠俠系列電影,2005 年開拍的 《黑暗騎士三部曲》 ,高端的質感與磅礡的氣勢與 1994 年大卡司卻粗製濫造的 《蝙蝠俠4:極凍人》 形成極端對比;而票房與風評俱佳的 1984 年經典科幻片 《銀翼殺手》 獲獎連連,2017 年重拍的續集卻票房失利,並沒有因更高成本、名導與高科技的加持而青出於藍。但是在影片開拍前,又有誰能準確預測如何選角才能拍出最好的效果? 因此有一些新創公司,如洛杉磯的 Cinelytic,就研發為電影片商提供分析服務的 AI人工智慧系統。

同部電影,換角結果如何?AI幫你預測

票房分析AI人工智慧系統 Cinelytic (圖片出處:翻攝自 Cinelytic 官網畫面)

洛杉磯的新創公司 Cinelytic 研發的 AI人工智慧會藉由機器學習來研究往年的電影歷史數據庫,再根據這些電影的主題、特色等資訊,交叉分析出這些數據背後隱藏的模式(Pattern)。使用者用這套 AI系統分析時,就好像是玩球隊經營模擬遊戲一樣有趣:可以指定角色將 A 演員換成 B 演員,例如把女主角從艾瑪華森換成「黑寡婦」史嘉蕾喬韓森等,再看看會產生什麼樣的變化、預測的票房等。Cinelytic 的 CEO 兼共同創辦人 Tobias Queisser 就舉了一個例子,假設拍攝一部以艾瑪華森為主角的電影,可以用 Cinelytic 的 AI 軟體看看若主角換成珍妮佛勞倫斯會如何。

其實除了 Cinelytic 之外,做出此類電影票房預測系統的還有創立於以色列的 Vault 以及比利時的 ScriptBook 等等。 前者能藉著追蹤電影預告片的線上回饋,預測出哪些族群將會看這部電影;後者能藉由演算法來分析劇本,預測電影票房是否會獲利。不過根據外媒報導:這些 AI 公司在接受採訪時都拒絕為即將上映的電影進行預測,也許是這些 AI 預測的準確度,仍有不少進步空間。

低估黑馬電影票房 AI仍無法神準預測

票房成績被AI低估的2017年驚悚電影《逃出絕命鎮》

對此,有研究人員指出:像這樣藉由Python來演算的方法,只能根據過去的數據去做分析判斷,但是觀眾的口味與流行文化卻是不斷改變的,所以對於票房的預測也不見得能夠符合時下潮流。例如 ScriptBook 的演算法曾針對分析 2017 年的驚悚片 《逃出絕命鎮》,雖然成功預測這部電影會獲利,但卻遠遠低估了它的票房 ── ScriptBook 預測該電影有 5600 美元的票房,實際上該片最終票房達到了 1.76 億美元。它也曾低估了 2003 年的獨立電影 《房間》,預測它票房只有一千萬美元,但最後這部電影卻有 2100 萬美元。

 

20世紀福斯影業和Google 合作的大數據系統「Merlin」分析電影《羅根》最合適的標籤,令人汗顏。 (圖片出處:the Verge)

除了專注於 AI人工智慧的新創公司之外,去年 20 世紀福斯影業也和 Google 合作開發了一套電影預測和推薦系統「Merlin」,也是根據電影的預告片來分析觀眾會喜歡看甚麼樣的電影。他們使用 2017 年的「金鋼狼」電影 《羅根》 作案例分析。大家都知道 《羅根》 是非典型的英雄電影,但是晦澀黯淡的題材,吸引也不會是傳統的漫威粉絲。「Merlin」能分析到這些族群嗎? 很遺憾地,「Merlin」掃描過它的預告片後,只分析到了「樹」、「臉孔_頭髮」、「車」、「男人」、「森林」等。而 Merlin 預測看過 《羅根》 的觀眾還感興趣的 20 部電影除了 X 戰警系列的電影外,還有 《瘋狂麥斯:憤怒道》、 《飢餓遊戲》 等。

Netflix:AI預測為我們省下10億美元

儘管 AI 分析票房的技術仍未成熟,Netflix 當年一戰成名的 《紙牌屋》,就是採取了以大數據來主導電視劇製作的模式,Netflix 曾表示:這套基於用戶習慣的推薦系統,有效提高了收視率,每年能為 Netflix 省下 10 億美元。

不過電影本身,還是一門藝術。究竟用了哪些編劇、演員,會產生哪些化學反應,也是其有趣之處。若當年威爾史密斯同意演出了 《駭客任務》 的 Neo 一角, 《駭客任務》 是否還是電影史上的科幻經典呢? 若當時 《樂來越愛你》 的女主角沒從艾瑪華森換成艾瑪史東,是否還會得到奧斯卡最佳女主角獎? 這種陰差陽錯造就的經典,也是電影的魅力之一。而 AI 人工智慧所能發揮的最大功用,應該就是當作參考、也消除一些不必要的風險吧!

 

 

 

推薦文章:
人工智慧雅婷姊,幫你輕鬆搞定語音轉文字!


AI人工智慧再創新!荷蘭新創公司發明自駕船,可望五年內達標!


準備好迎接未來挑戰!AI人工智慧將在八月納入國小課程!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


Java課程、UI課程、程式課程、網路行銷課程推薦


達內教育攜手各大科技業,共同打造數位化教育


前端工程師這就告訴你”整體網站規劃流程”是什麼!

Python與Java名字由來超有趣?看完你就知道了…

Python與Java名字由來超有趣?看完你就知道了...
Python與Java名字由來超有趣?看完你就知道了…

正在學Python與Java的你,可知道這兩種程式語言的名字由來嗎?

 

Python-是劇團,不是大蟒蛇


圖中身穿「人生苦短,我用Python」T恤的先生為 Python 程式語言的創始人Guido van Rossum

隨著 AI 世代即將到來,Python 程式語言也越來越受歡迎。但你知道這款程式語言是什麼時候開始有的嗎?其實在 1991 年的時候,Python程式語言就在這一年公開發行了。

1989 年,荷蘭的程式設計師吉多范羅蘇姆 (Guido van Rossum) 為了打發聖誕節假期的空檔時間,就寫了以 ABC 程式語言為基礎的另一套程式語言。命名時,吉多想要為這個語言起一個「精簡、獨一無二、又帶一些神秘感」的名字。然後他從一個叫「Monty Python(蒙提巨蟒)」的劇團找到靈感,將這套程式語言以該劇團的團名 Monty Python 的 Python 來命名。這個來自英國的劇團在當時的歐洲非常活耀、以超現實的荒誕喜劇聞名。當然吉多本身就是這個荒誕劇團的大粉絲。

 

 

而 ABC 語言吉多參與研發的一款程式語言。就吉多本人看來,ABC 語言是非常優美、強大,是專門為了程式設計的初心者而設計的教學語言。但是 ABC 語言並沒有成功,吉多認為原因是「非開放」所造成的。因此,吉多決心在 Python 語言避免這錯誤,完美結合了 C 、Unix shell 和其他語言的使用習慣,也讓這個語言時至今日仍有強大的影響力。

20年後的今天,吉多仍是 Python 的主要開發者,決定整個 Python 語言的發展方向。Python 社區經常稱呼他是仁慈的獨裁者,因為他仍舊關注 Python 的開發進程,並在必要的時刻做出決定。Python 的設計哲學是「優雅」、「明確」、「簡單」。Python 開發者的哲學是「用一種方法,最好是只有一種方法來做一件事」。在設計 Python 語言時,如果面臨多種選擇,Python 開發者多會避開花俏的語法,而盡可能選擇精簡明確的語法。這些準則被稱為「Python 格言」。

Java-工程師最愛的灣區皮爺咖啡


舊金山灣區最知名的連鎖咖啡店Peet’s Coffee,連星巴克的三個創始人都曾在此拜門學藝 (圖片出處:Flickr)
 

上個世紀 90 年代初期,美國昇陽電腦公司 (Sun Microsystems, Inc.) 推出綠色計畫 (Green Project) ,著手於發展消費型電子產品 (Consumer Electronics),當時他們所使用的語言是 C、C++、及 Java語言的前身「Oak」。後來因為律師說「Oak」這個名字已經被註冊使用了,他們必須為這個程式語言另啟新的名字才可以。在經過一連串的會議表決,還有一小張列著待選名字的表格 (根據這家公司的律師所述),表格上的名字除了 Java,還有 Silk、DNA 等聽起來很文青的名字。Java 這個名字當時是哪個人提議的已不可考,但昇陽公司的工程師們普遍都很喜歡喝公司附近一家名為「Peet’s Coffee (皮爺咖啡),舊金山灣區最知名的連鎖咖啡店,連星巴克的三個創始人都曾在此拜門學藝)」的咖啡。因此不意外地,意思為「爪哇咖啡」的 Java 被選為此款程式語言的名字。

 

Lovelace-向第一位女性工程師致敬

 

Ada Lovelace 被認為是世界上第一位女性工程師,美國國防部於 1980 年製作的一個新的電腦程式語言—Ada Lovelace 就是以她的名字命名。為了記念英年早逝的 Ada,還以她的出生年設立了編號「MIL-STD-1815」。

Ada Lovelace 是名詩人拜倫的唯一婚生子,但是 Ada 從來沒見過她父親;母親為英國貴族-溫特沃斯女爵。愛達母親因為不希望 Ada 步上父親放浪不羈的後塵,致力栽培 Ada 的數學、邏輯等科目。藉著她的家庭與教育環境,她認識許多鼎鼎有名的科學、文學家,如電學之父-法拉第和作家狄更斯等,十幾歲時更認識了被後世譽為「電腦之父」的查爾斯·巴貝奇 (Charles Babbage),並參與了巴貝奇的分析機設計。

在 1842 到 1843 年間,她翻譯了一篇義大利軍事工程師費德里科·路易吉闡述分析機的文章,並加上詳盡的筆記。Ada 的筆記裡,包含了公認的第一段電腦程式-一段分析機用的演算法,這對早期電腦發展史非常重要。此外,當巴貝奇等同時代學者,只著眼於電腦的數學運算力時,Ada 已經預見了電腦廣泛應用的未來。可惜 Ada 在 1852 年因子宮癌逝世,享年36歲。

另一套Lovelace-豔星的名字

而在上述的史上第一位女工程師 Ada Lovelace 女士逝世約 126 年後,耶魯大學的研究生 David Gelernter 正在思考如何為他編寫的程式語言命名時,聽到了關於了 Lovelace 的生平。此時 David 馬上聯想到了主演「深喉嚨」的情色女星的姓氏也是 Lovelace,於是 David 就用該豔星的名字 Linda 命名了這套程式語言。

推薦文章:
只會用PS就落伍了!Python畫出皮卡丘才夠屌!


“冒名頂替症候群”為什麼重要?就算沒學過Python也要知道!


想要自學Python?首先你要先懂它是誰!


達內教育學員見證


不懂網路行銷課程的”黑帽”跟”白帽”,小心吃虧的是你!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道

別騙了!垃圾分類只需3秒?清大研發的人工智慧就是辦到了!

別騙了!垃圾分類只需3秒?清大研發的人工智慧就是辦到了!
別騙了!垃圾分類只需3秒?清大研發的人工智慧就是辦到了!

聽別人說清大研發的人工智慧,只靠3秒就可以垃圾分類耶!我都覺得是開玩笑,直到看到這篇才知道原來是真的…

當你每次在倒垃圾前,是否常常會為了垃圾分類煩惱?現在只需要三秒即可解決!

新竹縣政府與清華大學 AI 研究團隊共同研發的人工智慧 資源回收機器人,垃圾分類只要三秒就搞定!這個機器人目前放置在新竹縣政府西側超商外,民眾丟入回收物品後,AI 機器人就會自動幫你分類。這樣不僅可以鼓勵民眾自主回收物品、減少垃圾、還可減少回收再分類的人力資源以及時間成本,且未來還有望結合悠遊卡回饋機制、搭配物聯網大數據分析。

新竹縣環保局代理局長羅仕臣、清華大學電機資訊學院院長黃能富及其團隊 6 月 18 日上午在新竹縣政府親自示範人工智慧資源回收機器人。黃院長表示,設計 AI 資源回收機器人是從對地球友善的角度出發。在以往資源回收都需要透過人工再分類,曠時、費工,現在透過 AI 資源回收機器人,三秒即可自動分類並降低誤差。未來還能結合物聯網、分析回收物內容,可提供大數據分析民眾丟回收物的傾向,也能使業者收取更加簡便。此外,也考慮搭配悠遊卡,讓民眾丟回收物的同時能收取回饋,提高回收率。

研發團隊的博士生楊宇軒表示,給人工智慧做機器學習的大數據是透過民眾使用習慣建置,並大量拍攝回收物照片,使機器人能精準辨識。目前可回收類別為4大類:鐵鋁罐、寶特瓶、玻璃、紙容器,若投錯還能夠建立機器學習系統,以避免再度出錯。羅仕臣表示,目前這台機器人已放置在環保局,出錯率相當低,該機器人未來有望普及到全省,為大家服務。

 

 

推薦文章:
AI人工智慧再創新!荷蘭新創公司發明自駕船,可望五年內達標!


AI人工智慧時代到!各國公司大缺程式語言人才!


醫療界大突破!!靠人工智慧,自動預測敗血症!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


Java課程、UI課程、程式課程、網路行銷課程推薦


3D虛擬人偶APP到底夯在哪裡?網路行銷課程告訴你!!


Python課程的AI自動駕駛,促進汽車產業的發展

菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?
菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

要在HTLM5網頁中達到定位其實並不難,只要按照以下幾個步驟就可以輕鬆辦到!

什麼是地理位置定位 (Geolocation) API?

一般來說,在 HTML5 網頁,前端工程師是可以使用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量,一定得先獲得使用者同意才可使用。對於具有GPS(如智慧型手機等)的設備,地理位置更為準確。

用法

使用 Geolocation 的主要方法是 getCurrentPosition,可以讀取到用戶設備的當前地理位置。該語法如下所示:
(※以下的語法通通都是寫在 Javascript裡)

navigator.geolocation.getCurrentPosition();

參數:

1. showLocation(必要項目):是個函式,於瀏覽器成功判斷出位置後呼叫。

2. ErrorHandler(非必要):是另一個函式,於發生問題,瀏覽器無法判斷出位置時呼叫。

3. options(非必要):此參數能讓我們自訂geolocation運作的方式。

呈現數據

一般來說,地理位置定位 (Geolocation API) 可以使用兩種方式呈現:Geodetic(地理測量) 與 Civic(城市):

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

2. 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新手指南(十一)-SVG圖檔超好用?


菜鳥前端工程師的HTML5新手指南(一)-七大內容模組有哪些?


HTML5教學法寶1-文字排版設定好,人人愛看少不了!


達內課程先就業再付款- 中時電子報


不想再領死薪水?來上Java課程,保證你笑咪咪領高薪!


HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道


沒有那麼難!網頁設計課程中的CSS,它到底是什麼呢?

菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?

菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?
菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?

最近HTML5新增一個Web Storage的功能,真的讓前端工程師省了很多麻煩呢!

在過去的 HTML5 前端工程師要在用戶端瀏覽器儲存資料,會使用 cookies。HTML5 新增了 Web Storage 功能,取代了只能儲存 4kb 的 cookies。

Web Storage 的優點 (與 cookies 比較):

1. 更安全

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

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

4. 速度更快

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教學也太酷了,翻書跟翻臉一樣快耶!


HTML5教學法寶1-文字排版設定好,人人愛看少不了!


達內課程先就業再付款- 中時電子報


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!


前端工程師學CSS字體單位-絕對單位篇


前端工程師和網頁設計師必學-了解整體網站的規劃流程

菜鳥前端工程師的HTML5新手指南(八)-拖曳元素介紹(下)

菜鳥前端工程師的HTML5新手指南(八)-拖曳元素介紹(下)
菜鳥前端工程師的HTML5新手指南(八)-拖曳元素介紹(下)

其實要在HTML5中達到拖曳效果很簡單呢!只要按照步驟就可以達成囉!!

數據傳輸DataTransfer

HTML5中,拖曳動作的目的,最主要是為了對來源和目標元素做操作。為了能夠完成整個操作,就需要在來源元素和目標元素間進行傳輸數據。所以在 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新手指南(九)-如何使用瀏覽器儲存?


HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器


HTML5教學法寶1-文字排版設定好,人人愛看少不了!


達內教育海外合作企業


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!


網頁變成蚊子館,網路行銷課程沒人點開?


URL網址到底暗藏什麼玄機?它跟SEO優化又有什麼關係!?

菜鳥前端工程師的HTML5新手指南(七)-拖曳元素介紹(上)

菜鳥前端工程師的HTML5新手指南(七)-拖曳元素介紹(上)
菜鳥前端工程師的HTML5新手指南(七)-拖曳元素介紹(上)

自從HTML5中有Drag & 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.

HTML5裡的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教學第一招-工欲善其事,必須要有免費的網頁編輯器


HTML5教學法寶1-文字排版設定好,人人愛看少不了!


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!


中國IT教育領導品牌 達內教育集團第一家海外授權中心


不再靠天吃飯!! 用人工智慧養蝦, 精準監控讓蝦子存活率提高,蝦隻更大!!


在做SEO優化時,讓測試頁不被搜尋到的方法是..