# 2021-10-21 JS API and Bootstrap
###### tags: `JS` `Bootstrap` `2021/10/21` `進度筆記` `前端心得`
---
講師: 佘昌霖 老師
---
# 早上的部分
# Ajax 概念
- Ajax 是 Asynchronous JavaScript and XML 的縮寫
> 過去較流行的是 jQuery 的 
- 之前還沒有 html5 /css3, 有使用 jQuery 來使用非同步的狀況 - jQuery 使用上會越來越少, 其資源消耗也比較大
- JS 成熟之後, 有許多新的替代方法產生, 例如
[ axios: Promise based HTTP client for the browser and node.js ](https://github.com/axios/axios)
- 或是現在最常使用的, 如 HTML5 提供了
[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- Fetch 使用上跟 `$.ajax` 使用上相近
# 參考資料 - AJAX 與 Fetch
[AJAX與Fetch API · 從ES6開始的JavaScript學習生活 (gitbooks.io)](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/ajax_fetch.html)
[web中的同步请求和异步请求的差别(重点是ajax中的同步与异步)_前端小白-CSDN博客_ajax异步请求和同步请求的区别](https://blog.csdn.net/u014516981/article/details/53243564)
[什麼是 Ajax？ 搞懂非同步請求 (Asynchronous request)概念｜ALPHA Camp Blog](https://tw.alphacamp.co/blog/ajax-asynchronous-request)
[鐵人賽：ES6 原生 Fetch 遠端資料方法 | 卡斯伯 Blog - 前端，沒有極限 (wcc723.github.io)](https://wcc723.github.io/javascript/2017/12/28/javascript-fetch/)
---
# Fetch 使用方式 - 天氣狀況
- 中央氣象局大概隔很長才會更新一次, 印象是 12hr
- 使用 Fetch 的時候, 藍色部分不太會改動
- > 
- 中央氣象局的 API 位置
> [https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=CWB-B5282D9D-8FDD-40E9-AD48-B1DF3270465D](https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=CWB-B5282D9D-8FDD-40E9-AD48-B1DF3270465D)
- 通常會這樣寫
> 
- 成功的話就會 call 到一堆資料
> 
> 不過有需要查文件的地方
---
# 需要查詢文件的狀況
- 例如這個 POP, wx 是甚麼
- 可以上開放平台做查詢
> [政府資料開放平臺 | 政府資料開放平臺 (data.gov.tw)](https://data.gov.tw/)
>> 找到 [資料主題 (cwb.gov.tw)](https://opendata.cwb.gov.tw/dataset/observation/O-A0003-001)
>>> 開啟 | [說明資料](https://opendata.cwb.gov.tw/opendatadoc/DIV2/A0003-001.pdf) |
- 可以試著 fetch
> 
- 
> 網址的換行會出點狀況
> 可以用 `+` 強制換行
> 不過比較常用底線去做兩個位置表示
- 可以一直 then 下去
> 
- 如果對 json 宣告
> 
> 會出現 promise 會很難作使用
> 然後會再弄個 function 作接下來的處理
> promise 比起變數更像 function
- 自己試一下~
> 
# 參考資料 - 天氣狀況
[Using Fetch - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch)
[JavaScript Fetch API 使用教學 - OXXO.STUDIO (oxxostudio.tw)](https://www.oxxostudio.tw/articles/201908/js-fetch.html)
[資料主題 (cwb.gov.tw)](https://opendata.cwb.gov.tw/dataset/observation/O-A0003-001)
[AJAX與Fetch API · 從ES6開始的JavaScript學習生活 (gitbooks.io)](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/ajax_fetch.html)
[DAY 24. JavaScript Fetch API - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10194107)
[JavaScript基本功修練：Day28 - Fetch練習(GET和POST請求) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10252941)
---
# 對 fetch 內作一些事情
> 
> 會 undefined
> 因為
```
.then 開始是個 function 外面會無法取用到值
```
```
fetch 是併行處理的
所以 console.log 的時候上面的值可能還沒處裡完
```
- 那要怎麼得到 promise 的 result 呢?
> 
> 所以通常不會寫在外面 作 call back function
- 這樣可以抓到宜蘭縣
> 
- 試著抓一下縣市名稱~
> 自己 try
> 
----
# 網路上有很多讀取 JSON 的方法
- 因為 JSON 格式可以到非常複雜
- 例如 [https://jsonpathfinder.com/](https://jsonpathfinder.com/) / [jsonpath online evaluator](https://jsonpath.com/)
- 或是 [Online JSON Viewer (stack.hu)](http://jsonviewer.stack.hu/)
```
用
console.log(JSON.stringify(weather))
把物件轉陣列後去使用
```
> 陣列後
> 
----
> 丟到整理(工具)網站
> 會幫你整理
> 資料大的時候好用
----
# 中場休息
---
# 試著把宜蘭縣資料串上
- 
- 開始串資料
> 
> 
- 完整的串出一個天氣卡片
- 一個一個串完
> 
> 
- 串完後可以發現
> 
> 很多重複的
- 所以可以用代名詞 (變數 variable) 去代替
> 像是這樣
> 
----
# 完成後可以練習串圖片
- 圖片的條件
```
當降雨機率 <= 30% => 晴天(太陽圖)
30% < 當降雨機率 < = 60% => 陰天(太陽圖)
當降雨機率 > 60% => 下雨(下雨圖)
```
- 基本處理好了後可以增進圖片, 動畫
- 這是個很好的處理資訊, 看 API 的能力訓練
- 可以做出不錯的作品
- 大數據後 > python 抓資料
- 如果用 SVG 檔案m 去做圖形綁點擊事件
- onclick 要綁數值傳進去就比較多東西要處理
---
# 下午的部分
# 串圖片
- 如果用 css 來寫網址的位置就很難做修改
> 
> 修改會很不方便, 每次新增/修改都要動到 CSS
----
# 用 inline style 去切換圖片
- 需要後端配合的'方法
- 也可以上網址
> 
----
# 接著用 if 來判斷切換圖片
- 一開始用 if
> 
> 後面可以再精簡化
-----
# 可以把所有東西精簡化!
- 將陣列做變數儲存
> 
> 
> 
----
# 可以用 for loop 把東西包起來
- for loop 的長度就是 location 的長度
> 
> 
> 
- 如果用 = 賦予, 會出現最後一個個縣市蓋過所有值
> 
- 把所有的 index 替換 location[7] 的位置
> 
> 記得做出累加 `+=`
----
# 如果都好了可以去看一下
[Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)](https://getbootstrap.com/)
[Bootstrap 5 繁體中文文件 - 六角學院 · 使用全球最流行的前端開發工具 Bootstrap，快速設計及自定義響應式網站，其擁有豐富的 Sass 變數與 mixins、響應式網格系統、大量預設元件以及強大的 JavaScript 插件。 (hexschool.com)](https://bootstrap5.hexschool.com/)
----
# 如果用 innerHTML
> 
> 沒有宣告的話
> 因為是 innerHTML 他會去幫你抓 html 上的 .content
---
# 如果每個值都要跑
- 你就可以用 for each
> 
- 如果你要取到值, 就要稍微思考一下
- for 的玩法
- for loop
```
for (let i = 1; i <= 11; i++) {
console.log(i)
可以印出 1~11
}
```
- 但如果是 for each
- 沒辦法直接這樣做
> for each 的話要用到陣列才能跑
> 
> 
> 
```
number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
array.foreach((e, i) {
console.log(i + 1)
})
```
> 這樣的話會是 0~ 10
> 
# 課堂練習
- 內容: 完成天氣卡片的製作
- 需有: 顯示基本資訊(天氣狀況/氣溫)
- 須根據降雨機率呈現不同圖片
- 須至少有1個偽類效果(:hover)
- 須至少有1個動態效果 (css animation或JS套件也可)
----
# What is Bootstrap
- 他是個 Framework, 為了要完成某個 task
> 你需要甚麼功能?
> 你需要甚麼工具?
```
如果要蓋房子, 不可能從原料開始製作,
一定會跟個個廠商買材料, 這樣會比土法煉鋼來得快很多 !
```
- 自動化
- 減少編寫的時間
---
# 使用之前
- 先引入框架系統!
- 目前上課用 4.6 版本
- 現在 4.X 還是蠻多人用的
- 4 跟 5 差別在部分命名
```
5 版本也會修正一些問題, 例如在特定語句前加上 bs
```
- 如果你今天引入的是 4.6 的版本!
> 
```
那必須要搭配使用的是 4.6 版本的 文件!
```
> 要選擇相對應版本的文件來對應版本 !
> Bootstrap 的底層會用到 jQuery, 所以你可以寫加 jQuery
> 不過, 5 版後應該沒了
> 盡量使用原生 ES 6 寫法!
- 記得, 因為底層有用到 jQuery !
> 所以引入的行數要注意
> 
```
code.jQuery....這一行必須在 cdn 的前面 !
```
- 自己試一下
> 
# 連 RWD 都幫你引入了
- 如果你只加個 container ...
> 
> 可以看到 RWD 效果
---
# Bootstrap 是建立在網格系統的
- 主要是十二欄位
- 最大值是 1140px
- 所以會幫你預留旁邊兩邊的寬度
- 方便切版
- 限制寬度
- 十二欄位例如 ↓
[東京都中央卸売市場 (tokyo.lg.jp)](https://www.shijou.metro.tokyo.lg.jp/)
> 左右兩邊的背景, 會拿來扣除某些特定螢幕寬度空間
> 通常網頁都會注意寬度, 比較不會注意長度, 因為可以一直往下滾動
> 扣除寬度的限制, 這樣會比較好做 RWD
> 因此在更寬的螢幕, 像是 2K 背景就會更大
> 十二欄位會因為視野的寬度, 去設計視野的限制範圍
> 十二欄位常應用在 PC, 但到了平板、手機 不適用十二欄位
```
因為十二欄位套在平板、手機蠻精細的, 所以設計師會自由發揮, 例如: 4 欄, 6 欄
```
- Bootstrap 也幫你實作了 Grid system
> 
> 
----
# 用網格系統排出一個網球場
- 用 col 來排~
- Total height 是 2400px
- Total width 是 1140px
- 底色綠色
> 
> 不能用 CSS 寫XD
> 
- 怎麼解決?
- 先分幾排
> 
> 
- 找顏色!
> 
> 
> 
- 找線框顏色
> 
> 
> 
- Done
> 列出 class 來作到畫面生成~
- 自己 try
> 
> 
---
# 練複製貼上
---
# Bootstrap 的設定是 min-width
- sm
> 500 以上的時候變
- lg
> 992 以上的時候變兩個
> 
- 裡面內建好了一堆東西
- 可以在 html 下一堆東西
> bootstrap 的很多值都有 ``!important``
```
所以不一定改得動, 應該說幾乎
```
- 權力遊戲, 要比權重很難!
> 
> 
> 如果沒有辦法打贏他, 就加入他一起用!
```
!important
```
# 回家作業 - 試著用 Bootstrap 去切微軟?!
- 微軟 width 最大值 超過 1140px
> 變版時間點不太一樣
> 微軟他是 1600px
```
或者是可以用 !important 去改
```
> 4 變 2, 2 變 1
> 因為被框架固定了, 所以客製化難度高
> 不過有些元件好用, 像是彈跳視窗
- 內容: 使用boostrap提供的元件
- 去完成微軟官網架構的仿切
- 外觀不須完全一樣
- 但變版方式與架構需一致
- 兩個禮拜
- 購物車
- 一個公司頁面
- 比較 cheap 的 case 可能會用
- 客製化的設計, 注重設計理念的公司可能會少用
# 參考資料 - 框架
[Day21 - 何謂框架? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10248882)
[Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)](https://getbootstrap.com/)
[Bootstrap 5 繁體中文文件 - 六角學院 · 使用全球最流行的前端開發工具 Bootstrap，快速設計及自定義響應式網站，其擁有豐富的 Sass 變數與 mixins、響應式網格系統、大量預設元件以及強大的 JavaScript 插件。 (hexschool.com)](https://bootstrap5.hexschool.com/)
[從0開始學習架構和框架，零基礎小白入門絕對要看 | 數據分析不是個事 (medium.com)](https://medium.com/%E6%95%B8%E6%93%9A%E5%88%86%E6%9E%90%E4%B8%8D%E6%98%AF%E5%80%8B%E4%BA%8B/%E5%BE%9E0%E9%96%8B%E5%A7%8B%E5%AD%B8%E7%BF%92%E6%9E%B6%E6%A7%8B%E5%92%8C%E6%A1%86%E6%9E%B6-%E9%9B%B6%E5%9F%BA%E7%A4%8E%E5%B0%8F%E7%99%BD%E5%85%A5%E9%96%80%E7%B5%95%E5%B0%8D%E8%A6%81%E7%9C%8B-7f3b1bd90b34)
[軟體框架 \- 維基百科，自由的百科全書 (wikipedia.org)](https://zh.wikipedia.org/wiki/%E8%BB%9F%E9%AB%94%E6%A1%86%E6%9E%B6)
[8.2 程式語言的框架 - 基礎教材 (f5ezcode.in)](https://docs.f5ezcode.in/cs-basic/di-ba-zhang-gong-cheng-de-gong-ju/8.2-cheng-shi-yan-de-kuang-jia)
[軟體框架和軟體架構的區別？ \- IT閱讀 (itread01.com)](https://www.itread01.com/content/1548028476.html)
[從一個軟體開發經驗，看整個人生. “Frameworks are bad; libraries are… | by Heron Yang | Heron’s Blog 海龍的部落格](https://blog.heron.me/%E5%BE%9E%E4%B8%80%E5%80%8B%E8%BB%9F%E9%AB%94%E9%96%8B%E7%99%BC%E7%B6%93%E9%A9%97-%E7%9C%8B%E6%95%B4%E5%80%8B%E4%BA%BA%E7%94%9F-1f4694090d25)
----
Sign in with Wallet
Connect another wallet