Modul 4 - DHTML dan Javascript

Studi kasus : Kalkulator Sederhana








<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xlmns="http://www/w3.org/1999/xhtml" lang="en" lang="en"><br /><head><br /><title>calculator</title><br /></head><br /><body background ="bg_192.gif"><br /><script language="JavaScript" type="text/javascript"><br />function calculator(){<br /> var komp = document.calc;<br /> var no1 = parseInt(komp.no1.value);<br /> var no2 = parseInt(komp.no2.value); <br /> var cho = komp.cho.value;<br /> var res;<br /> <br /> if(cho == "add"){<br /> res = no1 + no2;<br /> }<br /> else if(cho == "min"){<br /> res = no1 - no2;<br /> }<br /> else if(cho == "mult"){<br /> res = no1 * no2;<br /> }<br /> else{<br /> res = no1 / no2;<br /> }<br /> <br /> komp.res.value = res;<br />}<br /></script><br /><div align="center"><br /><span style="font-family:verdana;font-size:4px;color:#172c12;"><b><br />-- SimpLe CaLcuLator --<br /><br /> <br /> <form name="calc" action="#"><br /> <input type="textbox" size="5" name="no1"><br /> <select name="cho"><br /> <option value="add">+</option><br /> <option value="min">-</option><br /> <option value="mult">x</option><br /> <option value="div">/</option><br /> </select><br /> <input type="textbox" size="5" name="no2"><br /> <input type="button" value="=" onclick="calculator()"><br /> <input type="textbox" size="10" name="res"><br /> </form><br /> </body><br /></html><br />


Tugas praktikum



<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html><br /><br /><head><br /><br /><title>pemesanan</title><br /><br /><script type="text/javascript"><br />function hitung(){<br /><br />var bill = document.form2;<br /><br />var hargaBakso = 12000 * eval(bill.xbakso.value);<br /><br />var hargaSoto = 10000 * eval(bill.xsoto.value);<br /><br />var hargaMie = 15000 * eval(bill.xmie.value);<br /><br />var hargaDegan = 5000 * eval(bill.xdegan.value);<br /><br />var hargaCampur = 7000 * eval(bill.xcampur.value);<br /><br />var tot = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;<br /><br />if (tot > 50000){<br /><br /> bill.Total.value = tot;<br /><br /> bill.Diskon.value = 10000;<br /><br /> bill.Bayar.value = tot - eval(bill.Diskon.value);<br /><br /> } else {<br /><br /> bill.Total.value = tot;<br /><br /> bill.Diskon.value = 0;<br /><br /> bill.Bayar.value = tot - eval(bill.Diskon.value);<br /><br /> }<br /><br />}<br /><br />function resetForm(){<br /><br />document.form2.reset();<br /><br />}<br /><br /></script><br /><br /></head><br /><br /><body background="bg_147.gif"><br /><span style="font-family:verdana;font-size:4px;color:#000000;"><br /><br /><!--Letakkan Listing Code JavaScript disini--><br /><div align = "center"><br /><br /><br /><h3>---- Form Pemesanan ---</h3><br /><br /><span style="font-family:verdana;font-size:2px;color:#000000;"><br /><br /><form name="form2" action="#"><br /><br /><table border="1px"><br /><br /><tr><br /><br /> <th>No</th><br /><br /> <th>Makanan/Minuman</th><br /><br /> <th>Harga</th><br /><br /> <th>Pesan</th><br /><br /></tr><br /><br /><tr><br /><br /> <td width="15px">1</td><br /><br /> <td width="200px">Bakso Istimewa</td><br /><br /> <td width="85px">@ <input type="text" name="bakso" value="12000" size="6" disabled="true"></td><br /><br /> <td width="150px"><input type="text" name="xbakso" value="0" onchange="hitung()"></td><br /><br /></tr><br /><br /><tr><br /><br /> <td>2</td><br /><br /> <td>Soto Spesial</td><br /><br /> <td>@ <input type="text" name="soto" value="10000" size="6" disabled="true"></td><br /><br /> <td><input type="text" name="xsoto" value="0" onchange="hitung()"></td><br /><br /></tr><br /><br /><tr><br /><br /> <td>3</td><br /><br /> <td>Mie Ayam Super</td><br /><br /> <td>@ <input type="text" name="mie" value="15000" size="6" disabled="true"></td><br /><br /> <td><input type="text" name="xmie" value="0" onchange="hitung()"></td><br /><br /></tr><br /><br /><tr><br /><br /> <td>4</td><br /><br /> <td>Es Degan</td><br /><br /> <td>@ <input type="text" name="degan" value="7000" size="6" disabled="true"></td><br /><br /> <td><input type="text" name="xdegan" value="0" onchange="hitung()"></td><br /><br /></tr><br /><br /><tr><br /><br /> <td>5</td><br /><br /> <td>Es Campur</td><br /><br /> <td>@ <input type="text" name="campur" value="7000" size="6" disabled="true"></td><br /><br /> <td><input type="text" name="xcampur" value="0" onchange="hitung()"></td><br /><br /></tr><br /><br /><tr><br /><br /> <td colspan="3" align="right">Jumlah Total</td><br /><br /> <td><input type="text" name="Total" disabled="true"></td><br /><br /></tr><br /><br /><tr><br /><br /> <td colspan="3" align="right">Diskon</td><br /><br /> <td><input type="text" name="Diskon" disabled="true"></td><br /><br /></tr><br /><br /><tr><br /><br /> <td colspan="3" align="right">Jumlah Dibayar</td><br /><br /> <td><input type="text" name="Bayar" disabled="true" align="right"></td><br /><br /></tr><br /><br /></table><br/><br /><br /><input type="button" value="BATAL" onclick="resetForm()"><br /><br /></form><br /><br /></body><br /><br /></html><br /><br />