寫程式作業心得 week1

在開始寫程式以前,我本來就知道自己不會寫程式T_T,不過我還是來記錄一下這些挫折又開心的學習心得。這是第一週大致做出來的東西:

主要有桌機版跟手機版的切版,服裝的圖片是串 API 進來,點擊女裝、男裝後會跳出 API 給的圖。統整一下第一週碰到的問題:

ㄧ、RWD 圖片在不同版面的橫向排版常常爆炸
解決方式:Flexbox(橫向直向都搞定)
另外就是要搞清楚 position absolute 和 relative 父和子的關係。

二、HTML & CSS 亂排,導致 API 串進來後排版爆炸
最好一開始就搞懂 HTML DOM 結構是怎樣,JS 如何把 HTML DOM 畫出來,再把 API 給的值串進來。

解決方式:AJAX 搞清楚
我的學習路徑是:
-AJAX 能解決什麼問題?
→ 當Web API 打給網頁一串 JSON 之類的資料,就要用 AJAX 把它們用 JavaScript 畫出來(parsing JSON),在網頁上才能被看得懂。

-為什麼需要用 jQuery 來寫 AJAX?
→ 因為 AJAX 用 JavaScript 寫很籠長。

-為什麼需要串 API(Application Programming Interface)?
→比如做網頁需要放個 Google Maps ,就會需要去拿 API 串給網頁。

三、善用時間&找到學習方法
我花了一些時間在拆解我的學習樹,我自己覺得我進度可說是神慢,不過希望之後調整到自己的節奏,可以再快一點。

我把自己的學習流程想像成一個 HTML DOM,再把它想像成一個 function scope。這可以幫助我知道自己在什麼地方,用 DOM 的概念去想,最上層就會是「程式碼如何運行在電腦與網路上?」,再下一層是「伺服器如何與網頁溝通?」、「電腦如何用程式碼呈現畫面?」…以此往下推。

然而在時間有限的情況下,研究這麼多大方向的東西,我會無法有太多實作的時間,所以接著用 scope 來理解我的學習樹,在 scope 內的會是「我要做一個最小可行的網頁需要哪些東西?」

比如我要寫一個網頁,這個網頁的最小可行的 scope 範圍我認為它包含了:

HTML →HTML DOM / HTML Tag

CSS →如何規劃橫軸、直軸、RWD 基本排版 (Media Query)
1.對齊、排版:(inline-block、inline、block / flex-box / grid / float)
2.位置:position: relative / absolute

JS → 基礎 JS: Object / Array / Function /
**JS 怎麼去畫 HTML DOM 物件:DOM EventListener
**JS ES6 (新版本):
1. Default Parameters
2. Template Literals
3. Multi-line Strings
4. Destructuring Assignment
5. Enhanced Object Literals
6. Arrow Functions
7. Promises
8. Block-Scoped Constructs Let and Const
9. Classes
10. Modules

Scope 外的世界,主要就是要推上網路或是從伺服器拿資料以及框架:
-Github & Git 專案管理(第一週有用到,一直搞爆我的 Github…)(這個git 練習對新手來說,在搞爆 Github 之後去玩玩,會更有感:https://learngitbranching.js.org/)
-AJAX & Api (第一週有用到)
-Node.js & Express
-React (把 HTML/JS 整合在一起)(我是要學 React,其他還有 Vue.js、AngularJs 等等)

四、沒有捷徑,要花時間
認真覺得就是要花時間先理解基本概念,然後先釐清自己學習的 scope,每天一點一滴的先理解基礎的單字,接著用文法把它們串起來,最後才有可能寫出一串句子。雖然目前進度緩慢,但滿開心的,可以用大 Dom tree 的角度去理解整個網路世界怎麼相互溝通,怎麼與本機端溝通,也可以在自己本機端刻一些排版,寫一些 JS 讓它先動起來。

大致是這樣,有空再來寫之後的學習心得~