Andy's JavaScript tutorial 3
 JavaScript
dialog boxes
So, what the heck are JavaScript dialog boxes? Well, they are interesting
little "pop-up" boxes that can be used to display a message, ask for
confirmation, user input etc. They're very easy to create, not to mention cool!
Three types of dialog boxes exist in JavaScript- alert, confirm, and
prompt. I'll show you an example of each:
| Alert: <script>
alert("Welcome, my friend!")
</script>
|
|
| Confirm: <script>
var answer=confirm("Jump to CNN?")
if (answer)
window.location="http://cnn.com"
</script>
|
|
| Prompt: <script>
var answer=prompt("Please enter your name")
alert("Hello "+answer)
</script> |
|
All of the boxes allow you to
customize the message simply by entering in a different text inside the function's
parentheses. Go ahead, try it now on your web page!
Image submit button
JavaScript is not only practical, it's cosmetical as well! If you work with HTML forms
(and who doesn't?), then you should agree that form buttons are probably one of the most
ugly things ever to exist inside a browser. They're dull, ugly, and desperately need a
make-over! Well, with the help of JavaScript, it's actually possible to use a custom image
in place of form buttons to perform the important task of sending the form's content to
you. Here's how:
1) Give your form a name:
<form name="andy">
"
</form>
2) Replace the usual submit button (<input>) with the below:
<form name="andy">
"
<a href="javascript:document.andy.submit()"><img
src="myimage.gif"></a>
</form>
That's it. For the submit button, noticed that I used an image link with an unusual
url: javascript:document.andy.submit(). This line of code tells JavaScript to submit the
form named andy when the link is clicked on. Here's an actual example of a form with an
image submit button:
Displaying
a random message/ image
I get a lot of emails asking me stuff like: "How do I
display a random quote on my page?", or "Is it possible to have a random image
show up each time the surfer reloads the page?" The answer? No problemo! JavaScript
can be used to easily accomplish just that.
The below's a "random" quote example, where a quote out of three
is randomly displayed each time this page is loaded (Reload this web page to see another
quote):
Here's the source code used:
<script>
var whichquote=Math.round(Math.random())*3
if (whichquote<=1)
document.write('"You can take away my life, but you can never take away my
freedom!"')
else if (whichquote<=2)
document.write('"I\'ll be back"')
else if (whichquote<=3)
document.write('"You can count on it"')
</script>
The key here is the code:
var
whichquote=Math.round(Math.random())*3
I'll explain this code by breaking it down: Math.random() is a JavaScript
method, and always generates a real number between 0 and 1. Math.round() rounds that
number to an integer. By multiplying that number by 3, I always get a random number that's
between 0 and 3. Why 3? Because I have three quotes I want to randomly display, so I need
three random "slots". If you have 5 quotes, just multiple the code by 5 instead.
Now, quotes are great, but what if you want to display a random image?
Simple. Just change the text to the <img> tag:
<script>
var whichquote=Math.round(Math.random())*3
if (whichquote<=1)
document.write('<img src="first.gif">')
else if (whichquote<=2)
document.write('<img src="second.gif">')
else if (whichquote<=3)
document.write('<img src="third.gif">')
</script>
Don't you just love JavaScript?
Andy's Tutorial 4>>
|
