Beranda>Tutorial Desain Web>Tutorial Javascript

Interaksi: waspada, cepat, konfirmasi

Penulis：Eve Cole Waktu Pembaruan：2025-01-13 13:06:04

Karena kita akan menggunakan browser sebagai lingkungan demo, mari kita lihat beberapa fungsi untuk berinteraksi dengan pengguna: alert , prompt dan confirm .

peringatan

Yang ini sudah kita lihat. Ini menampilkan pesan dan menunggu pengguna menekan "OK".

Misalnya:

 peringatan("Halo");

Jendela mini yang berisi pesan disebut jendela modal . Kata “modal” berarti pengunjung tidak dapat berinteraksi dengan halaman lainnya, menekan tombol lain, dan sebagainya, hingga mereka selesai membuka jendela tersebut. Dalam hal ini – sampai mereka menekan “OK”.

mengingatkan

prompt fungsi menerima dua argumen:

 hasil = prompt(judul, [default]);

Ini menunjukkan jendela modal dengan pesan teks, kolom input untuk pengunjung, dan tombol OK/Batal.

  • title

  • Teks untuk ditunjukkan kepada pengunjung.

  • default

  • Parameter kedua opsional, nilai awal untuk kolom input.

Tanda kurung siku dalam sintaksis [...]

Tanda kurung siku di sekitar default pada sintaks di atas menunjukkan bahwa parameter tersebut opsional, tidak wajib.

Pengunjung dapat mengetikkan sesuatu di kolom input prompt dan tekan OK. Lalu kita mendapatkan teks itu di result . Atau mereka dapat membatalkan input dengan menekan Batal atau menekan tombol Esc , maka result adalah null .

Panggilan ke prompt mengembalikan teks dari kolom input atau null jika input dibatalkan.

Misalnya:

 let age = prompt('Berapa umur anda?', 100);

alert(`Umur Anda ${usia} tahun!`); // Kamu berumur 100 tahun!

Di IE: selalu berikan default

Parameter kedua bersifat opsional, tetapi jika kami tidak menyediakannya, Internet Explorer akan memasukkan teks "undefined" ke dalam prompt.

Jalankan kode ini di Internet Explorer untuk melihat:

 biarkan tes = prompt("Tes");

Jadi, agar perintahnya terlihat bagus di IE, kami menyarankan untuk selalu memberikan argumen kedua:

 biarkan tes = prompt("Tes", ''); // <-- untuk YAITU

mengonfirmasi

Sintaksnya:

 hasil = konfirmasi(pertanyaan);

Fungsi confirm menampilkan jendela modal dengan question dan dua tombol: OK dan Batal.

Hasilnya true jika OK ditekan dan false jika sebaliknya.

Misalnya:

 let isBoss = konfirmasi("Apakah Anda bosnya?");

waspada( isBoss ); // benar jika OK ditekan

Ringkasan

Kami membahas 3 fungsi khusus browser untuk berinteraksi dengan pengunjung:

  • alert

  • menunjukkan sebuah pesan.

  • prompt

  • menunjukkan pesan yang meminta pengguna untuk memasukkan teks. Ini mengembalikan teks atau, jika tombol Batal atau Esc diklik, null .

  • confirm

  • menampilkan pesan dan menunggu pengguna menekan “OK” atau “Batal”. Ia mengembalikan true untuk OK dan false untuk Cancel/ Esc .

Semua metode ini bersifat modal: metode ini menghentikan sementara eksekusi skrip dan tidak mengizinkan pengunjung berinteraksi dengan halaman lainnya hingga jendela ditutup.

Ada dua batasan yang dimiliki oleh semua metode di atas:

  1. Lokasi pasti dari jendela modal ditentukan oleh browser. Biasanya letaknya di tengah.

  2. Tampilan sebenarnya dari jendela juga bergantung pada browser. Kami tidak dapat memodifikasinya.

Itulah harga sebuah kesederhanaan. Ada cara lain untuk menampilkan jendela yang lebih bagus dan interaksi yang lebih kaya dengan pengunjung, namun jika “fitur tambahan” tidak terlalu menjadi masalah, metode ini berfungsi dengan baik.

Tugas

Halaman sederhana

pentingnya: 4

Buat halaman web yang meminta nama dan menampilkannya.

Jalankan demonya

Kode JavaScript:

 biarkan nama = prompt("Siapa nama anda?", "");
peringatan(nama);

Halaman lengkap:

 <!DOCTYPEhtml>
<html>
<tubuh>

  <skrip>
    'gunakan ketat';

    biarkan nama = prompt("Siapa nama anda?", "");
    peringatan(nama);
  </skrip>

</tubuh>
</html>
Artikel Terkait