Kejadian (Event) - 2 - MARI BELAJAR

A. Event On Submit

Event on submit akan dibangkitkan apabila seorang user menekan tombol submit. Dengan event ini data yang diinputkan akan dikirimkan ke tempat lain (email, file teks atau ke dalam suatu tabel).

Contoh Program JavaScript

<Html>

<Body>

<SCRIPT LANGUAGE="JavaScript">

function cari()

var kata = document.formcari.keyword.value;

var hasil = "http://www.google.com/search?q=" + kata ;

window.open(hasil, 'google', config='height=500,width=750 scrollbars=yes location=yes')

</SCRIPT>

<FORM NAME="formcari" onSubmit="cari()">

<center>

<table>

<tr>

    <td colspan="4" bgcolor="orange"><h1 align="center">S e a r c h - E n g i n e</h1>

<hr color="black" size="4" ></td>

  </tr>

 <tr>

   <td><b>Cari pakai</b></td>

   <td><img src="logoogle.gif"></td>

   <td><INPUT NAME="keyword" SIZE="40" TYPE="text"></td>

   <td><INPUT TYPE="submit" VALUE="Cari .. !!"><input type="reset" Value="Ulang"></td>

 </tr>

<tr>

    <td colspan="4" bgcolor="orange"><hr color="black" size="4" ></td>

  </tr>

</table>

</center>

</FORM>

</body>

</html>

Berikut diberikan contoh event submit yang terjadi pada form pengisian data guestbook yang hasilnya akan dikirim ke suatu email.

Contoh Program JavaScript

<Html>

<Body>

<SCRIPT LANGUAGE="JavaScript">

function isiform(form)

 isinama(form);

 isiemail(form);

 isikomentar(form);

 kosongkan(form);

function kosongkan(form)

 if((isinama(form) && isiemail(form) && isikomentar(form)))

    form.submit;

 if((isinama(form)== false || isiemail(form)== false || isikomentar(form)== false))

   salahisi(form);

function salahisi(form)

 var teks ="Ada Kesalahan Isian :";

 if (isinama(form)== false)

 {teks +="\nNama Anda";}

 if (isiemail(form)==false)

 {teks +="\nEmail Anda";}

 if (isikomentar(form)==false)

 {teks +="\nKomentar Anda";}

 alert(teks);

function isinama(form)

 if (form.nama.value=="")

 {return false;}

 else

 {return true;}

function isiemail(form)

 if((form.email.value=="" || form.email.value.indexOf('@',0)==-1) ||

 form.email.value.indexOf('.')==-1)

 {return false;}

 else

 {return true;}

function isikomentar(form)

if(form.cs.value=="")

 {return false;}

else

 {return true;}

</script>

<form name="f" method="post" action="mailto:irawan@unikom.ac.id?subject=Form">

<font face="Arial">

<table align="center">

 <tr bgcolor="gray">

    <td colspan="2" align="center"><h1>G u e s t B o o k</h1></td>

 </tr>

  <tr bgcolor="peachpuff">

    <td>Nama Anda :</td>

    <td><input type="text" value="" name="nama" size="30"</td>

 </tr>

 <tr bgcolor="peachpuff">

    <td>Email Anda :</td>

    <td><input type="text" value="" name="email" size="30"</td>

 </tr>

 <tr bgcolor="peachpuff">

    <td>Komentar Anda :</td>

    <td><textarea name="cs" rows="5" cols="50"></textarea></td>

 </tr>

<tr bgcolor="orange">

    <td colspan="2" align="center">

    <input type="button" name="thesubmit" value="kirim" onClick="isiform(this.form)">

    <input type="reset" value="hapus">

    </td>

 </tr>

 <tr bgcolor="gray">

    <td colspan="2" align="center"><b>Terima Kasih Telah Mengisi Guest Book</b> </td>

 </tr>

 </table>

 </font>

 </form>

</body>

</html>




9.2 Manipulasi Gambar



Untuk memuat suatu image, pada Javascript terdapat objek Image. Untuk
membuat objek tersebut pendeklarasiannya adalah sebagai berikut :



img1
= new Image ()



img1.src
= "pic1.gif"



artinya membuat objek image dengan isinya adalah image pic1.gif



berikut akan diberikan contoh mengenai objek image :



 

  
Contoh
  Program JavaScript

 

  <HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript"> 
var num=1
img1 = new Image ()
img1.src = "pic1.gif"
img2 = new Image ()
img2.src = "pic2.gif"
img3 = new Image ()
img3.src = "pic3.gif" 
img4 = new Image ()
img4.src = "pic4.gif"
img5 = new Image ()
img5.src = "pic5.gif"
img6 = new Image ()
img6.src = "pic6.gif" 
function slideshow(x)
{
num=num+x
if (num==7)
{num=1}
if (num==0)
{num=6}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT> 
<CENTER>
<IMG SRC="pic1.gif" NAME="mypic" BORDER=0 height="200" width="150"><p>
<A HREF="JavaScript:slideshow(-1)">Previous</A>
<A HREF="JavaScript:slideshow(1)">Next</A>
</CENTER> 
</BODY>
</HTML>

Contoh Program JavaScript

<html>

<head>

<script language="javascript">

<!--

var image1=new Image()

image1.src="1.gif"

var image2=new Image()

image2.src="2.gif"

var image3=new Image()

image3.src="3.gif"

//-->

</script>

</head>

<body>

<center>

<h2>Penggunaan Objek Image Untuk Membuat SlideShow</H2><hr size=5 color="black">

<img src="1.gif" name="slide" width="100" height="100">

<script>

<!--

//variable yang akan menaikan hitungan gambar

var step=1

function slideit(){

//jika browser tidak mendukung metode dokumen.image maka keluar.

if (!document.images)

return

document.images.slide.src=eval("image"+step+".src")

if (step<3)

step++

else

step=1

//memanggil function "slideit()" setiap 1 detik

setTimeout("slideit()",1000)

slideit()

//-->

</script>

<hr size=5 color="black">

</body>

</html>

Kejadian (Event) - 2

Tidak ada komentar:

Posting Komentar

Arsip