Javascript merupakan bahasa pemrogramman yang powerfulll, dan bisa di gunakan untuk banyak aplikasi baik website, desktop, maupun robot. juga bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. Nah Kali ini kita akan belajar Membuat Tombol hitung Sederhana dengan Javascript yuk kita praktekan.
Siap kan file index.html dan struktur HTML nya seperti berikut. jangan lupa di simpan yah.
<!DOCTYPE html> <html lang ="en"> <head> <meta charset= "UTF-8"> <title> Tombol Hitung Sederhana </title> <link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.min.css"> </head> <body> <div class ="m-5"> <button class= "btn btn-primary" id= "tambah"> Tambah </button> <button class= "btn btn-success" id= "kurang"> Kurangi </button> <div class="m-4"> Hasil : <span class= "bg-success text-white font-weight-bold p-2" id= "hasil"> 0</span> </div> </div> </body> </html>
tampilan aplikasi kita seperti di atas.
lalu kita buat fungsi javascriptnya seperti di bawah ini.
<script>
var tambah = document.getElementById(‘tambah’);
var kurang = document.getElementById(‘kurang’);
var hasil = document.getElementById(‘hasil’);
var no = 1;
tambah.onclick = function(){
hasil.innerHTML = no++;
}
kurang.onclick = function(){
hasil.innerHTML = no–;
}
</script>
penjelasannya yaitu kita tampung ID tambah, kurang dan hasil ke dalam masing masing variabel. lalu tentukan angka pertama yang akan di hitung dengan membuat variabel no = satu.
lalu var tambah kita berikan event onclick yang fungsinya tersebut adalah menambahkan variabel no, yang hasilnya di keluarkan oleh variabel hasil, begitupun untuk varibael kurang yang kita beri event onclick yang fungsi nya sendiri mengurangi var no satu kali. dan di keluarkan olah variabel hasil. begitu penjelannya, kita lihat hasilnya teman teman.
bila kalian klik tombol tambah maka nilai akan bertambah satu dan seterusnya bila trus di klik
dan bila di klik tombol kurang maka nilai akan berkurang satu dan seterusnya bila trus di klik
cukup mudahkan teman teman untuk pembuatan Tombol hitung Sederhana dengan Javascript, sekian tutorial Membuat Tombol hitung Sederhana dengan Javascript semoga bermanfaat yah teman teman
The post Membuat Tombol hitung Sederhana dengan Javascript appeared first on Kursus Website Terbaik.