JavaScript Popup Box ( Bagian Dasar )

Popup box atau yang biasa disebut otak pemberitahuan maupun kotak peringatan.
Dan di dalam Javascript sendiri terdapat 3 jenis popup antara lain adalah alert popup, confirm popup dan prompt popup.

1. Alert Box ( pemberitahuan / peringatan )
Alert Box biasanya digunakan untuk memberitahukan pengguna web sebuah informasi pada web tersebut. Dan biasanya user harus meng-klik tombol ( OK ) pada popup tersebut.
Sintaks :
alert("sometext messages")

Contoh :
<html>
<head>
<script type="text/javascript">
function peringatan(){
    alert("Selamat Datang");
}
</script>
</head>
<body>
<input type="button" onClick="peringatan()" value="Lihat Alert" />
</body>
</html>

2. Confirm Box
Confirm box biasa digunakan jika anda ingin user mem-verivikasi atau menerima sesuatu untuk melanjutkan.
Jika user meng-klik ( OK ) kotak akan mengembalikan nilai ( true ), dan jika ( CANCEL ) akan bernilai false.

Sintaks :
confirm("some text messages");

<html>
<head>
<script type="text/javascript">
function Confirm(){
    var r=confirm("Apa anda sudah yakin?");
    if ( r==true ){
        alert("Anda Yakin");
    }
    else{
        alert("Anda Belum Yakin");
    }
}
</script>
</head>
<body>
<input type="button" onClick="Confirm()" value="Lihat Konfirmasi" />
</body>
</html>

3. Prompt Box
sebuah kotak prompt biasa digunakan user untuk memasukan sebuah value sebelum memasuki halaman.
Jika pengguna klik ( OK ) maka kotak mengembalikan value yang di masukan. Dan jika pengguna klik ( CANCEL ) kota kan bernilai ( null ).

Sintaks :
prompt("sometext","defaultvalue");

<html>
<head>
<script type="text/javascript">
function Prompt(){
    var nama=prompt("Siapa nama anda???","Masukan nama");
    if(nama!=null && nama!=""){
        document.write("Selamat Datang "+ nama );
    }
}
</script>
</head>
<body>
<input type="button" onClick="Prompt()" value="Lihat Prompt" />
</body>
</html>

Sedikit tulisan ini semoga bermanfaat untuk anda.
Thank's ^_^

Tidak ada komentar :

Posting Komentar

tombol share icon
tombol kembali ke atas
Wait . . . !!!
tampilan ads aktif