cari

Rumah  >  Artikel  >  hujung hadapan web  >  Menggunakan acara untuk mentafsir mesej pop timbul?

Menggunakan acara untuk mentafsir mesej pop timbul?

PHPz
PHPzke hadapan
2023-08-24 22:37:021220semak imbas

Menggunakan acara untuk mentafsir mesej pop timbul?

Kami boleh menggunakan kotak pop timbul untuk menunjukkan mesej pop timbul kepada pengguna apl. Kami akan mempelajari tentang pelbagai jenis pop timbul JavaScript dalam tutorial ini.

Tiga jenis kotak pop timbul yang berbeza disediakan dalam JavaScript di bawah.

  • Kotak Amaran

  • Kotak pengesahan

  • Kotak segera

Di bawah ini kita akan belajar tentang semua kotak pop timbul satu demi satu.

Kotak Makluman

Kita boleh menggunakan kaedah window.alert() untuk memaparkan kotak amaran. Ia hanya memaparkan mesej dalam kotak pop timbul.

Apabila kami perlu memberikan beberapa mesej kepada pengguna, kami boleh menggunakan kotak amaran. Sebagai contoh, apabila pengguna log masuk ke aplikasi, ia memaparkan mesej seperti "Anda berjaya log masuk."

Tatabahasa

Pengguna boleh memaparkan kotak amaran dalam JavaScript dengan mengikut sintaks berikut. 

alert(message)

Parameter

  • Mesej- Ini ialah mesej yang dipaparkan dalam kotak amaran.

Contoh

Dalam contoh ini, apabila pengguna mengklik butang, kami akan memanggil fungsi showAlert(). Fungsi showAlert() menggunakan kaedah alert() untuk memaparkan kotak amaran.

Dalam output, pengguna dapat melihat bahawa apabila kita menekan butang, ia memaparkan kotak amaran dengan mesej yang diluluskan sebagai parameter. Apabila kami menekan butang "OK" dalam kotak amaran, ia hilang. 

<html>
<body>
   <h2> Showing the alert message using the <i> alert box. </i> </h2>
   <button onclick = "showAlert()"> Show Alert Message </button>
</body>
   <script>
      // function to show alert
      function showAlert() {
         alert("This is the important message");
      }
   </script>
</html>

Kotak pengesahan

Apabila kami memerlukan pengesahan pengguna, kami boleh menggunakan kotak pengesahan. Sebagai contoh, kami perlu mendapatkan pengesahan pengguna sebelum memadamkan beberapa data penting.

Kita boleh menggunakan kaedah window.confirm() untuk memaparkan kotak pengesahan. Kotak pengesahan mengandungi dua butang dengan teks "OK" dan "Batal". Mengembalikan palsu jika pengguna menekan butang batal jika sebaliknya.

Tatabahasa

Pengguna boleh memaparkan kotak pengesahan dalam JavaScript dengan mengikuti sintaks berikut. 

confirm(message);

Parameter

  • Mesej- Ini ialah mesej pengesahan yang muncul dalam kotak pengesahan.

Nilai pulangan

Ia mengembalikan nilai boolean benar dan palsu berdasarkan sama ada pengguna menekan butang "OK" atau "Batal".

Contoh

Dalam contoh ini, kami menggunakan kaedah confirm() bagi objek tetingkap untuk memaparkan kotak pengesahan. Selain itu, kami memaparkan mesej yang berbeza kepada pengguna pada skrin bergantung pada sama ada mereka menekan butang OK atau Batal pada kotak pengesahan. 

<html>
<body>
   <h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
   <p id = "output"> </p>
   <button onclick = "showConfirm()"> Show Confirm box </button>
</body>
   <script>
      let message = "Kindly confirm once by pressing the ok or cancel button!";
      // function to show confirm box
      function showConfirm() {

         // showing the confirm box with the message parameter
         let returnValue = confirm(message);
         let output = document.getElementById("output");

         // According to the returned boolean value, show the output
         if (returnValue) {
            output.innerHTML += "You pressed the ok button.";
         } else {
            output.innerHTML += "You pressed the cancel button.";
         }
      }
   </script>
</html>

Kotak segera

Kotak gesaan ialah cara ketiga untuk memaparkan mesej pop timbul dalam JavaScript. Kotak gesaan ialah versi lanjutan bagi kotak amaran() dan pengesahan. Ia memaparkan mesej dalam kotak dan menerima input daripada pengguna. Selain itu, ia mengandungi butang OK dan Batal untuk menyerahkan nilai input.

Tatabahasa

Pengguna boleh menggunakan kotak gesaan untuk mendapatkan input pengguna dalam JavaScript mengikut sintaks berikut. 

prompt(message, placeholder);

Kami memanggil kaedah static prompt() dalam sintaks di atas.

Parameter

  • mesej - Ini ialah mesej yang dipaparkan di atas kotak input.

  • Pemegang tempat- Ini ialah teks yang dipaparkan dalam kotak input.

Nilai pulangan

Jika pengguna menekan butang OK, mengembalikan nilai input jika tidak ia kosong.

Contoh

Dalam contoh ini, kami mencipta fungsi takeInput(), yang memaparkan petua alat kepada pengguna. Kami menggunakan kotak gesaan untuk mendapatkan nama yang dimasukkan oleh pengguna.

Apabila pengguna menekan butang OK selepas memasukkan nilai input, kami akan memaparkan input pengguna pada skrin. 

<html>
<body>
   <h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
   <p id = "output"> </p>
   <button onclick = "takeInput()"> Show Prompt box </button>
</body>
   <script>
      let message = "Enter your name";
      // function to take input using the prompt box
      function takeInput() {

         // showing the prompt with the message parameter
         let returnValue = prompt(message, "Shubham");
         let output = document.getElementById("output");
         if (returnValue) {
            output.innerHTML += "Your good name is " + returnValue;
         } else {
            output.innerHTML +=
            "You pressed the cancel button, or you entered the null value";
         }
      }
   </script>
</html>

Kami telah melihat ketiga-tiga pop timbul berbeza dengan contoh dalam tutorial ini. Jika kita hanya perlu memaparkan mesej, kita boleh menggunakan kotak amaran, jika kita hanya memerlukan pengesahan pengguna, kita harus menggunakan kotak pengesahan. Jika kita perlu memasukkan nilai atau mengesahkan nilai dalam kotak pop timbul, kita harus menggunakan kotak gesaan.

Atas ialah kandungan terperinci Menggunakan acara untuk mentafsir mesej pop timbul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 对象 事件 alert prompt
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk membuat senarai HTML daripada tatasusunan JavaScript?Artikel seterusnya：Bagaimana untuk membuat senarai HTML daripada tatasusunan JavaScript?

Artikel berkaitan

Lihat lagi