恭喜你們看到倒數第二集啦！ 可喜可賀🤩 相信你學 JS 的目的應該也是想走前端或是做出屬於自己香味的網頁吧～ 那這集就是你發揮所學的地方嘍（摩拳擦掌🤛 延續上集下拉式選單的精彩製作，這集要來教大家如何最簡單生出看起來好像很厲害的圖片輪播 Carousel！一起練功吧～ 使用 Bootstrap 前注意事項： 使用前必須按指示寫入指定 CSS 和 JS 程式碼（如不清楚可回上一篇日記 review） Carousel 功能不會自動化調整輪播畫面尺寸，因此必須另行定義…
首先，非常感謝蝦皮的後端資深工程師 Dayo 蒞臨快樂學程式的主題小聚直播活動來和各位觀眾互動，更感謝有熱情的觀眾捧場，讓這次的直播能順利落幕。 現在閱讀此篇的讀者，如果不想錯過一年都不見得有一次的聯合直播活動，趕緊手刀報名 10/29 的最後一場機器學習講座👍 精彩內容不容錯過～ Dayo 的有趣 demo： 功能為「價格不合理之提醒」，假若價格折數過低則會跳出 “My supervisor Messenger ID” 警示 第一部分：重點摘要…
距離我🙆♀️ 學習 JS 也有一段時間，不過心裡總是有一些不安全感和憂慮 這是我今天聽完前輩分享的心得，希望能幫助到面臨類似問題的朋友們 前端職場必備技能 前端變幻莫測 我該如何克服焦慮？ 其實很多時候我都會覺得前端究竟有完沒完，技術似乎怎麼學都學不完也學不透、付出的努力和收穫不成正比... 最後陷入自我懷疑🤦♀️ （甚至有想換跑道的念頭），但每次回過神冷靜下來，還是決定堅持初衷繼續往前端邁進。不過，這樣的負面情緒的堆疊確實影響到我的學習狀況，尤其是每每一個新技術誕生，我就會 FOMO 恐懼發作立即感到焦慮深怕錯過什麼，回想幾個月前看到新技術眼睛發亮🙈 在仔細回想和思考前輩的話後，我利用一張 A4 白紙回顧了踏入前端這段日子我所累積的知識，譬如 HTML 網頁架構和標籤寫法、CSS 畫面編排和位置、Javascript…
前些日子我寫了篇關於 functional programming 的文章 (Functional Programming 一文到底全紀錄)，講述了當時對 FP 的學習心得，與在實務中應用後的一些想法。 之後陸陸續續收到了一些反饋，有人詢問：「FP 能做的事情，現在 OOP 都做得很好，什麼情況下需要用到 FP？」 關於這個問題，我的回答總是 FP 準則中的「避免副作用」、「一個 Function 只做一件事情」、「以 Function 為程式的最小單位」能使我們只需要關注…
前言這篇文章將為排序篇章做一個結尾，文章會介紹選擇排序 (Selection Sort) 與插入排序 (Insertion Sort) 兩種排序法，透過上圖的排序法複雜度一覽表可以發現他們的執行效能相比其他排序法來的差一點，因此比較不常被使用，但要強調的是他們仍然有適合使用的情境，本篇文章將會簡單紀錄這兩個演算法的定義與程式碼實作。選擇排序法 (Selection Sort) 選擇排序法示意圖簡單來說選擇排序法一直重複的做兩件事:從尚未經過排序的陣列中找到最小值將當前找到最小值擺到最左邊時間複雜度 O(n²)程式碼範例這邊先設陣列的第一個數字是目前的最小值，然後往後把陣列的數值一個一個讀取，如果讀取的下個數比最小值大，就不作處理。而如果讀取到的數比目前的最小值小，就把目前的最小值換成這個數。重複這個方法把所有陣列裡的數都讀過一遍，就能確保目前的最小值為整個數列的最小值，扣除掉已經確定的最小值，剩下未確定的元素再重複執行以上步驟，直到陣列完成排序。function selectionSort(array) { const length = array.length; for(let i = 0;…
氣泡排序法 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;…
找不到好圖就亂畫 xDD 型別和值 是一個程式語言很重要的基石， 我們期待 “42” 、42 兩者表現會有不同， 前者我們期望他有字串的特性可以使用， 後者我們常用於數字運算的特性。 這也就是為什麼我們程式撰寫中，很重視基礎的型別和值。 而程式語言中，有兩種常見的特性： 1. 強型別語言 2. 弱型別語言 對於兩者的定義，各種地方都有不同的意見， 在此定義參考 Kyle Simpson ， 我們透過使用變數的時機，來決定是強/弱型別語言。 也就是說，如果一個變數，在宣告的時候指定型別， 那麼，我們說他是一個「強型別語言」。…
Photo by Hitesh Choudhary on Unsplash 前言 這是一系列我參加完鐵人賽的整理， 最近也透過 火箭隊軟體工程師培訓計畫（高雄） 的場地， 舉辦一系列實體的讀書會導讀， 已經進展到一半了，每次約 3 小時，一週一次已經連續約一個月左右。 透過實際寫過文章、實際講過 YDKJS 這個系列， 這次回顧，把一些真正重要的「大綱」整理出來。 這部分主要會分享一些「自己」的看法， 如果想知道 YDKJS 作者 Kyle Simpson…
本文原文撰寫於2017年，部分資料可能因時空背景而有不同。 如果你不曉得該如何為你的產品選擇一個合適的前端框架，這篇文章也許可以給你一些啟發。 一個有趣的事實是：IBM 發表的 2017 年最值得學習編程語言名單中，JavaScript 榜上有名。 正是這位 IT 巨頭指出，JS 在網站中驚人地達到 94.4％ 的使用率，而且「不太可能降低」。 JavaScript 能確保「對用戶非常友好的網頁，因為它負責整個 web 界面，包括動畫和交互」。 不管你怎麼看，JavaScript 很重要。 這也指明了潛在 Web…
上回這裡成功的建置環境後，進入下個環節的討論。就是在接觸框架之前，其實並不是非常明白所謂的架構，就會常常出現各種功能混在一起的情況，像是一個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…