Basic Javascript alerts
Alert
Javascript allows you to display a pop up with a message and OK button. This can be easily done with the alert() function. Alert method display an alert box with a string passed to it.
- We can have
alert()that will display an empty dialog box with just OK button. Alert("Hello world!")displays a dialog box with the message “Hello world!” and Ok button.- We can display any type of values on an alert box. For example we have the variable named age=24.
Alert("My age is: "+age)simply display My age is: 24 on an alert box. The + sign is called concatenation sign in Javascript because it ties two values into one statement.
Below is a simple example of a Javascript alert box. In this example I built a dialog box with a “Hello word!” message when a web page is loaded.
<html>
<body>
<script type="text/javascript">alert("Hello World!")</script>
</body>
</html>
The following is an example of Javascript alert box that pops up when a link is clicked. Onclick is an event that understands the mouse click. Here I set the Onclick event to the alert box so that when the link is clicked, Onclick event executes the alert box.
<html>
<body>
<A href='javascript:onClick=alert("Simple test!")'> Click here </A>
</body>
</html>
Below is an example of Javascript alert box that pops up when a button is clicked.
<html>
<body>
<form>
<input type="button" name="click" value="Click To alert"
onclick='alert("You clicked a button to display an alert box")'>
</form>
</body>
</html>
Again onclick event is used to display the alert box when a button is clicked.
Bellow is the result of this example:
Prompt Box
The prompt() is a method of the window object, similar with the alert() box with extra options. The difference is that prompt has text field to type a value and it also has OK and CANCEL buttons while alert has only one button.
Here is syntax example of prompt box:
prompt("What day is today?") This prompt method display What day is today? message on a prompt box and text field with the default text of undefined.
We can display default text in the text field by simply doing the following:
prompt("What day is today?","Type here")
The information submitted to the prompt() can be stored in a variable, example:
var date=prompt("What day is today:","Type here")
Once we have a value from prompt box stored in a variable, we can display it on a message box, write it on the current browser or display it on a new window. This example display a prompt box when the page is loaded with message What day is today? and default text field value of Type here. Once the date is provided, it stores the variable date and display it on an alert box.
<html>
<body>
<script type="text/javascript">
var date = prompt("What day is today?", "Type here");
alert("Today is: "+date)
</script>
</body>
</html>
Confirm Box
The JavaScript confirm box differs from a regular alert box because provides two choices for the user, OK and Cancel to confirm the request. You can use a variable and if statement to determine if the Ok or Cancel button is clicked and work on your way to give a proper respond.
The following is a syntax example to display confirm box:
confirm ("Do you want to continue?") This a dialog box with the message Do you want to continue and Ok and Cancel buttons.
The following example tells you which button you have clicked:
<html>
<body>
<script type="text/javascript">
var answer = confirm ("Do you want continue?")
if (answer)alert ("You choose ok!")
else alert ("You choose cancel!")
</script>
</body>
</html>
I stored the confirm objects in a variable answer then I used if statement to determine which button clicked. The default and expected button is Ok button so we say if answer is equal to ok then display the message You choose ok!
The following is another example that directs the user to another page when Ok button is clicked:
<html>
<body>
<script type="text/javascript">
var answer = confirm ("Do you want different page?")
if (answer)window.location="http://www.assistprogramming.com"
else alert ("Nothing happened!")
</script>
</body>
</html>
One Comment for “Basic Javascript alerts”
Post a comment
RSS/XML
March 11th, 2008 at 12:56 am
good