Mengenal Event

Mengenal Event
Event merupakan suatu kondisi ketika prosedur pemrograman dieksekusi dengan

tujuan untuk memproses Input ataupun Output dari suatu baris perintah
pemrograman.
Perintah pemrograman yang bertugas untuk menangani Event di sebut Event

Handler. Event Handler pada JavaScript sangat membantu anda dalam membuat
halaman Web dinamis.
Berikut ini adalah contoh beberapa Event Handler yang umum di pakai dalam
JavaScript. Perhatikan Tabel 2.1.
Tabel 2.1 Event Handler
Event Handler Objek Fungsi

onAbort Gambar Menjalankan kode JavaScript jika terjadi
pembatalan proses
onBlur Button, CheckBox, Frame, Menjalakan kode JavaScript jika posisi
Password, RadioButton, kursor berpindah dari suatu objek (Lost
Reset, Submit, Select List, Focus)
TextArea, TextField, Window
onFocus Frame, Button, Submit, Menjalankan kode JavaScript jika posisi
Reset, RadioButton, kursor berada pada suatu objek.
CheckBox, Select List,
Password, TextField,
TextArea, Window
onChange Select List, TextArea, Menjalankan kode JavaScript jika nilai
TextField teks pada suatu objek berubah
onSelect TextField, TextArea Menjalankan kode JavaScript ketika
teks di dalam area objek diseleksi
onClick Button, CheckBox, Menjalankan kode JavaScript jika suatu
RadioButton, Submit, Reset, objek di klik
Link.
onError Gambar, Window Menjalankan kode JavaScript jika terjadi
error pada prosedur tertentu
onLoad Gambar, Window Menjalankan kode JavaScript pada saat
gambar atau halaman Web akan di
tampilkan
OnMouseOut Link Menjalankan kode JavaScript pada saat
kursor mouse meninggalkan area objek
onMouseOver Link Menjalankan kode JavaScript pada saat
kursor mouse berada di atas objek
onReset Form Menjalankan kode JavaScript ketika
fungsi reset dijalankan
onSubmit Form Menjalankan kode JavaScript ketika
proses Submit dijalankan
onUnload window Mejalankan kode JavaScript pada saat
halaman Web akan di tutup
Tipe Data JavaScript
Tipe Data bisa dikatakan sebagai kelompok ukuran memori yang akan kita
gunakan untuk menyimpan nilai dari suatu variabel dalam pemrograman.
Beberapa Tipe Data yang umum dipakai dalam pemrograman JavaScript dapat
anda lihat pada Tabel 2.2.
Tabel 2.2 Tipe Data JavaScrip
Tipe Data Nilai

Integer -32768 s/d 32767
Float -3.4E38 (-3.4 x 1038) s/d +3.4E38 (+3.4 x 1038)
Boolean True dan False
String Unicode 0 (A Z, 0 9)
Null Null (Kosong)
Deklarasi Variabel
Variabel bisa dikatakan sebagai pemberian nama secara simbolis terhadap tipe
data tertentu. Variabel dalam JavaScript dapat berupa angka, huruf, dan kata.
Penggunaan spasi tidak di perbolehkan dalam deklarasi variabel. Deklarasi
variabel pada JavaScript Menggunaan perintah Var. Berikut ini adalah contoh
deklarasi variabel pada JavaScript.
<Script Language = JavaScript>

<!
Var Nilai_A=Poliban;
Document.write(Nilai_A);
//-->
</Script>
Penggunaan angka sebagai nama variabel harus menambahkan karakter $

diawal variabel agar tidak dianggap sebagai nilai angka oleh JavaScript. Anda
juga bisa menggunakan kombinasi angka dan huruf. Perhatikan contoh di bawah
ini.
<Script Language=JavaScript>

</Script>
Contoh deklarasi variabel yang salah adalah sebagai berikut :
<Script Language=JavaScript>

</script>
</head>
<body onLoad=hasil()>
</body>
</html>
Berdasarkan contoh diatas, Function dieksekusi pada tag <body></body> ketika

