Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Mengembangkan kemampuan dalam dunia pemrograman memerlukan banyak latihan dan eksperimentasi. Salah satu proyek pertama yang bisa kamu coba adalah membuat kalkulator sederhana menggunakan JavaScript. Dalam artikel ini, kita akan membahas langkah demi langkah bagaimana membuat kalkulator tersebut.
Sebelum kita mulai, pastikan bahwa kamu telah memiliki perangkat yang mendukung pembuatan dan pengujian kode JavaScript. Untuk langkah ini, kamu hanya memerlukan komputer dengan browser dan editor teks.
Buatlah file baru dengan nama index.html. File ini akan kita gunakan sebagai struktur dasar halaman. Di dalam file ini, masukan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator JavaScript Sederhana</title>
</head>
<body>
<input type="text" id="angka1">
<input type="text" id="angka2">
<button onclick="hitung()">Hitung</button>
<p id="hasil"></p>
<script src="kalkulator.js"></script>
</body>
</html>Selanjutnya, buat file baru dengan nama kalkulator.js. File ini akan menjadi tempat di mana kita menulis kode JavaScript untuk membuat kalkulator bekerja.
Dalam file ini, kita akan membuat fungsi hitung(). Fungsi ini akan melakukan operasi matematika berdasarkan input dari pengguna.
function hitung() {
var angka1 = document.getElementById('angka1').value;
var angka2 = document.getElementById('angka2').value;
var hasil = Number(angka1) + Number(angka2);
document.getElementById('hasil').innerHTML = hasil;
}hitung()Dalam fungsi hitung(), kita pertama-tama mendapatkan nilai dari dua elemen input dengan getElementById(). Nilai ini saat ini dalam bentuk teks, jadi kita gunakan Number() untuk mengubahnya menjadi angka.
Kemudian, kita menghitung hasil penjumlahan dari dua angka tersebut dan menulis hasilnya ke elemen <p> dengan getElementById() yang kedua.
Untuk menguji kalkulator, buka file index.html di browser kamu. Isi dua kotak input dengan angka, lalu klik tombol “Hitung”. Jika semuanya berjalan dengan baik, kamu seharusnya melihat hasil penjumlahan muncul di bawah tombol.
Patut diingat bahwa proyek ini hanyalah awal dari kemampuan pemrograman JavaScript kamu. Selanjutnya, kamu dapat mencoba menambahkan operasi matematika lainnya atau bahkan membuat antarmuka pengguna yang lebih kompleks. Semakin banyak kamu berlatih, semakin baik juga kemampuan kamu. Selamat mencoba!
Link terkait: