Alpha Camp學期2-1線上課程心得分享-JavaScript 前端開發

發表於 更新於 分類於 ， ，

接觸前端的原因

我，二專畢業，不是電腦相關科系，在前(107)年以前不知道甚麼是前端。一開始只是想幫忙家裡做一個網頁，發現請人做網頁價差很大，所以就決定自己去做看看，結果就是學到現在，感覺還只是學到皮毛而已。

學習方式的改變

  • 107年：我從圖書館裡借了幾本網頁製作的書，想說靠這幾本書就可以做出一個高大上的網頁，照著書本做，我的確做出一個跟書本裡一樣的的網頁，也知道了HTML的相關語法，向是<head>、<body>、<mian>、<section>等等，但還沒到我滿意的程度。
  • 108年：我上網搜看看有沒有相關的課程(最好是免費的XD)，結果先看到了六角學院，覺得價格還可以，就先買來上看看，加上我的個性就是花錢了就一定要買全，所以就買了整整一套課程從HTML&CSS、RWD、Bootstrap、jQuery、JavaScript(對，在上AC前我就已經買了相關課程)、Sass等等。
  • 108年 ~ 109年初：斷斷續續地上六角的課程，想到才上，沒有規定時間，沒有壓力，就是想看看自己能不能堅持住學習前端的相關知識，能堅持住就代表我真的對前端有興趣，以後可以往這個方向走，後來就慢慢的把HTML&CSS、RWD、jQuery學完了，在上Alpha Camp前有把Bootstrap(差作業沒交)跟Sass學完(差作業沒交)。
  • 109年5月迄今：在Alpha Camp學習了JavaScript觀念及操作，這4個禮拜學到的JS知識已經超過我之前自學的內容，而且果然實作就是最好的學習方法。

為什麼上了六角學院的線上課程後，又買了Alpha Camp的課程？

其實六角學院的課程及他們附贈的資源真的很豐富，也很實用，但無奈我是一個沒有時間壓力就會偷懶的人，所以透過Alpha Camp的進度管制，在規定自己除了完成基本課程外，一定要再多完成那個禮拜的筆記，果然我在有時間壓力的狀況下，更能夠專注在學習上面，並且每天規定自己要完成到哪個程度才能夠休息，這一個月我學習的進度根本就是以前3個月的學習進度XD，雖然筆記進度還沒趕上(打算趁學期2-2開始前作完相關筆記的紀錄)。

在這一個月內，遇到卡關的狀況怎麼辦？

