Day69 (Week10), 2021/06/19 (Saturday)

學習時數:4 hr

Done

  • [x]   美化 w7 hw3 To Do List

To Do @ this week

  • [x]   自己做 w9 hw1 留言版
  • [x]   w9 hw2.md
  • [ ]   修改 w7 to do list
  • [ ]   w9 hw1 留言板 心得筆記

學習心得紀錄

Objective 客觀

美化 w7 hw3 To Do List

  • 重做的原因:
    第七週都把寫作業時間花在研究 twitch API 跟餐廳抽獎了,所以最後一項作業 To Do List 就只有把功能作出來,所以這次複習週要努力還債,把 To Do List 重新切版,然後嘗試做出自己的樣式,我其實想滿久版型的,也 google 好多 To Do List 設計,還找到喜歡的樣式,不過那個有做分類,比較男一點,有空再慢慢研究增加功能。

  • 不太熟的地方:
    今天重新切版一次,發現其實切版還挺不熟的,卡在 flex 滿久的,一開始以為每個巢狀 div 都給他加個 display: flex,結果到真正需要 flex box 來左右分開對齊的 display:flex;justify-content: space-evenly 時,發現在 dev tool 沒有效果QQ,因為需要分開對齊的地方,在外面那一層 div 也有 flex box,然後就看不懂。使用 dev tool 調整 CSS 真的滿方便的,可以即時觀看樣式效果,而且我每次都會使用 dev tool 來調整 flex box,然後就會跳出這個選項:

    看了好幾次都不知道原來這些語法跟 display:flex 是一家人,要一起使用QQ。這也讓我發現對 CSS 是多麼的不熟,有空還是要常常切版,常常吸取經驗!

  • 今天的成果 demo:

  • JavaScript 事件處理的複習心得:
    作業真的值得一再練習跟回味 XD,今天剛開始做的時候,突然有點迷茫,不知所措,就趕緊複習了一下,我發現我還滿喜歡用事件代理的方式來做事件處理,利用滑鼠點到的位置,寫判斷式跟做事件處理的功能。
    跟第七週寫的不一樣之處在:勾選待辦事項的時候,會出現刪除線,我是用 CSS 來判斷 checkbox 有被勾選後加的樣式。這次我回想了一下在事件處理學了哪些方式,例如事件代理、toggle 開關,決定來使用看看 toggle 帶上跟消掉 class 的方法,一開始只能做一個動作,因為判斷的是滑鼠點擊時,含有 class A 時,將 class A 去除、class B 加上,所以在第一次點擊完後,Class A 不見、Class B 存在,但是如果我想再點擊第二次的時候,由於 Class A 已經在第一個點擊被消掉,所以進入不了判斷式(含有 Class A時),也就是沒辦法再做一次:開關 Class A、Class B。
    這次新的寫法是將判斷式寫成:含有 Class A 「或」 Class B 時,會開關 Class A 和 Class B。這樣不論是 Class A 存在或者 Class B 存在,都可以重複按開關。
    所以這次的勾選、沒勾選、刪除線、字體變灰色,都是利用 toggle 的原理去寫的。

感受

  • 切版的感受
    第六週開始,每週都有持續切一點版,但是上週可能專注於留言板的 PHP 部分,CSS 切版的地方就又生疏了,原本有一些邏輯,可以像影片那樣 div 的切法,今天自己試切 To Do List,又打回原型了,看來一開始學習,挺需要模仿的,模仿怎麼切(放 div 分區塊)、還要模仿怎麼命名 class name。

  • toggle
    第七週很惱人的 toggle,一開始在餐廳網頁的 FAQ 被我誤打誤撞寫對了 toggle 收合常見問題集答案,但是在寫 To Do List 時就被絆住了,沒辦法用 toggle 寫好功能。這週居然就腦袋浮現一個 idea,然後實作看看,就這麼神奇...一個轉念,就試成功了!

  • 第五週與第十週的複習週比較
    可能是第五週的進度比較有跟上,所以那週其實有點焦慮,不知道該選擇什麼方式來複習,就挑選了當時首次接觸的 API 跟發 request 來研究,所以其實第一次複習週算是有處於焦慮不確定要複習什麼的狀態。
    第十週複習第六週到第九週的內容,內容明顯增加了許多,也囊括到前面的 CSS 切版,因為第九週留言板的影片太長,有點小偷懶QQ,有點不太集中QQ,然後看影片跟著做 vs. 看完理解後自己思考過程又大不相同,花了許久時間在思考跟紀錄,然後,我還偷看了一下 11~ 14 週的學習內容,大多以前面做的作業(To Do List、留言板等等)為基礎,所以第十週就目標很明確:修正與美化作業,方便未來幾週的銜接,不然未來幾週還要為先前的作業修補,那真的會有點心力交瘁 XD,要顧好前面又要顧好新的內容。總之,這週的複習很充實、很有目標XD。

Decisional 決定行動

RRRRRRRR 其實第七週的作業有些小問題沒改,其中一個就是 To Do List 字打太多會跑版的問題,今天將 To Do List 功能、切版大致完成,可以邁向 6 ~ 9 週的作業訂正(OS:複習週都要到最後一天了,還沒開始訂正作業...)

#todolist #JavaScript event #MTR05







你可能感興趣的文章

React(6) - 提升state

React(6) - 提升state

Tomcat 設定

Tomcat 設定

Angular 專案使用 Font Awesome Free Icon

Angular 專案使用 Font Awesome Free Icon






留言討論