Mengenal 3 Macam Jendela Dialog pada Javascript, Selengkapnya di Sini!

Admin・ 19 Februari 2022

7 min read ・ 3315 views

Sebelumnya tentu Anda sudah mengenal fungsi yang ada di Javascript. Gunanya fungsi di sini adalah untuk menampilkan jendela dialog. Pun ada juga cara menampilkan output dan input di Javascript. Di tulisan ini Anda akan mempelajari cara mengambil input dengan mengenali 3 macam jendela dialog di Javascript.

Sekilas info bagi Anda, bahwa Javascript merupakan bahasa pemrograman yang banyak digunakan di perusahaan besar seperti Google, Facebook, dan LinkedIn. Javascript menjadi bagian penting dalam pengembangan website, aplikasi game, dan lain sebagainya. Jika Anda seorang programmer dan menguasai Javascript, tentu akan sangat menguntungkan, karena dapat membuat strategi agar pengunjung betah di website Anda.

Belajar Javascript akan membawa manfaat kepada Anda, misalnya dapat mengembangkan game online berbasis web, yang saat ini populer di kalangan generasi muda. Sebelum Anda tahu tiga macam jendela dialog yang dimiliki JavaScript, ada baiknya bila Anda mengenali pengertian Javascript, fungsinya, dan kelebihannya. Untuk itu simak ulasan ini hingga selesai, agar Anda mendapat keseluruhan insight-nya.

Apa Itu Javascript dan Cara Kerjanya

Secara umum Javascript diartikan sebagai bahasa pemrograman yang populer digunakan dalam pembuatan situs web secara dinamis. Sekarang ini sudah banyak yang menggunakan Javascript, misalnya para developer yang sudah mencapai 67,7% pengguna. Situs web yang dinamis ini dimaksudkan sebagai konten yang bergerak di layar perangkat tanpa reload halaman.

Contoh konten dinamis ini berbentuk slideshow foto, pengisian poling, gambar animasi, dan masih banyak lagi. Pengguna biasanya lebih sering mengkolaborasikan Javascript dengan HTML dan CSS. Keduanya (HTML dan CSS) menjadi satu-kesatuan, dengan HTML sebagai struktur web, sedangkan CSS sebagai rancangan style halaman website-nya.

Berdasarkan fungsi utamanya JavaScript dapat digunakan sebagai perancang website yang lebih menarik dan interaktif dengan tampilan konten yang dinamis. JavaScript juga dapat menciptakan aplikasi mobile, karena adanya framework khusus aplikasi mobile, seperti React Native. Fungsi lainnya dapat digunakan untuk mengembangkan game berbasis web browser.

Sebelum Anda mengenali 3 macam jendela dialog pada javascript, ada baiknya jika memahami cara kerja Javascript terlebih dahulu. Pun untuk memahaminya secara keseluruhan ada panduan belajar JavaScript yang perlu dicermati.

Panduan belajar tersebut meliputi (1) mengenali aplikasi yang dibutuhkan, bisa web browser, teks editor, dan web server, (2) memahami aturan penulisan kode, (3) memahami penggunaan variabel JavaScript, (4) tahu tipe data server, dan lainnya.

Cara Kerja di Sisi Client

Di sisi client, cara kerja Javascript tidaklah rumit. Karena saat pengunjung membuka web, script akan terunduh dan dijalankan oleh browser. Proses ini tidak langsung dijalankan di web server, sehingga saat pengunjung tidak mendukung JavaScript, tampilan web di setiap perangkat akan berbeda. Sekaligus, fungsi interaktif ini tidak dapat dijalankan seutuhnya.

Kode Javascript dulunya dibuat dalam satu halaman HTML, sehingga saat dibuka kode akan berjalan secara otomatis. Selain itu kode ini juga dibuat secara terpisah dengan eksistensi .j.s, dan disisipkan di kode HTML. Nantinya kode-kode tersebut akan ditulis menggunakan tag <script> dan disertai teks atribut Javascript. Contohnya, Anda dapat menuliskan tag <script type = “text/javascript”> dan masukkan kode JavaScript-nya </script>.

