Selamat malam =)
Setelah kemarin kita bermain dengan CSS sekarang kita mempelajari web dinamis alias web yang jauh lebih interaktif. Nah, untuk web dinamis kita bisa menggunakan DHTML dan JavaScript. Untuk contoh saya akan berikan web kalkulator. Cekidot ya gan :cendolbig:
Untuk file javascript - simpan dengan nama calculator.js
Setelah kemarin kita bermain dengan CSS sekarang kita mempelajari web dinamis alias web yang jauh lebih interaktif. Nah, untuk web dinamis kita bisa menggunakan DHTML dan JavaScript. Untuk contoh saya akan berikan web kalkulator. Cekidot ya gan :cendolbig:
Untuk file javascript - simpan dengan nama calculator.js
function proses(){
var myForm=document.form_kalkulator;
if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "/"){
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}
function reset(){
var elemen = document.form_kalkulator;
elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}
function cetak()
{
var myForm = document.form_kalkulator;
if (myForm.bil1.value=="[Masukkan bilangan 1]" || myForm.operasi.value=="[Pilih Operator]" || myForm.bil1.value=="[Masukkan bilangan 2]")
{
alert("Input masih ada yang kosong atau Anda belum memilih operator, cek lagi!");
}
else
{
alert("Nilai dari " + myForm.bil1.value + " " + myForm.operasi.value + " " + myForm.bil2.value + " = " + myForm.hasil.value);
}
}
var myForm=document.form_kalkulator;
if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "/"){
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}
function reset(){
var elemen = document.form_kalkulator;
elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}
function cetak()
{
var myForm = document.form_kalkulator;
if (myForm.bil1.value=="[Masukkan bilangan 1]" || myForm.operasi.value=="[Pilih Operator]" || myForm.bil1.value=="[Masukkan bilangan 2]")
{
alert("Input masih ada yang kosong atau Anda belum memilih operator, cek lagi!");
}
else
{
alert("Nilai dari " + myForm.bil1.value + " " + myForm.operasi.value + " " + myForm.bil2.value + " = " + myForm.hasil.value);
}
}
Untuk file HTML simpan dengan nama calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>KalkulatorMINI ™ - Studi Kasus Modul 5 - ajungpangi</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
<style type="text/css">
<!--
.huruf_header{
font-family: cambria;
font-size: 24px;
text-align: center;
color: blue;
float:center;
}
-->
</style>
<link rel="icon" type="image/x-icon" href="ajungpangi.jpg">
</head>
<body bgcolor="aqua">
<center>
<table bgcolor="white" border=0 align="justify" cellspacing=0 cellpadding=5>
<tr>
<td width="1600"><div class="huruf_header">KalkulatorMINI ™</div></td>
</tr>
</table>
<br/>
<form name=form_kalkulator action="#">
<table border ="0">
<tr>
<td><input type="text" name="bil1" value="[Masukkan bilangan 1]"/></td>
<td><select name="operasi" >
<option>[Pilih Operator]</option>
<option value="+">+ (ADD BY)</option>
<option value="-">- (SUBSTRACT)</option>
<option value="*">* (MULTIPLIED)</option>
<option value="/">/ (DIVIDE BY)</option>
</select></td>
<td><input type="text" name="bil2" value="[Masukkan bilangan 2]"/></td>
<td><input type="button" value="Proses Sekarang!" onclick="proses()" /></td>
<td><input type="text" name="hasil"/></td>
<td><input type="button" value="Hapus" onclick="reset()" /></td>
<td><input type="button" value="Cetak" onclick="cetak()" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
<html lang="en">
<head>
<title>KalkulatorMINI ™ - Studi Kasus Modul 5 - ajungpangi</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
<style type="text/css">
<!--
.huruf_header{
font-family: cambria;
font-size: 24px;
text-align: center;
color: blue;
float:center;
}
-->
</style>
<link rel="icon" type="image/x-icon" href="ajungpangi.jpg">
</head>
<body bgcolor="aqua">
<center>
<table bgcolor="white" border=0 align="justify" cellspacing=0 cellpadding=5>
<tr>
<td width="1600"><div class="huruf_header">KalkulatorMINI ™</div></td>
</tr>
</table>
<br/>
<form name=form_kalkulator action="#">
<table border ="0">
<tr>
<td><input type="text" name="bil1" value="[Masukkan bilangan 1]"/></td>
<td><select name="operasi" >
<option>[Pilih Operator]</option>
<option value="+">+ (ADD BY)</option>
<option value="-">- (SUBSTRACT)</option>
<option value="*">* (MULTIPLIED)</option>
<option value="/">/ (DIVIDE BY)</option>
</select></td>
<td><input type="text" name="bil2" value="[Masukkan bilangan 2]"/></td>
<td><input type="button" value="Proses Sekarang!" onclick="proses()" /></td>
<td><input type="text" name="hasil"/></td>
<td><input type="button" value="Hapus" onclick="reset()" /></td>
<td><input type="button" value="Cetak" onclick="cetak()" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Untuk Screenshoot awal
Untuk Screenshoot saat kita masukkan bilangan dan klik "PROSES SEKARANG"
ScreenShoot saat kita klik "CETAK"
ScreenShoot saat kita klik "HAPUS"
ScreenShoot saat kita klik "PROSES SEKARANG" tetapi belum kita inputkan bilangan
Harap komentar yaa, kritik sehat sangat ditunggu =)
Tidak ada komentar:
Posting Komentar
Jangan lupa memberi komentar pada setiap postingan saya!