Chyul's Zone: Modul 5 DHTML dan Java Script

Studi Kasus

kal.css

body {<br /> margin: 20 px;<br /> width: 500px;<br /> }<br /> <br /> titel{<br /> display: block;<br /> }<br /> <br /> titel{<br /> height: 100px;<br /> width: 500px;<br /> text-align: center;<br /> border: 3px solid pink;<br /> }

hitungan.js

function proses(){<br />     var variabel = document.kalkulator;<br />     var a = parseInt(variabel.a.value);<br />     var b = parseInt(variabel.b.value);   <br />     var op = variabel.op.value;<br />     var hasil;<br />    <br />     if(op == "add"){<br />         hasil = a + b;<br />     }<br />     else if(op == "sub"){<br />         hasil = a - b;<br />     }<br />     else if(op == "mpy"){<br />         hasil = a * b;<br />     }<br />     else{<br />         hasil = a / b;<br />     }<br />    <br />     variabel.hasil.value = hasil;<br /> }

kalkulator.html

<!DOCTYPE html><br /> <html lang="en"><br />     <head><br />         <title>Kalkulator Sederhana</title><br />         <script language="JavaScript" type="text/javascript" src="hitungan.js"></script><br />     <link rel="stylesheet" href="kal.css" type=text/css /><br />  </head><br />     <body background = "b.gif"><br />  <titel><br />             <font color="purple" face="cambria" size=12><b> Kalkulator Sederhana </b></font><br />             <form name="kalkulator" action="#">                <input type="text" size="6" name="a"><br />                 <select name="op"><br />                     <option value="add">+</option><br />                     <option value="sub">-</option><br />                     <option value="mpy">*</option><br />                     <option value="div">:</option><br />                 </select><br />                 <input type="text" size="6" name="b"><br />                 <input type="button" value="=" onclick="proses()"/><br />                 <input type="text" size="12" name="hasil" readonly><br />             </form> </titel><br />     </body><br /> </html>

Print Screen :

Fungsi Tambah

Fungsi Kurang

Fungsi Kali

Fungsi Bagi

Tugas Rumah

Kasir.js

function totalHarga(){<br />     var harga;<br />     var pesanan;<br />     var total = 0;<br />    <br />     for(i = 0; i < 10; i += 2){         harga = parseInt(document.kasir[i].value);         pesanan = parseInt(document.kasir[i + 1].value);                 if(pesanan > 0){<br />             total = total + (harga * pesanan);<br />         }<br />        <br />         document.kasir.total.value = total;<br />     }<br /> }<br /> <br /> function diskon(){<br />     var total = parseInt(document.kasir.total.value);<br />     var diskon = 0;<br />    <br />     if(total >= 100000){<br />         diskon = 20 / 100 * total;<br />     }<br />     else if(total >= 50000){<br />         diskon = 10 / 100 * total;<br />     }<br />     else if(total >= 25000){<br />         diskon = 5 / 100 * total;<br />     }<br />    <br />     document.kasir.diskon.value = diskon;<br /> }<br /> <br /> function jumlahBayar(){<br />     var total = parseInt(document.kasir.total.value);<br />     var diskon = parseInt(document.kasir.diskon.value);<br />     var bayar = total - diskon;<br />    <br />     document.kasir.bayar.value = bayar;<br /> }<br /> <br /> function proses(){<br />     totalHarga();<br />     diskon();<br />     jumlahBayar();<br /> }<br /> <br /> function reset(){<br />     var elemen = document.kasir;<br />    <br />     elemen.pesan1.value = "";<br />     elemen.pesan2.value = "";<br />     elemen.pesan3.value = "";<br />     elemen.pesan4.value = "";<br />     elemen.pesan5.value = "";<br />     elemen.total.value = "";<br />     elemen.diskon.value = "";<br />     elemen.bayar.value = "";<br /> }

Kasir.html

<!DOCTYPE html><br /> <html lang="en"><br />     <head><br />         <title>Form kasir - Tugas Praktikum Modul 5</title><br />         <script language="JavaScript" type="text/javascript" src="kasir.js"></script><br />     </head><br />     <body background = "a.jpg"><br />         <hr/>            <div class="title"><h2>Form kasir Berbasis JavaScript</h2></div>        <hr/>            <form name="kasir" action="#">                <table border="1">                    <tr>                         <th>No</th>                         <th>Makanan / Minuman</th>                         <th>Harga</th>                         <th>Pesan</th>                     </tr>                     <tr>                         <td>1</td>                         <td>Bakso Istimewa</td>                         <td>@<input type="text" name="harga1" value="12000" onchange="proses()"/></td>                         <td><input type="text" name="pesan1" onchange="proses()"/></td>                     </tr>                     <tr>                         <td>2</td>                         <td>Soto Spesial</td>                         <td>@<input type="text" name="harga2" value="10000" onchange="proses()"/></td>                         <td><input type="text" name="pesan2" onchange="proses()"/></td>                     </tr>                     <tr>                         <td>3</td>                         <td>Mie Ayam Super</td>                         <td>@<input type="text" name="harga3" value="15000" onchange="proses()"/></td>                         <td><input type="text" name="pesan3" onchange="proses()"/></td>                     </tr>                     <tr>                         <td>4</td>                         <td>Es Degan</td>                         <td>@<input type="text" name="harga4" value="5000" onchange="proses()"/></td>                         <td><input type="text" name="pesan4" onchange="proses()"/></td>                     </tr>                     <tr>                         <td>5</td>                         <td>Es Campur</td>                         <td>@<input type="text" name="harga5" value="7000" onchange="proses()"/></td>                         <td><input type="text" name="pesan5" onchange="proses()"/></td>                     </tr>                     <tr>                         <td colspan="3" align="right">Jumlah Total</td>                         <td><input type="text" name="total" readonly /></td>                     </tr>                     <tr>                         <td colspan="3" align="right">Diskon</td>                         <td><input type="text" name="diskon" readonly /></td>                     </tr>                     <tr>                         <td colspan="3" align="right">Jumlah Dibayar</td>                         <td><input type="text" name="bayar" readonly /></td>                     </tr>                 </table>                <br><br />                 <input type="button" name="Batal" value="Batal" onclick="reset()" color="#ffffff"/><br />             </form>                © Zulfa Rumailah , 2011<br />     </body><br /> </html>

Screen Shot