---
# System prepended metadata

title: 程式學習：AC 學期二 (2-1) 學習心得
tags: [AC, HTML, CSS, JavaScript]

---

程式學習：AC 學期二 (2-1) 學習心得
===
###### tags: `AC` `JavaScript` `HTML` `CSS`
> AC 學期2-1的心得及收穫 (2021.9月班)

[TOC]

### 心得紀錄
這次嘗試用ORID的方式來記錄這學期的學習過程。
#### ORID 簡介
ORID是一套國際上廣泛使用的焦點提問方法，透過 4 個層次的提問，幫助參與者更有結構的提問與思考問題，分成：
- OBJECTIVE：具體的事實，做了哪些事情、看到與觀察哪些事情
- REFLECTIVE：感受與反應，在當下直接的感受、反應與印象深刻的地方
- INTERPRETIVE：事後詮釋與分析，試著解釋與分析事實與自己的感受
- DECISIONAL：訂定目標與下一步，找出下一步可應用、執行與改善的地方

關於如何使用 ORID 提問法，請參考 AC Ellen 助教的文章
[如何用 ORID 提問框架，記錄心得、回顧發現、內化學習](https://tw.alphacamp.co/blog/orid-objective-reflective-interpretive-decisional)
#### 學習目標
* 如何打造網路產品
* 如何讓產品與網路環境互動
* 建立網路開發的全局觀


### Week 1 

第一周首發學習 JavaScript 的歷史，在 2015 年因為 ES6 的出現而讓前端開發做了一次大改版。也提到 jQuery 以及前端框架：angular、reactJS、vue.js。JS 分為嚴謹模式或寬鬆模式；瀏覽器多屬寬鬆模式之，不會主動偵錯，傾向優先讓其可行，容易有不可預期的錯誤。嚴謹模式則反之，能在文件的上方或是 function 的一開始加入`use strict`。嚴謹模式可以局部設定，有時候在個案中可能會兼用寬鬆模式或嚴謹模式，實務則多使用嚴謹模式。接下來就是關於JavaScript變數的宣告、陣列、物件等課程，這禮拜是很辛苦的一周，好多東西要記，本周要做出一個完整的抽獎程式，當你看到變數是由數個物件組成的陣列時，真的莫名地感到頭痛。這個作業我做了將近5個小時，不誇張。從思考就花了1個小時。不過呢...雖然很累，還是很有成就感，真的是當看到 console.log 的結果出來跟規格要求的一樣時，身體才開始感到疲倦呢！



<!--要怎麼用HM寫成一本筆記啊？-->

#### ORID 學習週記
1. `objective`
9/6開始的新學期，我為自己設定的目標是仔細複習第一周的內容，並且重新檢視自己在預讀期間所學到的知識是不是能自由地運用，並且把困難的部分記下來，作為之後複習的重點。提前完成第一周的進度；申請第二周的進度開啟。
3. `reflective`
陣列、物件、函式等功能，都是「新的東西」。好多東西要記，本周要做出一個完整的抽獎程式，當你看到變數是由數個物件組成的陣列時，真的莫名地感到頭痛。這個作業我做了將近5個小時，不誇張。從思考就花了1個小時。不過呢...雖然很累，還是很有成就感，真的是當看到console.log的結果出來跟規格要求的一樣時，身體才開始感到疲倦呢，好久沒有感受到解題的快感了！
5. `interpretive`
感受學習「新東西」的困難與快樂。發現看完第一次的教學內容後，雖然已經跟著助教自己操作一次，等看到題目的時候，卻發現沒有辦法很快速地解答。但隨著在次的複習、請教、觀摩，漸漸的可以用自己的話說出來，這種有趣的經歷的確促進學習的動力。
7. `decision`
下周的內容是切版練習和Bootstrap，預讀時有發現比較容易，而第三周是DOM的學習，比較困難，希望可以在時間分配上加速第二周的推進；並且將多數2-1時間留給「DOM」及第四周的整合練習。

___

### Week 2 

第二周學習CSS語法練習，複習block、inline-block；完整練習Flexbox，我終於好好把[這份文件](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)讀完了。此外，學期二之1的CSS完成了我在網頁十五天的第一個魔王，`ppsition`！經過重新複習一次`position`之後，我能夠自己操作`position: absolute`和`position: relative`呈現想要的畫面了，並了解到雖然在(二維的空間)可以用flex和grid做到效果，但是position可以跳脫頁面流，讓元素更加彈性。

之後，認識了第一個HTML框架[`Bootstrap`](https://getbootstrap.com/docs/4.6/getting-started/introduction/)，前端框架，透過預先做好的可重複使用的元件樣式，進行高效的前端的撰寫。目前最常使用第4.6版；實務上不會版本一更新就採用，會等版本穩定之後才使用。透過AC出的實際練習，完全用crl+c crl+v的方式打造靜態社群網頁。

最後，在這個多螢幕的世代，RWD(響應式網站設計)非常重要，Google宣佈「行動裝置友善」的網站，其搜尋排序將優於傳統網站。
如何製作RWD？
- 定義預設的 viewport 尺吋
- 使用 CSS 媒體查詢 (media queries)
- 設定分界線 (breakpoint)

![](https://i.imgur.com/Si0BMJa.jpg)

#### ORID 學習週記
1. `Objective`
這周的目標是把flexbox的文件看完，把小青蛙的遊戲完成了；以及在預讀期間把比較多心思放在`position`，在RWD的概念著墨比較少，這次也透過課程和請教熟人好好的理解並寫成自己的讀書筆記。
3. `reflective`
在學習RWD的時候，光只是看上課的內容沒有辦法產生切實感；剛好熟人也是工程師，所以用工作上的案例搭配了解後，我更能體會mobile first還有使用者體驗的真諦，但是好難啊！實務工作除了不同尺寸還有不同的browser、不同版本的browser，都有可能出現奇怪的bug。

5. `interpretive`
參加bootcamp，在很短的時間內透過大量練習、刻意練習、未來希望成功轉職，但是當看著助教、工程師朋友們在講解跟操作的這個熟練度，和熱忱，雖不致於產生阻力，但難免對未來存在著焦慮呢！

7. `decision`
因為已經下定決心孤注一擲，希望化焦慮為動力，再多學一點、再多練習一點；接下來的課程是DOM，在預習期間沒有成功完成進度，現在爭取到一點時間，加上中秋連假，希望能在中秋完成第三周進度，提前把這學期的大作業完成，開啟2-2的學習。

---
### Week 3

第三周開始學習DOM (9/24 done)
在學習 DOM 之前爬了一些學長姐的學習部落格，發現 DOM 根本就是大魔王啊！第一困難的是語法和名詞的認識，節點(Node)各種各樣的node,MDN的node不是你知道的node,node和element的繼承關係，接著學習`Template Literal`，是一個能讓程式簡潔優化的字串樣板，到這周最後一章事件 (Event)，簡直就像你從槍林彈雨中存活後，突然踩到鬣狗的尾巴，耗盡全身力氣逃跑後的虛脫感。學習DOM的心法是「實作」，我的學習歷程是：
:::success
:one: 先看教案中的影片 :two: 跟著教案中的步驟實作 :three: 閱讀教案中的內容 :four: 寫成自己的筆記 :five: 完成作業
:::

透過最後的作業去檢視我對於這個單元熟不熟悉，如果還有問題，我會直接問N君(家裡有現役前端工程師，真的好幸福啊！)。其實在學習上我不擔心跟不上進度，我比較擔心的是未來需要用到時我還能不能想起來這些作法或語法。就像大學時，我的民法都很高分啊！但後來考試時，那些實務、學說見解都差不多忘光了。

這周的實作作業有三種：
1. [電影列表](https://codepen.io/a2623212/pen/MWoGxgW)
2. [籃球記分板](https://codepen.io/a2623212/pen/rNwKBvB)
3. [To-Do List](https://codepen.io/a2623212/pen/WNOyVGr) 
曾經看過文章說過，to-do list是前端工程師一個很基礎的side project，越學越深入之後也要開始思考未來的作品了吧！



#### ORID 學習週記

1. `Objective`
這周的目標是把 DOM 的概念熟悉，並且藉由反覆練習去熟悉目前接觸過的語法。這次在實作的過程中，嘗試很多次將跟著影片做出來的成品重新砍掉再重新寫一次的情況，希望可以透過短時間的反覆練習，讓觀念更加熟悉，再藉由撰寫學習筆記將自己遇到的痛點記錄下來。
3. `reflective`
我覺得以前的自己不太會去懷疑/評論我自己完成的成果，以前算數學的時候，如果遇到不會的題目，我會把第一個找到的解法努力搞懂，之後就如法炮製。但在這周實作的過程中，你有很多種寫程式的選擇方式，當發現這件事情之後，會很想去觀摩其他人的作業去看看他人怎麼完成作業，然後試著在心裡給予 comment，再次思考甚至重新做一次。

5. `interpretive`
因為我會想「砍掉重練」。我不是個很積極/執著的人，只要完成了，基本上我不會在完成的作品上繞圈，而是會進下一步。當我願意再做一次，再修改一次時，那就是我在這份作業上發現了還值得我重新練習或是學習的地方。每次都超過預定的學習時間，但已成果論而言，還是很滿意的助力。

7. `decision`
我可以掌握自己刻意練習的深度或廣度，下周是最後一周，要完成學期 2-1 的專案作業。我想要提醒自己不能鑽牛角尖，並且接受現在的自己是一個正在學習的人，不可能完美也不可能無誤，盡力就好，然後可以開始預讀2-2啦！

---
### Week 4

最後一周是實作周，透過先前處理過的記分板及電影清單來演練 DOM 的操作。順利完成指標作業之後，會有一些課程教你資料結構的概念。最後一周我覺得最困難的不是實作練習，而是技術驗收題組裡面的題目，有點像期末考，觀念相同但題目不同，我做了整整一天才得以完成。
![](https://i.imgur.com/bLyEc6B.jpg)



### 總結

用 ORID 的思考方法還是有點不熟悉，不過也感謝有一個契機可以讓自己用不同方式從不同的角度了解正在學習新東西的自己。

學期二之1著重於觀念的填充及學習上的轉念，課程越來越艱澀，也需要花費大量的時間閱讀與練習。在S0、工作坊，AC貼心助教們一直在傳遞一個重要的觀念「不要怕失敗，錯了沒有關係」，我們要成為 growth mental 的人。而完成學期二之1的課程之後，我覺得自己在預習上應該要做些調整，在預讀階段要把重點放在大範圍的理解與用自己的話說出來，正式課程階段要把觀念深化，整理成筆記，實際練習實作，才能達成：

| 印象 | =>  | 複習 | =>  | 深根 |
| ---- | --- | ---- | --- | ---- |

在實作的過程中，現階段非常鼓勵同學互相觀摩。在工作坊的互動中，可以看見部分同學對於觀摩存在疑慮，好像觀摩會等於「抄襲」，這對我的本科來說，也是比較難以啟齒的做法。但其實觀摩是很好的學習方法，所言不假，與其坐在電腦前發呆，不如透過觀摩來學習，這也是我現階段得到的體悟。

雖然這中間隔了一個中秋節，不過 AC 舉辦了一個學習不中斷的活動，認真的我(笑) 當然也拿到獎勵啦！幫自己鼓鼓掌 :+1: 
