Blue Fire Pointer Kejadian (Event) dalam Javascript - MARI BELAJAR Kejadian (Event) dalam Javascript
Selamat datang di Website Mari Belajar dan dapatkan informasi-informasi mengenai dunia pembelajaran
animasi bergerak gif

Kejadian (Event) dalam Javascript



A. Kejadian (Event)

Even adalah sesuatu yang terjadi pada halaman HTML. Berikut ini terdapat beberapa bentuk kejadian yaitu jika pengguna memuat dokumen, pengguna memasukkan data, pengguna mengklik tombol dan sebagainya. Hal-hal tersebut diatur oleh even.
Semua kejadian pada Javascript dapat anda tangani dengan menentukan kejadiannya. Biasanya kejadian(even) adalah sebuah fungsi, tetapi pada beberapa kasus, kita dapat menuliskan pernyataan-pernyataannya secara langsung.

Berikut ini adalah daftar kejadian(even) pada JavaScript :

Kejadian
Keterangan
onClick
Kejadian yang dibangkitkan bila pengguna mengklik sebuah elemen form atau link.
onChange
Dibangkitkan bila informasi masukan pada sebuah elemen form (text, textarea, select) diubah oleh pengguna.
onBlur
Dibangkitkan ketika suatu elemen kehilangan focus masukan, yaitu ketika pengguna menekan tombol <tab> atau mengklik elemen lain form lainnya.
onFocus
Dibangkitkan bila sebuah elemen form menerima focus masukan; yaitu bila pengguna mengklik elemen form tersebut atau menekan tombol <tab> sehingga focus masukan berpindah ke elemen ini.
onAbort
Dibangkitkan bila pengguna menghentikan pemuatan citra (tag<img>) yaitu bila pengguna menekan tombol stop atau mengklik link.
onError
Dibangkitkan bila terjadi kesalahan saat browser memuat dokumen atau citra.
onLoad
Dibangkitkan bila browser selesai memuat document
onUnload
Dibangkitkan bila pengguna keluar dari dokumen
onMouseOver
Dibangkitkan bila kursor mouse berada di atas sebuah link.
onMouseOut
Dibangkitkan bila kursor mouse keluar dari daerah link atau peta citra.
onReset
Dibangkitkan bila pengguna menekan tombol reset
onSelect
Kejadian yang dibangkitkan bila pengguna memilih sebagian atau seluruh teks pada elemen form yang berupa kotak teks.
onSubmit
Dibangkitkan ketika pengguna menekan tombol submit.


B.  Penanganan Kejadian (Event)

Berikut ini akan diberikan beberapa contoh program-program yang menggunakan kejadian-kejadian dalam aplikasinya.

Contoh program yang menggunakan even OnClick :

Contoh Program JavaScript
 
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function warna(pilihan)
{
alert("Anda Memilih Warna " + pilihan);
document.bgColor=pilihan;
}
</SCRIPT>
<h1 align="center">Latihan Event OnClick</h1> 
<hr width="500" color="black" noshade>
<h3 align="center">Pilih warna favorit anda.</h3>
<CENTER>
<FORM>
<INPUT TYPE="button" VALUE="Biru" onClick="warna('lightblue')">
<INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')">
<INPUT TYPE="button" VALUE="Coklat" onClick="warna('burlywood')">
<INPUT TYPE="button" VALUE="Kelabu" onClick="warna('darkgray')">
<INPUT TYPE="button" VALUE="Oranye" onClick="warna('peachpuff')">
<INPUT TYPE="button" VALUE="Putih" onClick="warna('white')">
</FORM>
<FORM>
    <IMG NAME="coolfan" SRC="fanoff.gif" width=61 height=72><BR><BR>
    <INPUT TYPE=BUTTON VALUE=" Off " onClick="coolfan.src = 'fanoff.gif'">
    <INPUT TYPE=BUTTON VALUE=" On "  onClick="coolfan.src = 'fanon.gif'">
</FORM>
</CENTER>
<hr width="500" color="black" noshade> 
</BODY>
</HTML>















Contoh program yang menggunakan even OnBlur dan onFocus :





 


  

Contoh
  Program JavaScript


 



  
<HTML>


<BODY>


<SCRIPT LANGUAGE="JavaScript">


function masukannim()


{


if (document.f.inim.value=="")


  {


   alert("anda belum memasukkan nim");


  }


}


function masukannama()


{     


if (document.f.inama.value=="")


  {


   alert("anda belum memasukkan nama");


  }


}


function masukanalamat()


{   


if (document.f.ialamat.value=="")


  {


   alert("anda belum memasukkan alamat");


  } 


}  


function terimakasih()


{


if ((document.f.inim.value!="")&&(document.f.inama.value!="")&&


(document.f.ialamat.value!=""))


 {


  alert("Terima Kasih Telah mengisi Data");


 }


 else


  alert("Mohon Data Dilengkapi");


}   


</SCRIPT>


<h1 align="center">Latihan Event OnFocus dan OnBlur</h1> 


<hr width="600" color="black" noshade size="10">


<font face="arial">