雖然我在大多數作業中都得到Excellent的評價，但其實很多作業我寫一寫就卡住了，這時候我就會停下來，然後開始無時無刻在腦海中重複寫code，滿腦子的程式XD，等有了一定的邏輯之後才又重新開始寫程式。
下面來寫一下卡關的原因及解決方案，給未來一點提醒：

  • A6: 【選修】簡易 RPG 戰鬥：攻擊與補血
    一開始我是先寫攻擊的程式碼，覺得「嗯！蠻簡單的！」，到了寫補血程式碼時，就變成「…」，一點想法都沒有，怎麼寫都錯，卡了2小時之後，就決定去外面走走路，放空自己腦子之後，在腦海中再重新跑過一次，突然靈感來了，就趕快衝回去，寫了一段後發現好像可以，就把判斷式寫完了。整個程式碼都寫完之後，得到助教Lance的建議後，再加看了別人的程式碼，發現自己還是想得太複雜(除了血量、我還把this.mp也加進去判斷裡)，之後又去修改自己的程式碼，讓他變得更精簡。
    其實也就是補血也就只有幾種情況：
    • 一開始就被打死，不用補了，直接回傳「被打死了」。this.hp <= 0
    • 當MP<=0時，也不用補了，等死。this.mp <= 0
    • 當目前有的MP大於補血所需要的MP量，就直接補滿指定的HP值。cureMp <= this.mp
    • 當目前有的MP小於補血所需要的MP量，就只把剩下的所有MP拿去補血。this.mp < cureMp
      最後再加上另一個判斷式，當補的血量超過本身原有的血量時，HP值也只會補到原本的設定的HP值。
      把每個情況列下來後，一個一個照著補滿程式碼，才會比較簡單，不用一邊想自己是不是還有哪裡沒考慮到。
  • A21: My Favorite Movies：按讚與刪除
    在這個課題，我卡最久的就是在按X刪除那一列電影清單那邊，一直不懂為什麼在按了刪除之後，我的內容唯一的改變就是刪除的樣式改變(從紅色btn樣式變成單純的×)，後來才想到我設定的let score = target.parentElement.lastElementChild.textContent的target可能會是其他td，所以這時候的score值就會是td→tr→最後一個子元素td的文字內容→X。
    我一開始一直將target.parentElement.lastElementChild.textContent = score放在判斷式外面，導致我在按其他td(Image、Title)時，會將最後一個td中的所有內容刪除，再帶入剛剛取得並儲存的文字內容(td→tr→最後一個子元素td的文字內容→X)
  • A24: Q3: Integer to Roman
    最後也是卡了最久的一個，從一開始就不知道怎麼下手，然後看了維基百科對於羅馬數字的介紹及規則後，就有一種是不是要寫很多判斷式的想法，之後有了一點苗頭(把{1:I,…}做成物件)之後失敗，重新出發(把填入的數字變成4位數之後拆分成千百十個位數)，結果又卡住，但這個想法其實跟我最後寫的程式碼有極高程度的關聯，大概斷斷續續卡了一天吧(連睡覺都在想)，後來是在出去處理事情時，突然想到其實羅馬數字式有規則的，我並不用把維基百科的規則寫出來，觀察一下羅馬數字會發現：
    1-9 => [‘I’, ‘II’, ‘III’, ‘IV’, ‘V’, ‘VI’, ‘VII’, ‘VIII’, ‘IX’]
    10-90 => [“X”, “XX”, “XXX”, “XL”, “L”, “LX”, “LXX”, “LXXX”, “XC”]
    100-900 => [“C”, “CC”, “CCC”, “CD”, “D”, “DC”, “DCC”, “DCCC”, “CM”]
    其實只是I變成X變成C、V變成L變成D、X變成C變成M的過程而已，所以我將羅馬數字1-9放進陣列中然後利用object.assign()創建新物件→arr.join()將新物件變成以,相連的字串→arr.replace()把X變成C變成M、V變成L變成D、I變成X變成C(一定要由大到小喔！)，到這裡之後就簡單了，之前卡住的地方其實就給了我很多靈感，先將數字拆成千百十個位數，再將拆出來的千百十個位數一個一個轉成羅馬數字！

其實卡關並不恐佈，恐怖的是一點想法都沒有，這時候就是要慢慢嘗試，出去走走，慢慢建立自己的邏輯，我自己是在建立邏輯的過程中，會突然產生出靈感，之後透過Google查詢我這個想法是不是有方法可以實現，像是我就會查「如何將字串變成陣列」、「如何把陣列變成字串」、「replace() js 用法」、「正規表達式」之類的，我自己在查詢資料的過程其實對JavaScript有更多的認識，我還蠻喜歡去看看MDN對於String、Array、Object的Method用法的，透過每一次實作，並且使用這些Method，更加深我對於這些Method用法的理解，像是在實作A24: Q3: Integer to Roman時，我才知道replace(regexp|substr, newSubstr|function)可以用正規表達式來選取所有指定的值，每一次實作的過程就是一個收穫。

之後

在下一學期[2-2]開始之前，我會先去補一下之前想寫但還沒寫完的JS筆記，然後還有補一下我在六角學院還沒上完的Git課程跟Gulp課程，另外六角學院也有提供免費的影片可供學習喔！
六角學院Git免費影音
高見龍-為自己學Git
六角學院 - Gulp 基本運用與 Bower 之間整合

突然覺得自己好像在幫六角學院打廣告，但其實我很喜歡Alpha Camp的進度控制的學習(尤其對我這種沒自制力的人來說，進度控制真的太棒了！)，最後祝福各位，每次寫Code都能有滿滿的靈感！