Kali ini kita akan berguru bagaimana menciptakan suatu jadwal sederhana menggunakan html dan javascript.Nah,kali ini kita akan menciptakan jadwal untuk menghitung luas segitiga.Jadi, nantinya kita akan menciptakan form dan kita akan menyuruh pengguna mengisi di daerah 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 isyarat lengkapnya menyerupai 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 bantalan = 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 renta : fungsinya untuk menciptakan judul form yang akan kita buat.tag font untuk mengatur font judul menyerupai 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 bahwasanya 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 menciptakan form.Untuk form harus ada aribut name dan method (get/post) untuk perbedaan method dapat anda search di google saja alasannya yaitu akan terlalu panjang kalau saya jelaskan di sini
Warna biru : tag table untuk menciptakan tabel tag tr untuk menciptakan baris dan tag td untuk menciptakan kolom dan mengisikan data tabelnya.tag input untuk menciptakan inputan di sana saya pakai number untuk bantalan dan tinggi alasannya yaitu tentu saja yang akan dimasukkan user yaitu angka.
. untuk atribut onchange itu salah satu jenis event handler di javascript.Kenapa pakai onchange ? alasannya yaitu kalau kita nanti merubah data di bantalan dan tinggi nanti luasnya juga akan otomatis berubah.Intinya onchange itu sesuatu yang dilakukan jikalau terjadi perubahan.onchange itu cuma salah satu eventhandler masih banyak yang lain menyerupai onclick, onmouseover, onmouseout dll
warna hijau : kalau kita mau menciptakan javascript di html biasanya kita akan menggunakan tag script
warna merah : untuk menciptakan 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 ia hasil akhirnya
Kalau anda ingin mencoba menciptakan jadwal ini anda dapat pakai aplikasi editor teks namanya Notepad ++ yang dapat anda download di SINI dan simpan juga filenya nanti dengan format .html
0 Comments