The Message Prompt
One of the simplest things that you can do with javascript is creae a message box. There are examples on the first page and will be more here.
alert("text") ~ will
give the user only the option of the ok button
confirm("text") ~ will give the user the option of
ok and cancel.
| Lemme see them | |
| <script> alert("I am an Alert box") </script> |
<script> confirm("I am an Confirm box") <script> |
So theres your basic message box, it can be placed in either the head part of the document or the body part of the document. It will be display as soon as the browser reads it.
Making a button display a message. This could be used at the end of a form, to thank the user for sending something to you.
<input type="submit" value="Send Me" onclick="alert('Thank-you For Sending')">
Or if you just wanted a button that would display a popup when clicked:
<input type="button" value="Whatever you want the button to say" onclick="alert('What ever you want your message to be')">
You can also get a message prompt when you move your mouse over a link.
Come and visit the wonderful world of javascript. Just move your mouse cursor over the link.
Why don't you have a little play around with the other event handlers and see what you can come up with.
You could allow the user to make selections and have a different message box for the selection they made by using if and else statements.
<script>
alert("Ok will basically mean yes, Cancel no.")
if
(confirm("Are you sure you want to do this?"))
alert("Lets get on with it then!")
else
alert("Well it is going to happen anyway!")
</script>
What this is saying.
| <script> | ||
| alert("Ok will basically mean yes, Cancel no.") | ||
| if | If the user selects OK the alert box, "Lets get on with it then" will be displayed | (confirm("Are you sure you want to do this?")) |
| alert("Lets get on with it then!") | ||
| else | If the users choses to the select CANCEL the message box "Well it is going to happen anyway" will be displayed. | |
| alert("Well it is going to happen anyway!") | ||
| </script> |
Have a little play around, see what you can do.
The prompt where you can ask the user some info.
You can ask the user for such information as their name and give them a welcome message like Hi user name and make them feel more of the document.
Hi +name+ welcome to my page.......and +name+ don't forget to sign my guestbook....hope you enjoyed your visit +name+ , please come again.
So how do I do it?
<SCRIPT>
var name = prompt("What is your name? ","")
alert("Hello "+name+". Welcome to my homepage, I hope you enjoy the stay
and don't forget to sign the guestbook!")
</SCRIPT>
That will give a name prompt and message box only. This should be placed in the head tags. To incoroprate into the page you will need to write another script.
<script>
<!--
document.write(" Hi! "+name+" and welcome to my page, enjoy your stay!")
//-->
</script>
<script>
<!--
document.write(" Hi! "+name+" and welcome to my page.... and "+name+" don't forget to sign my guestbook....hope you
enjoyed your visit "+name+" , please come again")
//-->
</script>
Lets break it up. This will only give a message prompt and alert message box
| <script> | ||
| var name = prompt("What is your name?","") | After var, it needs to be named so that it can be referenced to later on in the document. | |
| Notice how name is used, if
you were to name it ask, when you reference it you will need to name it ask. |
The end two "quotaion marks" leave a blank space in the text area where the user will write. You can enter in a message there which will be display, like Type Name Here. | |
| alert("Hello "+name+" . Welcome to my homepage") | When being referenced to the name, it needs to be in "quote marks" and inside + signs +. | |
| </script> |
Now to write it into the page.
| <script> | ||
| <!-- | This will hide the script from older browsers or browsers that have javascript turned off. It will stop a load of junk code displaying which will mess up the look of your page. | |
| document.write("Hi "+name+" ! Welcome to my page, don't forget to sign my guestbook") | document.write is the javascript code to allow you to write something into a page. "+name+" used like said before | |
| // --> | Ends the hiding. | |
| </script> |
Looks like we got the message dialog box cracked.