Perlu diketahuai, untuk menghitung sebuah luas segitiga maka rumus yang digunakan adalah (1/2 x alas x tinggi).
Pertama buatlah sebuah file dengan nama luassegitiga.html, kemudian kita tuliskan koding HTML untuk membuat form inputan.
<html>
<head>
<title>Menghitung Luas Segitiga</title>
</head>
<body>
<form>
<h4>Menghitung Luas Segitiga</h4>
<table>
<tr>
<td>Alas</td>
<td>:</td>
<td><input type="text" id="alas" name="alas"></td>
</tr>
<tr>
<td>Tinggi</td>
<td>:</td>
<td><input type="text" id="tinggi" name="tinggi"></td>
</tr>
<tr>
<td>Luas</td>
<td>:</td>
<td><input type="text" id="luas" name="luas" disabled="true" size="5"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="hitung" onClick="luas()"></td>
</tr>
</table>
</form>
</body>
</html>
Hasil dari koding HTML diatas akan menghasilkan form inputan sebagai berikut:
Setelah kita buat form inputan HTMLnya, selanjutnya kita akan menambahkan javascript untuk menjalankan aksi menghitung luas segitiga. letakkan javascript diantara <head> #javascript# </head>. berikut koding javascriptnya.
<script type="text/javascript">
function hitungluas(){
alas=document.getElementById("alas").value;
tinggi=document.getElementById("tinggi").value;
luas=(alas*tinggi)*0.5;
document.getElementById("luas").value=luas;
}
</script>
Biar lebih jelas, beikut koding lengkapnya (html+javascript):
<html>
<head>
<title>Menghitung Luas Segitiga</title>
<script type="text/javascript">
function hitungluas(){
alas=document.getElementById("alas").value;
tinggi=document.getElementById("tinggi").value;
luas=(alas*tinggi)*0.5;
document.getElementById("luas").value=luas;
}
</script>
</head>
<body>
<form>
<h4>Menghitung Luas Segitiga</h4>
<table>
<tr>
<td>Alas</td>
<td>:</td>
<td><input type="text" id="alas" name="alas"></td>
</tr>
<tr>
<td>Tinggi</td>
<td>:</td>
<td><input type="text" id="tinggi" name="tinggi"></td>
</tr>
<tr>
<td>Luas</td>
<td>:</td>
<td><input type="text" id="luas" name="luas" disabled="true" size="5"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="hitung" onClick="luas()"></td>
</tr>
</table>
</form>
</body>
</html>
Hasil koding html dan javascript:
Oke terimakasih sudah mampir ke blog MbahKunang...... :)
No comments:
Post a Comment