---
# System prepended metadata

title: 10/13 JS BMI 計算機
tags: [JS, 進度筆記, 前端心得, 2021/10/13]

---

# 10/13 JS BMI 計算機   
###### tags: `JS` `2021/10/13` `進度筆記` `前端心得`  
---

講師: 佘昌霖   

---

# 上午的部分 - JS BMI 計算機檢討   

- 清除重算會重新導轉   
![](https://i.imgur.com/NL96GDX.png)   

---

- a 標籤換 div   
![](https://i.imgur.com/UUQ5KEn.png)   

---

- a 標籤按下字才有反應   
![](https://i.imgur.com/faUzafT.png)   
> 可以把 a 標籤做得跟父層一樣大  

---

- 要小心重新整理   
![](https://i.imgur.com/hD0HJVr.png)   
> 如果是金流頁面重新跳轉會多筆訂單  
> 重新跳轉頁面多次會增加 server 流量   

---

- 先做輸入的檢查, 再做計算  
![](https://i.imgur.com/7gLOGLh.png)   
> 先付錢才吃飯, 要先做完判斷再做加減   
![](https://i.imgur.com/JdoEymV.png)   

- 盡量排版用 flex 去做, 目前相容性高  
- 視窗跳出來會改變位置 → position, float(少用), transform 之類的   
- 運算放在 if 之後  

# ``toFixed()``  
- 把數字型態轉換成字串   
- 取到小數點第二位   
- 如果本身不到 10, 會補 0   

----

# function 函式 - 有點像 to do list  
```
function 又稱函式, 函數, 功能...
其實是待辦清單
將要做的事情全寫在裡面
會一項一項幫你做
```
- 像這樣的清單    
![](https://i.imgur.com/xbrixfo.png)   
> 之後只要執行 `早上()` 就會把這份清單叫過來用   

- 但是人生總有意外  
```
你平常七點起床, 但你今天醒來已經九點了,
所以行程就改變了
```
> 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 是區域變數
只作用在程式的特定範圍內, 只有特定範圍能用
例如這個餐券只能在這間店用~
```
![](https://i.imgur.com/rDbGFYt.png)   
> 例如你想印出 a 的話就會印不出來(只作用在 if 內)  
> b 的話有 var 就印得出來   

- const 常數, 是唯讀的, 不能被修改, 例如   
```
宣告後給初始值後就無法再被複寫
會被拿來宣告很固定的值
例如金流的稅率
const pi = 3.1415926
↑ 不能被覆寫的
```
> 如果你想修改常數, 就會報錯   
![](https://i.imgur.com/y0ltMAI.png)   
> 無法覆蓋   


# 參考資料  
[語法與型別 \- JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_Types)  

----

# 回來一下   

![](https://i.imgur.com/70BBZSQ.png)   
> if 內 let 沒有被認識
> 可以把 weight height 放到外面  

- 盡量把 if 丟到 function 內   
![](https://i.imgur.com/S7sTz7W.png)   

![](https://i.imgur.com/VqAMecz.png)   
> 監聽點擊動作   

----
----

![](https://i.imgur.com/Ln2slNt.png)   
> 把 weight 和 height 移出去   

---

![](https://i.imgur.com/dRTdCMz.png)   
> w/h*h 這邊注意進位用的算法 → toFixed  

---

![](https://i.imgur.com/j2dsXN7.png)   
> 去掉測試用的 計算 div tag   

---

![](https://i.imgur.com/VqagLle.png)   
> 暴版囉~   

---

![](https://i.imgur.com/2XWc4tG.png)   
> undefined 的部分 ↓   

---

![](https://i.imgur.com/Fd1gKqp.png)   
> 不用回傳值, 拿掉 e   

---

![](https://i.imgur.com/BhdJY6F.png)   
> 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)   

---

# 另一位同學的作品   
- 這畫面超讚   
![](https://i.imgur.com/JDh78p1.png)   
> 輸出結果可以讓使用者知道位置的部分   
> 盡量增進 UX  

---

![](https://i.imgur.com/LHU7QiH.png)   
> 存取資料庫的問題   
> 先做例外處理再去算   

----

- 被綁住 sweet alert   
![](https://i.imgur.com/Tz1S7S7.png)  
> 監聽事件是可以重複賦予的   

- 可以不用每個 bmi 值都綁監聽事件   
![](https://i.imgur.com/zwN25uG.png)   
![](https://i.imgur.com/N8bQOKg.png)   
> 就會正確顯示   
> 去執行  
> ![](https://i.imgur.com/s0oL6Lf.png)   

---
---

- sweet alert 好東西   
[SweetAlert](https://sweetalert.js.org/)   

---
---

![](https://i.imgur.com/nFnVeKM.png)
> 負值的部分   

---

![](https://i.imgur.com/dGXMpOx.png)   
> 先做例外處理再去算   

---

- 另外一位同學   
![](https://i.imgur.com/uzsOOgt.png)   
> 如果想要讓東西超過頁面, 但東西會跟著頁面移動  
- 可以用 minheight !   

- 先做完檢查再做運算  
- if 有問題的時候就跳開   
- 確認沒問題再去算   

---

- 另一位同學  

![](https://i.imgur.com/CPwzLTH.png)   
> 先 toFixed 再去算   

- BMI 用 if 去算是很危險的   
- 可能會有人亂 key   
- key 下去是負的就會出事了阿北   

# 版面和 html 相關的注意事項   

- 同學的 script 還沒寫, 可以先看 html 結構   
![](https://i.imgur.com/1L2P5ad.png)   

---

![](https://i.imgur.com/yu9viVO.png)   
```
通常 section 放一段一段就好  
```
- i 的小妙用   
![](https://i.imgur.com/Y1P82wN.png)  
![](https://i.imgur.com/RyYcvjo.png)  
> 可以有箭頭符號(點擊)   

---

![](https://i.imgur.com/NPR3cFY.png)  
> 如果你要用 input 那就要一起用 label  
> 國家規範的無障礙頁面會有報錯注意   

---

- class 和 id 的寫法  
- 多單字的情況下()
![](https://i.imgur.com/Wn4IA9M.png)  
> CSS的話, 小寫以減號區隔  
> CSS, HTML 用雙引號居多   
```
蠻多大公司會用 小寫-區隔
```
![](https://i.imgur.com/URXc1a4.png)  
> JS 以小駝峰   
> JS 用單引號   

- 如果在 JS 內用 '字串'  
- 可以用 ES6 寫法   
![](https://i.imgur.com/AIAMyOO.png)
> 可以用重音符號 \`  去包字串         
![](https://i.imgur.com/lSQsWkb.png)       
> 甚至可以包整段   

```
大家約定成俗的習慣, 可以稍微學一下~
```

---

- 同學版型 input 的部分  
- 給樣式的話盡量用 class   
![](https://i.imgur.com/OoRziLt.png)
> 通常相同的東西(input)會用不同 class 去命名  
- 這樣的結構給值會稍微辛苦  
![](https://i.imgur.com/p0tXIIN.png)   
> 如果今天用 innerHTML 的話   
- 可能會要這樣子抓 ↓  
![](https://i.imgur.com/fOJHx8Z.png)  

- 或是直接改掉標籤的 class 屬性   
![](https://i.imgur.com/4OGwzH3.png)   
 

# 參考資料   
[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  

![](https://i.imgur.com/ksL4Cds.png)   

---

- 先刻出 html 骨架   
![](https://i.imgur.com/IUGUaIG.png)   
![](https://i.imgur.com/25yhjEt.png)   
> 先把框框都弄出來再去弄樣式   

----

- 記得初始化(拿掉預設值)  
![](https://i.imgur.com/yb9STsD.png)   
```
消掉網頁內的一些標籤的預設值
像是 <input> <a> 網頁的 body 8px 的預設 margin  
```

---

# SCSS  

## 邊界重疊  
- _margin collapsing_  
![](https://i.imgur.com/9u7se4N.png)  
> 網頁的預設是固定的情況下   
> 長度不變所導致   

- 可以這樣解決  
![](https://i.imgur.com/hqLZgFY.png)   
> 去掉子層 margin, 用 padding 反推   

---

## 權重問題   

- 如果 output-area 權重一樣的情況下   
![](https://i.imgur.com/bYL6dVF.png)   
> 後面新的值會覆蓋前面舊的值   

---

## 調整 div 的寬高  
- 統一調整相同 outputarea 的 div 大小  
![](https://i.imgur.com/92QMvb9.png)  

- 下 display flex 會重新調整 div  
![](https://i.imgur.com/mCtRwYc.png)  
>  可以在父層下 align-item 調整   
>  ![](https://i.imgur.com/ybMFtXo.png)  
>    input 內可以下 fontsize 去調整字體大小   

---

- 如果 input 沒有對到, 可以下個 label 去對  
![](https://i.imgur.com/4Cv2ubD.png)  
> 也可以剛好符合無障礙頁面  

- 輸出範圍  
![](https://i.imgur.com/1nNBvKu.png)   
- 內文用 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 全部抓出來   
![](https://i.imgur.com/i9ceFB7.png)   

---

## 設定按鈕連結   

- 接著設定按鈕  
![](https://i.imgur.com/XYHD9gx.png)

---

## Input 判斷   
- 如果有空值, 一個不行不給過  
![](https://i.imgur.com/oTeQ7US.png)


-  檢查空值, 負值   
> ![](https://i.imgur.com/L0QyCXB.png)  

----

- 測試一下   
![](https://i.imgur.com/Hi0MboU.png)  

- 發現 BMI 有問題  
> ![](https://i.imgur.com/1Jo4pS2.png)   
> 找出問題   

- 然後輸出 BMI  
> ![](https://i.imgur.com/0vcU8r7.png)   

# 做出 BMI 的判斷   
- 記得先計算後再做判斷   
![](https://i.imgur.com/Eq6qQxq.png)   
![](https://i.imgur.com/ZDfzIYu.png)   

--- 

# 做出清除所有值   
![](https://i.imgur.com/5SRLHpX.png)   

----

# 淡入淡出效果  
![](https://i.imgur.com/SWfuh1V.png)   
> 用透明度 oppacity 下去做開關   

![](https://i.imgur.com/pajn2CN.png)   
> transition 去淡化   

----

- 引入 outputarea 去 dom  
- 然後加到點擊 button 去做  
![](https://i.imgur.com/ejwi2mY.png)  

----

![](https://i.imgur.com/xfjhzzv.png)   
> 沒值就清掉他  

----

# 不能有紙片人的狀況~   

![](https://i.imgur.com/S84FCPq.png)   

---

#  怎麼解決你的頁面中有卷軸預設高度的問題?  

![](https://i.imgur.com/2OydXvR.png)   

- 如果用 JS 的情況   
- setTimeout - JS 在執行下一個中等待 X 秒   
- setTimeout - 請他在那邊等多久的時間  
> 如果中間有其他指令, setTimeout 會受到影響  
> 是併行處理, 如果有設定 display none 會同時做    

- 等待 1 秒後加上漸變效果   
![](https://i.imgur.com/uDdxafn.png)  

![](https://i.imgur.com/hBISivb.png)   

![](https://i.imgur.com/xonNoDw.png)   

![](https://i.imgur.com/jSXxmby.png)   

![](https://i.imgur.com/7aAEGBB.png)

![](https://i.imgur.com/rR1fJPS.png)   

---

- 如果能不用 JS, 能用 CSS 就用 CSS 的情況   

- 同學: 用overflow:hidden+ max-height=0好像也可以  
> 如果高度改成0  
> ![](https://i.imgur.com/yi1ec3l.png)   
> 一開始預設不要有高度(高度有數值, 會吃 transition)   
> 讓他過的時候就藏起來   
> ![](https://i.imgur.com/H7d0cZb.png)   
> 等到長高的時候就有東西了!   
> ![](https://i.imgur.com/gxYL5ax.png)   



----




# 參考資料   

[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/)   


----
