🥜 前情提要上回我們講了網頁中的下載是如何實施，而其中有個關鍵字異步，我們這邊就進行解釋同步和異步是什麼 同步和異步：用最簡單和粗糙的說法：假設今天你要打電話問書局老闆說「人類簡史」賣光了沒： 同步：老闆會說等一下我去找找，你就拿著電話筒等了1小時，之後老闆說賣光了。 異步：老闆會說等一下我去找找，你把A和B的電話給我， 有結果的話我再打給你A號碼的手機 沒結果的話我再打給你B號碼的手機 之後你把電話掛掉，一小時候老闆打電話給你A電話，你就知道結果了 以上就是同步和異步的概念，這兩種概念在程式語言佔據很重要的一部分，想想如果我是要下載1GB的檔案，沒有異步的話，你就不能邊看影片邊下載，那麼異部我們用JavaScript來當作範例，async是撰寫異步的寫法，他是基於Promise的功能，所以在撰寫異步範例之前，我們需要知道那麼Promise是什麼？ Promise：今天要談異步操作，那我們看上述書局異步Case，Promise 就是 你把A電話給老闆，預期有結果會通知A電話 你把B電話給老闆，預期沒結果會通知B電話 上述這兩種情境，在JavaScript中可以用 ...

🥜 前情提要了解AJAX是什麼後我們來嘗試實作看看會遇到什麼問題。 XMLHttpRequest：上回解釋了AJAX的簡介，那這次我們來實作，根據MDN上的說明，可以使用以下程式碼來操作XMLHttpRequest。 MDN 是由瀏覽器四巨頭的Mozilla創建的JavaScript API文檔網站 網站上說明，需要使用該方法進行初始化 可以使用open這個函數來初始化請求(就是你要互動的行為是什麼) open函數，有2個必填參數，1個可有可無的參數 method傳入String變數對應的功能： 傳送我的互動要求 查詢我的結果 綜上所述，用程式碼來寫應該是這樣： 12345var xhr = new XMLHttpRequest(); // 初始化物件// 初始化指令，告知我需要與 resource/config.json 這個路徑進行獲取的互動，並且採用異步方式。xhr.open("GET" , "resource/config.json" , false) xhr.send(); // 傳送指令console.log(xhr.res ...

🥜 前情提要了解JavaScript的缺陷和解決方案後，我們要寫JavaScript必定不是從0開始，所以可以使用一些知名套件輔助實作 jQuery:而在前端開發過程中，免不了使用一個函示庫，jQuery你可以把它當作API或是第三方庫來使用，主要業務內容是 簡化HTML與JavaScript之間的操作，可至官方網站進行下載該庫： Jquery根據維基百科jQuery採用工廠模式設計，所以凡是看到：$. 都是呼叫jQuery的函式，在以前前端世界如果你沒用過jQuery那就不能叫做前端，因為這個庫太好用了，但是最近jQuery也不見得是必要的函示庫，因為有其他框架比他高效、有用，但是其設計概念很值得參考。 以上是jQuery提供的函示庫，此處就不再進行介紹，詳情請參考：https://www.w3school.com.cn/jquery/event_click.asp後續介紹的AJAX將會使用jQuery來當作實 作範例。 AJAX：要解釋AJAX是什麼我們先釐清在AJAX出現之前，前端到底是長怎樣 AJAX出現前：假設今天你在看股票網站，而股票大盤每一秒都在變化，如果你要看最 ...

