# 10/13 JS BMI 計算機
###### tags: `JS` `2021/10/13` `進度筆記` `前端心得`
---
講師: 佘昌霖
---
# 上午的部分 - JS BMI 計算機檢討
- 清除重算會重新導轉
---
- a 標籤換 div
---
- a 標籤按下字才有反應
> 可以把 a 標籤做得跟父層一樣大
---
- 要小心重新整理
> 如果是金流頁面重新跳轉會多筆訂單
> 重新跳轉頁面多次會增加 server 流量
---
- 先做輸入的檢查, 再做計算
> 先付錢才吃飯, 要先做完判斷再做加減
- 盡量排版用 flex 去做, 目前相容性高
- 視窗跳出來會改變位置 → position, float(少用), transform 之類的
- 運算放在 if 之後
# ``toFixed()``
- 把數字型態轉換成字串
- 取到小數點第二位
- 如果本身不到 10, 會補 0
----
# function 函式 - 有點像 to do list
```
function 又稱函式, 函數, 功能...
其實是待辦清單
將要做的事情全寫在裡面
會一項一項幫你做
```
- 像這樣的清單
> 之後只要執行 `早上()` 就會把這份清單叫過來用
- 但是人生總有意外
```
你平常七點起床, 但你今天醒來已經九點了,
所以行程就改變了
```
> function 可以根據不同狀況(輸入)並執行不同的事項
```
function 早上(){
盥洗
if(起床時間 < 8:00){
折棉被
準備早餐
吃早餐
看報紙
}
出門上班
}
早上(7:32)
↑ 去執行早上 function
但如果是早上(9:32), 就只執行盥洗
```
# 參考真的是參考
- 因為是 Java
[Microsoft PowerPoint - FS720-Ch14 \[相容模式\] (stu.edu.tw)](https://www.pws.stu.edu.tw/shchen/Handout/FS720-Ch14.pdf)
---
# JS 的變數宣告
==var 跟 let 都是一般變數, 可以重複使用並且重複給值==
- var 全域變數, 我會影響到所有人
```
var 是全域變數
可以在程式的任何地點, 你想用就用~
大概像是悠遊卡(無廣告)到處都能用
var 比較肥大, 占用的記憶體會稍微多點
```
```
var a =123
function test() {
console.log(a);
}
test()
```
- let 我只讀這段, 我作用只作用在這邊~
```
let 是區域變數
只作用在程式的特定範圍內, 只有特定範圍能用
例如這個餐券只能在這間店用~
```
> 例如你想印出 a 的話就會印不出來(只作用在 if 內)
> b 的話有 var 就印得出來
- const 常數, 是唯讀的, 不能被修改, 例如
```
宣告後給初始值後就無法再被複寫
會被拿來宣告很固定的值
例如金流的稅率
const pi = 3.1415926
↑ 不能被覆寫的
```
> 如果你想修改常數, 就會報錯
> 無法覆蓋
# 參考資料
[語法與型別 \- JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_Types)
----
# 回來一下
> if 內 let 沒有被認識
> 可以把 weight height 放到外面
- 盡量把 if 丟到 function 內
> 監聽點擊動作
----
----
> 把 weight 和 height 移出去
---
> w/h*h 這邊注意進位用的算法 → toFixed
---
> 去掉測試用的 計算 div tag
---
> 暴版囉~
---
> undefined 的部分 ↓
---
> 不用回傳值, 拿掉 e
---
> display none 不會有淡入淡出效果
- 淡入淡出效果
- 例外事件
- 寫些幹話
# 參考資料
[EventListener - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/API/EventListener)
[JavaScript DOM EventListener (w3schools.com)](https://www.w3schools.com/js/js_htmldom_eventlistener.asp)
---
# 另一位同學的作品
- 這畫面超讚
> 輸出結果可以讓使用者知道位置的部分
> 盡量增進 UX
---
> 存取資料庫的問題
> 先做例外處理再去算
----
- 被綁住 sweet alert
> 監聽事件是可以重複賦予的
- 可以不用每個 bmi 值都綁監聽事件
> 就會正確顯示
> 去執行
> 
---
---
- sweet alert 好東西
[SweetAlert](https://sweetalert.js.org/)
---
---
> 負值的部分
---
> 先做例外處理再去算
---
- 另外一位同學
> 如果想要讓東西超過頁面, 但東西會跟著頁面移動
- 可以用 minheight !
- 先做完檢查再做運算
- if 有問題的時候就跳開
- 確認沒問題再去算
---
- 另一位同學
> 先 toFixed 再去算
- BMI 用 if 去算是很危險的
- 可能會有人亂 key
- key 下去是負的就會出事了阿北
# 版面和 html 相關的注意事項
- 同學的 script 還沒寫, 可以先看 html 結構
---
```
通常 section 放一段一段就好
```
- i 的小妙用
> 可以有箭頭符號(點擊)
---
> 如果你要用 input 那就要一起用 label
> 國家規範的無障礙頁面會有報錯注意
---
- class 和 id 的寫法
- 多單字的情況下()
> CSS的話, 小寫以減號區隔
> CSS, HTML 用雙引號居多
```
蠻多大公司會用 小寫-區隔
```
> JS 以小駝峰
> JS 用單引號
- 如果在 JS 內用 '字串'
- 可以用 ES6 寫法
> 可以用重音符號 \` 去包字串
> 甚至可以包整段
```
大家約定成俗的習慣, 可以稍微學一下~
```
---
- 同學版型 input 的部分
- 給樣式的話盡量用 class
> 通常相同的東西(input)會用不同 class 去命名
- 這樣的結構給值會稍微辛苦
> 如果今天用 innerHTML 的話
- 可能會要這樣子抓 ↓
- 或是直接改掉標籤的 class 屬性
# 參考資料
[HTML i Tag (w3schools.com)](https://www.w3schools.com/tags/tag_i.asp)
[ES6 Template Literals 字串樣版/字符串格式化 - JavaScript (JS) 教學 Tutorial (fooish.com)](https://www.fooish.com/javascript/ES6/template-literals.html)
----
# 下午的部分 - 老師實際演練
- 切版
- JS
---
- 先刻出 html 骨架
> 先把框框都弄出來再去弄樣式
----
- 記得初始化(拿掉預設值)
```
消掉網頁內的一些標籤的預設值
像是 <input> <a> 網頁的 body 8px 的預設 margin
```
---
# SCSS
## 邊界重疊
- _margin collapsing_
> 網頁的預設是固定的情況下
> 長度不變所導致
- 可以這樣解決
> 去掉子層 margin, 用 padding 反推
---
## 權重問題
- 如果 output-area 權重一樣的情況下
> 後面新的值會覆蓋前面舊的值
---
## 調整 div 的寬高
- 統一調整相同 outputarea 的 div 大小
- 下 display flex 會重新調整 div
> 可以在父層下 align-item 調整
> 
> input 內可以下 fontsize 去調整字體大小
---
- 如果 input 沒有對到, 可以下個 label 去對
> 也可以剛好符合無障礙頁面
- 輸出範圍
- 內文用 padding 去推
# 參考資料
[理解邊界重疊的原因 \- CSS | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
[面試之CSS篇邊距重疊與BFC | 程式前沿 (codertw.com)](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/742639/)
----
# JS 的部分
## 先挖 DOM
- 一次先把 DOM 全部抓出來
---
## 設定按鈕連結
- 接著設定按鈕
---
## Input 判斷
- 如果有空值, 一個不行不給過
- 檢查空值, 負值
> 
----
- 測試一下
- 發現 BMI 有問題
> 
> 找出問題
- 然後輸出 BMI
> 
# 做出 BMI 的判斷
- 記得先計算後再做判斷
---
# 做出清除所有值
----
# 淡入淡出效果
> 用透明度 oppacity 下去做開關
> transition 去淡化
----
- 引入 outputarea 去 dom
- 然後加到點擊 button 去做
----
> 沒值就清掉他
----
# 不能有紙片人的狀況~
---
# 怎麼解決你的頁面中有卷軸預設高度的問題?
- 如果用 JS 的情況
- setTimeout - JS 在執行下一個中等待 X 秒
- setTimeout - 請他在那邊等多久的時間
> 如果中間有其他指令, setTimeout 會受到影響
> 是併行處理, 如果有設定 display none 會同時做
- 等待 1 秒後加上漸變效果
---
- 如果能不用 JS, 能用 CSS 就用 CSS 的情況
- 同學: 用overflow:hidden+ max-height=0好像也可以
> 如果高度改成0
> 
> 一開始預設不要有高度(高度有數值, 會吃 transition)
> 讓他過的時候就藏起來
> 
> 等到長高的時候就有東西了!
> 
----
# 參考資料
[CSS隐藏元素 display、visibility、opacity的区别 - 给时光以生命 - 博客园 (cnblogs.com)](https://www.cnblogs.com/jing-tian/p/10969109.html)
[分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景 - Nayek - 博客园 (cnblogs.com)](https://www.cnblogs.com/nayek/p/11813741.html)
[CSS display 屬性 - Wibibi](https://www.wibibi.com/info.php?tid=CSS_display_%E5%B1%AC%E6%80%A7)
[重新認識 CSS - visibility | Titangene Blog](https://titangene.github.io/article/css-visibility.html)
[在 JavaScript 中等待 X 秒 | D棧 - Delft Stack](https://www.delftstack.com/zh-tw/howto/javascript/javascript-wait-for-x-seconds/)
[透過 JavaScript 動態修改CSS 樣式、屬性 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10226003)
[怎麼 setTimeout 遲到了？ | Nono (nonotw.com)](https://blog.nonotw.com/2021/04/27/why-my-timer-delay/)
[CSS3 transition height 0 to auto (bradshawenterprises.com)](http://css3.bradshawenterprises.com/animating_height/)
----
Sign in with Wallet
Connect another wallet