blog posts

You may have come across such cases that a window opens and displays a special message, such as a welcome message, as soon as you enter or a few seconds after entering a website. Or you have clicked a button, and a window has opened in the browser, and you have been shown a warning. But how can this be done with HTML and CSS?

We must say that this window is not implemented with HTML and CSS. Rather, it is implemented in the popular JavaScript language. We want to know how this window is displayed. Follow us by learning the warning code window display code in JavaScript.

The following figure shows a view of the welcome message alert window:

 Implement a window displaying a warning message in JavaScript

You do not need to do any complicated tasks to implement the alert window. This can be done with a simple function called alert. The alert function receives a parameter. This parameter can be of any data type. It can be a variable, or we can even directly write the sentence we want the function to display in the alert window.

Direct display of alert command in JavaScript

Immediately after the user enters the site, we want a warning window like the one above to appear and print a welcome message. To do this, we do the following example:

< script > alert ( "Welcome to \ n 7learn" );
</ script >

In the example above, we used the alert () function inside the script tag in the HTML document and entered the text “(read: double quotation) as a parameter. The output of the above code snippet is as follows:

Why did 7learn come to the second line? What could be the cause?

The reason for this is that we have used a special n \ operator in the text. Wherever this operator is used, the text or letters after it are moved to the next line.

Display alert message window by clicking a button in JavaScript

We want to make the alert window appear as soon as you click a button. How to do this?

The solution is clear to display the message, and it is to use the alert function, but how to implement it on a button?

We have two ways to do this:

The first method -> direct method

In this way, we can use the onclick attribute, which is an event attribute, directly inside the button tag, and write the code directly into it:

< button  onclick = "alert ('anything')" > I can do </ / button >

At the output, as soon as you click this button, a window will open that will print the message anything.

The second method -> indirect method

In this method, we first write the code in a function inside the JavaScript file and then connect it to the HTML document with the script tag. Consider the following example:

function  example () {
alert ( "enything" );
}

Write the above code in a JavaScript file and name the file example.js.

In the HTML document, load the above file as follows and also write the function name in the onclick event attribute:

< script  src = "example.js" > </ script > 
< button  onclick = example (); > I can do </ button >

Then when we click on the I can do button, a window will open that displays anything.

Solve two examples of window display warning messages in JavaScript

Example one: Build a user input window

Write a program that asks about his age and prints his year of birth when the user enters the web page.

We need to get acquainted with a function called prompt () to solve this question. The prompt () function receives input from the user. This function can receive a text as input by which we tell the user what we want. We know we need to use the alert () function to display the output in a warning window on a website. So the answer to the above example is as follows:

< script > var a = prompt ( "how old you?" );
var year = 1399 -a;
alert ( "your birth year is" + year);
</ script >

We solved the first example using the prompt () function. We found that we can use a mixture of variables and strings directly in the alert () function in JavaScript.

Example 2: Display a welcome message after 3 seconds

Write a program that displays a welcome message to the user three seconds after logging in.

We have the challenge to solve the question: call an alert after 3 seconds.

Here we have to use a function called set timeout (). The set timeout () function receives an anonymous function and a number representing the time in milliseconds. Prints the specified seconds.

< script > setTimeout ( function () { alert ( "welcome to this place" );}, 3000 );
</ script >

A welcome message is printed hereafter three seconds.

Conclusion:

In this article, we taught you how to display a welcome message and implement it on a button. We also learned how to get a message displayed to the user after the specified seconds.