halaman Web di tampilkan (onLoad).
Praktikum 2
Berikut ini anda akan mencoba membuat halaman web sederhana yang mengeksekusi
Function dengan EventHandler. Berikut ini adalah listing nya :
<html>
<head>
<title>Function</title>
function tampil() {
document.write("<font face='verdana' size='4'><b>"+document.form1.txt.value+"</b></font><br><br>");
document.write("<table width='320' height='100' border='1' id='tabel1'><tr><th align='left'>
"+document.form1.txt1.value+"</th></tr></table>");
}
</script>
<style type="text/css">
<!- -
.style2 {color: #FFFFFF}
.style3 {
color: #003366;
font-style: italic;
font-size: 36px;
}
.style7 { font-size: 18px; font-weight: bold;}
.style11 { font-weight: bold; font-size: 24px;}
.style14 {
font-size: 16px;
font-style: italic;
}
- ->
</style>
</head>
<body>
<div align="left">
<p align="right" class="style11"> Forum <span class="style3">Maxikom</span></p>
</div>
<hr align="left" width="100%" size="10" noshade="noshade"/>
<form id="form1" name="form1" method="post" action="">
<table width="382" border="4" bordercolor="#999999" bgcolor="003366" id="tabel">
<tr>
<td height="204" bordercolor="#FFFFFF"><span class="style2">
<label><span class="style7">New Post</span><br/><br/>Topic :<input name="txt" type="text" size="50" /></label></span>
<p><textarea name="txt1" cols="50" rows="5"></textarea></p></td></tr></table>
<p> <input name="tombol" type="button" onclick="tampil()" value="Preview"/>
</p>
</form>
</body>
</html>
Latihan
Dalam latihan berikut Anda akan membuat Form absensi karyawan sederhana
dengan mengunakan Function dan EventHandler. Berikut ini adalah listing nya :
<html>
<head>
<title>Praktikum3</title>
<!- -
function tampil() {
var waktu= new Date();
var j = waktu.getHours();
var m = waktu.getMinutes();
var d = waktu.getSeconds();
var tanggal = waktu.getDate();
var bulan = waktu.getMonth()+1;
var tahun = waktu.getFullYear();
var totaltanggal=tanggal + "-" + bulan + "-" + tahun;
var totaljam="Jam Masuk = "+j + ":" + m + ":" +d;
nip="NIP : "+document.form1.txtnip.value;
nama="Nama : "+document.form1.txtnama.value;
jabatan="Jabatan : "+document.form1.txtjabatan.value;
document.form1.hasil.value="Absensi Tanggal "+totaltanggal+"\n\n "+nip+"\n"+nama+" \n"+jabatan+"
\n"+totaljam;
}
// - ->
</script>
<style type="text/css">
<!--
.style1 {
font-size: 24px;
font-weight: bold;
}
- ->
</style>
</head>
<body>
<p class="style1">ABSENSI KARYAWAN PT. GOKIL</p>
<p align="right" class="style1">
<!- - #BeginDate format:Am3 - ->05/24/2009<!- - #EndDate - -> </p>
<form id="form1" name="form1" method="post" action="">
<label>NIP : <input type="text" name="txtnip"/></label>
<p><label>Nama : <input type="text" name="txtnama"/></label></p>
<p><label>Jabatan : <input type="text" name="txtjabatan"/></label></p>
<p><label><input name="tombol1" type="button" id="tombol1" value="Proses" onclick="tampil()"/></label>
<label><input name="tombol2" type="reset" id="tombol2" value="Reset"/></label></p>
<p><label></label><textarea name="hasil" cols="50" rows="5"></textarea></p>
</form>
</body>
</html>

Mengenal Event

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Mengenal Event

Diunggah oleh

Hak Cipta:

Format Tersedia

Mengenal Event

Event merupakan suatu kondisi ketika prosedur pemrograman dieksekusi dengan

Perintah pemrograman yang bertugas untuk menangani Event di sebut Event

Tabel 2.1 Event Handler

Event Handler Objek Fungsi

Tabel 2.2 Tipe Data JavaScrip

Tipe Data Nilai

<Script Language = JavaScript>

Penggunaan angka sebagai nama variabel harus menambahkan karakter $

Anda tidak bisa menjalankan Function tanpa mengeksekusi nama Function

Berdasarkan contoh diatas, Function dieksekusi pada tag <body></body> ketika

Anda mungkin juga menyukai