# Week16（07/26 ~ 08/01）：JavaScript 核心與物件導向

## Jul.26
預計開始上課時間 = 08:00
實際開始上課時間 = 09:30

#### 關鍵結果
1. 主線 : 自我檢討 - 期中考試
2. 支線 : [JS 30 讀書會 Day19](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

#### 心得感受
- 早上陪 @DIDI 同學再考一次試，但我沒計時，嘗試做到完整這樣，但 localStorage 的地方還是很卡，最後還是 Google 了一下才寫出來
- 下午都在準備 JS30 的東西，今天的內容是全部 30 天最多的，也比較難，不，是很難！一堆東西，如 : Canvas, base64 編碼, 圖片相素處理...等，還好還是整理完了沒有爆 XD
- 晚上分享時，因為要開視訊分享的功能，有點小緊張，但，誰叫我剛好是分享這篇，加上怕大家以為我是虛擬的或是整個計畫都是 (？)，可惡，只好硬著頭皮上了！
- 所以，今天，我成為營幕右下角的辣個男人 ( a.k.a. 一日偶像體驗 )

#### 今日覆盤
- 關於 Canvas 的 base64 編碼

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

- 關於圖片效果處理，如下圖

// 相素偏移效果
function rgbSplit(pixels) {
  for (let i = 0; i < pixels.data.length; i+=4) {
    pixels.data[i - 150] = pixels.data[i + 0]; // RED
    pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
    pixels.data[i - 550] = pixels.data[i + 2]; // Blue
  }
  return pixels;
}

#### 決定行動
- 主線 : week16
- 支線 : week15 直播

> 附圖為 : Unreal Webcam Fun ( 部分程式碼跟相素偏移效果 )
> 今天我分享的是網路攝影機，有特效、儲存圖片的功能，大家很認真聽，給你們小愛心，不要在說要看我鬍子了好嗎 -.<
- 筆記 : [JS30 - Day 19 ( by Benben )](https://hackmd.io/BxKkRqmkTIuysFrpujbsdw?view) ( 沒什麼內容，主要分享的時候講解 )
- Demo : https://codepen.io/benben6515/pen/bGWaajW

今日上課時數 = 0009:00
累積上課時數 = 0749:00

###### 報告人 : 士育 (benben)

---

## Jul.27
預計開始上課時間 = 08:00
實際開始上課時間 = 09:30

#### 關鍵結果
1. 主線 : Week16
2. 主線 : Week15 直播
3. 支線 : 唸英文

#### 心得感受
- 早上唸了英文一下，中午開始看 week16 的課程，看到 hoisting 完 ( 40% ) 了，這周的內容都好深啊！
- 但覺得運幸的是，這些難懂的東西，老師都有寫文章，太厲害了，今天讀了兩篇，繼續加油

#### 今日覆盤
- 來看一下英文
- Not only __ among the most popular household pets, but they are also among the most intelligent.
- ( A ) dogs are
- ( B ) are dogs
- ( C ) when dogs
- ( D ) they are dogs
- 期中測驗第四題，考試時沒寫完，我後來的寫法是這樣，都跟老師差不多，但然後想了比較久，findIndex 也忘記了，所以又用了一個迴圈

  function solve(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    const current = arr[i];
    let index = -1;
    for (let i = 0; i< result.length; i++) {
      if (result[i].id === current.id) {
        index = i;
      }
    }
    if (index >= 0) {
      if (!Array.isArray(result[index].value)) {
        result[index].value = [result[index].value];
      }
      result[index].value.push(current.value);
    } else {
      result.push(current);
    }
  }
  return result;

- 上面英文解答
- Not noly ... , but also ... 的句型，大家應該都不陌生
- 但因為是 Not ... 開頭，是否定的接倒裝的句型，所以答案是 (B)

#### 決定行動
- 主線 : week16
- 支線 : [JS 30 讀書會 Day20](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

> 附圖為 : 鬍椒粉們，我是說你在座的各位，刷起來 6666666666

今日上課時數 = 0009:00
累積上課時數 = 0758:00

###### 報告人 : 士育 (benben)

---

## Jul.28
預計開始上課時間 = 08:00
實際開始上課時間 = 08:50

#### 關鍵結果
1. 主線 : JS201 100%
2. 支線 : [JS 30 讀書會 Day20](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

#### 心得感受
- 今天把 JS201 都看完了，但文章的部分，覺得有些東西還是有點深，還不是很懂，之後可以常回來看這些讚讚的文章
- 下午大家讀書太悶 ( week16 的部分好像都是理論 ) ，所以一起去 gather 的海邊散步，跟著安潔走
- 晚上的 JS30 整個崩壞快笑死了，完了其他人一定覺得我們是神經病wwwww

#### 今日覆盤
- 感覺有什麼不確定的都可以去找 ECMA 規格書中找答案，真的是 JavaScript 聖經啊，感謝老師的文章稍為帶我們一下，也學到了，有問題可以去找第一手資料 ( 聖經 )，絕對最準確，雖然很難看就是了 XDD

#### 決定行動
- 主線 : 看 week16 剩下的文章、補充的影片
- 支線 : [JS 30 讀書會 Day20](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

> 附圖為 : 一起去海邊散步，(( 確定不是湯馬士小火車？

今日上課時數 = 0008:00
累積上課時數 = 0766:00

###### 報告人 : 士育 (benben)

---

## Jul.29
預計開始上課時間 = 08:00
實際開始上課時間 = 09:20

#### 關鍵結果
1. 主線 : week16 的所有補充的影片
2. 支線 : [JS 30 讀書會 Day20](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

#### 心得感受
- 把補充的影片看完了，影片中有看到老師更原始的文章，到現在都變成整完的文章了，有種時代的眼淚啊 XD
- 今天感覺又更潛入的 JavaScript 的底層世界，不過 \_\_proto\_\_ 跟 prototype 感覺很像 Linked List 的資料結構中，雙向鍵結的部分，都一層一層連在一起的。 Object.\_\_proto\_\_ ( 也就是最上層 ) 是 null ；Linked List 的最尾端也是 null

#### 今日覆盤
- 關於 JavaScript 的練習 ( 突然想到的自我練習 )
- 請寫出三個 function 分別產生一組長度為 10 的隨機碼

  // input : 
  console.log(randomNum(10)) // 只有數字
  console.log(randomStr(10)) // 只有英文大小寫
  console.log(randomAll(10)) // 只有英文小寫跟字數混合
  
  // output : 
  
  // 6433959041
  // OFNvMCULrS
  // x4rhcimu1m

#### 決定行動
- 主線 : week16 作業
- 支線 : [JS 30 讀書會 Day21](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

> 附圖為 : 晚上學長學分享的讀書會 ( 感謝 @生菜 & @Lavi )
> Promise 的坑好深啊 QQ

今日上課時數 = 0009:00
累積上課時數 = 0775:00

###### 報告人 : 士育 (benben)

---

## Jul30
預計開始上課時間 = 08:00
實際開始上課時間 = 09:00

#### 關鍵結果
1. 主線 : 完成 week16 的 hw1 - hw5
2. 支線 : [JS 30 讀書會 Day21](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

#### 心得感受
- 早上整理完這周的筆記，內容有點多，整理比較久一點，下午才整理完，自己整理過真的比較清楚
- 晚上在小樹屋跟新同學聊天，好好笑，又在邀請 ( 霸凌 ) 新同學開 mic 了 XDD

#### 今日覆盤
- 晚上 @allen 同學分享的 prototype 還不錯
- Function 跟 Object 互為 instance

  console.log(Function instanceof Object) // true
  console.log(Object instanceof Function) // true

- Function instanceof Object
- Function.__proto__ === Function.prototype
- Function.prototype.__proto__ === Object.prototype
- 所以 Function.__proto__.__proto__ === Object.prototype
- Object instanceof Function
- Object.__proto__ === Function.prototype

#### 決定行動
- 主線 : week16 挑戰題
- 支線 : [JS 30 讀書會 Day22](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

> 附圖為 : JS30 Day22 Follow Along Links
- 筆記 : https://hackmd.io/dNAvmRGlTyeblMvBV-YkVQ
- Demo : https://codepen.io/jason-lin80826/pen/KKmoLgv

今日上課時數 = 0008:00
累積上課時數 = 0783:00

###### 報告人 : 士育 (benben)

---

## Jul.31
預計開始上課時間 = 08:00
實際開始上課時間 = 18:00

#### 關鍵結果
1. 主線 : 看一下挑戰題的部落格文章
2. 支線 : [JS 30 讀書會 Day22](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?view)

#### 心得感受
- 今天稍為有點事，下午又睡了一下，所以晚上才開始念書，後來聽大家一起複習之前學的東西，一天就快沒了 XD
- 晚上 JS30 的讀書會，今天是 DIDI 分享，內變聲器，超好笑的，原來瀏覽器有這麼多 API

#### 今日覆盤
- 今天廢了一天，狀況良好

#### 決定行動
- 主線 : 這周結束前繼續挖坑

[](https://www.youtube.com/watch?v=JSURzPQnkl0)
> 附圖為 : 3 More Life-Changing CSS Tips
> 哇！現在的 CSS 已經這麼猛了

今日上課時數 = 0003:00
累積上課時數 = 0789:00

###### 報告人 : 士育 (benben)

---

## Aug.01
預計開始上課時間 = 08:00
實際開始上課時間 = 10:40

- 早上一樣參加 "讀自己的書" 讀書會，看了 week16 一些挑戰題的文章，打算把它們看完，先看完，之後再看懂 XD
- 下午寫一下 week16 的練習題，但 debouce 自己寫還是想不太出來，有用到 setTimeout 了，但不知道怎麼封裝才可以 clear 掉，還有 args 也忘記怎麼用了，其他的還算 OK
- 晚上在小樹屋跟大家一起看小戴的金牌戰，好緊張喔，啊啊啊啊啊啊！
- 這周本作業還沒交 ( 預計明天整理完挑戰題再交 ) ，但因為在看研究比較深的東西，是可以被原諒的吧 XD

#### 本周覆盤
- 指定教材
- [x] [JS201] 進階 JavaScript：那些你一直搞不懂的地方
- [x] [What the heck is the event loop anyway? | Philip Roberts | JSConf EU](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
- [x] [程式導師實驗計畫第二期：Week9-2 JavaScript 執行原理](https://www.youtube.com/watch?v=3s69FPDZGRk)
- 文章
- [x] 該來理解 JavaScript 的原型鍊了
- [x] 深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？
- [x] 我知道你懂 hoisting，可是你了解到多深？
- [x] 所有的函式都是閉包：談 JS 中的作用域與 Closure
- [x] 淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂
- [x] JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！
- [x] 覺得 JavaScript function 很有趣的我是不是很奇怪
- 延伸
- [x] [程式導師實驗計畫第二期：Week5-2：物件導向程式設計](https://www.youtube.com/watch?v=nZhzLcV9eHI)
- [x] [Week5 物件導向（續）：繼承與 static](https://www.youtube.com/watch?v=k5TGAw7faNg)
- 作業
- [x] HW16 作業
- [x] 挑戰題們 ( 還在整理中 )
- 自我檢測
- [x] P1 你知道 Event Loop 的運作方式
- [x] P1 你知道什麼是作用域（Scope）
- [x] P1 你知道 Hoisting（提升）是什麼
- [x] P1 你知道 Hoisting 的原理為何
- [x] P1 你知道 Closure（閉包）是什麼
- [x] P1 你能夠舉出一個運用 Closure 的例子
- [x] P1 你知道 Prototype 在 JavaScript 裡是什麼
- [x] P1 你知道大部分情況下 this 的值是什麼
- [x] P2 你知道物件導向的基本概念（類別、實體、繼承、封裝）

本周上課時數 = 0055:00
累積上課時數 = 0795:00

###### 報告人 : 士育 (benben)

---

## 第十六週尾聲隨意聊
這週來跟大家聊聊為什麼 A 方案以及淘汰制

想要在半年內從零到一轉職成一個工程師，難嗎？
不一定，這取決於你的背景還有你願意付出多少時間跟努力
「半年」這個時間是最多人所期許的，而你也可以看到許多實體的課程也是以半年為單位
那些實體課程的半年，指的是「每週一到五，每天付出八小時以上」的半年
在付出這樣足夠時間的前提之下，讓能夠成功轉職的機率大幅提升
簡單來說就是提升課程強度，讓學生能在相對短的時間內學會必要的技能

而我當初會想要開設程式導師實驗計畫，也是基於類似的理由
「如果學生能付出這麼多時間，再搭配上我的教材跟教學，也能有同樣的結果嗎？」
這個疑問，我自己到現在也還是不確定答案
因為答案似乎一半一半，有些人成功了，也有些人失敗了
而那些沒有成功的人，我也不確定問題是出在時間還是教材，還是兩者皆是
但總之，如果要在半年內轉職成工程師，時間是基本中的基本

在前兩三期的時候，原則上只收全職學生，理由很簡單，就是時間
以一週 40 小時為例，假設上班族到家吃完飯是 7 點，學到 11 點就是 4 個小時
平日就是 5*4 = 20 小時，假日兩天全部投入，一天也要 10 小時
如此一來才能達成每週 40 小時的要求
這可能嗎？確實有可能，但會有很多人做得到嗎？一定不會
所以除非能透過報名信傳達出這樣的決心，否則是不會收的

但是近兩期這個標準變了，因為助教制度的建立加上課程的標準化
所以可以收的學生更多了，就有更大的餘裕去收這些可能的「遺珠」
試著去相信他們在報名信中寫的時間是真的，相信他們確實可以達到這樣的要求
而這之中，也確實有些人是兼職學習但成功轉職的

不過就算是全職學習，也不一定能夠成功，甚至連時間也不一定能全力投入
可能會被其他事情分心，會怠惰，會跑去做其他事情
會因為作業交不出來所以就拖很久然後就不了了之了
在我看來，這些就是線上學習的困難
也是線上課程跟實體課程最後的轉職成功率會差這麼多的原因
實體課程只要你願意每天到教室，至少能跟同學一起學習，有問題能及時提問
但線上課程許多東西都難以掌握

提到這個計畫比較吸引人的點之一，就是 A 方案免學費計畫
「沒找到工作學費全免」，是許多人都驚訝或是懷疑的一個條件
但千萬別忽略了前提：「每週需付出 50 小時以上，要有轉職意願」
對我來說，這是一個互信的機制
你真心想學，真心想轉職，也願意付出像實體課程那樣的時間
你努力了，嘗試過了，但如果還沒有得到成果，那就是課程的問題
如果是課程的問題，那我就不該收錢，因為我沒把我的事情做好
這就是 A 方案的起源

這也是為什麼要有淘汰制，要淘汰那些沒有符合資格的人
一開始的淘汰制除了進度報告之外，作業也有限制
但後來把作業的限制拿掉了，因為有些人確實十分努力在跟課，但就是比較慢
其實這些限制都是拿來衡量「一週是否有付出足夠時間跟課」的一個標準
因為你是不是有花這麼多時間在學，這我不知道
所以我只能從其他地方旁敲側擊

比如說進度報告，如果每天都花八小時在學，那每天都會 po 進度報告合理吧？
或是作業，如果真的有花這麼多時間學習，就算落後，兩週交一次作業合理吧？
比起這些旁敲側擊的標準
真正判定一個人是否能留在 A 計畫的標準其實只有一個
「每週付出 40 小時以上，而且想要轉職」
（50 小時好像有點太過嚴苛，降低一點跟之前一樣好了XD）

其實就算沒有符合這個標準，也不一定會被淘汰
原因我前面說過了，我不會知道大家到底花了多少時間在上面
所以只要進度報告有 po（無論你學了多少、有沒有學）就不會被淘汰
但這其實不是件好事，無論是對我或是對你來說我覺得都不是
對我來說這就像是破壞了那個互信的機制
而對你來說，我覺得這會讓你跟參加計畫的初衷不同
在學習上的效果也不會好到哪裡去

我一直都不覺得淘汰或是退出是什麼壞事
如果離開了這個計畫，就代表你有其他更重要的事情等著你去做
所以沒有時間全力參與在這邊
或是你在這邊學習得不順利，跌跌撞撞，開始萌生想退出的念頭
但為了留在這個計畫，所以強迫自己每天 po 進度報告
但其實可能不是每天在學習，或是每天只花一兩個小時

前面有說過了，A 免學費計畫的對象是一週能付出這麼多時間的學生
如果沒有符合這個資格，我會希望大家思考一下留在這邊是否對你有幫助
我自己認為不上不下是最糟糕的，要嘛就是下定決心留在這邊
然後付出該付出的時間，就算拖延也有個限度
要嘛就是下定決心離開這裡，先暫時不碰程式，或是找尋其他學習資源
沒有足夠時間能夠付出卻又不想離開這邊，對我來說就是不上不下的狀況

我自己覺得這邊還沒成為一個「非你不可」的地方
沒有什麼是一定只能在這邊才能做到的
轉職的路有很多條，純粹想學習程式的話也有很多地方
這裡的規則就是大家看到的那樣，願意付出時間就是 A 方案，不行就是 B
如果兩個都不要就是去 lidemy 上面買訂閱制，或是去其他地方學習
如果有著「只有這邊可以讓我成功」的想法，就失去了潛在的可能性
失去了看見其他地方的機會

其實講了這些，只是想跟大家說目前課程進行 100 多天了
是個時機去思考一些問題了
大家可以想的第一個問題是：「我喜歡寫程式嗎？」
答案只要不是否定的，都適合繼續下去
針對選 A 方案的同學，第二個問題是：「我有符合 A 方案資格嗎？」
如果沒有的話，大家可以想想是否要繼續留著
若是想繼續留著的話，那是否有決心付出更多時間，讓自己符合資格？
目標的設定也是很重要的事情
A 方案的目標是時限內轉職成功
如果進度大幅落後卻沒有轉變目標，對自己來說也是一種壓力
適度的壓力是 ok 的，但過多的壓力會造成反效果，讓自己喘不過氣
對我來說，如果你重新檢視自己以後覺得留下來比較好，那就留下
若是覺得離開比較好，那就離開
我不會干涉你的選擇，只是自己想清楚就好
因為只有你自己最知道你的狀況，有些事情也只有靠自己才能想通

最後
雖然說學習時數的要求滿高的，但並不是說就不能有休閒娛樂
就如同第一週的作業講的，適度的休息跟放鬆是很重要的
觀看奧運幫台灣選手加油是很合理的
適時的耍廢或是什麼都不做也是很合理的
如果想找人聊聊天，線上小樹屋的氛圍看起來也很不錯
至少在進度報告上看起來十分歡樂，也是很不錯的地方

祝大家學習順利！