JavaScript 前端開發學習心得

在不知不覺中 Alpha Camp 為期一個月的學期 2-1 JavaScript 前端開發課程進入了尾聲。相較於學期一的課程內容，這次的課程內容更加困難，複雜度更高，相對的也蠻有趣的！而這學期的目標，我還是保守的訂在踏實得跟上課程進度與完成作業。

學了哪些內容呢？

Week 1 學習進度：

JavaScript 的資料結構 array、object、string

函式 (function)的認識與應用

week 1 可說是我是花費最多時間的一周，太多的抽象概念讓我在學習上深深感到挫折，常常看完了教材，還是處於一頭霧水的狀態。不過透過作業的練習，終於漸漸看懂程式碼的運行了，不過至此，我也知道我自己比起單純看教材學習，更喜歡實際動手寫，找到問題點再回去複習。

Week 1 作業回顧：週年慶摸彩活動

這周的作業是週年慶摸彩活動，印象中最深刻的是卡在剔除重複的票券號碼很久，後來發現可以用 for 迴圈迭代的方式把產生出來的票券 ticket 放入新的陣列 tickets ，再用 includes() 函式檢查 tickets 陣列內是否包含了已經產生的 ticket。

Week 2 學習進度：

開始使用 Bootstrap開發

RWD的觀念認識與實作

一維 Flexbox 佈局系統

二維 Grid 佈局系統

相較前面抽象的 JavaScript 這周的進度來到了HTML、CSS，在學習上我覺得簡單很多！ 認識了前端框架 ---Bootstrap，開發網頁的速度變超快，裡面也有很多很好玩的元素，加入幾段程式碼，一個網頁排版的雛型就出來了。

RWD 的觀念讓我了解如何讓網頁在不同裝置上呈現最佳的視覺版面，讓使用者瀏覽網頁更加清楚。

Week 2 作業回顧：我的履歷 RWD 設計

這周的作業我先是用 Photoshop 畫了包含三種尺寸網頁的 wireframe，在實作上先以適合用手機瀏覽< 576px再以 media queries 的方式分別做出適合用平板瀏覽的≥576px 且 <992px及適合用桌機瀏覽≥ 992px 的 RWD 設計。三個不同尺寸的 RWD 設計也各呈現了不同的排版樣貌。

Week 3 學習進度：

DOM 事件與操作

學了很長一段時間的 JavaScript 和 HTML、CSS，終於迎來了把他們結合在一起的時刻，網頁終於可以和使用者互動了！JavaScript 和 HTML、CSS 原來是透過 DOM API 去操作的啊~但是 DOM 的觀念好抽象，對我來說真是場硬戰，好險參加了【 DOM 基本元素上手工作坊】，讓我終於對於如何去選取、查詢、修改 DOM 節點更加熟悉。

Week 3 作業回顧：籃球隊計分板

這周的作業主要是利用迭代的方式遍歷 DOM 節點，在計分板上找到得分大於20分的球員，並於球員的名字後方利用修改的方式去新增讚的 icon。老實說在寫這份作業時對 DOM 的渲染資料的方式還是很不熟悉，也是先觀摩了提其他同學的作法才做出來的。

Week 4 學習進度：

綜合實作

終於來到了最後一周，這周主要是將前面三周所學的觀念綜合應用，所以也練習了很多的題目。

Week 4 作業回顧：RGB 與 HEX 色碼的轉換器

RGB to Hex Converter 基本款

RGB to Hex Converter 進階款

這周的實作題很多，這邊我就分享印象最深刻一道實作題： RGB to Hex Converter，當時寫基本款的轉換器就花費了我一天半的時間，大概有 1/3 的時間都在做 HTML 和 CSS 的部分，而 JS DOM 的部分卡關很久，不過幸好透過這個專案的製作讓我更熟悉到如何去設置事件、操作 DOM 元素，本來是覺得自己連基本款的都寫不出來的，完成了基本款的色碼轉換器，讓我信心倍增，決定挑戰進階款的！而這一次竟然只花費半個下午的時間就做出來了~對我而言是莫大的鼓舞啊。

除了教材上的知識，我還學到了…

1. 查閱 MDN 文件

在寫作業的過程中，常常需要用教材裡沒教的函式解題，所以我開始練習使用 MDN 文件查閱函式，一開始看 MDN 文件的時候覺得有點複雜，後來抓到訣竅直接看示範的地方就比較懂了，而這個訣竅就是先觀察文件上實際的例子！，藉此推敲這個函式在做什麼。

透過查閱 MDN 文件更了解操作資料的方法及實際的運作模式，也讓我認識更多不同的函式。例如：容易混淆的 slice ( ) 、 substring ( )、 substr( ) 這三個提取字串的方法，我就利用 MDN 文件 去了解其中的差異，再用自己的話記錄其中的異同在筆記中。

2. 嘗試不同的解法

一道題目的解法可能有很多種，透過觀摩其他同學的作業，我學到了不同角度的思維與方法，藉此累積下一次解題的能量。

支持我學習的動力

先說我覺得自學最大的阻礙就是人的惰性，要克服惰性不是件很容易的事，對我來說支持我學習的動力並且可以克服惰性的原因有以下這幾個：

1. AC 學習進度制學習

每周固定的學習進度，會鞭策我自己要趕快認真的學習，才能寫得出作業，才可以得到助教回饋，才不會浪費自己賺的辛苦錢XD，夠現實吧！

2. 現實考量：職涯規劃

老實說我學程式的目的就是為了之後的轉職，一直很希望自己有個到哪裡都帶著走的技能，雖然說短時間內對於學完程式轉職的目標還不是明確，但確定要把程式學好的決心是絕對有的！

3.喜歡動手寫題目的感覺(?

我發現在學習上，我偏好直接動手寫題目，而且一寫就是非常的專注，進入了無敵專心的模式，完全忘了時間，直到我把題目寫完。但相反的，讀教材時我反而無法達到專心的狀態，這令我十分苦惱啊。

下一個學習階段的自我期許

主要還是老樣子

1. 跟上每一週的學習進度
2. 完成所有作業

不要求得到 Excellant 的評分，只要每份作業的完成都有吸收到其中的知識。

3.對於往後的職涯有更深的了解

畢竟之後還是得找適合自己的工作餬口飯吃啊 XD

4.有時間嘗試不同的解題方法