<h3 align="center">R E G I S T R A S I</h3>


<hr width="600" color="black" noshade size="2">


<CENTER>


<form name="f" method="get">


<TABLE>


   <tr>


      <td width="31%">NIM</td>


      <td width="7%">:</td>


      <td width="62%"><input type="text" name="inim" size="9" 


      onFocus="window.status='Silahkan Mengisi NIM Anda';"


      onBlur="masukannim()"></td>


    </tr>


    <tr>


      <td width="31%">NAMA</td>


      <td width="7%">:</td>


      <td width="62%"><input type="text" name="inama" size="23"


      onFocus="window.status='Silahkan Mengisi Nama Anda';"


      onBlur="masukannama()"></td>


    </tr>


    <tr>


      <td width="31%">ALAMAT</td>


      <td width="7%">:</td>


      <td width="62%"><input type="text" name="ialamat" size="34"


      onFocus="window.status='Silahkan Mengisi Alamat Anda';"


      onBlur="masukanalamat()"></td>


    </tr>


</table>


<hr width="600" color="black" noshade size="2">


<p><input type="BUTTON" value="Kirim" Onclick="terimakasih()">


   <input type="reset" value="Reset"></p>


</form>


</center>


</BODY>


</HTML>


 













Contoh program
yang menggunakan even onLoad dan onUnload



 


  

Contoh
  Program JavaScript


 



  
<HTML>


<BODY Onload="tanggal()" OnUnload="tutup()">


<SCRIPT LANGUAGE="JavaScript">


<!-- Hide from browsers that do not understand Javascript 


function tanggal()


{


 var d = new Date(); 


 var y = d.getFullYear(); 


 var m = d.getMonth() + 1; 


 var d = d.getDate(); 


 var t = d + '/' + m + '/' + y + ' '; 


 defaultStatus = "Anda datang pada tanggal " + t + ".";


 alert("Selamat Datang Teman \n Silahkan Masuk Ke Websiteku");


}


function timer()


{


var d = new Date();  


var jam = d.getHours();


var menit = d.getMinutes();


var detik = d.getSeconds();


var strwaktu = (jam<10)?"0"+jam:jam;


strwaktu +=(menit<10)?"0"+menit:" : "+menit;


strwaktu +=(detik<10)?"0"+detik:" : "+detik;


document.f.txtwaktu.value="         "+strwaktu;


setTimeout("timer()",200);


}


function tutup()


{


window.alert("Terimakasih Telah Berkunjung\nJangan lupa Datang kembali Ya..");


} 


// end hiding --> 


</SCRIPT>


<h1 align="center">Latihan Event OnLoad dan OnUnLoad</h1> 


<hr width="600" color="black" noshade size="10">


<font face="arial">


<h3 align="center">SELAMAT DATANG</h3>


<CENTER>


<form name="f">


<h4 align="center">Sekarang Menunjukkan Jam</h4>


<input type="Text" size="16" name="txtwaktu">


<hr width="600" color="black" noshade size="2">


</form>


<SCRIPT LANGUAGE="JavaScript">timer()</SCRIPT>


</center>


</BODY>


</HTML>


 





































Contoh program yang menggunakan even
onMouseOut dan onMouseOver



 


  

Contoh
  Program JavaScript


 



  
<HTML>


<BODY>


<SCRIPT LANGUAGE="JavaScript">


 


function g1() 


{ 


document.f.imgfan.src="fanon.gif" 


}


function g2()


{ 


document.f.imgfan.src="fanoff.gif" 


}


</SCRIPT>


</SCRIPT>


<h1 align="center">Latihan Event OnMouseOver dan OnMouseOut</h1> 


<hr width="600" color="black" noshade size="10">


<font face="arial">


<h3 align="center">SELAMAT DATANG</h3>


<CENTER>


<form name="f">


<Img Name="logo" src="logo1.gif" onmouseover="document.logo.src='logo2.gif';


window.status='Motto Jawa Barat'"


 onmouseout="document.logo.src='logo1.gif';window.status='Gemah Ripah Repeh Rapih'">


<h4 align="center">Kalo Kepanasan Tunjuk Kipas Angin Saja</h4>


<A HREF="latevenonclick.html" onMouseOver="g1()" onMouseOut="g2()">


<IMAGE NAME="imgfan" SRC="fanoff.gif" WIDTH=61 HEIGHT=72 BORDER=0>


</A>


<p>


Contoh Link Dengan Even


</p>


<A HREF="http://www.google.com" onMouseOver="document.bgColor='#ffcc00';


   onMouseOver=window.status='Ke Website Google.Com'; return true">Google.Com</A><BR> 


<A HREF="http://if.unikom.ac.id" onMouseOver="window.status='Oh, jangan deket-deket..';


 return true" onMouseOut="alert('Nah gitu dong'); return true">Teknik Informatika UNIKOM 


</A>   


<hr width="600" color="black" noshade size="2">


</form>


</center>


</BODY>


</HTML>














 






 
















By








































Tidak ada komentar:















Posting Komentar


















        

      









Langganan:
Posting Komentar (Atom)







Arsip

































Back To Top