身體質量指數運算 (bmi)
- 網頁設計
- 主要的程式架構
- 取得身高體重值 (轉為浮點數) 並計算
- 取兩位小數 (兩種方法)
- 條件判斷語法
- 結果的顯示 (彈出訊息框、顯示在網頁上、網頁連結...)
- 加入身高的檢查 (避免除以零的錯誤)
************************************************************************
實作0：網頁設計
網頁上顯示輸入的身高、體重及計算的按鈕
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html>
<head>
<Meta Charset="utf-8">
<title> BMI </title>
</head>
<body>
<h1>BMI 身體質量指數</h1>
<form method="post" action=""><!--表單，action是要回傳至後台的網址，ex:action = "你要去的網頁.php"-->
<p>身高：
<input type="text" name="height" id="height" size="4"/>公分
<!--通常name和id會設定相同，一個後台用，一個前端用-->
</p>
<p>體重：
<input type="text" name="weight" id="weight" size="4"/>公斤
</p>
<p>
<input type="button" name="button" id="button" value="計算BMI"/>
<!--若要回傳至後台，input type="submit"-->
</p>
</form>
<p> </p>
</body>
</html>
|
---------------------------------------------------------------------------------------------------------------
實作1：主要的程式架構
設計function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html>
<head>
<Meta Charset="utf-8">
<title> BMI </title>
<script>
function calc_bmi()
{
var h = document.getElementById('height').value;
alert('h='+h);
}
</script>
</head>
<body>
<h1>BMI 身體質量指數</h1>
<form method="post" action=""><!--表單，action是要回傳至後台的網址，ex:action = "你要去的網頁.php"-->
<p>身高：
<input type="text" name="height" id="height" size="4"/>公分
<!--通常name和id會設定相同，一個後台用，一個前端用-->
</p>
<p>體重：
<input type="text" name="weight" id="weight" size="4"/>公斤
</p>
<p>
<input type="button" name="button" id="button" value="計算BMI" onclick="calc_bmi();"/>
<!--若要回傳至後台，input type="submit"-->
</p>
</form>
<p> </p>
</body>
</html>
|
---------------------------------------------------------------------------------------------------------------
實作2：撰寫計算公式
BMI= 體重/身高(m)*身高(m)，取得數值需轉為浮點數計算
1
2
3
| var h = parseFloat(document.getElementById('height').value);//將字串轉為浮點數
var w = parseFloat(document.getElementById('weight').value);
var bmi = w/((h/100)*(h/100));
|
---------------------------------------------------------------------------------------------------------------
實作3：取兩位小數
1
2
3
| //取兩位小數
bmi = Math.floor( bmi * 100 ) / 100 ; //方法1:將bmi*100在無條件捨去小數，在/100
bmi = bmi.toFixed(2);
|
---------------------------------------------------------------------------------------------------------------
實作4：條件判斷語法
判斷bmi數值18.5、24、27等要秀出對應的資訊
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| function calc_bmi()
{
var h = parseFloat(document.getElementById('height').value);//將字串轉為浮點數
var w = parseFloat(document.getElementById('weight').value);
var bmi = w/((h/100)*(h/100));
//取兩位小數
bmi = Math.floor(bmi*100)/100 ; //方法1:將bmi*100在無條件捨去小數，在/100
bmi = bmi.toFixed(2);
var msg='';//要秀的資訊
//判斷
if ( bmi<=18.5 )
{
msg='太輕';
}else if ( bmi>18.5 && bmi<=24)
{
msg='正常';
}else if ( bmi>24 && bmi<=27)
{
msg='稍重';
}else if ( bmi>27)
{
msg='月巴 月半';
}else
{
msg='看到這表示程式出錯了';
}
alert('bmi='+bmi+'\n'+msg);//先網頁秀出
}
|
---------------------------------------------------------------------------------------------------------------
實作5：將所有要顯示的結果寫入
秀出資訊及圖片以及網頁
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <!DOCTYPE html>
<html>
<head>
<Meta Charset="utf-8">
<title> BMI </title>
<script>
function calc_bmi()
{
var h = parseFloat(document.getElementById('height').value);//將字串轉為浮點數
var w = parseFloat(document.getElementById('weight').value);
var bmi = w/((h/100)*(h/100));
//取兩位小數
bmi = Math.floor(bmi*100)/100 ; //方法1:將bmi*100在無條件捨去小數，在/100
bmi = bmi.toFixed(2);
var msg='';//要秀的資訊
var pic='';//要秀的圖檔
var page='';//要秀的網址
//判斷
if ( bmi<=18.5 )
{
msg='太輕';
pic='s1.jpg';
page='page1.html';
}else if ( bmi>18.5 && bmi<=24)
{
msg='正常';
pic='s2.jpg';
page='page2.html';
}else if ( bmi>24 && bmi<=27)
{
msg='稍重';
pic='s3.jpg';
page='page3.html';
}else if ( bmi>27)
{
msg='月巴 月半';
pic='s4.jpg';
page='page4.html';
}else
{
msg='看到這表示程式出錯了';
}
var str='';//整個要秀的資訊
str+='<h3>你的狀況是：'+msg+'</h3>';//顯示文字
str+='<img src="images/'+pic+'">';//圖片顯示
str+='<p><a href="' + page + '">參考我們的建議</a></p>';//顯示的網址
document.getElementById('message').innerHTML=str;// location.href=page;
}
</script>
</head>
<body>
<h1>BMI 身體質量指數</h1>
<form method="post" action=""><!--表單，action是要回傳至後台的網址，ex:action = "你要去的網頁.php"-->
<p>身高：
<input type="text" name="height" id="height" size="4"/>公分
<!--通常name和id會設定相同，一個後台用，一個前端用-->
</p>
<p>體重：
<input type="text" name="weight" id="weight" size="4"/>公斤
</p>
<p>
<input type="button" name="button" id="button" value="計算BMI" onclick="calc_bmi();"/>
<!--若要回傳至後台，input type="submit"-->
</p>
</form>
<span id="message"></span><!--在按鈕下方顯示bmi計算後要顯示的資訊-->
<p> </p>
</body>
</html>
|
---------------------------------------------------------------------------------------------------------------
實作6：加入身高的判斷
確認輸入框的內容不能為空且不能為0
1
2
3
4
5
6
7
8
9
10
11
12 | //輸入資料的檢查
if(isNaN(h) || h==0)//isNaN(h)表示h的值為空，且分母不能為0
{
alert('身高有錯');
return false;
}
if(isNaN(w))
{
alert('體重有錯');
return false;
}
|
