利用原生的 funciotn 觀念寫一個 BMI 計算機

javascript 全馬鐵人挑戰賽 w3hexschool f2e

yolala 2020-02-08 22:22:22 ‧ 12722 瀏覽

使用原生 Javascript 製作一個簡單的 BMI 計算機：

BMI = 體重(公斤) / (身高(公尺) x 身高(公尺))

BMI計算網站

思考流程：

1.取出按鈕 input 關於身高和體重的值，然後再利用公式算出 BMI

在畫面上印出結果。

2.根據 BMI 數值判斷 BMI 標準在畫面上印出結果。

3.製作一個按鈕可以清空輸入值

4.當輸入值是空白時，按下計算時會跑出視窗提醒要輸入身高體重（防呆機制）

model (資料)> event (事件) > view (介面)

demo 網址

javascript 概念

function / if...else / scope / dom / event

函式
「函式」指的是將一或多段程式指令包裝起來，可以重複使用，也方便維護。
宣告函式的方法有好幾種，但不管是什麼方式，通常一個函式會包含三個部分：
在括號 ( ) 中的部分，稱為「參數 (arguments) 」，參數與參數之間會用逗號 , 隔開
在大括號 { } 內的部分，內含需要重複執行的內容，是函式功能的主要區塊。

畫面：

HTML 畫面

 
<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

找出計算和清空按鈕
印出文字的 DOM
印出文字的 DOM 先隱藏 display:none;

// 宣告 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);

把 input 取出值，來做一個 function 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標準
 

 
 
}

計算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
  }

判斷BMI標準

建立一個叫做 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);

Javascript 程式碼

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