Java/J2EE and SOA (349 Blogs) Become a Certified Professional
AWS Global Infrastructure

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (16 Blogs)
  • Comprehensive Java Course (4 Blogs)
  • Java/J2EE and SOA (346 Blogs)
  • Spring Framework (8 Blogs)
SEE MORE

How to Create an Alert in JavaScript?

Last updated on Jun 10,2024 42.7K Views

16 / 31 Blog from JavaScript

When you open any website, you might see alert pop-ups at times. These JavaScript alert boxes are useful for alerting users to something important. When a JavaScript alert box is triggered, a small box pops up and displays the text that you specify in your JavaScript code. In this article, we will see how the alert in JavaScript works, in the following sequence:

Let’s begin.

Pop-up Boxes in JavaScript

In JavaScript, you can find three kinds of popup boxes:

  • Alert box- An alert box is mostly used to make sure information comes through to the user. When an alert box pops up, you need to click “OK” to proceed.

  • Confirm box- A confirm box is mostly used to verify or accept something for the user. When a confirm box pops up, the user needs to click either “OK” or “Cancel” to proceed. If the user clicks “OK”, the box returns true. If the user clicks “Cancel”, the box returns false.

  • Prompt box- A prompt box is used by the user to input a value before entering a page. When a prompt box pops up, the user needs to click either “OK” or “Cancel” to proceed after entering an input value. If the user clicks “OK” the box returns the input value. If the user clicks “Cancel” the box returns null.

These were the different types of popup boxes. So, let’s get into the depth of the alert box and see how you can create an alert box in JavaScript.

Alert in JavaScript

The alert() method in JavaScript displays an alert box with a specified message and an OK button. It is often used to make sure that information comes through to the user.

The alert box takes the focus away from the current window and forces the browser to read the message. So, you should avoid overusing this method, as it prevents the user from accessing other parts of the page until the box is closed.

 

Syntax:

alert(message)

Here, the message is a string type that specifies the text to display in the alert box, or an object converted into a string and displayed. It is optional.

Example:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20myFunction()%20%7B%0Aalert(%22This%20is%20an%20Alert!%22)%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Output:

Alert box - alert in javascript - edureka

How to Create an Alert in JavaScript?

The alert() method in JavaScript displays an alert box. It displays a specified message along with an OK button and is generally used to make sure that the user gets the information. It returns a string which represents the text to display in the alert box. Let’s take an example and see how to create an alert in JavaScript:

<!DOCTYPE html>
<html>

<head>
<title>
Alert() Method in JavaScript
</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Ah1%20%7B%0Acolor%3A%20Blue%3B%0A%7D%0A%0Ah2%20%7B%0Afont-family%3A%20Impact%3B%0A%7D%0A%0Abody%20%7B%0Atext-align%3A%20center%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
</head>

<body>

<h1>Welcome to Edureka</h1>
<h2>Alert in JavaScript</h2>

<p>
To Display the alert message,
click on the "Show Alert Message" button:
</p>

<button ondblclick="myalert()">
Show Alert Message
</button>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20myalert()%20%7B%0Aalert(%22This%20is%20the%20Alert%20Message!%22)%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

</body>

</html>

Output:

 

After you double click the button, you will get the following output:

Output 2- Alert in JavaScript - edureka

 

With this, we have come to the end of our article. I hope you understood what is an alert in JavaScript and how you can create an alert box. If you’re just beginning, then watch at this Java Tutorial to Understand the Fundamental Java Concepts.

Check out our Full Stack Web Development Course which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB. 

Got a question for us? Please mention it in the comments section of “Alert in JavaScript” blog and we will get back to you.

Upcoming Batches For Java Course Online
Course NameDateDetails
Java Course Online

Class Starts on 3rd August,2024

3rd August

SAT&SUN (Weekend Batch)
View Details
Java Course Online

Class Starts on 28th September,2024

28th September

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How to Create an Alert in JavaScript?

edureka.co