Asslamu'alaikum teman2q mas2 asdos dan semuanya
kali ini dini kembali membawa materi pemograman web yang baru, DHTML and JAVASCRIPT edition, wuuiiih terasa menakutkan yah judulnya,,, tp ngga' kok, selama qta mw berlatih n balajar mencoba, insyaAllah smw mudaaaaaah, heeeeem coba kita pelajari dan analisa hasil kerjaanq ni, yaitu membuat kalkulator sederhana, atau bahasa kasarnya kalkulator lombok kata temen2, heeeem kayak apa sih?? ni nih contoh tampilannya
Naaaah itu dia teman2, gimana sih
cara bikinnya???? kalo' dini sih pake script sperti dibawah ni, kl pengen belajar, jgn asal di copas lo, tp analisa tiap baris fungsi dari bahasa html yang udah dini bikin, oke???
(haduh banyak cakap yah, langsung napa ya?hehehe) oke2 ni nih scriptnya :
<html>
<title>Kalkulator Sederhana</title>
<link rel="shortcut icon" href="kalku.jpg"/>
<script language="JavaScript">
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value=c
}
function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}
function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}
function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}
function pangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a,b)
form.hasil.value = c
}
</SCRIPT>
<body >
<hr size=11 width=450 align="left" color="pink"></hr>
<h2><strong><font color="purple"> Kalkulator Sederhana Dengan JavaScript</strong></font></h2>
<hr size=11 width=450 align="left" color="pink"></hr>
<FORM name="form">
<table border=0 >
<tr>
<td height="45">Inputkan Angka Pertama :</td>
<td><input type="text" name="a" size="10"/></td>
</tr>
<tr>
<td height="45">Inputkan Angka Kedua :</td>
<td><input type="text" name="b"size="10"/></td>
</tr>
<tr>
<td height="45" colspan=2 align="center">
<input type="button" value=" + " onClick="tambah()">
<input type="button" value=" - " onClick="kurang()">
<input type="button" value=" x " onClick="kali()">
<input type="button" value=" / " onClick="bagi()">
<input type="button" value=" ^ " onClick="pangkat()">
</td></tr>
<tr>
<td height="45" align="center" colspan=2>Hasil :
<input type "text" name="hasil" size="10"></td>
</tr>
<tr><td colspan=2 align="center">
<input type="reset" value=" CLEAR " ></td>
</tr>
</table>
</br>
<hr size=12 width=450 align="left" color="pink"></hr>
</FORM>
</br></br><font color="gray" size="2" face="Comic Sans Ms">
::Tampilan Kalkulator Sederhana Menggunakan JavaScript::
</font>
</body>
</html>
Then...
What's up???
ada lagi nih, buat
temen2 yang masih belum puas belajar javascript, oke dini kasih contoh lagi, yaitu pembuatan form pembayaran seperti ni
How about the script?? g usah banyak omong deh, dini langsung kasih tw aj, gini nih scriptnya
<!DOCTYPE html>
<html lang="en">
<head>
<title> Demo Tabel</title>http://www.blogcrowds.com/resources/parse_html.php
</head>
<body>
<table border=1>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var myForm = document.form1;
var bakso = 12000 * eval(myForm.menu1.value);
var soto = 10000 * eval(myForm.menu2.value);
var mie = 15000 * eval(myForm.menu3.value);
var degan = 5000 * eval(myForm.menu4.value);
var campur = 7000 * eval(myForm.menu5.value);
var hasil = bakso + soto + mie + degan + campur;
if (hasil > 50000){
myForm.Total.value = hasil;
myForm.Diskon.value = 10000;
myForm.Bayar.value = hasil - 10000;
} else {
myForm.Total.value = hasil;
myForm.Diskon.value = 0;
myForm.Bayar.value = hasil - 0;
}
myForm.bayar1.value=bakso;
myForm.bayar2.value=soto;
myForm.bayar3.value=mie;
myForm.bayar4.value=degan;
myForm.bayar5.value=campur;
}
//-->
</script>
<h2>Form Pemesanan Berbasis JavaScript</h2>
<form name="form1" action="#">
<table border="5">
<tr>
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
<th>Total</th>
</tr>
<tr>
<th>1</th>
<th>Bakso Spesial</th>
<td>@<input type="text" name="bakso" value="12000" disabled="true"/></td>
<td><input type="text" name="menu1" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar1" disabled="true"/></td>
</tr>
<tr>
<th>2</th>
<th>Soto Spesial</th>
<td>@<input type="text" name="soto" value="10000" disabled="true"/></td>
<td><input type="text" name="menu2" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar2" disabled="true"/></td>
</tr>
<tr>
<th>3</th>
<th>Mie Ayam Super</th>
<td>@<input type="text" name="mie" value="15000" disabled="true"/></td>
<td><input type="text" name="menu3" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar3" disabled="true"/></td>
</tr>
<tr>
<th>4</th>
<th>Es Degan</th>
<td>@<input type="text" name="degan" value="5000" disabled="true"/></td>
<td><input type="text" name="menu4" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar4" disabled="true"/></td>
</tr>
<tr>
<th>5</th>
<th>Es Campur</th>
<td>@<input type="text" name="campur" value="7000" disabled="true"/></td>
<td><input type="text" name="menu5" value="0" onChange="hitungPesan()"/></td>
<td><input type="text" name="bayar5" disabled="true"/></td>
</tr>
<tr>
<td colspan=4 align="right">Jumlah total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr>
<td colspan=4 align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr>
<td colspan=4 align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" /></td>
</tr>
</table><br/>
<input type="reset" value="Batal" />
</form>
</body>
</html>
Heeem gmn??? udah paham???
waaaaah pinter..
apa?belum paham???
heeeem payah, heheheehe
maaf bukan maksud menghina, tapi klo tmen2 emang belum paham, cba brows lebih banyak lagi mengenai javascript, okke
semangaaaaat!!!!
ttep trus rajin belajar ya...
Haduh capek ngetik segini banyaknya(alai, pdhal tinggal copas) heheheehe
tp kayaknya emang cukup sampe' dsini dulu postinganq kali ni, dini harap tmen2 bisa nambah ilmunya meski yg dini sampein cma dikit, amiiiiin
Wassalamu'alaikum......
0 koment:
Posting Komentar