krebikshaw / blog

部落格

學習心得記錄

學習規劃

參考https://github.com/Lidemy/mentor-program-3rd https://github.com/Lidemy/mentor-program-4th

https://github.com/Lidemy/mentor-program-3rd-yakim-shu/tree/aea7c413016c40b4b61194e25580eac8be54eb0f/homeworks

暖身 (完成日期 2020/04/30)

大致介紹整個計畫以及帶學生看過一次課程大綱，接著說明整體架構，介紹各種不同工程師職位所負責的工作內容並著重在網頁工程師的介紹，並說明課程進行方式。

除此之外，也會帶大家看一下學習的方法並推薦相關課程，為之後的課程做好準備。

Mindset 建立：

1. 不要害怕問問題，每個問題都值得被提出來，你的問題可能也是其他人的問題
2. 問問題前應該要自己查詢資料（有些很難查的直接問也可以）
3. 你有老師讓你盡量問，反正問就對了，有錯的話我會提醒你
4. 重點是「目的」，而不是「手段」，持續問為什麼為什麼為什麼為什麼
5. 學程式需要換一個思維模式

建置基礎環境，例如說 Command Line Tool 與 Git，以及學會如何交作業。

指定教材：

1. [CMD101] Command Line 超新手入門：全部
2. [GIT101] Git 超新手入門：全部
3. [CS101] 初心者的計概與 coding 火球術：1-1 ~ 2-4、4-1、4-2、11
4. 程式導師實驗計畫第二期：Lesson 1-1（可以快轉忽略與第二期本身相關的部分）

HW1 作業連結

自我檢測

• 你說得出程式如何執行
• 你理解寫程式的本質只是一行行的指令
• 你了解前端與後端的區別
• 你能說出從發出一個 request 到接收 response 中間發生的事
• 你了解不同載具的差異在哪（Desktop、Mobile、Web）
• 你了解基本的 command line 指令
• 你知道 Git 在做什麼，以及為何我們需要 Git
• 你知道 add、commit、push、pull 等基本 Git 指令
• 你知道怎麼使用 branch 並送出 Pull Request
• 你熟悉 Git Workflow

程式基礎（上）(完成日期 2020/04/30)

前四週其實是這個計畫最重要的一個月，希望能在這四週讓學生把基礎打得相對紮實，這樣比較好應付之後的課程。

這一週的學習目標是程式基礎，包括但不限於：變數、陣列、迴圈、判斷式以及函式（以 ES5 為例）。

必須要強迫自己轉換成寫程式的思考模式，否則這一週對你來說會是惡夢。對於從來沒有接觸過類似思考模式的人可能會需要點時間，但只要慢慢練習，就會越來越進入狀況。

還有一點請大家注意，程式是按照你寫的跑，不是按照你想的跑。當程式執行結果超出預期時，console.log是你的好朋友，可以把東西印出來看看是不是跟你想的一樣。

最後，在這週也會講到 eslint，我已經幫大家設置好了 eslint，這是一個能夠幫你自動做語法檢查的工具，在每次 commit 之前都會自動檢查程式碼的規範，不符合規範的話不會讓你 commit。

指定教材：

1. [JS101] 用 JavaScript 一步步打造程式基礎：開頭到綜合練習 Lv1

進階閱讀：

1. [CS101] 初心者的計概與 coding 火球術：7-1~7-4

HW2 作業連結

自我檢測：

• 你能靈活運用變數、迴圈、判斷式等等基本概念來解題
• 你能一行行的說出現在程式在做什麼
• 你知道「回傳」跟「輸出」的差異
• 你可以把用文字寫好的演算法轉成程式碼

程式基礎（下）(完成日期 2020/04/30)

在程式基礎的部分一週是絕對不夠的，因此本週會繼續加強程式基礎。在這一週裡面我們會延伸上一週的內容，並且多講一些有關於 ES6 的語法。

像是介紹常用內建函式如 replace、indexOf、split、map、filter、join、parseInt 以及 Math 等等。

也會教大家寫簡單的 unit test，並且自己寫 test case 檢驗自己的函式。

本週的作業有自動批改系統，請傳到 Lidemy OJ 上，並且確認每一題都有答對之後再交作業，否則我會直接退件（hw5 除外，因為這題比較難，沒有通過依然可以先交作業）。

HW3 作業連結

指定教材：

1. [JS101] 用 JavaScript 一步步打造程式基礎：全部
2. [JS102] 升級你的 JavaScript 技能：ES6 + npm + Jest：全部

上一期相關部分：

1. 程式導師實驗計畫第二期：Week2 加強 JavaScript
2. 程式導師實驗計畫第二期：Week2 - ES6

寫完作業以後才能看：

1. 程式導師實驗計畫第二期：Week3 - 第二週作業檢討

自我檢測

• 你理解常用內建函式如何使用
• 你熟悉程式語法並知道如何解決基礎問題
• 你知道為什麼我們需要 unit test
• 你知道什麼是 unit test
• 你知道如何寫 unit test
• 你知道如何測試一個 function

網路基礎 (完成日期 2020/05/06)

無論是前端還是後端，身為一個網頁工程師，你必須很清楚整個網路運作的輪廓。細節你可以日後再研究，但一定要能掌握大方向以及重要概念，否則你未來的路絕對會走得很崎嶇。

在這週裡面我們會學到兩台電腦在網路上該怎麼溝通，從上層往下，再從底層往上，一步步建立起你對網路的世界觀。

當然，只有理解是不夠的，我們也會用 Node.js 讓你實作簡單的網路爬蟲以及串接基本的 API，帶你熟練與網路相關的知識。

HW4 作業連結

指定教材：

1. [NET101] 網路基礎概論（搭配 JS 實作練習）：全部
2. [CS101] 初心者的計概與 coding 火球術：4-1 ~ 4-4
3. 從拉麵店的販賣機理解什麼是 API

自我檢測

• 你知道網路背後大概的運作模式
• 你知道什麼是 Request 跟 Response
• 你知道什麼是 DNS 以及運作原理
• 你知道 HTTP 與 HTTPS 的差異
• 你知道 localhost 跟 127.0.0.1 是什麼
• 你知道 GET 與 POST 的差別
• 你知道常用的 HTTP Header
• 你知道什麼是 API
• 你會使用 node.js 寫出串接 API 的程式
• 你知道 HTTP method 有哪些
• 你知道基本的 HTTP statud code，像是 200、301、400、404、500

複習

經過前面四週的各種摧殘，終於迎來了第一次的複習週！

複習週顧名思義，就讓大家複習前面這四週的進度用的，這四週我們一共學了四項主要的技能：

1. Command line 的使用
2. Git 的基本操作
3. JavaScript 基本語法及程式思維
4. 網路基本概念

如果你之前因為趕時間亂寫而亂寫作業，現在是回去重新省視一遍的好時機；或者是之前有查到什麼有趣的延伸資料但沒時間看的，這一週你就有時間看了。

在複習週是沒有任何進度的，但是會有兩個小挑戰，讓你們檢驗自己前面學到的技能。

