Aplikasi Android dengan Flash AS3 atau sekarang menjadi Animate CC, kita diarahkan untuk menggunakan HTML 5.
Aplikasi berbasis HTML sangat erat kaitannya dengan Javascript dan CSS.
Pada tutorial berikut kita akan membuat operasi hitung sederhana (fungsi aritmatika), menggunakan tombol submit. Jika tombol di klik (event onclick), maka fuction javascript akan mengambil angka yang berada pada kotak input Nilai1 dan Nilai2 dan hasilnya akan ditampilkan pada textbox Hasil.
Untuk mendapatkan pemahaman tentang aplikasi perhitungan sederhana (Tambah, kurang, kali, dan bagi) mengunakan Javascript digabungkan dengan HTML agar Anda dapat melihat hasilnya dengan mudah.
Copy kode berikut, lalu tempelkan (paste) HTMLPad. Jika Anda belum memiliki HTMLPad 2020 dapat di download pada link berikut.download
<!DOCTYPE HTML>
<head>
<title>Belajar</title>
<script LANGUAGE="JavaScript">
function cek(){
if(form.nilai1.value == "" || form.nilai2.value == ""){
alert("data kosong"); //jika angka kosong maka pesan akan tampil
exit;
}
}
function tambah() {
cek(); //panggil function cek
a=eval(form.nilai1.value); //mengisi variabel a dengan isi dari input name nilai1
b=eval(form.nilai2.value); //mengisi variabel b dengan isi dari input name nilai2
c=a+b //menjumlahkan kedua variabel
form.total.value = c; //memberikan hasil penjumlahan ke input name total
}
function kali() {
cek();
a=eval(form.nilai1.value);
b=eval(form.nilai2.value);
c=a*b
form.total.value = c;
}
function kurang() {
cek();
a=eval(form.nilai1.value);
b=eval(form.nilai2.value);
c=a-b
form.total.value = c;
}
function bagi() {
cek();
a=eval(form.nilai1.value);
b=eval(form.nilai2.value);
c=a/b
form.total.value = c;
}
function reset() {
form.nilai1.value="";
form.nilai2.value="";
form.total.value = "";
}
</script>
</head>
<body>
<form name="form">
Nilai1
<input type=text name="nilai1" size=3><br><br>
Nilai2
<input name="nilai2" type="text" size="3" /><br>
<br>
Hasil <input type="text" value="" name="total" size="9">
<br><br>
<!-- membuat event ketika tombol di klik maka memanggil function javascript -->
<input type=button name=submit onclick="tambah()" value="+">
<input type=button name=submit onclick="kali()" value="X">
<input type=button name=submit onclick="bagi()" value="/">
<input type=button name=submit onclick="kurang()" value="-">
<input type=button name=submit onclick="reset()" value="Reset">
</form>
</body>
</html>Hasilnya akan tampak sepertigambar berikut.
Hasilnya berupa halaman web. Jika akan digunakan dalam postingan blog tempelkan kode diatas dalam Tampilan HTML
Halaman web perhitungan sederhana ini dapat kita panggil atau gunakan dalam aplikasi yang dibuat menggunakan Animate CC.
Ini merupakan dasar pembuatan aplikasi sederhana yang membutuhkan kalkulator sederhana yang dapat Anda kembangkan menjadi model lainnya.
Pesan Bijak
- "Bahagia bukan milik dia yang hebat dalam segalanya, namun dia yang mampu temukan hal sederhana dalam hidupnya dan tetap bersyukur".
- "Bergeraklah dengan cepat, selesaikan segala persoalan agar hati dan pikiran kita tak punya waktu untuk mengeluh".
- "Harus selalu bersyukur dan tidak berkeluh kesah. Dengan demikian perjalanan hidup baru bisa lancar tanpa hambatan".
0 Komentar