Selamat pagi sobat blogger. Pada kesempata kali ini saya akan membagikan tutorial sederhana dari java script yaitu : Memasukan Data Lewat Keyboard. Contoh dari masalah ini misalnya kita mau menjumlahkan data berupa angka-angka yang nantinya akan mendapatkan hasil dari penjumlahan dua variabel tersebut. Tanpa basa-basi lebar mari lebih baik kita langsung ke pokok pengerjaannya.
Cara Memasukan Data Lewat Keyboard :
1. Langkah yang pertama kita akan membuat dulu tampilan HTML nya seperi di bawah ini :
<html>
<head><title>Memasukan Bilangan</title></head>
<body>
<center>
<h1>Memasukan Data Lewat Keyboard</h1>
<table>
<tr>
<td>Bilangan 1 :</td>
<td><input type=text size=12 name=bilangan1></td>
</tr>
<tr>
<td>Bilangan 2:</td>
<td><input type=text size=12 name=bilangan2></td>
</tr>
<tr>
<td>Hasil :</td>
<td><input type=text size=12 name=hasil></td>
</tr>
</table>
<hr width=400>
<input type=button value=Jumlahkan onclick=jumlah()>
<input type=reset>
</body>
<html>
2. Lihat Hasilnya, maka akan tampak seperti di bawah ini.
3. Selanjutnya membuat program JavaScript nya, yaitu tujuannnya untuk memfungsikan button "Jumlahkan". Berikut Scriptnya.
<form name=form>
<script>
function jumlah()
{
var bilangan1= parseInt(document.form.bilangan1.value);
var bilangan2= parseInt(document.form.bilangan2.value);
var hasil=bilangan1+bilangan2;
document.form.hasil.value=hasil;
}
</script>
Maka tampilan HTML dan JavaScript nya akan nampak seperti di bawah ini :
4. Tahap akhir adalah mencoba program yang telah kita buat tadi, misalnya disini saya akan mencoba menjumlahkan 23 + 54 maka akan menghasilkan bilangan 77. Lihat gambar dibawah ini.
Bila artikel diatas kurang jelas, saya sertakan juga video tutorialnya di bawah ini. :)
Video Tutorial JavaScript : Memasukan Data Lewat Keyboard
URL Video : https://www.youtube.com/watch?v=xiXUtb-Y8PI
Cara Download video Yotube dengan Savefrom
Sekian dulu postingan kali ini. Semoga artikel yang saya berikan bisa bermanfaat khususnya bagi pembaca. Kunjungi terus blog ini, dan jangan lupa tinggalkan komentarnya.
0 comments:
Post a Comment
Silahkan Berikan Komentarnya di Bawah ini....!!!!!