HTTP Game

為了檢驗你對於 API 串接是否理解，我特地做了一個很有趣的小遊戲：Lidemy HTTP Challenge。

建議使用之前教過的 node.js 搭配 request 這個 library 來解題，才能比較有效確認自己是否前面都有學進去。

我有藏了一些很無聊的梗在裡面，解題的時候可以順便找找。

NPSC 題目練習

NPSC 中文全名為網際網路程式設計全國大賽，是台大每年都會辦給國中生跟高中生參加的比賽。

裡面很多題目都很有趣，適合拿來給程式初學者練習，我特地找了一些比較簡單的題目，大家可以用來檢驗自己的程式基礎是否紮實：Lidemy OJ。

HW5 作業連結

前端基礎（一）

本週將會正式進入到前端課程的領域，開始用 HTML 與 CSS 打造出基本的網頁，並且利用 media query 實現簡單的 RWD（Responsive Web Design）。

HTML 的部分就簡單帶過幾個常見的 tag，帶到 head 的一些屬性跟設定，也會講到跟 SEO 有關的一些 tag（title, description, json ld...）。

主要會著重在 CSS 的部分，並且讓大家多多練習。

也可以先看一下這兩篇文章（很多地方你會看不懂，但沒關係）先培養一下對前端的感覺，等幾週過後當我們學得越來越多，再看一次會有完全不同的感受：零基礎的小明要如何成為前端工程師？、跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR

指定教材：

1. [FE101] 前端基礎：HTML 與 CSS：全部
2. 程式導師實驗計畫第二期：Week3-2 - CSS
3. Chrome 網頁除錯功能大解密

寫完作業才能看：

1. 程式導師實驗計畫第二期：Week4-1 - 上週作業檢討

HW6 作業連結

自我檢測

• 你知道 HTML 是在做什麼的
• 你知道如何使用有語意的（semantic）標籤
• 你知道基本 SEO 的概念
• 你知道 CSS 是什麼
• 你知道 inline、block 跟 inline-block 的區別
• 你知道什麼是 box model
• 你知道 position 的所有屬性及其差別
• 你知道 :hover, :before, :after
• 你知道 :nth-child 的各種用法
• 你熟悉 CSS selector，可以輕鬆選到想選到的元素

前端基礎（二）

這一週將會進入到 JavaScript，讓網頁變得有互動性，並結合 <form> 做表單驗證，以及讓大家寫出簡單的網頁應用程式。

這會是我們第一次把 JavaScript 應用在網頁上，來學習怎麼使用 JavaScript 操控 DOM 物件，讓網頁動起來。

指定教材：

1. [FE102] 前端必備：JavaScript：到 ajax 之前
2. 程式導師實驗計畫第二期：Week4-2 - JavaScript

指定閱讀：

1. DOM 的事件傳遞機制：捕獲與冒泡

HW7 作業連結

自我檢測

• 你知道 JavaScript 跑在網頁上跟跑在 Node.js 上差在哪裡
• 你知道 DOM 是什麼
• 你知道如何用 JavaScript 操控 DOM 物件
• 你知道如何幫一個按鈕加上 event listener
• 你知道捕獲與冒泡是什麼
• 你知道什麼是事件代理（delegation）
• 你知道怎麼用 JavaScript 更改元素的 style
• 你知道 preventDefault 與 stopPropagation 的差異

前端基礎（三）

之前在第四週時有提過 API，也有讓大家試著用 node.js 寫些小程式來串接。

而前端當然也能串接 API，理解前後端如何串接是很重要的一部分，因此這週會花滿多心力再來講 API 串接，讓大家複習一下 API 的概念，並且教大家什麼是 Ajax。

指定教材：

1. [FE102] 前端必備：JavaScript：ajax 以後

寫完作業才能看：

1. 從假資料到真資料：Ajax 與 API 串接

相關學習資源：

1. 輕鬆理解 Ajax 與跨來源請求
2. RESTful API Design by TritonHo

HW8 作業連結

自我檢測

• 你知道什麼是 API
• 你知道什麼是 Ajax
• 你知道從網頁前端呼叫 API 與在自己電腦上寫程式呼叫的差異
• 你知道什麼是同源政策（Same-origin policy）
• 你知道如何存取跨網域的資源（CORS）
• 你知道什麼是 JSON
• 你知道什麼是 JSONP 及其原理
• 你知道 Fetch 的基本使用方法

後端基礎（一）

前端基礎打得差不多以後，就要進入後端的課程，這次課程會以 PHP 為主要的語言，Node.js 為輔助。

這週的課程會講解 PHP 基本觀念、語法，並且教大家安裝設定 MySQL，寫出簡單的 CRUD 應用。

指定教材（學習順序請參考 Lidemy.com 上的說明）：

1. 程式導師實驗計畫：Lesson 5-1 之後端基礎
2. 程式導師實驗計畫：Lesson 5-2 之資料庫
3. [CS101] 初心者的計概與 coding 火球術：5-3
4. [BE101] 用 PHP 與 MySQL 學習後端基礎：全部
5. 程式導師實驗計畫第二期：Week5-2：物件導向程式設計
6. Week5 物件導向（續）：繼承與 static

上一期相關內容：

1. 程式導師實驗計畫第二期：Week5 - 後端基礎

物件導向相關閱讀：

1. http://expect7.pixnet.net/blog/post/38682120
2. https://noob.tw/java-oop/
3. https://blog.miniasp.com/post/2009/08/27/OOP-Basis-What-is-class-and-object.aspx
4. http://blog.turn.tw/?p=3093
5. https://www.ptt.cc/bbs/OOAD/M.1256403807.A.8AE.html

如果作業寫不出來，可參考：

1. 程式導師實驗計畫第二期：Week10-1 PHP 簡易會員系統 + 留言板
2. 程式導師實驗計畫：Lesson 6-1 之 live coding
3. 程式導師實驗計畫：Lesson 5-3 之作業檢討

相關學習資源：

1. 第一正規化(First Normal Form, 1NF)

HW9 作業連結

自我檢測

• 你知道 PHP 是什麼
• 你知道前端與後端的差別
• 你知道什麼是資料庫
• 你了解基本的 SQL 語法，包括 Select、Insert Into、Delete 與 Update
• 你能夠寫出基本到 CRUD 應用

複習

這是第二次的複習週，在前四週我們一共學了：

1. HTML 與 CSS
2. DOM 以及 JavaScript 如何與網頁互動
3. 前端利用 Ajax 與後端串接
4. PHP 與 MySQL

這一週可以讓你有時間好好複習之前的內容，若是覺得都 ok 了，也可以試試看之前的進階挑戰題、挑戰題以及超級挑戰。

這次跟第五週一樣，怕大家太無聊，於是準備了兩個有趣的小遊戲給大家玩。

綜合能力測驗

這邊有一份參考某間公司面試考題的綜合能力測驗，還滿有趣的，主要是測前幾週的整合能力。

如果你點進去看到一片白畫面，那或許不代表網頁壞了。

