2015年7月20日 星期一

Web前端程式設計：上課練習(3)

身體質量指數運算 (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>&nbsp;</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>&nbsp;</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>&nbsp;</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;
  }
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)