Day 82 (Week12), 2021/07/02 (Friday)

學習時數:9 hr

Done

  • hw1 留言板(修正載入更多的功能)
  • hw2 to do list API+切版+一部份的前端功能

To Do @ this week

  • hw1 留言板
  • hw2 to do list

學習心得紀錄

Objective 客觀

留言板 載入更多功能

昨日做好了 API 裡 SELECT 五筆的功能,還有 cursor-based pagination,在網址上加入 before,取小於 before 值的五筆資料,之後開始處理 jQuery 的部分,最後還有修好檢討影片最後面載入更多的問題:當資料已經更新完最後幾筆資料時,還要再點一下「載入更多」,載入更多按鈕才會消失,後面改成當資料長度小於 5 時,就把載入更多的按鈕藏起來。
發現自己對於在 JS 或 jQuery 要取 HTML 表單裡輸入的值的部分還不太熟,紀錄一下:

<body>
  nickname: <input type='text' name='nickname'></input>
</body>

<script>
  // jQuery
  $('input['name=nickname'])
</script>

待辦清單 -- 利用 Bootstrap 切版

留言板的製作,只有簡單的利用 bootstrap 的基本功能,例如按鈕、像卡片的方塊、表單,這次在待辦清單裡,還多加了一些 CSS 的更改,例如 Bootstrap 內的 flex-box、container 等等的功能。

待辦清單 -- 前端功能製作

使用 jQuery 做了以前做過的待辦清單功能,例如:新增、刪除待辦事項,還有完成後勾選待辦事項的樣式更動。今天學到 checkbox 在 jQuery 確認有沒有勾選的指令為 .prop('checked'),可以利用監聽 enter 按鍵來新增待辦事項,還有在 .replace(/{}/g, id)/ /g 的意思:g 表示 global,這樣使用 replace 就會取代所有含有 {},並取代成 id 這個變數。

待辦清單 -- API 文件

前天跟著影片動手做了留言板的 API,對於以 json 格式的方式顯示錯誤訊息及儲存 data 還不太熟,今天又重新想過一次、寫過一次,然後也有發現自己有幾處不熟的地方:跨域請求來源、要寫 header 的 content type。

感受

跟上週相比,這週的 PHP 的比例減少很多,也算是另一種複習吧!在進入 jQuery 前,之前在查發送 request 的指令時,都會查到 ajax 的方法,原來這就是 jQuery 呀!相較於原生的 JavaScript 的語法,真是簡潔好多!

Decisional 決定行動

今天待辦清單做到統計有幾筆未完成的待辦事項,明天繼續完成!

#SQL #Bootstrap #jquery #html







你可能感興趣的文章

Currying

Currying

什麼是 Cross-Origin Resource Sharing (CORS)?

什麼是 Cross-Origin Resource Sharing (CORS)?

統一網頁支付介面:Payment Request API

統一網頁支付介面:Payment Request API






留言討論