闖關遊戲

一共十關，看你能闖到第幾關：r3:0 異世界網站挑戰（特別感謝 @minw 製作遊戲）。

HW10 作業連結

後端基礎（二）

接下來幾週都會以之前的留言板作為主軸，一步步加強它，使它成為一個比較完整的產品。

在這過程中你會學到許多新的後端概念，也會幫留言板加上更多更多的新功能！

指定教材（學習順序請參考 Lidemy.com 上的說明）：

1. [BE101] 用 PHP 與 MySQL 學習後端基礎：全部
2. [CS101] 初心者的計概與 coding 火球術：4-3、5-4

HW11 作業連結

自我檢測

• 你知道什麼是雜湊（Hash function）
• 你知道什麼是加密（Encryption）
• 你知道雜湊與加密的差別
• 你知道什麼是 Session
• 你知道什麼是 Cookie
• 你知道 Cookie、Local Storage 與 Session Storage 的差別
• 你知道 Session 與 Cookie 的差別

後端基礎（三）

這一週我們要強調一個很重要的觀念：資訊安全。

無論你是前端還是後端，都必須時時刻刻在心裡惦記著資訊安全的概念，總結為一句話就是：「不要相信任何來自 client 端的資料」，只要能做到這點，其實就可以阻止掉很多的惡意攻擊。

指定教材（學習順序請參考 Lidemy.com 上的說明）：

1. [BE101] 用 PHP 與 MySQL 學習後端基礎：全部
2. 程式導師實驗計畫：Lesson 6-2 之 Web Security
3. 程式導師實驗計畫：Lesson 6-3 之 HW6 作業檢討
4. 程式導師實驗計畫第二期：Week6-1：後端基礎（中）
5. 程式導師實驗計畫第二期：Week6-2：資訊安全
6. [CS101] 初心者的計概與 coding 火球術：5-5

若是作業寫不出來：

1. 程式導師實驗計畫第二期：Week10-2 會員系統安全加強 + 兩層留言板
2. 程式導師實驗計畫第二期：Week11-1 資訊安全加強

延伸閱讀：

1. 讓我們來談談 CSRF

HW12 作業連結

自我檢測

• 你知道什麼是 SQL Injection 以及如何防範
• 你知道什麼是 XSS 以及如何防範
• 你知道什麼是 CSRF 以及如何防範
• 你知道為什麼儘管前端做了驗證，後端還是要再做一次驗證

前端基礎（四）

首先帶大家串接之前自己寫出來的 API，把前端介面用 Ajax 改寫，使網頁互動性變得更高。讓大家熟悉 jQuery，把現有應用用 jQuery 改寫一次。

版面的部分則利用 Bootstrap 搭配 Bootswatch 讓介面變得美觀。利用網格系統實作 RWD。

除了這些呢，也會幫大家補充 Promise 的一些用法。

指定教材：

1. 程式導師實驗計畫第二期：Week7-1 前端基礎（下）
2. 程式導師實驗計畫第二期：Week7-2 Fetch & Promise
3. 程式導師實驗計畫：Lesson 7-1 之 jQuery 與 Bootstrap
4. 程式導師實驗計畫：Lesson 7-2 之 jQuery Bootstrap 實戰應用

作業寫不出來可參考：

1. 程式導師實驗計畫第二期：Week11-2 改寫 Ajax

HW13 作業連結

自我檢測

• 你知道 jQuery 是做什麼的
• 你知道 jQuery 與 vanilla js 的差別
• 你知道用 Ajax 去 call API 與伺服器直接輸出資料的差別
• 你知道如何與自己寫的 API 串接
• 你知道什麼是 Bootstrap
• 你知道 Bootstrap 原理及如何應用
• 你知道什麼是網格系統以及如何應用在 RWD
• 你知道什麼是 Promise
• 你知道 Promise 的三種狀態

後端基礎（四）

有了自己的前後端程式之後，就可以開始來部署了。這週的重點會放在帶大家直接去買主機（AWS、Digital Ocean、Linode），並且了解如何連上主機。

也會讓大家購買自己的網域，理解如何將網域以及主機串連起來，讓大家可以連線到你的網站。

在這個章節也會讓大家理解後端基本架構（NAT、Load balancer、DB replication 等等）

最後也會補齊跟資料庫的一些知識，像是 ACID、Transaction、View 以及 Stored procedure。

這週也要特別感謝 gandi 連續三期全額贊助了網域的費用 <(_ _)>。

指定教材（學習順序請參考 Lidemy.com 上的說明）：

1. 程式導師實驗計畫：Lesson 8-2 之資料庫
2. 程式導師實驗計畫第二期：Week8-1 後端基礎（下）
3. 程式導師實驗計畫：Lesson 8-1 之後端基礎與網路相關知識
4. 程式導師實驗計畫：Lesson 8-3 之 hw8 作業檢討
5. 程式導師實驗計畫第二期：Week9-1 基礎到中階

推薦閱讀：

1. 部署 AWS EC2 遠端主機 + Ubuntu LAMP 環境 + phpmyadmin
2. 一小時完成 VPS (Virtual Private Server) 部署
3. 如何遠端連接虛擬主機上的 mySQL 資料庫 ？

相關學習資源：

1. MySQL 超新手入門（11）Views
2. MySQL Views
3. MySQL 超新手入門（13）Stored Routines 入門
4. 只要說「我要下午茶！」——什麼是資料庫預存程序？
5. MySQL Stored Procedure
6. MySQL 超新手入門（16）Triggers
7. MySQL Triggers
8. 跟 Trigger 與 View 相關的簡報 by TritonHo
9. 跟 ACID 有關的簡報 by TritonHo
10. MySQL CREATE INDEX
11. Stored procedure 相關討論：討論一、討論二、討論三、討論四

HW14 作業連結

自我檢測

• 你知道虛擬空間、虛擬主機以及實體主機的差別
• 你知道什麼是網域（Domain）
• 你知道如何設定網域（A、CNAME）
• 你知道如何用 SSH 遠端連線到自己的主機
• 你知道如何部署應用程式
• 你知道什麼是 No SQL
• 你知道什麼是 Transaction 與 lock
• 你知道資料庫的 ACID 是什麼
• 你知道什麼是資料庫的 View 以及使用時機
• 你知道什麼是 Stored procedure 以及如何使用
• 你知道資料庫的 Trigger 以及使用時機

複習

終於到了第三次的複習週，這次要複習的東西比以往都多了點：

1. Session 與 Cookie 的差異
2. 資訊安全（Hashing, SQL Injection, XSS）
3. jQuery
4. Bootstrap
5. Promise
6. 部署

這次提供三個跟資訊安全相關的練習網站，都跟我們以前複習週的模式差不多，可以一直闖關：

1. https://xss-game.appspot.com（[解題影片，有雷](https://www.youtube.com/watch?v=MMMkvHwqPRY)）
2. http://www.hackertest.net/
3. http://xss-quiz.int21h.jp/ （這個可能會被 Chrome 擋下來...可以用 Firefox 或是其他網站玩）

