Membuat Program Menghitung Luas Segitiga Dengan HTML dan Javascript
Kali ini kita akan belajar bagaimana membuat suatu program sederhana menggunakan html dan javascript.Nah,kali ini kita akan membuat program untuk menghitung luas segitiga.Jadi, nantinya kita akan membuat form dan kita akan menyuruh pengguna mengisi di tempat yang sudah disediakan dan hasilnya juga akan kita tampilkan di suatu inputan.Untuk hasilnya akan kita perlihatkan nanti di bawah.pertama kita bahas dulu kodenya dan fungsinya untuk apa
Untuk kode lengkapnya seperti ini
<html>
<head>
</head>
<body>
<p><font face='Times New Roman' size='14' color='blue'>Menghitung Luas Segitiga</font></p>
<form name='hitungls3' method='post'>
<table>
<tr>
<td>Alas</td>
<td>:</td>
<td><input type='number' name='alass3' value='0' onchange='hitungluas();'></td>
</tr>
<tr>
<td>Tinggi</td>
<td>:</td>
<td><input type='number' name='tinggis3' value='0' onchange='hitungluas();'></td>
</tr>
<tr>
<td>Luas</td>
<td>:</td>
<td> <input type='text' name='luass3' onchange='hitungluas();'></td>
</tr>
</table>
</form>
</body>
<script type='text/javascript'>
function hitungluas(){
var alas = document.forms['hitungls3']['alass3'].value;
alas = parseInt(alas);
var tinggi = document.forms['hitungls3']['tinggis3'].value;
tinggi = parseInt(tinggi);
var luas = (alas*tinggi)/2;
document.forms['hitungls3']['luass3'].value = luas;
}
</script>
</html>
Keterangan :
Warna ungu tua : fungsinya untuk membuat judul form yang akan kita buat.tag font untuk mengatur font judul seperti jenis font (face), ukuran (size), warna (color) oh iya kalau kalian belum tahu untuk nilai suatu atribut itu harus diawali dan diakhiri dengan tanda petik baik itu tanda petik satu maupun dua sebenarnya terserah sih mau pake satu atau dua tapi kalau pakai tanda petik satu harus diakhiri dengan tanda petik satu juga begitu juga sebaliknya
Warna ungu muda : untuk membuat form.Untuk form harus ada aribut name dan method (get/post) untuk perbedaan method bisa anda search di google saja karena akan terlalu panjang kalau saya jelaskan di sini
Warna biru : tag table untuk membuat tabel tag tr untuk membuat baris dan tag td untuk membuat kolom dan mengisikan data tabelnya.tag input untuk membuat inputan di sana saya pakai number untuk alas dan tinggi karena tentu saja yang akan dimasukkan user adalah angka.
. untuk atribut onchange itu salah satu jenis event handler di javascript.Kenapa pakai onchange ? karena kalau kita nanti merubah data di alas dan tinggi nanti luasnya juga akan otomatis berubah.Intinya onchange itu sesuatu yang dilakukan jika terjadi perubahan.onchange itu cuma salah satu eventhandler masih banyak yang lain seperti onclick, onmouseover, onmouseout dll
warna hijau : kalau kita mau membuat javascript di html biasanya kita akan memakai tag script
warna merah : untuk membuat fungsi menhitung luas segitiga di javascript.document.forms[nameform][nameinput].value untuk mengambil nilai dari input dan ParseInt untuk mengkonversi data string ke integer (bilangan bulat)
oh iya ini dia hasil akhirnya
Kalau anda ingin mencoba membuat program ini anda bisa pakai aplikasi editor teks namanya Notepad ++ yang bisa anda download di SINI dan simpan juga filenya nanti dengan format .html
Post a Comment for "Membuat Program Menghitung Luas Segitiga Dengan HTML dan Javascript"
Jangan spam atau promosi di sini jgn juga taruh link aktif kalau mau dapat backlink bisa taruh di profil saja (Name/URL)