因為 JavaScript 還沒學熟，所以為了要寫這次的作業上了好幾個線上課，還有看了幾個 Youtube 教學影片，最後還靠了胡立老師的幫忙才能按時把作業寫完。
這次除了寫作業遇到的問題跟解決方法之外，還想要記錄為了寫這個作業看的一些課程跟教學影片的心得，所以會有很多廢話。
胡立老師的課程正式開始前，有上微軟 Microsoft Virtual Academy 的 JavaScript Fundamentals for Absolute Beginners，當時雖然大致上聽得懂（例如迴圈的概念，條件判斷的概念...等等），但很多細節其實還是模糊的。前面的作業著重在 HTML/CSS 上，所以只是想要先有 JavaScript 基礎的概念，想說還有時間可以精進 JavaScript。另外一點是，我不太適應微軟 MVA 那位老師的教學風格，所以沒看得很認真，也想說可以在上 Hahow 的課時再仔細學過，但後來發現到要寫作業四時，當時上課教的都忘得差不多了，果然「大致上聽得懂」並沒有進入頭腦中。
後來開始在 Hahow 上 動畫互動網頁程式入門（HTML/CSS/JS），吳哲宇老師雖然教得不錯，但是邊示範邊實作總是會有很多細節沒辦法帶到。光是哪時候要用小括號、中括號、大括號，哪時候在後面加分號，哪時候加逗號就搞糊塗我了。可以理解上課內容，看也看得懂程式碼在做什麼，但要我自己寫卻是沒辦法寫出來的。而且最重要跟作業四有關聯的 Ajax 部分講解的不多，看完那個部份也還是沒辦法知道怎麼做作業四。已經到了要交作業四的週數時，決定先暫停 Hahow 的課，然後去看其他的線上課程加強 JavaScript。
先在 Codecademy 上學 Learn JavaScript，這門課偏簡單，但至少有把 JavaScript 中的函式和基本規則搞清楚了。還是覺得心中有疑惑，所以又在 Udacity 上了 Intro to JavaScript，這門課就紮實很多，講解的比較詳細，也比較多練習，上完後至少可以自己寫出程式碼沒問題，如果當初知道的話直接上 Udacity 的課就可以了。
還在 Udacity 上 Intro to jQuery 跟 Intro to Ajax，這兩門課都比較短，但一些基礎都有講解，也有簡單的練習。雖然 Ajax 的課講解的比 Hahow 的課清楚，但是還是有不少疑惑。
後來又在 Codecademy 上 Learn jQuery，這門課講的比 Udacity 的 jQuery 課程還要多一點點，有多介紹一些 jQuery 的函式，不過以教學方式來說，我個人比較偏好 Udacity 上的教學方式，有真人影片講解加上練習，比起純文字的講解還要有溫度一點。
所以基礎的 JavaScript 跟 jQuery 學得差不多了，剩下 Ajax 的部分還是有點模糊，所以 google 搜尋找到彭彭的 Youtube 影片：網頁前端工程入門：JavaScript AJAX 教學 - JS 與伺服器的互動，他講解的很清楚易懂，不過是用 Vanilla JavaScript 直接寫 Ajax，而不是用 jQuery，但之後的作業就有要求要用 Vanilla JavaScript，所以是值得參考的教學。（google 後才知道 Vanilla JavaScript 指的就是 「純」JavaScript，沒有使用任何函式庫，我原本還以為是 JavaScript 的框架哩 XD）
還有找到六角學院的兩個 Youtube 影片：Ajax / JSON 教學 跟 透過 jQuery $ajax 串接 json 資料，並加入 HTML 中。第一個影片 1.5 小時左右，正式講到 Ajax 的部分是在 38 分鐘左右，看完後有比較清楚要怎麼看 JSON 的資料跟怎麼用 jQuery 寫 Ajax，後面的部分是關於 Node.js 我就沒有看，暫時還不會用到。
第二個影片只有 9 分多鐘，看完後有比較懂怎麼將 JSON 資料加到 HTML 裡。
經過上面那麼多的課程，終於大概知道作業四要怎麼做了...
決定先照作業要求去 twitch 上申請 API 的使用者 ID，順便看看 twitch API 的官方資料。然後發現自己連申請 API client ID 都覺得困難，哈哈，中間有幾個問題搞不清楚應該填什麼，所以就找胡立老師求救 XD
有了 API 網址跟使用者 ID，之後要找對 API，還要在 API URL 後面加參數，可是怎麼樣也不知道怎麼加入參數，試了好幾種組合都不成功，最後只好再次跟胡立老師求救，才總算知道怎麼樣導入參數。
找到正確 API、導入正確參數、抓到正確 JSON 資料後，就是把資料放到之前寫的網頁上。一開始也是搞不懂應該要怎麼做比較好，又再問胡立老師，經過好幾次詢問後才終於有個雛形，然後開始動手寫。
一開始寫沒有抓到正確資料，後來把要的資料都抓到後，排版整個都跑掉了 XD
嘗試了幾種方式都沒辦法達到我原本的排版，沒辦法，跟 JavaScript 還有 Ajax 還不熟，知道的方法有限。後來只好用最「暴力」的方式做出排版，雖然不優雅，但至少達到作業的要求了，而我也終於可以交作業了，成功的那一刻真的超感動的 QAQ
交完作業後才敢到 GitHub 上，不然害怕自己去偷看其他同學的作業，不過交完後去看其他同學的作業，發現自己也學不來，因為好幾個人都是用 Vanilla JavaScript 寫的，超厲害的，看都還看不太懂 XD
還有好長的學習之路要走啊～
附上這次作業的 CodePen：
No comments:
Post a Comment