祝大家玩得開心！

另外，這一週的作業除了心得以外，也提供了一個跟以往不太一樣的測驗：網站前後端開發基礎測試，一共十題簡答題，Google 表單在送出之後可以看見參考解答，能夠自己對答案。

HW15 作業連結

前端中階（上）

這週的東西比較分散一些，我們會著重在三個部分：

1.CSS 預處理器

在被 CSS 折磨這麼久之後，終於有機會用程式化的方法來撰寫 CSS，這週將介紹幾個不同的 CSS preprocessor（LESS, SASS, Stylus），讓學生自行選擇看順眼的並且練習，把之前的 CSS 都改寫。

2.基本資料結構

這週會介紹到基本的資料結構 stack 與 queue 與 JavaScript 的物件導向。

3.什麼是快取（Cache）？

快取對工程師來說是一定要理解的概念，前端有前端的快取，後端也有後端的。這週主要會著重在前端快取的介紹上。

指定教材（學習順序請參考 Lidemy.com 上的說明）：

1. 程式導師實驗計畫：Lesson 9-1 之 CSS 預處理器
2. 程式導師實驗計畫：Lesson 9-2 之資料結構、Cache 與 Event Loop
3. 程式導師實驗計畫：Lesson 9-3 之作業檢討
4. 程式導師實驗計畫第二期：Week9-1 基礎到中階
5. 程式導師實驗計畫第二期：Week9-2 JavaScript 執行原理

HW16 作業連結

自我檢測

• 你知道什麼是 Cache
• 你知道 HTTP Cache 的原理以及相關 Header
• 你了解 CSS 預處理器的目的以及原理
• 你知道什麼是 Stack
• 你知道什麼是 Queue
• 你可以用 JavaScript 實作出 Stack 跟 Queue
• 你知道 CSS Selector 權重的計算方式

前端中階（中）

本週主要會放在 JavaScript 的一些重要基礎以及瀏覽器運作時的機制。

第一個重點是瀏覽器在運行 JavaScript 時的 Event Loop 機制。

第二個重點就是 JavaScript 的一些重要基礎，包含：scope、hoisting、closure、prototype、this 等等。

指定教材：

1. 程式導師實驗計畫第二期：Week9-2 JavaScript 執行原理
2. [JS201] 進階 JavaScript：那些你一直搞不懂的地方
3. What the heck is the event loop anyway? | Philip Roberts | JSConf EU

HW17 作業連結

自我檢測

• 你知道 Event Loop 的運作方式
• 你知道什麼是作用域（Scope）
• 你知道 Hoisting（提升）是什麼
• 你知道 Hoisting 的原理為何
• 你知道 Closure（閉包）是什麼
• 你能夠舉出一個運用 Closure 的例子
• 你知道 Prototype 在 JavaScript 裡是什麼
• 你知道大部分情況下 this 的值是什麼

前端中階（下）

這週將學習把工作自動化，利用 gulp 管理工作流程，避免繁瑣的手動操作。

也會講到 Webpack 誕生的理由以及模組化的 JavaScript 開發，讓學生理解為何需要使用 Webpack。

除此之外也會講到一些與 CSS 相關的優化小技巧，例如說針對圖片做優化的 CSS Sprites 或是 Data URI，或是 JavaScript 與 CSS 的 uglify、minify 等等。

最後也會用跟以往不太一樣的模式，做出一個簡單的 todo list。

指定教材：

1. 程式導師實驗計畫：Lesson 10-1 之 gulp 與 webpack （注意，影片裡面教的是舊版的 Gulp 與 Webpack，學概念就好，實作請參考其他教學或是官方文件）

寫完作業可參考：

1. 程式導師實驗計畫：Lesson 10-2 之 HW10 作業檢討

HW18 作業連結

自我檢測

• 你知道 gulp 的目的以及原理
• 你知道 webpack 的目的以及原理
• 你熟悉如何使用 webpack 進行模組化開發
• 你熟悉如何使用 gulp 建構自動化工作流程
• 你能夠快速打造出基礎環境
• 你知道 CSS 優化的一些小技巧
• 你知道 CSS Sprites 與 Data URI 的優缺點
• 你知道什麼是 uglify 與 minify

網路基礎複習

學到這週為止，前後端的概念你應該滿清楚了，我們也學了不少東西，下一週是複習週，再下一週就要正式進入前後端框架的領域了。

在進入到那邊以前，我們還要來複習一些東西並且加強基礎。

我們首先要加強的第一個東西是複習前面教的網路基礎，你必須對前後端溝通的每一個流程都很確定，在之後的單元中才不會迷失自我。

接著要來講的是 SPA，還記得之前貼給你們看過的那兩篇文章嗎？零基礎的小明要如何成為前端工程師？、跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR，這週的重點會放在這兩篇文章上面，讓大家清楚知道背後的概念為何。

指定教材：

1. 複習第四週網路概念：CS75 (Summer 2012) Lecture 0 HTTP Harvard Web Development David Malan
2. 複習第十四週系統架構：CS75 (Summer 2012) Lecture 9 Scalability Harvard Web Development David Malan

HW19 作業連結

自我檢測

• 你知道什麼是 SPA
• 你知道後端 MVC 與前端 MVC 的差異
• 你知道前端路由與後端路由的差異

複習

這是最後一次的複習週了，在前幾週我們一共學了：

1. CSS 預處理器
2. 基本資料結構
3. HTTP Cache
4. JavaScript 觀念：scope、hoisting、closure、prototype、this
5. Event Loop
6. Gulp 與 Webpack
7. 網頁圖片優化

至此，這個課程的基礎跟中階都學完了，從下週開始就要進入到前後端框架的領域。

為了怕大家複習週太無聊，這次也準備了一個有趣的小測驗，Lazy Hackathon 是一個速度很慢的網站，原因有很多，原始碼在這裡：https://github.com/Lidemy/lazy-hackathon （特別感謝 @yakim-shu 同學製作這個小測驗）

現在呢，你要來負責優化這個網站，在「不動內容」的情形下來調整，意思就是說網頁看起來要「長得一模一樣」，把圖片變黑白、刪減文字或是更動排版都是不允許的，但刪減多餘的 HTML、CSS 和 JS 是 ok 的，只要保證網頁看起來一樣就行了，原始碼怎麼動隨便你，總之目標是使網站的載入速度變快。

詳細說明請參考上面的原始碼連結。

若是你沒有任何靈感，可參考 web.dev 或是 Website Performance Optimization

HW20 作業連結

前後端框架（一）

後端框架（一）

這一週終於正式進入後端框架的領域了！

之前我們學過了原生的 PHP，而這一週呢，你要來自學一個輕量的 PHP 框架 CodeIgniter。

相信大家之前在寫留言板的時候，寫到後面會發現自己的程式碼愈來愈亂，而且不知道怎麼整理。框架就是解決這個問題的方法之一，因為它已經制定了一系列的規範，你只要學習並且照著做就好，每一個部分的分工都會比之前明確。

