Pada sesi kali ini kita akan membahas tentang membuat aplikasi sederhaha mengunankan java script. Aplikasi yang akan kita buat adalah ’Perhitungan Sederhan Dengan Java Script’.
Fitur yang akan kita bahas adalah sebagai berikut.
a. Memvalidasi inputan dari form.
b. Ketika sebuah inputan pada posisi kosong maka pada inputan tersebut akan disorot oleh sebuah penujuk. Untuk kali ini penunjuk berupa warna yang berubah dan posisi kursor akan pada posisi inputan tersebut.
c. Data yang sudah melewati validasi akan dihitung dengan Aritmatika yang digunakan adalah +,-,/,X.
d. Pada script java yang akan kita gunakan mengunakan dua jenis yaitu script Internal dan External (harus di Embed).
Okeh langsung saja kita bikin aplikasi ini..
Untuk langkah ini kita akan membuat script java yang ada didalam script html atau script java internal. Langsung saja ikuti langkah-langkah dibawah ini:
a. Buatlah sebuah scrip html/htm/xhtml , terserah anda mau mengunakan ekstensi yang mana yang penting disana menddukung bahasa html.
b. Silahkan siapkan script seperti berikut.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function validasi(){
///// jika Bilang 1 Kosong
if(document.getElementById('x').value == ''){ //// Cek elemen bilangan 1
alert('Bilangan 1 Kosong');
document.getElementById('x').focus(); /// Lokasi yang akan disorot
document.getElementById('x').style.background="#FE9"; /// memberikan warna pada baground
document.getElementById('x').style.color="#000"; // Memberikan warna pada background
return false;
}
///// Jika Bilangan 2 Ksong
if(document.getElementById('y').value == ''){
alert('Bilangan 2 kosong');
document.getElementById('y').focus();
document.getElementById('y').style.background="#FE9";
document.getElementById('y').style.color="#000";
return false;
}
hitung(); // Panggil fungsi hitung
return true; //// kembalikan lagi nilai harus true
}
//// Fungsi hitung
function hitung(){
var x=eval(document.getElementById('x').value); //// Bikin varibel bilangan 1
var y=eval(document.getElementById('y').value); //// bikin variabel Bilangan 1
var pil= document.form1.opt.value; //// Bikin Varibel bil pilihan
//// Hitung
if (pil == "tambah") { /// Jika posisi tambah
var z = x + y;
}
else if (pil == "kurang") { //// Jika posisi kurang
var z = x - y;
}
else if (pil == "kali") { /// Jika psosis kali
var z = x * y;
}
else if (pil == "bagi") { /// Jika Posisi bagi
var z = x / y;
}
document.getElementById('hasil').innerHTML =z; //// Tampilkan pada tabel
}
function resetForm(){
document.form1.reset(); //// Mengksongkan form
}
//// Ubah warana ketika sedang mengisi
function ubahwarna(idelement){
document.getElementById(idelement).style.background="#55FF00";
}
//-->
</script>
<body>
<h2> Perhitungan Sederhana dengan Java Script</h2>
<form name="form1" action="#">
Bil 1 : <input type="text" name="x" id="x" onfocus="ubahwarna('x')"/><br>
Bil 2 : <input type="text" name="y" id="y" onfocus="ubahwarna('y')"/> <br>
Operasi :
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select><br><br>
<input type="button" value="Sama Dengan" onClick="validasi()" /> <br>
<input type="button" value="Reset" onClick="resetForm()" /> <br>
<h3>Hasilnya adalah : <label id="hasil"></label> </h3><br/>
</form>
</body>
</html>
c. Bila sudah silahkan anda compile. Kurang lebih sebagai berikut tampilannya.
Untuk langhkah kedua ini kita mencoba membut embed java di dialam bahasa HTML.
a. Sebelumnya akan saya jelaskan sedikit apa yang dimaksud pada langkah ini. Pada tahap ini tujuan kita hanya memisahkan Script Java dengan html saja. File java yang sudah kita buat akan kita panggil didalam file Html.
b. Silahkan anda buat sebuah file dengan nama contoh_external.html atau menurut selera anda.
c. Silahkan anda buat sebuah file berkstensi (.js).
d. Silahkan isikan script ini didalam file yang anda buat pada langkah c.
/// Fungsi validasi
function validasi(){
///// jika Bilang 1 Kosong
if(document.getElementById('x').value == ''){ //// Cek elemen bilangan 1
alert('Bilangan 1 Kosong');
document.getElementById('x').focus(); /// Lokasi yang akan disorot
document.getElementById('x').style.background="#FE9"; /// memberikan warna pada baground
document.getElementById('x').style.color="#000"; // Memberikan warna pada background
return false;
}
///// Jika Bilangan 2 Ksong
if(document.getElementById('y').value == ''){
alert('Bilangan 2 kosong');
document.getElementById('y').focus();
document.getElementById('y').style.background="#FE9";
document.getElementById('y').style.color="#000";
return false;
hitung(); // Panggil fungsi hitung
return true; //// kembalikan lagi nilai harus true
}
//// Fungsi hitung
function hitung(){
var x=eval(document.getElementById('x').value); //// Bikin varibel bilangan 1
var y=eval(document.getElementById('y').value); //// bikin variabel Bilangan 1
var pil= document.form1.opt.value; //// Bikin Varibel bil pilihan
//// Hitung
if (pil == "tambah") { /// Jika posisi tambah
var z = x + y;
}
else if (pil == "kurang") { //// Jika posisi kurang
var z = x - y;
}
else if (pil == "kali") { /// Jika psosis kali
var z = x * y;
}
else if (pil == "bagi") { /// Jika Posisi bagi
var z = x / y;
}
document.getElementById('hasil').innerHTML =z; //// Tampilkan pada tabel
}
E. Siilahkan tulis script ini pada file yang anda buat pada langkah b.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<script language="javascript" src="perhitungan.js"></script>
</head>
<body>
<h2> Perhitungan Sederhana dengan Java Script</h2>
<form name="form1" action="#">
Bil 1 : <input type="text" name="x" id="x" onfocus="ubahwarna('x')"/><br>
Bil 2 : <input type="text" name="y" id="y" onfocus="ubahwarna('y')"/> <br>
Operasi :
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select><br><br>
<input type="button" value="Sama Dengan" onClick="validasi()" /> <br>
<input type="button" value="Reset" onClick="resetForm()" /> <br>
<h3>Hasilnya adalah : <label id="hasil"></label> </h3><br/>
</form>
</body>
</html>
f. Perbedaan pada langkah kesatu dan kedua adalah terletak pada script berikut.
<script language="javascript" src="perhitungan.js"></script>
Format :
<script language="javascript" src="nama_file.js"></script>
Perintah diatas berfungsi untuk memanggil scrip java script yang ada diluar file html itu sendiri.
0 komentar:
Posting Komentar