這部電影號稱好萊塢史上最白爛的動作片，雖有一班大咖演員，卻被眾多影評稱為「爛片的極致」！片中老套的劇情、俗爛的對白，大肆使用血漿而備感廉價的流血場面，某種意義上體現了 B 級電影的極致。 這部粗糙結合科幻風的電影也小露了一下程式碼：蜜雪兒‧羅德里奎茲飾演男主角的好搭檔「Luz」，在片中使用一段 Java 程式碼執行一個簡單的 TCP server 任務，以當前的日期和時間回應客戶端。
魔鬼終結者：Apple II 的 CPU 「6502」 組合語言
▲ 《魔鬼終結者》中出現的 Apple II 的 CPU 「6502」 組合語言
還記得在電影《魔鬼終結者》系列中出現的各種機器人嗎？這部對當今的科幻電影產生了各種影響的經典之作，早在第一集上映的 1984 年就已經有各種創舉了，像是現今科幻電影都很喜歡的秀出程式碼，魔鬼終結者當然是不會少的囉！ 在最早的《魔鬼終結者》第一部中，我們透過由阿諾史瓦辛格飾演的機器人終結者 「T-800」 看出去，可以看到展示了一段 MOS 6502 的組合語言程式碼。 MOS 6502 是 1975 年由 MOS 科技所研發的8位元微處理器，剛問世時是當時效能最強的 8 位元 CPU，而 Apple II 的採用使 6502 成了廣為人知的 CPU。而在機器人眼中的程式碼，正是從 Apple II 複製過去的。
龍紋身的女孩：MySQL
▲ 《龍紋身的女孩》中出現的 MySQL 語言
這部充滿懸疑、鬥智、暴力又刻畫出人性病態扭曲的電影《龍紋身的女孩》，女主角莎蘭德便是個經常入侵他人電腦的神秘駭客。這部電影獲得各方好評，但其實有一幕或許會讓熟悉 MySQL 語言的觀眾感到奇怪！ 電影中有一幕是莎蘭德使用筆電以 MySQL 語言駭入瑞典警察局的資料庫，想追查受害人。而如果將她用的 left join 關鍵字的 SQL 語言整理出來，可以得到一個輸出結果訊息，重構後會發現她用 outer-join 的方式連結關鍵字和被害人資料。 知道 MySQL 語言的觀眾可能會驚訝，為什麼要使用這樣的文字過濾方式呢？因為 MySQL 中是有 like 語法的。更奇怪的是，輸出結果中居然沒有姓名分別以 R、L 開頭的受害人。 究竟是編劇沒有做好 MySQL 的功課、還是女主角的駭客功力還不到位卻有好運氣呢？
常看電影的朋友肯定對駭客角色不陌生，雖然大部分電影中對駭客技術都沒有詳細解釋，但也有不少考據細節的電影，就算是一閃而過的程式碼也都是有根據的喔！像是 Java 、 Python 、 MySQL 和 C 語言等熱門語言，不只是電影中的常客，也是求職市場中最夯的程式語言！
以下就分析 5 部出現過程式語言的電影吧！咦，有一部賣座大片的程式語言還寫錯了？ 鋼鐵人：C 語言
▲ 《鋼鐵人》中出現的 C 語言
作為漫威英雄代表之一的鋼鐵人，以高科技打造的鋼鐵裝甲想必讓許多粉絲印象深刻，小勞勃道尼幽默風趣的詮釋也讓「托尼‧史塔克」成為許多影迷最喜歡的超級英雄。 而在最近上映的《復仇者聯盟4：終局之戰》中，陪伴我們十年的鋼鐵人也迎來結局，其犧牲自己、拯救全宇宙的氣概，想必讓粉絲們感動又不捨啊！看完是不是很想馬上重溫《鋼鐵人》系列呢？ 而回顧鋼鐵人1，托尼史塔克在綁匪的洞穴中第一次啟動他所設計的人工心臟，使用的就是 C 語言代碼──說是 C 語言讓鋼鐵人誕生也不為過啊～ 這段代碼還有個不為人知的冷知識：其實這段代碼來自於樂高積木的硬體下載程式。 電影中使用這段代碼，可能是指鋼鐵俠要下載一套硬體描述語言；或是將硬體描述語言上傳到樂高積木的控制系統中。無論哪個，都表示鋼鐵俠的誕生跟樂高積木有關。
結果如下所示： 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.
Python課程的同學介紹道︰此專輯裡的主打曲目之一「Paralyzed」，它被拍成音樂錄影帶，以AI 機器人拿著人類骨骸為開場。影片中就是在敘述：不久的未來， AI人工智慧機器人將會在沒有人類的狀況下，持續進化，並且持續生產出更多的機器人。搭配著鍵盤手 Jordan Rudess 與吉他手 John Petrucci 流暢又有淡淡哀傷的小調音色此起彼落、2011 年新加入的鼓手 Mike Mangini 沉重的雙大鼓交錯、還有主唱 James LaBrie 的渾厚歌聲，這個樂團，完美地呈現了AI人工智慧為主流產業的未來。
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 命名了這套程式語言。
在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 & Drop API-讓元素變得可拖曳 你可能不知道，過去在網頁裡面實現 Drag & Drop 是很麻煩的！一定要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。但！現在各位有福啦！HTML5 有直接的 Drag & Drop 機制，讓前端工程師可直接使用 drag and drop 的功能，讓使用者直接透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。 所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性，如下例 (讓圖片變得可以拖曳)： <img draggable="true" />
讓元素可拖放-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.
然後我們監聽 dragend ，讓它在拖動結束後，還原透明度： draggable.addEventListener（“dragend”，（ev）=> { ev.target.style.opacity = “” ; }}; See the Pen HTML 5 Drag and Drop-4 by Tedutw (@Tedutw) on CodePen.
