Menghitung Luas Segitiga dengan HTML dan Javascript
Hai kawan, pada kesempatan kali ini mari kita belajar bagaimana cara membuat perhitungan luas segitinga dengan menggunakan HTML dan JavaScript. Perlu diketahuai, untuk menghitung sebuah luas segitiga maka rumus yang digunakan adalah (1/2 x alas x tinggi). OK, mari kita mulai membuatnya....
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.
Baca juga program pencarian data jquery ajax
<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>
<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 :
Terima Kasih Telah Berkunjung, Semoga Bermanfaat.....!!!
Mau liat kumpulan source code bisa disini