🥜 前情提要了解JavaScript的缺陷後，我們提出三種解決方案，JIT、TypeScript、WebAssembly，今天介紹第三個 WebAssembly WebAssembly：還記得JIT是如何解決效能低下的方式嗎，偵測到這段程式碼被頻繁呼叫，我就把解釋結果(機器語言)儲存起來，當下次又呼叫就不進行解釋直接將結果丟出來，走火入魔的工程師們認為這也是效能問題，為什麼要執行很多次才能被優化呢，而且優化過程還會浪費效能，所以就有人提出如果一開始網頁識別的文件就是機器語言呢。 還記得TypeScript是如何解決弱型別的問題嗎，使用強型別方式，最後把程式碼丟給tsc進行編譯轉換成JavaScript。但是TypeScript身為嚴格超集必定支援JavaScript，於是又犯了弱型別缺陷問題，走火入魔的工程師們認為這也是個問題，於是提出使用強型別語言進行開發，因為理論上所有強型別語言都可以被轉換成機器語言。很明顯TypeScript不是推薦的強型別。 因為JavaScript的垃圾回收機制(GC)，是無法控制的，時間到他就會自己進行清除，這也會是個問題，因為GC機制當GC清除時候，會 ...

🥜 前情提要：了解JavaScript的缺陷後，我們提出三種解決方案，JIT、TypeScript、WebAssembly，今天介紹第二個 TypeScript TypeScript：首先沒有瀏覽器能夠識別TypeScript語言，這很重要的概念所以必須先提出來。TypeScript這是一種JavaScript的嚴格超集語言，為的就是要解決弱型別的問題，他新增了強型別功能，你可以在宣告變數時候新增強型別寫法： 12var temp:number = 20; // 賦予型別temp = "hello" // 因為型別不對，會失敗 以上就是TypeScript的寫法，可以透過TypeScript編譯器把這段轉換成JavaScript，之後在丟給瀏覽器識別 而今天這Case編譯器會發現你型別錯誤，所以會報錯讓你知道你犯了弱型別的問題。TypeScript就是由此來解決弱型別的問題，但是TypeScript是JavaScript的超集，所以你可以用純JavaScript的方式開發，像是以下寫法： 12var temp = 20;temp = "hello&qu ...

🥜 前情提要：了解JavaScript的缺陷後，我們提出三種解決方案，JIT、TypeScript、WebAssembly，今天介紹第一個 JIT 即時編譯：JIT(Just-in-time compilation) ：今天JavaScript如何在瀏覽器上工作的，在電影「降臨」中外星人降臨地球了，人類為了理解外星人為何降臨，於是雙方進行了溝通，但是很明顯外星人聽不懂我們的話，於是有了翻譯的存在，情況像是下面：而解釋型就是執行一行翻譯一行，給你看：而編譯型就是全部翻譯完，給你看： 綜上所述，解釋型對於頻繁執行的重複代碼有缺陷，還是會重新解釋一次，所以JIT就是解決這問題 JIT這個單字其實不是JavaScript專有 C#、Java、Python等等也皆有使用JIT，但最早使用的是在20世紀Toyota汽車工業中提出生產管理的方法學： 在20世紀後半期，整個汽車市場進入了一個市場需求多樣化的新階段，而且對質量的要求也越來越高，隨之給製造業提出的新課題即是，如何有效地組織多品種小批量生產，否則的話，生產過剩所引起的只是設備、人員、非必須費用等一系列的浪費，從而影響到企業的競爭能力以至 ...

🥜 前情提要：了解JavaScript的特色後，我們來看選擇這些特色會有什麼下場 為什麼是解釋型？首先電腦只能看懂「機器語言」(詳情請看「程式語言的誕生」)，所有程式語言都可以分為兩類，編譯型、解釋型。 此處就用粗略的比喻來解釋： 今天你是個導演，你寫了劇本，找了演員編譯型：演員要花1小時背下來，思考1小時演藝技巧，然後開始演出解釋型：演員先花2分鐘被一段台詞，思考2分鐘，然後開始演出一小段後演員說：導演暫停一下，我繼續背下一段，2分鐘就好 … etc。 從上述結果來看編譯型應該是比較好的結果，但是如果今天劇組都找好了，你是演員會是如何處理呢： 編譯型：導演等等，我要花1小時背台詞，就算你現在全劇組準備好，你還是要等我背1小時。解釋型：導演等等，我要花2分鐘背一小段台詞，就算你現在全劇組準備好，你還是要等我背2分鐘。 這樣看起來好像又是解釋型好一點。假設今天你的瀏覽器就是劇組，如果你要看一個網頁的話，你是想要等1小時後才能看到結果還是等2分鐘先看第一個頁面呢？ 答案昭然若揭。於是JavaScript就成為了解釋型語言，也更符合網頁的特色需求。 那弱型別和解釋型有什麼壞處？ 開 ...