再者，用框架來改寫的好處就是你可以迅速跟之前的專案做比對，一定會有許多心得！所以這週在教完之後，會讓大家把之前的留言板從純 PHP 用 CodeIgniter 這套框架改寫，就可以比較一下兩者之間有哪裡不一樣。

（這一週預期會卡的很嚴重，如果你卡超過兩週，請果斷先放棄這週並且往下一週前進，其實這週跟之後三週比較沒有順序關係，要先跳到下一週也是可以的）

指定教材：

1. 程式導師實驗計畫：Lesson 14-1 之 CodeIgniter 上
2. CodeIgniter 使用手冊

HW21 作業連結

自我檢測

• 我了解一般後端框架的各個元素
• 我了解 Route 以及 MVC
• 我能透體驗到純 PHP 跟有框架的差別在哪裡

前端框架（一）

終於要進入到前端框架 React 了（雖然嚴格來說 React 並不是一個框架，但搭配其他各種 React 生態系成員，其實就算是一個框架了）。

這週會學習到 React 的基本應用以及原理，了解為什麼我們需要使用 React。

延伸閱讀：React 性能優化大挑戰：一次理解 Immutable data 跟 shouldComponentUpdate

指定教材：

1. [FE301] React 基礎：全部
2. 程式導師實驗計畫第二期：Week12-1 React
3. 程式導師實驗計畫第二期：Week12-2 React 續
4. 官方教學
5. React.js 小書

不確定有沒有幫助（因為內容跟第二期重疊的部分很多）：

1. 程式導師實驗計畫：Lesson 12-1 之 React
2. 程式導師實驗計畫：Lesson 12-2 之 React 下

HW21 作業連結

自我檢測

• 我知道 React 的目的以及原理
• 我知道我們為什麼需要 React
• 我知道使用 React 跟之前使用 jQuery 的區別
• 我理解 state 跟 props 的不同

前後端框架（二）

後端框架（二）

之前上過了 PHP 與輕量框架 CodeIgniter，這一週會帶大家上 Express 並且來用 JavaScript 寫後端。

Express 是可以在 Node.js 環境下執行的輕量後端框架，自由度極高，也能夠快速開發出後端應用程式。

跟之前有完整 MVC 架構的 CodeIgniter 相比，Express 其實鬆散（或者說自由）很多，許多地方並沒有強制規範，都只是按照前人的方法或者是慣例來實踐，十個人可能會有十種不的寫法。

有了之前 PHP 以及 CodeIgniter 的基礎，我相信學習 Express 會快速許多，因此在這一週裡面可以試試看能不能快速上手 Express 並完成作業。

指定教材：

1. [BE201] Express 與 Sequelize：「ORM 與 Sequelize」單元前所有內容

HW22 作業連結

自我檢測

• 學習如何使用 Express 及其相關套件
• 學過兩套不同語言的框架之後，我能發現其中的異同
• 我理解為什麼會需要框架

前端框架（二）

在上一週結束之後，大家應該對 React 有了一些基本的感覺，這一週我們要繼續培養對 React 的感覺，讓大家對 React 越來越熟練。

除此之外也會教大家用 React Router 這一套 library，來實做前端的路由。

指定教材：

1. [FE301] React 基礎：全部
2. 程式導師實驗計畫第二期：Week13-1 還是 React
3. 程式導師實驗計畫第二期：Week13-2 依舊 React

HW22 作業連結

延伸閱讀：前後端分離與 SPA、跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR

自我檢測

• 我熟悉 React 的基本使用
• 我知道如何使用 React Router
• 我了解 React Router 的目的
• 我知道什麼是 Single Page Application
• 我理解現在的前端與以往的差別

前後端框架（三）

後端框架（三）

上一週我們學會了 Express 並且成功把留言板移植過來，對基本的操作都已經很熟悉了。

這一週要介紹的是一個新的東西：ORM（Object Relational Mapping），簡單來說就是把一個程式碼裡面的物件跟資料庫的物件做映射，優點就是當你操作程式裡的物件時，就會改到資料庫裡的資料。

而且你幾乎不需要寫任何 SQL Query，因為 ORM 都會幫你處理的好好的，你只要學習怎麼用就可以了。這一週會使用 Sequelize 這個套件來做 ORM 以及串接資料庫，讓你體驗看看不用寫 SQL Query 的爽快感。

指定教材：

1. [BE201] Express 與 Sequelize：「部署：Nginx + PM2」前所有單元

HW23 作業連結

自我檢測

• 了解什麼是 ORM
• 了解 ORM 的優缺點
• 了解什麼是 N+1 problem

前端框架（三）

在之前的 React 課程中，我們已經慢慢熟悉 React 的思考模式，可是還有一些問題還沒解決，雖然你現在感受不太到，但是在 App 慢慢變大之後就會碰到了。

接續之前的課程，這一週會讓你的 Web App 變得更加完整，會導入一個新的東西：Redux，說明我們為什麼需要它。

指定教材：

1. 程式導師實驗計畫第二期：Week14-1 Redux
2. 程式導師實驗計畫：Lesson 13-1 之 React + Redux

HW23 作業連結

自我檢測

• 我理解 Redux 的目的以及原理
• 我知道我們為什麼需要 Redux

前後端框架（四）

後端框架（四）

這週會使用 Nginx + PM2 來部署我們之前寫好的 Web Application。

除此之外也會簡單介紹 CI/CD。

指定教材：

1. [BE201] Express 與 Sequelize：「部署：Nginx + PM2」前所有單元
2. 程式導師實驗計畫：Lesson 14-2 之 CI/CD

HW24 作業連結

自我檢測

• 我知道如何使用 Nginx
• 我知道如何使用 PM2
• 我知道如何部署 Node.js 應用程式

前端框架（四）

最後一週裡面我們將用 redux 來解決非同步操作的問題，讓大家知道如何利用它與 redux-promise 來解決非同步的一些問題。

指定教材：

1. 第二期 Redux 補充講解：redux-thunk 與 redux-promise
2. 程式導師實驗計畫：Lesson 13-2 之 React + Redux 下
3. 第二期 React 補充：什麼是 super 以及生命週期的運用
4. 第二期 React 補充：再來談談什麼是 this

HW24 作業連結

自我檢測

• 我知道 Redux 如何搭配 middleware 解決非同步操作的問題

第二十五週（09/30 ~ 10/06）：Final Project

第二十六週（10/07 ~ 10/13）：Final Project

Final Project

正式的課程就到這邊告一段落了，你學了前端後端與程式相關的基礎知識，接下來需要做一些作品累積經驗，因此接下來幾週都會讓同學做出屬於自己的 Final Project，建議可以與其他人合作，但也可以選擇一個人單打獨鬥。

根據第一期的經驗，其實找人合作會是比較好的選擇（第二期因進度問題沒有 Final Project）。

如果大家一點靈感都沒有的話，可以參考以下幾個提案（但有自己的想法當然是最好的）：

留言板

既然我們這次的課程做了這麼多個留言板，不如把留言板給做到極致吧！

