操作完簡單的 Javascript 實作後，馬上來進到下一步 —— 認識重量級函式庫！ 那～ 我們馬上來看看 React.js 能帶給我們哪些便利之處吧～ 本篇日記針對 React 的十大特點做概括性的介紹 希望新手朋友們看完此篇對於 React 就能有最基礎的認識＆了解 😆 1. React 超基本介紹 為 Javascript 的函式庫 用於建造可重複使用、元件化、具互動性的 UI…
irisDecember 5, 2020
https://open.spotify.com/episode/6qzhzsD65TWVHNc10jbNhC 變數的概念好簡單？ 的確，真的不難，但有非常多概念關乎到 Javascript 基本功的扎實度，這也是身為初學者必須注意和掌握的地方 這集 Podcast 會和大家聊的是 JS 變數的基本邏輯，包括定義、指派等等，更會討論到雙重指派和 hoisting 的情況下會產生哪些奇特的狀況，當然我們不免會提到的是 JS 身為動態型別語言的特性＆原理和 hoisting 的背後隱藏邏輯～ 其他針對變數定義上的建議上相對而言與定義上的規定同等重要，譬如說怎麼樣才是好的變數命名法和怎麼樣才符合 JS 中變數的定義標準等等都是直得留意的地方。另外，最後也和大家提到 ES 6 中 let 和…
irisNovember 9, 2020
上週實作完徒手刻下拉式選單，這禮拜要來介紹偷吃步 —— 使用現成的 Bootstrap 來製作～ 但也別怪我這麼晚介紹這麼好用的功能，畢竟學習還是要從基本功開始一層一層堆疊上去 首先，你一定會問到：什麼是 Bootstrap 呢？ 根據官網定義，Bootstrap 是一個利於快速製作響應式網站 (responsive web) 和致力於行動優先 (mobile-first) 的框架，它裡面用到的技術不外乎 HTML, CSS 和 Javascript，也就是前幾集介紹過的那些東西。 在做前端的人應該多多少少聽過 RWD (Responsive Web…
irisNovember 7, 2020
首先，非常感謝蝦皮的後端資深工程師 Dayo 蒞臨快樂學程式的主題小聚直播活動來和各位觀眾互動，更感謝有熱情的觀眾捧場，讓這次的直播能順利落幕。 現在閱讀此篇的讀者，如果不想錯過一年都不見得有一次的聯合直播活動，趕緊手刀報名 10/29 的最後一場機器學習講座👍 精彩內容不容錯過～ Dayo 的有趣 demo： 功能為「價格不合理之提醒」，假若價格折數過低則會跳出 “My supervisor Messenger ID” 警示 第一部分：重點摘要 Overview 基礎架構、manifest.json Content Script 建立在…
irisOctober 28, 2020
今天我要來和新手朋友分享學習半年 JS 的成果分享，但我不打算談較個人的學習經驗（挫折、心路歷程等等），所以這就表示～ 此篇知識含量偏豐🤩 大家可以期待一下看完後精彩的 takeaway 嘍 👀 👣 開始閱讀前警示：本文中不會聊到太多過於冷僻或深入的內容，主要著重在有趣或是重要的應用。我也會盡可能找出新手的盲點（讓我自己學習起來較艱辛的部分），如果沒有剛好對上你的需求你可以考慮看看我的其他篇 JS 文章～😉 🎬 Action! 🎬 🙆♀️：JS 除了拿來做網頁互動之外，還有哪些新手知道後會嗨的點呢？讓我們一起看下去👇 新手不可不知的五個 JS 知識點 Null…
irisOctober 13, 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
