Java Script
Sebelum membuat program kalkulator ataupun form pemesanan hendaknya terlebih saya akan mendeskripsikan sedikit hal tentang java script
Pada Java Script tipe data yang dimiliki diantaranya :
1.String contohnya : "khassifa"
2.Number/Integer contohnya 7702
3.Boolean : suatu variabel yang mempunyai dua nilai untuk memeriksa suatu kondisi tertentu yakni true untuk menyatakan kondisi benar ; false untuk menyatakan kondisi salah contohnya
Variabel
Pada javascript kita sering menjumpai variabel-variabel, adapun fungsi dari variabel itu merupakan suatu objek yang berisi data, yang dapat dimodifikasi selama pengeksekusian program
Aturan penulisan variabel pada javascript. Nama variabel harus dimulai oleh huruf (huruf besar maupun huruf kecil) atau satu karakter ''_''. Nama variabel bisa terdiri dari huruf, angka atau karakter _ dan & (spasi kosong tidak diperbolehkan).
Nama variabel tidak boleh memakai nama nama berikut ini (reserved oleh program) :
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else export extends
false final finally float for function
goto
if, implements, import, in, infinity, instanceof, int, interface
label, long new, null
package, private, protected, public
return
short, static, super, switch, synchronized
this, throw, throws, transient, true, try, typeof
var, void, volatile
while, with
Berikut merupakan contoh penggunaan variabel pada sebuah contoh sederhana pada code HTML :
<html>
<head>
<title>Data Types and Variables</title>
</head>
<body>
<script type="text/javascript">
var x, y;
x= 1024;
y=x; x = "Test";
document.write("<p>x = " + y + "</p>");
document.write("<p>x = " + x + "</p>");
</script>
</body>
</html>
**Hasil dari pengeksekusian code diatas :
X=10
X=Test
Peletakan variabel (global atau lokal)
Variabel global adalah variabel, dimana variabel itu bisa di akses dari seluruh bagian program.
Variabel lokal adalah variabel, dimana variabel itu tidak bisa di akses dari seluruh bagian program yaitu hanya berlaku untuk fungsi tertentu .
Contoh dari penggunaan variabel Global :
<SCRIPT language="Javascript">
<!--
var a = 12;
var b = 4;
function PerkalianDengan2(b) {
var a = b * 2;
return a;
}
document.write("Dua kali dari ",b," adalah " , PerkalianDengan2(b));
document.write("Nilai dari a adalah",a);
// -->
</SCRIPT>
Dari contoh diatas, variabel a dideklarasikan secara eksplisit di awal dari skrip program dan juga di deklarasikan di dalam fungsi . berikut ini hasil dari program diatas.
Berikut contoh penggunaan variabel lokal:
Dua kali dari 4 adalah 8
Nilai dari a adalah 12
<SCRIPT language="Javascript">
<!--
var a = 12;
var b = 4;
function PerkalianDengan2(b) {
a = b * 2;
return a;
}
document.write("Dua kali dari ",b," adalah ",PerkalianDengan2(b));
document.write("Nilai dari a adalah",a);
// -->
</SCRIPT>
Berikut ini hasil dari program diatas.
Dua kali dari 4 adalah 8
Nilai dari a adalah 8
Berikut adalah contoh aplikasi kalkulator sederhana menggunakan JavaScript :
Source code html dan java scriptnya adalah
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>Kalkulator Sederhana</title></head><body>
<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>
<form name="form1" action="#">
<input name="x" type="text">
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select>
<input name="y" type="text">
<input value="=" onclick="hitung()" type="button">
<input name="hasil" disabled="true" type="text"><br>
<input value="CLEAR" onclick="resetForm()" type="button">
</form>
</body></html>
Untuk aplikasi lanjut dengan menggunakan java script dapat dibuat sebuah form pemesanan seperti pada gambar di bawaha ini
source code html dan java scriptnya adalah
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Form Pemesanan Kedai Khassifa</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 12000 * eval(nota.qBakso.value);
var hargaSoto = 10000 * eval(nota.qSoto.value);
var hargaMie = 15000 * eval(nota.qMie.value);
var hargaDegan = 5000 * eval(nota.qDegan.value);
var hargaCampur = 7000 * eval(nota.qCampur.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;
if (jumlahTotal > 50000){
nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
} else {
nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
}
}
function resetForm(){
document.form2.reset();
}
//-->
</script>
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form2" action="#">
<table border="1px">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td width="15px">1</td>
<td width="200px">Bakso Istimewa</td>
<td width="85px" bgcolor=>@<input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="qBakso" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td bgcolor=>@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td bgcolor=>@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="qMie" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td bgcolor=>@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td bgcolor=>@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" value="0" onChange="hitungPesan()"/></td>
</tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
<br>
<marquee><font color="red" face="Arial Black" size="5">by : Novi Khassifa</marquee></font><br>
</FORM>
</CENTER>
</body>
</html>
selamat mencoba..^_^..
Aplikasi Kalkulator dan Form Pemesanan dengan Java Script
.
Langganan:
Posting Komentar (Atom)
The ReaL GeJe ^^
KHASSIFA SI BINTU NAHL
0 komentar:
Posting Komentar