你可以做一個「讓大家都能申請留言板」的系統，就像是無名小站那樣，每個人都可以申請帳號，有帳號之後可以開設自己的留言板，然後可以自己選擇要不要開放訪客來留言，不開放的話就預設是只有會員可以留言。

點下去會員的帳號之後還可以看到會員個人資料，或者是直接跳到會員自己的留言板去（如果有的話）。

除此之外，如果你想走前端的話，可以試著把前端改成 SPA 試試看！

論壇系統

建立一個論壇系統，能有不同的板塊（討論區），例如說：

1. 閒聊
2. 購物
3. 程式相關主題

在不同板塊底下都可以發表文章，除了發表文章以外，下面也能夠有回覆。

或者是你也可以把板塊當成是 Tag 而已，在同一個頁面就可以看到所有的文章，如果你想找範例的話，可以參考：http://react-china.org/

購物網站

做個簡單的購物網站，可以參考任何一家市面上的電商，例如說這個我隨便找的電商：https://www.yuyufarm.com/

重點是除了前端以外，你必須要有後台能夠讓管理者登入，並且管理商品（例如說調整價錢、上傳圖片、調整順序等等），可以先完成一個最簡單的版本，之後再慢慢加強。

社交網站

可以直接參考 Twitter：https://twitter.com/?lang=zh-tw

你可以 follow 人，然後就能夠看到他的動態，也可以自己 po 動態，會出現在自己的 follower 的牆上。

總之呢，關於 Final Project，沒有靈感的話可以先從自己常用的東西開始下手，先打造出一個最簡單的版本再慢慢加強。也可以盡量去找一些第三方的 API 來串，增加自己串 API 的經驗，例如說：

1. Firebase
2. Google Map API
3. Google Login, Facebook Login
4. 金流

blog's Issues

學習心得：2020/06/11 抽獎程式

紀錄

CSS 設定高度寬度，可以用 vh, vw 這兩個新單位，代表的是可視範圍的百分比 view height, view width，
ex. height: 100vh 會隨著瀏覽器視窗縮放，改變畫面的大小。

opacity 可以設定背景的透明度
z-index 可以設定此物件相對於其他重疊的物件要在上層還下層 （ex. 設定圖片的 z-index: -1; 圖片就會在下層）

學習心得：2020/05/07 Scratch

心得

今天在製作 Scratch 作品，今天完成了最初步的架構，按照劇情讓不同物件有相對應的反應，另外也製作了選擇的功能與復活的功能。

目前做完了選項A只差其他三個選項，完成選項後續就剩修飾的部分了。

學習心得：2020/05/29 簡易計算機

紀錄

參考 BLOG\HW\week7\hw3

流程拆解

1. 點選數字，span 跟 strong 都顯示數字
2. 點選算符，span 顯示數字加算符， strong 顯示算符
3. 點選數字，span 顯示數字加算符加數字，strong 顯示算符右邊的數字
4. 點選等於，span 顯示數字加算符加數字加等號，strong 顯示答案
   若重複點選第二次算符 => 報錯

數值管理 numManage

1. 原始數值 numOrigin
2. 結果數值 numResult

符號管理 signManage

1. 全部符號 calcSignAll
2. 目前選擇的符號 calcSignCurrent

狀態管理 stateManage

1. 目前已經點過"運算符號"了 isCalculated
2. 目前已經完成計算了 isFinish
3. 目前正在點選"運算符號" isClickCalc

函式管理 funManage

1. 過濾掉 0 開頭，但是沒有小數點的情況 dataProcess
2. 先將算式跟答案兩個部分分別推進 result 陣列裡，再判斷答案的部分是不是小數，最後將算式顯示於 span，將答案顯示於 strong calc
3. 將答案轉成字串，判斷小數點後是否超過 5 位，超過的部分刪掉 isFloat
4. 將 加,減,乘,除 做處理，判斷除法分母不可以為 0 doCalc

監聽點擊 calculator.addEventListener

1. 將 calculator shake 的 class 拿掉
2. 抓點擊的 data-value 如果沒有值，return
3. 把點擊的 data-value 加到字串"原始數值 numOrigin"裡
4. 如果 data-value 為 AC，呼叫顯示結果 showResult(按下歸零 clickReset)
5. 如果 data-value 為 sign 變更 isClickCalc 為 true 呼叫顯示結果 showResult(按下 加,減,乘,除 clickCalc)
6. 如果 data-value 為 = 呼叫顯示結果 showResult(按下等於 clickResult)
7. 如果 目前已經點過"運算符號"了 isCalculated 為 true，呼叫顯示結果 showResult(已案過運算符號的處理，只顯示後來的數字 showMainNum)
8. 最後一種情況，沒有點過運算符號，按下數字，呼叫顯示結果 showResult()

按下歸零 (AC) clickReset

1. 將目前已經點過"運算符號"了 isCalculated 及 目前已經完成計算了 isFinish 都清成 false
2. 將原始數值 numOrigin 及 結果數值 numResult 清成''
3. 如果接收到 msg 傳進來，就輸出 msg，否則就輸出 '0'

按下等於 (=) clickResult

1. 將目前已經點過"運算符號"了 isCalculated 預設為 false
2. 將目前已經完成計算了 isFinish 轉變為 true
3. 將字串"原始數值 numOrigin" 用"目前的符號 calcSignCurrent 切開"，左邊為 first 右邊為 sec
4. 將左邊 first 右邊 sec 及運算符號 calcSignCurrent 丟入 doCalc 函式去運算，再將結果寫進 結果數值 numResult
5. 輸出原始數值 numOrigin 及結果數值 numResult

按下 加,減,乘,除 clickCalc

1. 接收傳進來的 sign 值
2. 如果目前存在結果數值 numResult，將結果數值加上 sign 寫入原始數值 numOrigin 裡
3. 如果目前已經點過"運算符號"了 isCalculated 為 true，因為不能點兩次運算符號，所以要報錯，輸出 showError 函式
4. 若沒有報錯，就將目前已經點過"運算符號"了 isCalculated 改成 true
5. 輸出 原始數值 numOrigin 及符號 sign

顯示錯誤 showError

1. 將 calculator 加上 shake 這個 class
2. 輸出 按下歸零 clickReset 這個函式

顯示結果 showResult

1. 如果傳入的值不是 array 且有結果數值，顯示結果(顯示錯誤)
2. 如果傳入的值不是 array，但沒有結果數值，呼叫 calc 將 first 及 sec 都帶入原始數值 numOrigin
3. 如果傳入的值是 array，代表已經有 numOrigin 及 numResult 存在，這時候只要把 array 的 first 及 sec 再一次丟回 calc

已案過運算符號的處理，只顯示後來的數字 showMainNum

1. 如果結果數值 numResult 存在，把原始數值 numOrigin，加上符號 sign，再加上現在傳入的值 value，寫入原始數值 numOrigin 裡，並將目前已經點過"運算符號"了 isCalculated 改成 true
2. 將原始數值字串中的符號 sign 的位置 index 找出來，輸出(原始數值 numOrigin 及 index 後的數值)

