Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！ 這篇文章專給... 彷彿聽過，對JS似曾相似，但從來沒有真正了解 愛用Google analytics & inbound marketing (Hubspot) 的行銷人 覺得跟前端工程師錯頻，想了解一下他們星球的語言 想學互動式網頁設計，創建屬於自己的第一個網頁天堂 (more…)
irisJuly 3, 2020
前些日子我寫了篇關於 functional programming 的文章 (Functional Programming 一文到底全紀錄)，講述了當時對 FP 的學習心得，與在實務中應用後的一些想法。 之後陸陸續續收到了一些反饋，有人詢問：「FP 能做的事情，現在 OOP 都做得很好，什麼情況下需要用到 FP？」 關於這個問題，我的回答總是 FP 準則中的「避免副作用」、「一個 Function 只做一件事情」、「以 Function 為程式的最小單位」能使我們只需要關注 Function 的正確性即可，讓程式更佳可讀、更易維護。 Point Free Style…
學程式助教March 16, 2020
前言這篇文章將為排序篇章做一個結尾，文章會介紹選擇排序 (Selection Sort) 與插入排序 (Insertion Sort) 兩種排序法，透過上圖的排序法複雜度一覽表可以發現他們的執行效能相比其他排序法來的差一點，因此比較不常被使用，但要強調的是他們仍然有適合使用的情境，本篇文章將會簡單紀錄這兩個演算法的定義與程式碼實作。選擇排序法 (Selection Sort) 選擇排序法示意圖簡單來說選擇排序法一直重複的做兩件事:從尚未經過排序的陣列中找到最小值將當前找到最小值擺到最左邊時間複雜度 O(n²)程式碼範例這邊先設陣列的第一個數字是目前的最小值，然後往後把陣列的數值一個一個讀取，如果讀取的下個數比最小值大，就不作處理。而如果讀取到的數比目前的最小值小，就把目前的最小值換成這個數。重複這個方法把所有陣列裡的數都讀過一遍，就能確保目前的最小值為整個數列的最小值，扣除掉已經確定的最小值，剩下未確定的元素再重複執行以上步驟，直到陣列完成排序。function selectionSort(array) { const length = array.length; for(let i = 0; i < length; i++){ //…
學程式助教March 16, 2020
氣泡排序法 Bubble Sort其實氣泡排序法算是最容易理解的排序法，也常作為初學者入門學習的演算法，相信經過前兩篇較為複雜的快速排序法、合併排序法後，可以快速理解氣泡排序法的內容與實作方法。氣泡排序法定義氣泡排序法的過程會從陣列最左邊開始將元素兩兩比較，每一輪都會把最大的數值移動到陣列末端，這個行為就好像氣泡不斷從底部冒出一樣，因此被稱作氣泡排序法。氣泡排序法的實作步驟如下：比較相鄰的兩個元素，若前面的元素較大就進行交換。重複進行1的動作直到最後面，最後一個元素將會是最大值。重複進行1,2的動作，每次比較到上一輪的最後一個元素。重複進行以上動作直到沒有元素需要比較。 把文章一開始示意圖的第一部份拆過來看，一開始把陣列的第一個元素跟第二個元素比較，如果前面的元素比後者大，就將兩元素交換，如果前者元素比後者小，就不做調整。這邊因為 5 比 1 大，因此將兩元素交換，接著看第二個元素跟第三個元素，依此類推，最後會將陣列中最大的元素放到陣列最後頭，接著重複以上步驟，直到所有元素都經過排列，排序才結束。時間複雜度因為實作會使用到雙重迴圈，因此平均時間複雜度為 O(n²)平均： O(n^2)空間複雜度因為沒有額外建立其他資料結構，因此空間複雜度為：O(1)程式碼範例function bubbleSort(array) { const length = array.length; for (let i = 0; i < length; i++) {…
學程式助教March 16, 2020
找不到好圖就亂畫 xDD 型別和值 是一個程式語言很重要的基石， 我們期待 “42” 、42 兩者表現會有不同， 前者我們期望他有字串的特性可以使用， 後者我們常用於數字運算的特性。 這也就是為什麼我們程式撰寫中，很重視基礎的型別和值。 而程式語言中，有兩種常見的特性： 1. 強型別語言 2. 弱型別語言 對於兩者的定義，各種地方都有不同的意見， 在此定義參考 Kyle Simpson ， 我們透過使用變數的時機，來決定是強/弱型別語言。 也就是說，如果一個變數，在宣告的時候指定型別， 那麼，我們說他是一個「強型別語言」。 如果一個變數，宣告的時候不能（或不需要）指定型別， 那麼，我們說他是一個「弱型別語言」。 註： 這邊要小心幾個名詞： 1.…
學程式助教March 14, 2020
Photo by Hitesh Choudhary on Unsplash 前言 這是一系列我參加完鐵人賽的整理， 最近也透過 火箭隊軟體工程師培訓計畫（高雄） 的場地， 舉辦一系列實體的讀書會導讀， 已經進展到一半了，每次約 3 小時，一週一次已經連續約一個月左右。 透過實際寫過文章、實際講過 YDKJS 這個系列， 這次回顧，把一些真正重要的「大綱」整理出來。 這部分主要會分享一些「自己」的看法， 如果想知道 YDKJS 作者 Kyle Simpson 對於 JS 的想法， 可以參考我的鐵人文章。 鐵人賽…
學程式助教March 14, 2020
本文原文撰寫於2017年，部分資料可能因時空背景而有不同。 如果你不曉得該如何為你的產品選擇一個合適的前端框架，這篇文章也許可以給你一些啟發。 一個有趣的事實是：IBM 發表的 2017 年最值得學習編程語言名單中，JavaScript 榜上有名。 正是這位 IT 巨頭指出，JS 在網站中驚人地達到 94.4％ 的使用率，而且「不太可能降低」。 JavaScript 能確保「對用戶非常友好的網頁，因為它負責整個 web 界面，包括動畫和交互」。 不管你怎麼看，JavaScript 很重要。 這也指明了潛在 Web 開發人員的方向：如果你深入前端，你不得不在某些時刻面對 JavaScript。並且 正確的開發指南 可能有助於此。 讓我們假設你知道 JavaScript 基礎知識，不是一無所知的那種，如果假設是正確的，…
學程式助教March 11, 2020
上回這裡成功的建置環境後，進入下個環節的討論。就是在接觸框架之前，其實並不是非常明白所謂的架構，就會常常出現各種功能混在一起的情況，像是一個Js事件需要同時處理「資料變動」、「樣式修改」或是「資料處理」以及「後端互動」，雖說在開發時都算順利，但過了幾天後回來開發，或是後來要針對網站進行改動維護，卻完全不知該從何下手，而這也就是框架最大的價值，他讓我們在開發時，每一段Code可以專注處理某一個部分的任務，結構分明，在維護上也能更加輕鬆。 開始使用Vue.js 在Vue的官網其實有明確指出「建議不熟悉Vue或是node.js環境使用的開發者先不要使用Vue-Cli」，所以建議一開始接觸Vue.js框架可以先從CDN開始熟悉，基本上只需要在HTML檔的 <head> 中引入CDN即可使用： //開發者模式版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //產品開發使用的穩定版本 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 創建Vue實例 在引入CDN之後，要讓網頁能夠成功顯示需要有兩個要件，分別是模板 (Template)與實例 (Vue Instance)，模板可以直接建立在HTML檔中，而實例則是Vue的Javascript物件實例，首先我們先從實例開始說起。 Vue的實例主要是關注資料面的操作，他會負責控管資料以及處理資料，而在Vue的實例中，物件的屬性與方法是有既定寫法的，最核心的屬性設定有 el 以及 data ，el 是指Vue實際掛載在DOM的哪一個節點，通常這個屬性會設定為 "#app" ，這個「掛載」的觀念會在後面的章節中做解釋，這邊可以先把他理解為Vue實際能在DOM中的作用範圍，如果超出這個節點，Vue就無法控制了；接著 data 則是這個頁面會使用到的資料，寫法就是 Object ，key是在模板使用的資料名稱，Value是資料的實際內容，像下方的範例就是我們在Vue中建立了一筆資料，資料的變數名稱叫作 text ，而資料內容是 "Hello World!"： var vm = new Vue({ el:…
學程式助教March 11, 2020
在上回這裡對Vue有了基礎概念後，在開寫Vue之前肯定需要經歷一番環境建置的陣痛期啦～不過其實在建置Vue.js的環境我個人覺得還算友善，不像某Tensor開頭的機器學習框架，要建立GPU計算的環境真的是弄到懷疑人生......，今天就來跟大家分享一下小弟在建置Vue.js環境時遇到的過程以及遇到的狀況 首先，那個Node.js與NVM (Node Version Manager) 因為在學習Vue之前我主要都是利用SFTP auto save上傳到Host然後再看改動的方式開發，基本上沒有接觸過本地端的開發方式，所以也沒有使用過Node.js的經驗，所以在安裝Vue之前必須先進行Node.js的環境安裝，基本上這也是在所以過程中最讓我印象深刻的地方。 安裝Node.js有幾種方式，第一種就是直接上Node.js的官方網站下載直接安裝，我一開始也是直接利用這種方法，但後來後悔了；第二種是利用Node的版本控制工具 - NVM進行安裝，這是我蠻推薦的作法，畢竟在開發或維護不同的專案時，每個專案開發時的Node版本可能不盡相同，所以這時候NVM的優勢就是可以讓我們直接快速地進行Node.js的版本切換，不用再刪除重裝之類的。 要安裝NVM的方法基本上非常簡單，只需要使用他們官方的Github上說明的指令，即可在Terminal進行安裝： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash 在下載完NVM之後可以嘗試在Terminal執行 nvm --version 如果他有回應相應的版本號，就代表NVM安裝成功了，接著就可以進一步利用NVM安裝Node.js。 利用NVM安裝Node.js…
學程式助教March 11, 2020
接觸前端到現在也差不多快一年半了，過去在開發前端的時後，都是使用原生javascript與jQuery以及php進行開發，雖然隨著時間推移接觸到的東西越來越多，開始有了有系統性開發與後續維護的需求，剛開始頂多就是將JS與php物件化，但還是無法完全解決頁面控制以及資料、事件、渲染、樣式控制等不同任務間的分離，所以開始接觸Vue.js框架來增加開發效率並且將原本幾乎純手刻的這個Glovecoding blog進行翻新，順便寫篇系列紀錄一下～ Beginner of Vue 在約莫半年前的時候其實就有試著自學Vue框架的想法了，但當時自己的背景知識量還不大夠，包括AJAX的運作以及同步異步的線程阻塞問題等，在當時都是我無法掌握的技術，最近把這些東西補齊並且看了根webpack相關的技術之後，才回頭撿起這個框架慢慢開始啃。Vue的框架有一個非常大的優點，尤其是對於英文較不熟練的開發者而言，因為開發Vue框架的工程師是來自中國的，所以他本身官網的技術文件都支援簡體中文，如果不習慣閱讀簡中的朋友也可以利用Chrome 的功能把它翻成繁中XD，在進入實作之前還是得先來了解一下這個框架本身的特性。 Components 組件的概念 在使用Vue框架的時候會不斷地使用到Components來進行網站頁面的組裝，依照不同的頁面需求，引入不同的components 到根(Root) 或是常見的App頁面，在這個框架中，其實整個網站結構很像一個葡萄串，從最上面的Root 到下面的頁面(View) 與組件(Component) 不斷的往下串，最終變成一個不斷串連組裝的網站結構，像我的Blog 結構大概長這樣： 整個部落格主要分為首頁、分類、關於、文章、404Notfound 五個頁面，這五個頁面會附著於#APP這個根上，而每一個頁面各自會使用到不一樣的組件進行組裝，這些組件的方便之處就在於：像是首頁與分類頁面都會使用到卡片作為文章的顯示方式，在一般的情況我們需要把相同的版型寫在不同的頁面，這就會造成在維護上的麻煩，尤其又是使用PHP生成內容的時候，只會使頁面變得越來越複雜，然而在Vue框架中，我們可以把這些會重複使用到的版型部分化做組件(Component) 他是一個獨立的模板，在需要使用到這個模板的時候，我們只需要引入這個版型即可，像blog首頁的卡片式文章顯示就是利用上圖中的紅色組件 - CardUi 所架構，而組件的運作方式在之後的文章中，我會在獨立介紹他。 資料驅動一切 在Vue框架當中，有另一項特色就在於它是利用資料驅動所有變化的，當資料發生變化時，Vue會根據我們設定的情況做出相應的改變，首先在這個架構中，資料與模板是獨立分離的，在一開始寫網頁時，我們會直接將內容寫在HTML的標籤當中，或是透過PHP在預處理階段時生成，但在Vue框架中，資料會獨立存取在Vue物件的Data中，然後在物件被實例化的Creat階段時渲染(Render) 進模板當中，像是這樣：…
學程式助教March 11, 2020
