Halo teman-teman, kali ini saya akan membagikan tutorial membuat pop-up alert menggunakan SweetAlert
Pop-up alert sendiri merupakan hal yang sering dilakukan dalam sebuah website. Alert digunakan untuk menampilkan pesan atau peringatan kepada pengguna dengan jendela dialog
Lansiran dapat dibuat menggunakan fungsi alert() dalam JavaScript. Namun tampilan yang dihasilkan dengan fungsi bawaan terkesan sederhana dan kaku sehingga perlu menggunakan library JavaScript tambahan untuk dapat membuat pop-up alert yang lebih menarik dan dapat didesain sesuai dengan keinginan kita. Salah satu pustaka JavaScript itu adalah SweetAlert
Menulis kode SweetAlert sesingkat menulisnya menggunakan fungsi bawaan JavaScript. Hal ini membuat SweetAlert banyak diminati oleh web developer dalam membuat pop-up alert di website mereka
Langkah-langkah Menggunakan SweetAlert
Berikut adalah langkah-langkah dalam membuat pop-up alert menggunakan SweetAlert
- Kunjungi halaman SweetAlert menggunakan browser Anda masing-masing. Silakan klik tautan berikut untuk mengunjungi situs web SweetAlert. https. //peringatan manis. js. org/
- Langkah kedua adalah menginstal SweetAlert dengan menambahkan kode berikut ke file website kita. Kodenya adalah
- Setelah menambahkan kode, kita bisa langsung menggunakan beberapa contoh pop-up alert yang tersedia di library SweetAlert
Contoh Lansiran Munculan SweetAlert
Berikut adalah contoh penggunaan SweetAlert pada tampilan halaman website. Silahkan copy kode dibawah ini untuk melihat hasilnya
Contoh Penggunaan SweetAlertContoh Pop-up Alert Menggunakan SweetAlert Klik disini
Hasil
Hasil kode dapat dilihat pada gambar di bawah ini
Baca Juga. Apa Situs Web Pertama di Dunia?
Penjelasan
- Saat kita menekan tombol "Klik di sini", fungsi example() pada kode berikut akan dijalankan. Kodenya adalah. Klik disini
- Pada contoh function() terdapat kode perintah swal yang merupakan perintah dari library SweetAlert. Di dalam kode swal ada beberapa kode lain yang bisa kita ubah sesuai kebutuhan. Kode judul adalah kode untuk judul pada peringatan pop-up, kode teks adalah kode untuk menampilkan teks pada peringatan pop-up, kode ikon untuk mengubah simbol, dan kode tombol untuk mengatur tombol di peringatan pop-up. Selain kode tersebut, masih banyak kode lain yang bisa kita coba untuk membuat pop-up alert sesuai dengan kebutuhan kita. Contoh function() dapat dilihat pada kode berikut.
Ini adalah artikel tentang cara membuat pop-up alert menggunakan SweetAlert di halaman website. Semoga artikel yang saya tulis dapat bermanfaat bagi para pembaca. Penulis menyadari bahwa artikel ini masih jauh dari sempurna. Oleh karena itu, jika ada informasi atau kata-kata yang tidak berkenan bagi saya, saya mohon maaf. Sekian artikel dari saya, terima kasih. Tetap semangat dan jangan menyerah dalam bekerja
Kali ini kita masih akan membahas metode yang tersedia pada array di JavaScript. Sekarang kita akan mencoba mempelajari metode pop()
pop() adalah metode yang digunakan untuk menghapus array terakhir
Skrip dasarnya adalah sebagai berikut
namavariabelnya = array1.pop();Contoh penggunaannya adalah sebagai berikut
Method Array join()
Hasilnya akan seperti ini
Metode Array bergabung()
Terlihat, pada drink array, ketika minuman.pop() dieksekusi, dia akan mengambil array terakhir (Cendol). Dan ketika menjalankan drink array lagi, Cendol sudah tidak ada, dan jika minuman.pop() dipanggil kembali, dia akan menghapus array terakhir yaitu Cincau. Dan seterusnya
Tahukah Anda bahwa JavaScript memiliki tiga jenis jendela pop-up? . Munculan JavaScript, salah satunya adalah jendela dialog atau fungsi alert(). Lansiran JavaScript ini memberikan informasi yang relevan kepada pengguna atau data yang perlu dikonfirmasi
Penambahan lansiran JavaScript ini menjadikan situs web lebih dinamis dan informatif. Artikel ini akan membahas pop up JavaScript dan cara membuatnya. Jika Anda tertarik untuk mengetahui pastikan Anda membaca artikel ini sampai akhir
Daftar isi
Munculan JavaScript dan Lansiran JavaScript
Seperti yang telah disebutkan sebelumnya, ada tiga jenis JavaScript Pop Up, yaitu. Peringatan, Konfirmasi, dan Prompt. Untuk menulis banyak baris di jendela sembulan JavaScript, Anda harus menggunakan string "\n". Anda tidak perlu menggunakan awalan jendela saat menulis metode kotak pop-up
Fungsi alert() JavaScript digunakan untuk menampilkan kotak peringatan virtual yang tersedia di JavaScript. Ini sebagian besar digunakan untuk memberikan pesan peringatan kepada pengguna. Fungsi ini menampilkan kotak dialog peringatan yang terdiri dari beberapa pesan tertentu (yang bersifat opsional) dan tombol OK. Ketika kotak dialog muncul, kita harus mengklik "OK" untuk melanjutkan
Kotak dialog peringatan mengambil fokus dan memaksa pengguna untuk membaca pesan yang ditentukan. Jadi, kita harus menghindari penggunaan metode ini secara berlebihan karena akan menghentikan pengguna mengakses bagian lain dari halaman web hingga kotak tertutup
Dapat dipahami bahwa penggunaan metode alert menggunakan contoh. Misalkan kita harus mengisi formulir untuk kartu identitas. Ini menanyakan tentang tanggal lahir untuk kriteria kelayakan kartu identitas. Jika usianya sudah 18 tahun ke atas, maka proses akan dilanjutkan. Jika tidak, maka akan muncul pesan peringatan bahwa usia di bawah 18 tahun. Pesan peringatan ini adalah 'Peringatan kotak'
Contoh lain adalah misalkan pengguna diharuskan mengisi formulir di mana beberapa bidang diperlukan untuk memasukkan beberapa teks, tetapi pengguna lupa memberikan input. Sebagai bagian dari validasi, kita dapat menggunakan kotak dialog peringatan untuk menampilkan pesan peringatan terkait pengisian kolom teks
Alih-alih menampilkan peringatan atau kesalahan, kotak dialog peringatan dapat digunakan untuk pesan biasa seperti 'selamat datang kembali', 'Halo XYZ', dll.
Artikel Terkait Tutorial JavaScript 32. Javascript Reserved Word, Pahami Penggunaannya.
Kotak Peringatan di JavaScript
Peringatan kotak JavaScript digunakan saat Anda memerlukan beberapa informasi untuk menjangkau pengguna. Saat kotak peringatan ini muncul, pengguna perlu menekan tombol OK untuk melanjutkan aktivitas
Namun hal ini juga dapat mengganggu aktivitas pengguna, sehingga Anda harus berhati-hati saat menggunakannya. Anda dapat menulis kode berikut untuk menampilkan kotak peringatan JavaScript sebagai berikut
Awalan 'jendela' adalah opsional. Anda masih dapat menulis kode tanpa awalan
alert("Teks Alert akan muncul");Contoh di atas membuat peringatan JavaScript munculan yang berisi dua baris teks
alert("Halo\nApa Kabar ?");_Kotak Konfirmasi dalam JavaScript
Munculan konfirmasi dalam JavaScript digunakan saat Anda membutuhkan pengguna untuk menerima sesuatu. Saat kotak pop-up ini dikonfirmasi dan dibuka, pengguna harus mengklik salah satu dari dua tombol (OK atau CANCEL) untuk menutup kotak tersebut. OK mengembalikan true, sedangkan CANCEL mengembalikan false. Anda dapat menulis kode dengan mengikuti kode di bawah ini untuk menampilkan kotak konfirmasi
window.confirm("Apakah Anda Setuju ? Tekan OK untuk Melanjutkan");Awalan 'jendela' adalah opsional. Anda masih dapat menulis kode tanpa awalan
confirm("Apakah Anda Setuju ? Tekan OK untuk Melanjutkan");_Kotak konfirmasi mengembalikan 'benar' jika Tombol diklik dan mengembalikan salah jika BATAL ditekan
var r = confirm("Tekan Ok Untuk Melanjutkan"); if (r == true) { x = "Tombol OK telah ditekan"; } else { x = "Tombol Cancel telah ditekan"; } _Kotak Prompt di JavaScript
Kotak prompt digunakan saat Anda membutuhkan pengguna untuk memasukkan beberapa informasi sebelum melanjutkan. Untuk mematikan kotak prompt, pengguna harus mengklik tombol OK atau CANCEL
Kotak konfirmasi mengembalikan data input jika tombol OK diklik. Ini mengembalikan nol jika tombol CANCEL diklik. Anda dapat menulis kode berikut untuk menampilkan kotak prompt
window.prompt("Halo Siapa Namamu ?","Dani");Sama seperti fungsi pop up sebelumnya, awalan 'jendela' bersifat opsional. Anda masih dapat menulis kode tanpa awalan
prompt("Halo Siapa Namamu ?","Dani");Anda dapat melihat contoh berikut untuk mendapatkan ide yang jelas dan klik 'Coba Langsung. ' dan lihat cara kerjanya
function firstFunction() { var txt; var person = prompt("Masukkan Nama Lengkap", "Dani Aditya"); if (person == null || person == "") { txt = "User telah membatalkan perintah."; } else { txt = "Halo " + person + "! Apa Kabar?" } document.getElementById("test").innerHTML = txt; }Artikel Terkait Tutorial JavaScript 10. Komentar dalam Javascript dan Cara Membuatnya
Itulah penjelasan pop up di JavaScript. Beberapa hal yang perlu diperhatikan mengenai pop up di JavaScript adalah