學習心得：2020/05/06 API_3

心得

今天練習了API 小遊戲Lidemy HTTP Challenge。今天解到了第13關，明天繼續努力！
自己有很多不熟悉的部分， query string 的運用，以及 Authoration 驗證，都是沒有聽過的東西。
目前只會用 node 發簡單的 GET ，也不了解 postman 如何應用（這些都是待捕的知識）。

Authoration 驗證可參考 https://carsonwah.github.io/http-authentication.html
User-Agent 可參考 https://ithelp.ithome.com.tw/articles/10209356

隨手記

感謝網友們提供了各式各樣的參考答案！
https://pvt5r486.github.io/life-note/20190513/2430981100/

在API中若含有中文或特殊字元，要用 encodeURI 轉碼後再執行才不會出錯
let str = '世界';
let uri = encodeULI(Base URL${str})

base64 編碼， Node.js 可使用 Buffer.from() 進行 base64 編碼

要開著 Network 再將連結網址，才能看到過程中轉址的細節。

學習心得：2020/05/21 CSS_flex box

今天練習了 http://flexboxfroggy.com/ 小遊戲

紀錄:
display: flex;

justify-content: 要將物件於橫向做定位
{
flex-end // 定位於最右邊
flex-start // 定位於最左邊
center // 定位於正中間
space-between // 將每個物件以相同的間隔隔開(最左右兩側的貼邊)
space-around // 將每個物件以及左右邊界，以相同的空格隔開
}

align-items: 要將所有物件於垂直做定位 align-self: 針對單一個物件做定位
{
flex-end // 定位於最下面
flex-start // 定位於最上面
center // 定位於正中間
baseline // 定位於基準線
stretch // 拉伸至適應垂直長度
}

flex-direction: 物件放置方向
{
row // 方向與文字方向相同(由左至右)
row-reverse // 方向與文字方向相反(由右至左)
column // 方向變成由上至下
column-reverse // 方向變成由下至上
}

注意: 如果flex-direction: column 方向變成上下，那水平定位及垂直定位兩個會對調!!調整 justify-content 會變成垂直定位，align-items 會變成水平定位。

order: 自訂物件順序
{
"整數"(以 0 做為中心，我希望它在中間那個的右邊一格就寫 1 希望在中間的左邊一格就寫 -1)
}

flex-wrap: 將物件斷行展開
{
nowrap // 不斷行，通通擠在同一行
wrap // 斷行，多出來的去下一行
wrap-reverse // 斷行，順序反過來
}

flex-flow: 將物件斷行及轉向 (flex-direction 及 flex-wrap 的結合) 讓物件可以整齊排列
{
row wrap // 橫向排列多的斷行
column wrap // 縱向排列多的斷行
}

學習心得: 2020.04.28 Git語法

＃ 學習內容

git 基本控制 , branch 相關 , Github 使用 , 特殊情況處理

對於版本控制已有基本了解，也做了簡單練習

練習內容包含：
在 github 上新建一個 new repository 並與 local 端資料夾連結
在 local 端新增新的 branch ，並在新的 branch 中修改檔案後 commit 並 push 到雲端
在 github 上 pull requests 新的 branch 到 master ， 自行完成 merge 的動做

學習心得：2020/05/04 API

學習心得

今天練習了https://github.com/Lidemy/mentor-program-3rd/tree/master/homeworks/week4的題目，練習串API，可以成功從server抓到資料且可以將資料呈現出來。
但是! 我卡在同步非同步的問題，response的資料順序跟我request的順序不同，且我無法解決排序亂掉的問題

我想到兩個方式:
第一種: 將抓到的資料推進陣列後再把元素排序
第二種: 把每一次的request中間做遲延

結果
第一種方式嘗試將資料推進陣列，結果想撈取陣列資料時，只能撈取在global VO宣告的陣列。感覺request使用上不完全跟我認知的function相同。明明array在push元素的時候應該要賦值回global宣告的array，但是卻沒有。

第二種方式我看了https://blog.techbridge.cc/2019/10/05/javascript-async-sync-and-callback/ 但是做不出setTimeout的效果，應該是我不了解如何操作，這方面真的還沒弄懂。
還有想到一個方式是想模仿XMLHttpRequest( )直接設定true false為同步。可是不知道怎麼設定，所以也沒有成功。

最後week hw1 有解出來了!
不用迴圈一個一個發request，改成只發一次request把所有資料(排序好的)拿下來，再把拿到的資料做處理。雖然上述的問題沒有找到答案，但是作業是解出來了。

隨手記

1.串API在Web跟Local 語法不一樣 Web 可以用 new XMLHttpRequest 來處理，Local 要安裝 npm install request ，並依照固定的 request('URL', function(error, response, body{} ))來拿資料
2.要看懂別人的串接規則，request怎麼下會拿到什麼資料
3.要會OBJ轉JSON (JSON.stringify())，或者JSON轉OBJ (JSON.parse())。才能自由應用資料
4.搞清楚HTTP method怎麼應用（GET, POST, DELETE ....）
https://blog.techbridge.cc/2019/10/05/javascript-async-sync-and-callback/

學習心得：2020/05/28 仿 Google 表單 2

學習紀錄

Google 表單 (參考 BLOG\HW\week7\hw2)

