**********
今日作業呈現
今天老師教我們如何做一個簡單的使用者介面，我們用的例子是BMI
一.首先我們需輸入的資料有:身高、體重、性別
二.然後進行運算BMI=體重（kg）/身高平方（m*m）
三.希望呈現方式:身高體重用數線來表示以方便手機輸入，隨著不同的BMI值出現不同的人物照片，註明距離理想體重還有多少公斤
p.s. 製作使用者介面時，要記得把使用者可能最在意的東西優先呈現出來!!!!!
1.
身高體重的輸入方式:先去w3school搜尋input type
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit"
value="Submit">
</form>
➜表:按Submit會去執行action
➜type="submit"是按鈕
type="text"是文字型資料
value=" "是初始值
2.
要常常記得去檢查程式，看看function有無正常運作，這時使用alert是個很好的檢查方式~
<form action="javascript:f()"> ➜引用JS的東西
<head>
<script>
function f() { alert("XD~~"); }
</script>
</head>
</form>
3.
性別的輸入方式:w3school搜尋Input Type Radio
<form>
<input type="radio" name="gender" value="male"
checked> 男
<input
type="radio" name="gender" value="female"> 女
</form>
➜ 選男，output值value="male"
4.
抓取使用者輸入的值
<script>
function f()
{
var x = document.getElementById("g").value;
var y = document.getElementById("Height").value;
var z = document.getElementById("Weight").value;
alert(x+" "+y+" "+z); //看看function有無正常運作
}
</script>
<form action="javascript:f()">
<select id="g">
<option value="Male">男</option>
<option value="Female">女</option>
</select><br><br>
身高: <input type="text" id="Height"><br>
體重: <input type="text" id="Weight"><br><br>
<input type="submit" value="Submit">
</form>
5.
接下來進行運算，BMI=體重（kg）/身高平方（m*m）
<script>
function f1()
{
var h = document.getElementById("height").value;
var w = document.getElementById("weight").value;
var bmi = w /((h*0.01)*(h*0.01));
if(bmi<18.5)alert("過輕");
else if(bmi<24)alert("正常");
else if(bmi<27)alert("過重");
else { alert("肥胖"); }
}
</script>
6.
作業呈現
沒有留言: