使用原生 Javascript 製作一個簡單的 BMI 計算機:
BMI = 體重(公斤) / (身高(公尺) x 身高(公尺))
1.取出 按鈕 input 關於身高和體重的值,然後再利用 公式 算出 BMI
在畫面上印出結果。
2.根據 BMI 數值 判斷 BMI 標準 在畫面上印出結果。
3.製作一個按鈕可以清空輸入值
4.當輸入值是空白時,按下計算時會跑出 視窗提醒要輸入身高體重(防呆機制)
model (資料)> event (事件) > view (介面)
function / if...else / scope / dom / event
函式
「函式」指的是將一或多段程式指令包裝起來,可以重複使用,也方便維護。
宣告函式的方法有好幾種,但不管是什麼方式,通常一個函式會包含三個部分:
在括號 ( ) 中的部分,稱為「參數 (arguments) 」,參數與參數之間會用逗號 , 隔開
在大括號 { } 內的部分,內含需要重複執行的內容,是函式功能的主要區塊。
畫面:
<section class="calculator">
<section class="fields">
<h1 >BMI 計算機</h1>
<div class="bmi_calcu">
<label for="bodyHeight">身高 :</label>
<input type="number" class="bodyHeight" min="0">CM
<label for="bodyWeight">體重:</label>
<input type="number" class="bodyWeight" min="0">Kg
</div>
<div class="btn_block">
<input type="submit" value="計算" class="calcualteBMI">
<i class="fas fa-undo reset" title="重新整理"></i>
</div>
</div>
</section>
<section class="result">
<h2 class="result_txt">你的BMI:</h2>
<p id="bmiText"></p>
<p id="resultText">0</p>
</section>
<section class="bottom">
</section>
</section>
// 宣告 DOM
let bmiText =document.querySelector('#bmiText');
bmiText.style.display="none";
//事件點擊按鈕
let btn =document.querySelector('.calcualteBMI');
let reset =document.querySelector('.reset');
因為使用者點擊了計算 取出了 身高和體重的值 並把它印出來。
利用事件監聽 addEventListener
//事件監聽
btn.addEventListener('click',calculateBMI);
}
function calculateBMI(){
let bodyWeight =document.querySelector('.bodyWeight').value;
//體重值
let bodyHeight =document.querySelector('.bodyHeight').value;
//身高值
let resultText =document.querySelector('#resultText');
//計算出BMI值
let bmiText =document.querySelector('#bmiText');
// 印出BMI標準
}
因為抓出來的值都是 value 是文字,我們需要把它變成數字
使用 parseInt() 變成整數,因為公分要轉公尺,記得身高要除以100
因為得出來的值,產生很多小數,使用toFixed(2) 讓小數點4捨5入只有2位。
function bmi(weight,height){
let w = parseInt(weight);
let h = parseInt(height)/100;//因為公分要轉公尺所以除以100
let bmi = (w/(h*h)).toFixed(2);//toFixed讓小數點4捨5入只有2位
return bmi; //回傳結果
}
當使用者沒有輸入數字時會跳出視窗提示,並不會在介面印出畫面
把他放入在 calculateBMI()。
if((bodyWeight !="" ) && (bodyHeight != ""))
{
//bmi標準可 畫面顯示
bmiText.style.display="block";
//計算結果
resultText.innerHTML = bmi(bodyWeight,bodyHeight);
//BMI標準計算結果
bmiText.innerHTML = checkBMI(bmi(bodyWeight,bodyHeight));
}else{
bmiText.style.display="none";
alert("請輸入身高體重!")
return
}
建立一個 叫做 checkBMI 的 funciton ,使用 if...else
來做判斷,裡面要放入參數才能判斷。這個參數就是變數的意思,由前面的計算 BMI 公式 bmi(bodyWeight,bodyHeight)
取得。
function checkBMI(bmi){
if( bmi < 18.5){
return "太輕了"
}else if( bmi >=18.5 && bmi < 24){
return "體重正常 "
}else if( bmi >=24 && bmi < 27){
return "過重 "
}else if( bmi >=27 && bmi < 30){
return "輕度肥胖 "
}else if( bmi >=30 && bmi < 35){
return "中度肥胖 "
}else if( bmi >=35){
return "重度肥胖 "
}
}
製作一個按鈕 reset 可以使輸入值都變歸零,並不會影響到畫面
把他放入一個叫做 undo 的 function。
function undo(e){
document.querySelector('.bodyWeight').value ='';
document.querySelector('.bodyHeight').value ='';
bmiText.style.display="none";
resultText.innerHTML = 0;
return
}
// 事件監聽
reset.addEventListener('click',undo);
//BMI = 體重(公斤) / (身高(公尺) x 身高(公尺))
// 計算功能寫在外面,另外的功能應另外寫出來。
// 宣告 DOM
let bmiText =document.querySelector('#bmiText');
bmiText.style.display="none";
//事件點擊按鈕
let btn =document.querySelector('.calcualteBMI');
let reset =document.querySelector('.reset');
//計算BMI
function bmi(weight,height){
let w = parseInt(weight);
let h = parseInt(height)/100;//因為公分要轉公尺所以除以100
let bmi = (w/(h*h)).toFixed(2);//toFixed讓小數點4捨5入只有2位
return bmi;
}
// 取出輸入值寫入畫面
function calculateBMI(){
let bodyWeight =document.querySelector('.bodyWeight').value;
let bodyHeight =document.querySelector('.bodyHeight').value;
let resultText =document.querySelector('#resultText');
let bmiText =document.querySelector('#bmiText');
// 印出值來
if((bodyWeight !="" ) && (bodyHeight != "")){
bmiText.style.display="block";
resultText.innerHTML = bmi(bodyWeight,bodyHeight);
bmiText.innerHTML = checkBMI(bmi(bodyWeight,bodyHeight));
}else{
bmiText.style.display="none";
alert("請輸入身高體重!")
return
}
resultText.innerHTML = bmi(bodyWeight,bodyHeight);
}
// bmi 範圍
function checkBMI(bmi){
if( bmi < 18.5){
return "太輕了"
}else if( bmi >=18.5 && bmi < 24){
return "體重正常 "
}else if( bmi >=24 && bmi < 27){
return "過重 "
}else if( bmi >=27 && bmi < 30){
return "輕度肥胖 "
}else if( bmi >=30 && bmi < 35){
return "中度肥胖 "
}else if( bmi >=35){
return "重度肥胖 "
}
}
//清空值
function undo(e){
document.querySelector('.bodyWeight').value ='';
document.querySelector('.bodyHeight').value ='';
bmiText.style.display="none";
resultText.innerHTML = 0;
return
}
//事件監聽
btn.addEventListener('click',calculateBMI);
reset.addEventListener('click',undo);
資料來源:《JavaScript標準參考教程》、重新認識 JavaScript