JavaScript Popup Boxes

Selasa, 25 September 2012


 Di dalam bahasa JavaScript kita dapat membuat kotak pesan popup. Kotak pesan dalam javascript mempunyai 3 type yaitu:
1.       Alert box
2.       Alert box with line breaks
3.       Confirm box
4.       Prompt box

 

Alert Box

Alert box di gunakan untuk memberikan informasi pesan kepada user dan bila user yakin dengan pilihannya. Alert box ini mempunyai satu tombol “OK” untuk melanjutkan proses.


Syntax:
alert("sometext")
Contoh:
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
  <input type="button" onclick="disp_alert()" value="Display alert box" />
</body>
</html>

 

 

Alert Box and line breaks

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!")
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="Display alert box" />

</body>
</html>

Confirm Box

 Confirm box biasanya di gunakan jika kita ingin memberikan penyataan kepada user untuk memberikan pilihan jawaban apakah akan terus di lanjutkan atau di batalkan. Kotak confirm box memberikan dua tombol pilihan kepada user berupa tombol “OK” dan tombol “Cancel”. Jika pilihan tombol “OK” maka  halaman web akan diproses jika pilihan tombol “Cancel” maka halaman tidak akan diproses.
Syntax:
confirm("sometext")

Contoh:
<html>
<head>
<script type="text/javascript">
function disp_confirm()
  {
  var r=confirm("Press a button")
  if (r==true)
    {
    document.write("You pressed OK!")
    }
  else
    {
    document.write("You pressed Cancel!")
    }
  }
</script>
</head>
<body>

<input type="button" onclick="disp_confirm()" value="Display a confirm box" />

</body>
</html>

Prompt Box

 Prompt box biasanya di gunakan untuk memberikan pesan kepada user agar user memberikan inputan sebelum halaman web itu diproses. Ketika prompt box muncul, dan user diminta untuk mengklik tombol awal yang kemudian akan muncul box yang harus di input oleh user sesuai dengan pertanyaan yang di ajukan.
 Setelah di input kemudian user mengklik tombol "OK" atau "Cancel". Untuk melanjutkan proses pilih tombol “OK” dan browser akan menampilkan hasil. Jika tombol “Cancel” kotak box akan kembali  kosong untuk mengulang.

Syntax:
prompt("sometext","defaultvalue")
Contoh:
<html>
<head>
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("Please enter your name","Harry Potter")
  if (name!=null && name!="")
    {
    document.write("Hello " + name + "! How are you today?")
    }
  }
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="Display a prompt box" />
</body>
</html>

Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. NICE BLOG - All Rights Reserved
Template Created by Creating Website Inspired by Sportapolis Shape5.com
Proudly powered by Blogger