🥜 前情提要：我們知道了瀏覽器的三大語言，HTML、JavaScript、CSS，今天來介紹其中的主角，JavaScript JavaScript： JavaScript是一門直譯型的弱型別程式語言，由ECMAScript規範的實現。 讓我們先暫停在這邊 什麼是 直譯型語言所謂的直譯型請參考「程式語言的誕生」，簡單說CPU執行到那一行才會翻譯成機器語言。 什麼是 弱型別 弱型別是一種程式設計語言的型別系統。 請參考以下程式碼 12let num = 20num = "我是Lucas" 這是一段JavaScript的範例，上面這段屬於合法程式， 一開始是數字後來又被改成中文，因為弱型別允許變數可以隨時隨地的改變型別 變數不需要宣告類型即可使用。 優點: 彈性靈活 缺點： 當變數發生型別改變時，效能吃重 容易會有BUG 什麼是 ECMAScript？ECMAScript是由ECMA組織制定的腳本語言規範，代號為TC39，你可以把它當作是一個腳本語言的規格書，這個規範紀載了 腳本語言應該要有個關鍵字，只要被他賦予的變數，就無法修改了 腳本語言應該要有 ...

前端工程師的工作?用最粗略和簡單的說法就是，假設今天你想要把你的照片丟在網頁上給別人看，那麼要怎麼丟，要怎麼呈現，這就是前端的工作。 而如果你是用網頁，你就必須要有瀏覽器才能觀看，主流瀏覽器： Edge(微軟) Chrome(Google) FireFox(Mozilla) Safari(蘋果) 網頁是需要用瀏覽器去觀看，而當前瀏覽器只能支持三種程式語言所開發的產品： Html JavaScript CSS 由上圖可以知道這三者都有負責不同的業務： Html負責把網頁的結構生出來，像是這邊需要一個按鈕之類的架構。 CSS負責美化，讓網頁看起來漂亮一點。 JavaScript負責控制交互邏輯、行為，像是按下按鈕後應該跑出什麼東西之類的。 而這些東西是誰制定的？跟網路通訊一樣，瀏覽器也是依靠一堆協定堆積出來的應用層產品(詳細請看OSI介紹)，而要制定這樣得組織就必須是全球很有話語權的人，這個人就是提姆·柏內茲-李也就是這個人規定了為什麼網址必須是http:// 為什麼一定要兩個斜線？就是這個人規定的。 柏內茲在接受泰晤士報採訪時，承認網址中的雙斜線（& ...

前言：大家好我是Lucas，這個部落格將會是一篇系列文章，主要講述方式會偏向於「面相大眾的教學」，動機由以下幾點： 因為任職過公司內部文化有讀書會、分享會的存在，我們進行互相學習、教學，在這過程中我發現最好的學習方式，就是「教別人」，在準備教學過程我會做很多學習，確保我的知識不會是錯的，並且還會潤稿，這種說法能不能說服我自己，以此更加深記憶。 因為我也是個熱衷於學習的人，對於網路上有很多教學文章都似懂非懂，很多只講一半，沒有一套能夠說服我的文章，好就是「X分鐘看電影」系列影片，所以打算系統的整理我的學習成果，並且會讓每個知識都進行連結。 學習的心得都會是以「人話」來呈現，對於一些艱澀的專有名詞都會有自己的一套口吻化的解釋，但是難保其中不會有錯誤，所以也打算請大家，如果我有寫錯或是錯誤的觀念等等。懇請賜教，願聞其詳。 先備知識：必須會寫程式，要能夠看懂基本程式碼操作、變數型態是什麼意思、函數寫法。最基本的概念這邊都不會敘述，不一定要會寫JavaScript，但是起碼要會寫程式。