Membuat Aplikasi Kalkulator 'KaLiBaTa' Berbasis JavaScript ~ Roisa

Membuat Aplikasi Kalkulator 'KaLiBaTa' Berbasis JavaScript

1:53 PM Unknown


DHTML (Dynamic HTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengkombinasikan elemen-elemen seperti HTML, style sheet, dan scripting. Pada pembuatan DHTML kali ini akan dilakukan dengan memanfaatkan JavaScript. JavaScript adalah bahasa script (bahasa pemrogaman yang dapat memegang kontrol aplikasi) yang berbasis pada bahasa pemrograman Java, namun JavaScript bukanlah bagian teknologi Java dari SUN (sekarang diakusisi ORACLE). Java merupakan bahasa berorientasi objek murni , sedangkan JavaScript digunakan secara prosedural. Cara kerja JavaScript adalah mengakses elemen pada HTML dan membuat aksi jika elemen-elemen HTML itu mengalami perubahan, misalnya berubanya warna halaman web begitu sebuah tombol diklik.
Berikut adalah contoh aplikasi kalkulator sederhana 'Kalibata' menggunakan JavaScript :








Script JavaScript: kalkulator.js

<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil= myForm.opt.value;
if (pil == "tambah") {
var z = x + y;
}else if (pil == "kurang") {
var z = x - y;
} else if (pil == "kali") {
var z = x * y;
} else if (pil == "bagi") {
var z = x / y;
}
myForm.hasil.value = z;
myForm.x.value = "";
myForm.y.value = "";
}
function resetForm(){
document.form1.reset();
}
//-->
</script>

Script HTML: kalkulator.html
<!--
Roisatul Azizah
109533414524
Kalkulator 'KaLiBaTa'
-->

<!DOCTYPE html>
<html lang="en">
<head>
<title>Kalkulator 'KaLiBaTa'</title>
</head>
<body>
<form name="form1" action="#">
<input type="text" name="x" />
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select>
<input type="text" name="y" />
<input type="button" value="=" onClick="hitung()" />
<input type="text" name="hasil" disabled="true" /><br/>
<input type="button" value="CLEAR" onClick="resetForm()" />
</form>
</body>
</html>

Artikel Lainnya

0 comment:

Posting Komentar

Informasi Pilihan Identitas:
Google/Blogger : Account special blogger
Another : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan). salam hangat, Roisa :)

Pages 371234 ยป
 
Wedoo Indonesia