fbpx
Javascript小白學程式成長日誌程式新手

網頁日記 # 8|Iris 程式小白

操作完簡單的 Javascript 實作後,馬上來進到下一步 —— 認識重量級函式庫! 那~ 我們馬上來看看 React.js 能帶給我們哪些便利之處吧~ 本篇日記針對 React 的十大特點做概括性的介紹 希望新手朋友們看完此篇對於 React 就能有最基礎的認識&了解 😆   1. React 超基本介紹 為 Javascript 的函式庫 用於建造可重複使用、元件化、具互動性的 UI…
iris
December 5, 2020
Javascript初學程式小白學程式成長日誌

網頁日記 #5 | Iris 程式小白

前面幾集已差不多把 JS 基本觀念做了一輪概括性的整理,這集我要來和大家示範如何製作最簡易的下拉式選單,也順便驗收&應用所學觀念,那我們就不囉唆~ Let’s get rolling!   首先,製作最基礎的下拉式選單需要的是簡單的 HTML 和 CSS 觀念,甚至如果你只需要滑鼠游標 hover 到按鈕上就能展開選單的功能,那你根本不需要動用到 JS。今天小白🙆‍♀️ 我會分享不需要用到 JS 和必需要用到 JS 的下拉式選單版本,對 HTML 和 CSS 不熟悉(忘得差不多)的朋友也可以順便溫故知新唷~   …
iris
October 26, 2020
Javascript初學程式小白學程式程式新手

網頁日記|Iris 程式小白

JS 基本概念大補帖(上) 你是否和我一樣快速入手 JS 時沒想太多,但到頭來才發現少了些什麼呢? 那麼~這篇文章就是為你而寫 以下分為 JS 五問,送給同是新手的你們😆   🎯 1. 什麼是 console ? 什麼又是 console.log? Console 譯成中文即為「控制台」,普遍來說是 Javascript 中最直接的編譯器,讓開發者(讓任何寫 JS 的人都能快速除錯、初步篩檢)。 Log 相對來說較為複雜,一般我們平常所知道的意思為「對數」或是「木材」…
iris
August 30, 2020
Javascript工程思維

[Javascript] Point Free Style 如何幫助提高程式可讀性

前些日子我寫了篇關於 functional programming 的文章 (Functional Programming 一文到底全紀錄),講述了當時對 FP 的學習心得,與在實務中應用後的一些想法。 之後陸陸續續收到了一些反饋,有人詢問:「FP 能做的事情,現在 OOP 都做得很好,什麼情況下需要用到 FP?」 關於這個問題,我的回答總是 FP 準則中的「避免副作用」、「一個 Function 只做一件事情」、「以 Function 為程式的最小單位」能使我們只需要關注 Function 的正確性即可,讓程式更佳可讀、更易維護。 Point Free Style…
學程式助教
March 16, 2020
Javascript工程思維

JS 學資料結構與演算法 (排序篇) — 選擇排序法 & 插入排序法