Cara Kerja di Sisi Server

Untuk cara kerja di sisi server hampir mirip dengan bahasa pemrograman Java dan C# (C sharp). Pun cara kerja ini sering diimplementasikan dalam beberapa kebutuhan database. Untuk membedakan Javascript dengan bahasa pemrograman lainnya, yakni JavaScript lebih banyak digunakan secara non-blocking. Hal ini diartikan, jika program berjalan, maka program tidak akan berhenti di satu proses saja. Sistem akan menyiapkan perintah berikutnya, bila terjadi pemberhentian.

Apabila selama proses diketahui tidak ada outputnya, maka proses tersebut akan berjalan bersamaan dengan proses yang masih berjalan. Sehingga, pengolahan data dapat dilakukan secara efektif dengan cara ini. Contohnya aktivitas streaming video, selama proses video berjalan Anda dapat mengakses informasi lainnya di dalam website tersebut.

Mengenal 3 Macam Jendela Dialog Pada Javascript

Seperti yang dijelaskan sebelumnya, bahwa ada dua cara untuk Anda mengambil input di dalam JavaScript, yakni menggunakan form dan menggunakan jendela dialog. Dalam pembahasan ini akan berfokus pada penggunakan jendela dialog yang memiliki peran dalam interaksi bersama pengguna web. Adapun tiga macam jendela dialog ini meliputi alert (); confirm (); dan promp ().

Tentunya dari tiga jendela dialog ini memiliki fungsi yang berbeda-beda. Untuk lebih tahu dalam mengenal 3 macam jendela dialog pada Javascript, simak ulasan ini hingga selesai!

1.    Jendela Dialog Alert

Jendela dialog ini biasanya digunakan dalam menampilkan pesan peringatan ataupun informasi. Dimana fungsi alert () terletak di objek di window. Contohnya Anda bisa menggunakannya sebagai berikut.

atau juga bisa sebagai berikut.

Di sini objek window  bersifat global, sehingga tidak wajib menuliskannya. Dan dialog alert () tindakan akan memberikan nilai apapun saat dieksekusi. Contohnya seperti ini.

Maka akan menghasilkan tampilan seperti berikut,

Ada satu parameter yang perlu ada di jendela dialog alert (), yakni tampilan teks. Misalnya Anda memberikan teks “Selamat datang di tutorial JavaScript”. Pun Anda dapat menambahkan fungsi dialog yang terletak di event listener, dengan memasukkan fungsi alert () di atribut OnClick, agar menampilkan elemen ‘Klik’.

2.    Jendela Dialog Confirm

Fungsi dari dialog confirm () adalah melakukan konfirmasi ketika melakukan tindakan tertentu. Contohnya, Anda akan menghapus sesuatu, maka terdapat tampilan dialog confirm (). Hal ini menandakan, bahwa tindakan ‘menghapus’ tadi termasuk berbahaya. Cara penulisannya seperti ini, .

Dialog confirm () difungsikan agar mengembalikan keputusan True, jika Anda memilih tombol ‘OK’. Dan akan mengembalikan keputusan False, saat Anda lebih memilih ‘Cancel’. Pun nilai pengembalian (True  dan False) dapat ditampung di dalam variabel, lalu diproses. Contohnya seperti ini.

Maka, akan menghasilkan tampilan berikut.

3.    Jendela Dialog Promp

Jendela dialog Promp () difungsikan sebagai inputan dari pengguna. Maksudnya, dialog Promp () dapat mengembalikan nilai string dari apa yang dimasukkan pengguna. Contohnya sebagai berikut.

Maka, akan menghasilkan tampilan berikut.

Dialog Promp () memiliki beberapa parameter, yakni teks yang ditampilkan dalam form dan nilai default atas field input.

Selengkapnya informasi tentang mengenal 3 macam jendela dialog pada JavaScript. Tiga jendela ini dapat digunakan untuk pembuatan aplikasi dan fungsi lainnya. Dengan membaca ulasan ini Anda telah memahami apa itu JavaScript, kegunaannya, serta cara kerja dalam pengembangan web, pembuatan aplikasi dan masih banyak lagi.