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.
Related Articles
- Using Link Tags with JavaScriptI get this question so much, I figured Id better get in gear and write another section to address using the link tag for javascripts (such as new windows), rather than using the old grey button. Well, there are a couple of ways to do this. Ill start with the easier to understand version first.
- The Basics- JavaScript TutorialTo get started with JavaScript, you will want to be able to see the tag that will set a script apart from the HTML. The tags used to begin and end a script are the tags. The opening tag should appear like this
- Pop-Under Windows - The Latest Pop-Window TrendAlthough there has been a great deal of controversy over the use of pop-up windows, the fact remains; pop-up windows are highly effective. The latest pop-window trend to hit the Internet is the pop-under window. Pop-under windows are less intrusive than the pop-up windows and are believed to be even...
- 4 Powerful Features of Javascript Programming LanguageIn the community of web developers and surfers, Javascript is highly popular as client side scripting language for web browsers. Lets take a look at some of the features of this language.
- Using Flash And Java To Create Pop-UpsWith Flash it is quite common to have a customized pop up window to hold your flash movie. This is almost always done using HTML and JavaScript. Well, what about having buttons in your flash movies that will open customized pop up windows? In this tutorial I am going to show you how to incorpora...
- Windows or Linux Hosting - Which One Is Right For You?Which hosting platforms suits your needs?
- Creating a Floating WindowCreate a floating window on my html page.
- JavaScript RedirectionRedirection is often used to take viewers to a page depending on their browsers name or version. To redirect a viewer instantly, you just need to add a short command in your head section:
- 7 Reasons You Should Avoid JavaScript Dynamic NavigationThis informative article tells you 7 Reasons You Should Avoid JavaScript Dynamic Navigation. The author explains the technical reasons behind each of the 7, and provides excellent examples.
- Popup: Hate em or Love emThis great article discusses the pros and cons of popups. The different types of popups and their relative trouble versus click rate makes for interesting reading. The response of users and designers to popups is interesting too.