前言 這篇文章將為排序篇章做一個結尾,文章會介紹選擇排序 (Selection Sort) 與插入排序 (Insertion Sort) 兩種排序法,透過上圖的排序法複雜度一覽表可以發現他們的執行效能相比其他排序法來的差一點,因此比較不常被使用,但要強調的是他們仍然有適合使用的情境,本篇文章將會簡單紀錄這兩個演算法的定義與程式碼實作。 選擇排序法 (Selection Sort) 選擇排序法示意圖 簡單來說選擇排序法一直重複的做兩件事: 從尚未經過排序的陣列中找到最小值 將當前找到最小值擺到最左邊 時間複雜度 O(n²) 程式碼範例 這邊先設陣列的第一個數字是目前的最小值,然後往後把陣列的數值一個一個讀取,如果讀取的下個數比最小值大,就不作處理。而如果讀取到的數比目前的最小值小,就把目前的最小值換成這個數。重複這個方法把所有陣列裡的數都讀過一遍,就能確保目前的最小值為整個數列的最小值,扣除掉已經確定的最小值,剩下未確定的元素再重複執行以上步驟,直到陣列完成排序。 function selectionSort(array) { const length =…
學程式助教
March 16, 2020
Javascript工程思維

JS 學資料結構與演算法 (排序篇) — 氣泡排序法 Bubble Sort

氣泡排序法 Bubble Sort 其實氣泡排序法算是最容易理解的排序法,也常作為初學者入門學習的演算法,相信經過前兩篇較為複雜的快速排序法、合併排序法後,可以快速理解氣泡排序法的內容與實作方法。 氣泡排序法定義 氣泡排序法的過程會從陣列最左邊開始將元素兩兩比較,每一輪都會把最大的數值移動到陣列末端,這個行為就好像氣泡不斷從底部冒出一樣,因此被稱作氣泡排序法。 氣泡排序法的實作步驟如下: 比較相鄰的兩個元素,若前面的元素較大就進行交換。 重複進行1的動作直到最後面,最後一個元素將會是最大值。 重複進行1,2的動作,每次比較到上一輪的最後一個元素。 重複進行以上動作直到沒有元素需要比較。 把文章一開始示意圖的第一部份拆過來看,一開始把陣列的第一個元素跟第二個元素比較,如果前面的元素比後者大,就將兩元素交換,如果前者元素比後者小,就不做調整。這邊因為 5 比 1 大,因此將兩元素交換,接著看第二個元素跟第三個元素,依此類推,最後會將陣列中最大的元素放到陣列最後頭,接著重複以上步驟,直到所有元素都經過排列,排序才結束。 時間複雜度 因為實作會使用到雙重迴圈,因此平均時間複雜度為 O(n²) 平均: O(n^2) 空間複雜度 因為沒有額外建立其他資料結構,因此空間複雜度為: O(1) 程式碼範例…
學程式助教
March 16, 2020
Javascript工程思維

跟著 YDKJS 作者 Kyle Simpson 打造全新 JavaScript Mindset : 型別(type)

找不到好圖就亂畫 xDD 型別和值 是一個程式語言很重要的基石, 我們期待 “42” 、42 兩者表現會有不同, 前者我們期望他有字串的特性可以使用, 後者我們常用於數字運算的特性。 這也就是為什麼我們程式撰寫中,很重視基礎的型別和值。 而程式語言中,有兩種常見的特性: 1. 強型別語言 2. 弱型別語言 對於兩者的定義,各種地方都有不同的意見, 在此定義參考 Kyle Simpson , 我們透過使用變數的時機,來決定是強/弱型別語言。 也就是說,如果一個變數,在宣告的時候指定型別, 那麼,我們說他是一個「強型別語言」。 如果一個變數,宣告的時候不能(或不需要)指定型別, 那麼,我們說他是一個「弱型別語言」。 註: 這邊要小心幾個名詞: 1.…
學程式助教
March 14, 2020
Javascript工程思維

跟著 YDKJS 作者 Kyle Simpson 打造全新 JavaScript Mindset : 序 (一)

Photo by Hitesh Choudhary on Unsplash 前言 這是一系列我參加完鐵人賽的整理, 最近也透過 火箭隊軟體工程師培訓計畫(高雄) 的場地, 舉辦一系列實體的讀書會導讀, 已經進展到一半了,每次約 3 小時,一週一次已經連續約一個月左右。 透過實際寫過文章、實際講過 YDKJS 這個系列, 這次回顧,把一些真正重要的「大綱」整理出來。 這部分主要會分享一些「自己」的看法, 如果想知道 YDKJS 作者 Kyle Simpson 對於 JS 的想法, 可以參考我的鐵人文章。 鐵人賽…
學程式助教
March 14, 2020
Javascript工程思維

如何在主流 JavaScript 框架中做選擇?横向對比 Vue, React, AngularJS, and Angular2

本文原文撰寫於2017年,部分資料可能因時空背景而有不同。 如果你不曉得該如何為你的產品選擇一個合適的前端框架,這篇文章也許可以給你一些啟發。 一個有趣的事實是:IBM 發表的 2017 年最值得學習編程語言名單中,JavaScript 榜上有名。 正是這位 IT 巨頭指出,JS 在網站中驚人地達到 94.4% 的使用率,而且「不太可能降低」。 JavaScript 能確保「對用戶非常友好的網頁,因為它負責整個 web 界面,包括動畫和交互」。 不管你怎麼看,JavaScript 很重要。 這也指明了潛在 Web 開發人員的方向:如果你深入前端,你不得不在某些時刻面對 JavaScript。並且 正確的開發指南 可能有助於此。 讓我們假設你知道 JavaScript 基礎知識,不是一無所知的那種,如果假設是正確的,…
學程式助教
March 11, 2020
Javascript工程思維

用Vue.js框架實作自己的Blog – CH3 Vue實例

在接觸框架之前,其實並不是非常明白所謂的架構,就會常常出現各種功能混在一起的情況,像是一個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({…
學程式助教
March 11, 2020