box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半径 陰影擴展半径 陰影颜色
(ex. box-shadow: 0px 0px 0px 3px white, 0 0 0px 5px #999;) 會有兩層陰影，可以做出環形效果

function radioCheck(target){
要確定這個 input 是不是 radio ，如果不是，就回傳 false ，如果是就再判斷是不是已勾選過。
}

function submitCheck(e){
radio 預設為未勾，一個一個 input 檢查，是必填但又沒填就寫進 array，radio 必須通通都沒勾才
寫進 array 。若是有 input 沒填就輸出 array ，都有填完就輸出 success
}

document.querySelector('form').addEventListener('submit' (e) => {
submit 監聽，用 submitCheck 檢查，再看要呼叫 submitSuccess 還是 sumbitFail
})

function submitSuccess(e){
submit 成功，將 input 的資料一個個 log 出來，文字的部分要撈 name 跟 value ，radio 的部分要
撈 name 跟 id，最後要跳出成功訊息
}

function submitFail(e){
submit 失敗，呼叫 setInputBg，跳出失敗訊息。一定要記得 preventDefault !不然網頁會重新整
理，變色的效果會被移除。
}

function setInputBg(inputRead){
setInputBg 這個函式有兩種情況會被呼叫 1.submit 失敗時 2.click 螢幕時，有 input 已讀但未填
時。若是第一種情況: submit 失敗，會去撈取 array 傳入的 target ，若是第二種情況已讀未填，會
去撈取符合 attribute 有 isRead 這個屬性的資料他們的 target (兩種情況傳入的其實都是 target，
所以雖然來源不同但是處理方式相同)。都用新增 class 的方式來標記，再用 CSS 去針對這個 class
改變這些 input 的背景顏色。
}

window.addEventListener('click' (e) => {
click 監聽，先記憶 click 當下 isRead 的 input 有那些(很重要! 若沒有此刻就記憶，會變成點到任
何 input 他就馬上標記並且被 setInputBg 變色)，再來判斷目前點擊的地方，是不是滿足必填且
value 為空值，是得話就加上 isRead 的屬性。呼叫 setInputBg 來改變這些 input 的背景顏色。由
於 radio 有點擊就一定是有選取，所以一旦 radio 被點擊，就可以移除掉 radio 的變色標記。
})

學習心得: 2020.04.29 FE_basis

綜合練習

練習項目

html
表格, 條列, 表單,
css
圓形圖片, 簡單切出框線, 將內容並排
javascript
簡單做出點選按鈕後能夠alert出訊息的小功能

狀態

html 及 css 三月份學習過後，至今重新複習發現不是那麼熟悉。
大部分的概念還是記得，但細節還是需要靠筆記來回憶。(像是 type , css 的用法 及 EventListener 等等 )

版本

FE_basis first version

學習心得: 2020.04.27 Beginning

紀錄

第一篇BLOG學習紀錄
今天剛接觸到Git，及GithHub，並了解到原來可以在這個環境底下紀錄自己的學習歷程。
從現在起，在這個地方紀錄接下來一連串的學習心得。

先前學習過東西

自2020年3月開始，已經先在Lidemy上學習了幾堂課程，
依照先後順序分別為:

1. [CS101]初心者的計概與coding火球術 (很適合讓自己先判斷這樣的上課方式適不適合自己)
2. [CMD101]Command Line 超新手入門
3. [FE101]前端基礎: HTML 與 CSS
4. [FE102]前端必備: JavaScript (學到一半發現看不懂，才發覺自己漏了程式基礎)
5. [JS101]用JavaScript一步步打造程式基礎 (學完才知道程式基礎有分四大類型)
6. [ALG101]先別急著寫Leetcode (其實我不曉得leetcode是什麼，但是看到老師標註的誰適合上這
   堂課 =>有基本的程式概念，但是又不熟悉。 覺得太剛好了自己現在就在這個階段上就對了)
   到這裡為止，才知道寫程式到底在幹嘛!才知道如何用計算思維來解決問題。
7. [JS102]升級妳的 JavaScript技能 : ES6 +npm + Jest
8. [JS201] 進階JavaScript那些你一值搞不懂的地方
9. [NET101]網路基礎概論

下一堂要開始學習的課程

[GIT101]Git 超新手入門 (開始補這塊自己不清楚的版本管控基礎)

學習心得：2020/05/19 完成報名

花了兩周多的時間，完成了程式導師實驗計畫的報名表，Scratch的作品及codewar的題目。
很希望自己可以成功錄取。

報名表已於 05/15 寄送給老師

學習心得：2020/05/05 API_2

學習心得

今天練習了利用 node.js 完成 API 新增,修改,刪除資料
然後....我不小心把老師 API server 上的其中一筆資料刪掉惹QQ（後來發現server上的資料會定時回復成原始狀態！！！還好還好）
https://lidemy-book-store.herokuapp.com

隨手記

今天開始找報名的題材，利用 scratch 做一個作品!! 加油

學習心得：2020/05/27 仿 Google 表單 1

心得

現在都在練習 HTML, CSS, JavaScript 的綜合練習。自己寫作業目前寫不出來，細節的部分需要參考前輩的答案，一邊看一邊搞懂為什麼前輩要這樣寫，也思考自己哪邊沒搞清楚。

今天重新把反應力遊戲再練習一次，開始做 google 表單，目前有仿照前輩的作品刻出相同的版面，前輩做的很美，使用者感官很棒!!。
前輩寫得函式有點看不懂，打算明天再繼續把它弄清楚。

學習心得: 2020.04.30 Jest Babel-node

心得

今天將程式基礎再一次複習過一遍，包含了練習解題以及寫測試程式
題目因為是基礎題，寫起來很順不太需要思考
寫測試程式因為沒有很熟，花了一些時間複習（安裝jest）jest的測試語法等等。
目前都是用module.exports 及 require 連接一個 .test.js檔。
另外一些碰到後發現不太熟悉的東西記在隨手記的部分了。

隨手記

ES5 的引用
module.exports = { (函式名稱):函式名稱, (函式名稱2):函式名稱2 )
var （自訂名稱）= require( '檔案路徑' )

ES6 的引用
先裝babel node 及 preset-env
https://babeljs.io/setup#installation
新增一個檔案 .babelrc 在裡面寫上指令
安裝完成後即可使用ES6語法
export default (函式名稱)
import {名稱, 名稱2} from '檔案路徑'

parseInt(帶轉換變數, n) n是要轉換成幾進位
Math.sqrt(n)開根號
STR.replace('要取代的字串', 取代成什麼)
ARR.map(加上一個function)

var myArr = [ 1, 2, 3 ];
//處理每個元素後等待回傳結果，第一次處理時代入初始值 0
var result = myArr.reduce(function(prev, element) {
// 與之前的數值加總，回傳後代入下一輪的處理
return prev + element;
}, 0);

學習心得：2020/05/21 版本控制

完成CSS select 小遊戲 https://flukeout.github.io/

今天在練習簡單的 HTML, CSS 切版
完成後要把修改的檔案按照版本控制流程上傳到 GitHub
發現之前某一次在做 merge 的時候把先前的資料夾搞丟了。
所以在雲端上的 master 資料有遺漏。

我只好在 local 端找回原本的資料，找到回復先前版本的 git 指令。
復原 local 端的檔案後我想說再 push 回雲端就好，
結果那些以前的舊檔案，再新的 commit 中都沒有紀錄任何版本改動紀錄，於是我就是 push 上來了，要用 pull request 把資料 merge 回 master ，這些舊檔案依舊沒有復原!

嘗試過把舊檔案加空行來改動，結果出現 commit 衝突。雲端跟本機來回 push pull 就是沒改動回我要的狀態。

最後最後，
我把 local 端正確的檔案，先開條新的 branch 並且 push 上雲端，確保雲端先有正確的一條 branch
把這條 branch 變成 default 的主要 branch。
但這樣一來 local 端跟雲端兩者的連結好像對不上了，為了要讓整個 local 的版本控制確保與雲端同步，我把 local 端整個版本控制的資料夾整個刪掉。並且 git clone 雲端正確的 branch 下來。

好不容易把所有的資料都復原了，也恢復本機跟雲端正確的名稱與連結。
下次一定要注意清楚到底我 commit 過程有沒有發生錯誤， merge 的時候更是要看看錯誤訊息是什麼。

學習心得：2020/05/26 反應力小遊戲

心得

這個小遊戲要將版面刻出來很容易，難在不熟悉 addEventListener ，簡單的監聽背後需要很多 function 間的配合，冒泡跟捕獲, 作用域的觀念都會影響結果，要把學習到的內容做出來不容易。

感謝前輩分享的文章，寫得非常好，容易理解及學習。
https://yakimhsu.com/project/project_w10_review.html