Content
1. Display a text in a window with an Alert Box
2. Asking a name with a Prompt Box
3. Asking a question with a Confirm Box
1. Display a text in a window with an Alert Box
With javascript you can display a text in a little window. This window is called an Alert Box. An application for an Alert Box could be: a message that something isn't available yet on the website or a welcoming text.
| <script type="text/javascript">
function display_text( text ) { alert( text ); } </script> |
This function will (when called) display the text that you pass tot the function (a parameter). For example: you can call the function from a form:
| <input type="button" value="a little message" onClick="display_text( 'Hello World!!' );" /> |
Paste these two little pieces of code in a new HTML page and test it in your browser. The first piece (the actual script) goes in the header of the page, and the second piece goed in the body of the page. This is how your completed HTML page should look like:
| <html>
<head> <title>This is my example page</title> <script type="text/javascript"> function display_text( text ) { alert( text ); } </script> </head> <body> <input type="button" value="a little message" onClick="display_text( 'Hello World!!' );" /> </body> </html> |
2. Asking a name with a Prompt Box
You can also ask a visitor of a page a question. The visitor can type his answer in a textfield. You can use this for example to ask the name of a visitor. When the visitor has answered the question, you can display a welcoming message using the previous function (alert box).
| <script type="text/javascript">
function ask_a_name ( ) { var visitor_name = prompt( "Hello, what's your name?","" ); alert( "Welcome to my site, "+visitor_name ); } </script> |
If you call this function (from a button, like the previous example), the script will first ask the name of the visitor, and then display a new window with a welcoming message. Try it!
The code explained
[codeline]var visitor_name = prompt( "Hello, what's your name?","" );[/codeline]
First you'll ask the name of the visitor with the PROMPT function. The PROMPT function needs two parameters (the values within the brackets). The first parameter is the question you ask and the second one can be left empty.
[codeline]alert( "Welcome to my site, "+visitor_name );[/codeline]
In the second line is the ALERT function used to display a welcoming text. By using + you can insert variables to a text. In this example, the name of the visitor is inserted in the welcoming text.
3. Asking a question with a Confirm Box
Also, you can ask a visitor a question that only can be answered with "OK" or "CANCEL":
| <script type="text/javascript">
function are_you_sure ( ) { var go = confirm( "Are you sure you want to do this?" ); if (go == true) { alert( 'Ok, let's do it!' ); } else { alert( 'No, i won't!' ); } } </script> |
With this function you can ask a visitor if he is sure to do something, for example, the deleting of a file, or leaving the page.
The code explained
[codeline]var go = confirm( "Are you sure you want to do this?" );[/codeline]
In this line you ask the question with the CONFIRM function. The answer is stored in the variable "go". If the visitor choose "OK" it is TRUE, and if the visitor choose "CANCEL" it is FALSE (also known as a boolean).
[codeline]f (go == true) {[/codeline]
In an IF STATEMENT, you can evaluate a variable. Does the variable comply with the evaluation, the code between curly brackets executed. If the value doesn't comply the code after ELSE is executed.
More Web Programming: 
