iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

JavaScript初心者ノ研究日記。系列 第 14

十四日目:JavaScript 做一個BMI 計算機 &偷偷講樣板字面値。

(U 'ᴗ' U)✧ 日安。我是SONYKO
今天是快樂的假日。所以想來點輕鬆的。

學了不少JavaScript ,我們還是得學以致用!
所以我們來試著寫出一個 BMI 計算機 出來吧 ♫

 

Let's JavaScript ♡

 


⑅ 該從何下手 (U 'ᴗ' U)?

超概分可以分成五個步驟:

  1. 我們要做一個介面。( 最少最少也要有 input 和 button )
  2. DOM 取得節點、input 要取得他的 value 才能去計算。
  3. 寫一個 計算 BMI 的函式。
  4. 加上一些防呆機制
  5. 寫一個 將結果渲染到畫面上的函式。
  6. 裝上監聽。

 


⑅ 刻一個介面吧 ♫

你各位練習 HTML / CSS 的機會來了!
我邊看東京電玩展直播 邊刻了一個版出來 (U 'ᴗ' U)
如果只想練邏輯也可以直接拿去用 la ✧

Codepen附上

 


⑅ 取DOM 和 一些注意事項

我們要取input 的値( value ),但我們取出來的數字 其實是字串
https://ithelp.ithome.com.tw/upload/images/20200927/201295060vVXVhM7Qe.png
那你們還記得,如果是字串的話,運算會發生什麼事?
abc * abe // NaN

"111"+"222" // "111222"

這樣不能運算8 (U 'ᴗ' U)?所以我們要把他們轉換成 數字

 

⑅ "型別string" → "型別number"

這邊分享兩種方式:

  1. 使用 parseInt ( )
  2. 使用 Number ( )
/* parseInt */
var h = parseInt(height.value)
console.log (typeof(h))          // number

/* Number */
var h = Number(height.value)
console.log(typeof(h))           // number

 

⑅ parseInt 和 Number 的差異

  • parseInt:將字串轉換為 整數
  • Number:將字串轉換為 數字

這樣講可能還不太知道到底差在哪,我們來舉例:

Number("7日") // NaN
Number("0.1") // 0.1
Number("010") // 10

/* 如果是一般的10進位運算(一般的運算),用 Number 比較理想 */
parseInt("7日") // 7
parseInt("0.1") // 0
parseInt("010") // 10

/* 若要用在2進位 或 8進位等特殊運算,可以考慮用 parseInt */

資料參考來源:TechAcademy

 


⑅ 計算BMI 的函式

  1. 這邊記得要取出 input 的 value ,轉換成數字後計算。
  2. BMI 公式:體重 / 身高(公尺) *身高(公尺)
  3. 使用 toFixed( ) :計算出的結果取小數點後幾位
    ( 不然算出來的結果會超級無敵長 )

 


⑅ 防呆機制

為了防止使用者輸入的是數字以外的東西,所以我們加上防呆機制。
可以使用 if else 來寫。

如果使用者輸入的是正確數値 就計算,如果是怪怪的東西就 alert 錯誤訊息。

 


⑅ 將計算結果渲染到畫面上

我們要渲染的東西有「 BMI 計算結果 」和「 BMI 的狀態 」。

還記得我們說到的 textContent 和 innerHTML 嗎 ?
可以使用他們來將結果渲染上去 (U 'ᴗ' U) ♡
 

⑅ 樣板字面値 Template Literal

樣板字面値 是ES6 加入的新功能。
可以用它來插入多行文字 、帶入變數或參數 ,十分強大。

直接看程式碼比較好理解:

⑅ 傳統寫法:

var cat = miumiu
var age = 10
console.log( "我的貓貓叫" + cat + "他今年" + age + "歲。" )

如果有10個變數要加進去這段話,我們不就要一直 "字串" + 變數 + "字串" + 變數 ...
寫到起笑 (((

 

因此樣板字面値 就被發明了,用了你就回不去了。

⑅ 樣板字面値寫法:

var cat = miumiu
var age = 10
console.log( `我的貓貓叫${cat},他今年${age}歲。` )

方便多了吧,這樣你就不用怕少加號 or 少雙引號了。拿來渲染用超方便。
樣板字面値 是使用 ``${ } 來撰寫的。 詳細參照 MDN

那之後範例就不打傳統寫法了歐歐歐 。

 


⑅ 最後記得裝上監聽

沒有監聽就不會動rrr
就像你煮完便當放在家裡沒帶一樣 ((

我們要監聽的對象為 BMI 計算函式 。
記得要將所有的函式都要回傳至 BMI 計算函式 。

(按鈕).addEventListener('click',(BMI計算函式));

 

如此一來就大功告成哩 (U 'ᴗ' U) ♡

這邊放上我的實作 給大家鞭策

 

我們這兩週學到的東西,已經可以做出一個功能了!
如果覺得邏輯還是很卡,可以熟悉前面的基礎 ~ ♫ 加油

 

 


୨୧(U 'ᴗ' U) SONYKO的 前端日文小教室 ♡

音檔 
 

 日本語   仮名   中、英   羅馬拼音
 テンプレートリテラル       樣板字面値   TenPuRe-To RiTeRaRu
 プレースホルダー      placeholder   PuRe-Su HoRuDa- 
 ドル記号   どるきごう   $字號   DoRuKiGou 
 波括弧   なみかっこ   大括號{}   NaMiKakko 
 シングルクオート      單引號'   ShinGuRu KuO-To 
 ダブルクオート      雙引號"   DaBuRu KuO-To 
 改行   かいぎょう   換行   Kai Gyou 
 バッククオート      ``反引號   BakKu KuO-To 

上一篇
十三日目 JavaScript 監聽 イベントリスナーノ章
下一篇
十五日目:JavaScript ES6 letノ章
系列文
JavaScript初心者ノ研究日記。30

尚未有邦友留言

立即登入留言