Cara Membuat Alert, Confirm Dan Prompt Dengan Javascript

Tanggal : 11 Aug 2018, Category : JavaScript, Create By : admin

Selamat datang kembali di website gudang ilmu aplikasi, kali ini kami akan membahas tentang membuat alert, confirm dan prompt dengan javasript, fungsi dari ketiga fungsi diatas semuanya adalah untuk membuat pesan atau bisanya di sebut Message Box.

Membuat Alert JavaScript

Dari ketika fungsi di atas alert adalah fungsi dari javascript yang sederhana, hanya menampilkan apa yang anda tulis di dalam funsgi alert, bisanya di gunakan untuk mengisformasikan kepada pengguna.

<!DOCTYPE html>
 <html>
 <head>
   <title>Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript</title>
 </head>
 <body>
   <script>
     alert('Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript');
   </script>
 </body>
 </html>

Pada script diatas menggunakan alert dan hanya menampilkan infomasi data yang ada di dalam fungsi alert, yaitu "Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript", jika di jalankan di browser maka akan tampil seperti dibawah ini :

Dalam alert javasript anda juga bisa menambahkan sebuah variable sperti contoh di bawah ini.

<!DOCTYPE html>
 <html>
 <head>
   <title>Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript</title>
 </head>
 <body>
   <script>
     var pesan = "Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript";
     alert(pesan);
   </script>
 </body>
 </html>

Script di atas membuat varibale Pesan yang berisi data atau informasi "Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript", maka hasil dari Sript di atas akan sama dengan Srcipt yang pertama.

Membuat Confirm Box JavaScript

Fungsi Confirm Box hampir mirip dengan alert hanya saja fungsi ini meliliki nilai True dan False, atau Ya dan Tidak, biasanya di gunakan untuk memberi pesan konfirmasi sebelum melakukan action, seperti waktu anda akan menghapus data, anda akan memberi konfirmasi "Apakah Anda Akan Menghapus Data Ini ?" Pengguna akan memilih Oke atau Batal. Berikut contoh scriptnya.

<!DOCTYPE html>
 <html>
 <head>
   <title>Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript</title>
 </head>
 <body>
   <p>Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript</p>
    <button onclick="konfirmasi()">Tombol Hapus</button>
    <p id="pesan"></p>
 
    <script>
      function konfirmasi(){
         var tanya = confirm("Apakah Anda Akan Menghapus Data Ini ?");
 
         if(tanya === true) {
            pesan = "Ya";
         }else{
            pesan = "Tidak";
         }
 
         document.getElementById("pesan").innerHTML = pesan;
      }
    </script>
 </body>
 </html>

Ketika anda atau pengguna klik tombol hapus maka penggun akan akan di beri pilihan apakah akan melanjutkan action atau tidak, dari Script di atas tombol hapus akan memanggila Function konfirmasi dan akan menampilkan informasi "Apakah Anda Akan Menghapus Data Ini ?" ketika penggunakan mengklik tombol Oke maka akan menampilkan pesan Ya begitu sebaliknya jika pengguna mengklik tombol Batal makan akan menampilkan pesan Tidak berikut jika di buka di browser

Ketika Tombol Hapus di klik makan akan muncul pesan sebagai berikut

Pengguna akan di beri pilihan Oke dan Batal, jika Oke  yang dipilih makan akan muncul pesan

Tetapi jika pengguna memilih Batal akan muncul pesan

Membuat Prompt Box JavaScript

Prompt Box hampir seperti  Alert  hanya saja ada penambahan yaitu memiliki inputan data, dimana pengguna bisa memasukan text kedalam inputan tersebut sebagai contoh.

<!DOCTYPE html>
 <html>
 <head>
   <title>Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript</title>
 </head>
 <body>
   <p>Cara Membuat Alert, Confirm dan Prompt Dengan JavaScript</p>
 
   <p id="pesan"></p>
 
   <script>
     var pesan = prompt("Masukan Pesan Anda:");
     if(pesan!= ""){
       document.getElementById("pesan").innerHTML = "Pesan Anda : " + pesan;
     }
   </script>
 </body>
 </html>

Pengguna bisa menginput pesan text 

ketika pengguna mengisi pesan text dan klik Oke  maka akan menampilkan psan sebagai berikut

Dari ketiga contoh sript tutorial mengenai alert, confirm dan prompt javascript anda masih bisa memodif dan mengembangkan agar sesusai dengan kebutuhan aplikasi anda. 

Keyword:
  • cara membuat alert
  • confirm dan prompt dengan javascript
  • cara membuat alert javascript
  • cara membuat confirm di javascript
  • cara membuat prompt javascript
  • alert javascript
  • confirm javascript
  • prompt javascript

Artikel Lain

How To Care For Thinning And Dandruff Hair Naturally?

Date : 11 Feb 2023, Category : Health, Create By : admin

Hair is a part of the human body that can enhance someone's appearance, so it's no wonder we want strong and healthy hair. However, we often face hair problems such .....

Membuat Validasi Input Data Email Dan Url Website Php

Date : 25 Jul 2018, Category : Tutorial, Create By : admin

Selamat datang di website gudangilmuaplikasi.com, kali ini kami akan membahas tentang membuat validasi input data email dan url website php menggunakan filter_var dan preg_match, pada dasarnya tutorial validasi yang kami sampaikan hanya dasar .....

Membuat Format Rupiah Di Php

Date : 17 Aug 2018, Category : Tutorial, Create By : admin

selamat datang di website gudang ilmu aplikasi, kali ini kami akan membahas tentang membuat format rupiah dalam pemprograman php, dalam membuat format number, yang utama adalah anda akan menggunakan fungsi number .....