• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Tutorial On Various Types Of Javascript Dialog Windows

Tutorial On Various Types Of Javascript Dialog Windows

By Sigit Prasetya Nugroho ∙ June 21, 2019 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

The tutorial makes a complete Javascript dialog window for beginners. In this article, I discuss several types of dialog windows in JavaScript. The dialog windows is an essential component so that the application system can communicate with users.

Various Types And Tutorial Javascript Dialog Window For Beginners Min

Table of Contents

  • 1 What is the JavaScript dialog window?
  • 2 Various dialog boxes for javascript
    • 2.1 Dialog Box Alert()
    • 2.2 Confirm Dialog Window ()
    • 2.3 Prompt Dialog Window()
  • 3 Another method for displaying the JavaScript alert
  • 4 Conclusion

What is the JavaScript dialog window?

Dialog box is a kind of pop up that asks users to make decisions or get information. The primary purpose of the dialog windows is used to interact with users.

There are three kinds of dialog windows in Javascript:

  • Dialog box alert().
  • Dialog confirm().
  • Dialog input prompt().

These three dialog have different functions and objectives.

Various dialog boxes for javascript

Dialog Box Alert()

If you followed my previous article, “Basic Introduction Javascript for Beginners” often met with examples of using alerts. However, I want to repeat in more detail so that you understand, and maybe there are new visitors to find the JavaScript alert windows tutorial series through this article.

The window alert() used to display a warning or information message and an “OK” button. The alert() function in the javascript is window object.

The syntax of writing and using alerts is quite easy, and you can use it in the following ways

1
window.alert("Hello World!");

Or shorter:

1
alert("Hello world");

Tutorial Javascript Alert Box Min

The alert() function will not return any value when executed.

Also, you can create an alert box whose message stored in a Javascript variable, then add the variable to the alert() function.

Example:

1
2
Var text = " Hello Sigit";
alert(text);

A brief description:

  • Alert dialog force the browser and user to read the message displayed.
  • Alert() support with all browsers

Confirm Dialog Window ()

The confirm() dialog windows used so that the user confirms before the system takes certain actions.

Confirm box is a javascript popup in which there are two choices of “OK” and “Cancel” buttons (maybe each browser displays a different choice of writing). The applications related to data or databases usually use the confirm dialog window. The goal is to avoid unwanted clicks.

The value generated from the Confirm Box is true or false, if the user clicks the “OK” button, it will return true, and if the user clicks the “Cancel” button, it returns false. For more details, please see the following code example:

For example:

when we delete/make changes data, we recommend you display confirm box dialog to confirm.

The confirm box Javascript created with the confirm() function.

Example:

1
confirm("Delete user sigit?");

The dialog box confirm() will return true when we select the OK button and will return false when we select Cancel.

The return value can be accommodated in the variable for the next process.

Example:

1
2
3
4
5
6
var result = confirm("Delete user sigit ?")
if(result){
alert("Successfull delete user")
}else{
alert(“thanks not to delete that user”)
}

Example Javascript Dialog Window For Beginners

Prompt Dialog Window()

The window prompt() serves to retrieve input from the user. The dialog window prompt() return a string value from what the user entered.

Javascript prompt dialog is a Javascript input whose appearance is similar to an alert but has an input that functions to enter text or writing from the user. The prompt dialog is written with the code as follows:

Example:

1
2
var email = prompt("Your email address ?")
alert(email)

Example Javascript Input Dialog Prompt Window For Beginners

Another method for displaying the JavaScript alert

A javascript modal dialogs is an alternative dialog alert that is custom made to produce a better view. The creation of Javascript modal native has been abandoned because many great plugins are created and shared free of charge by the Javascript community. Especially if you use the JQuery framework. I have reviewed one of the popular windows dialog plugins, the sweetalert plugin.

Conclusion

  • Dialog alert() applied to display information or warnings.
  • Windows confirm() applied to confirm before making further steps.
  • Dialog input prompt() used if you need a value or answer from the user.
  • The three dialog windows above will found in making applications that require interaction with users.

So the Javascript alert box tutorial, hopefully useful. See you in the next JavaScript tutorial for beginners.

Next Tutorial : Complete Reference Javascript Array Tutorial for Beginners

Another Javascript Related Post :

  • React-Table Not Updating or Refreshing Data, The Solution ?
  • How To Custom React Datepicker In Bootstrap
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com