As I said before, Javascript is plenty powerful. We can go in any one of a dozen directions with this. What I'm going to do is wander around here and there, trying to touch on as many basic things as I can. I'll try to explain a little as we go.
So, what now? Let's add a prompt box to ask our name and then spit out a personalized Hello message.
<html>
<head>
<title></title>
<script type="text/javascript">
function HelloWorld()
{
myname = prompt("What's yer name bub?", "");
alert("Hello " + myname);
}
</script>
</head>
<body>
<a href="javascript:HelloWorld()">Hello</a>
</body>
</html>
Ain't it cool?
In the prompt box thing, the part that says "What's yer name bub?" is fairly self explanatory. But what are the empty double quotes ("") for? That's for the default string. Put something in the quotes (like "Sporto") and run it again to see the effect.
Note also that we did something strange. We made the variable myname equal to the prompt method...
myname = prompt("What's yer name bub?", "");
Seem a little wierd? Well, what we're really saying is that the value of myname is whatever the prompt box returns. And it returns whatever you enter in the box. So, myname equals whatever you enter into the box. Get it?
Remember before when I said we'd get back to the parentheses()? Well now's the time. First, we'll look at the end result, then come back and talk about what's going on.
<html> <head> <title></title> <script type="text/javascript"> function HelloWorld(name) { alert("Hello " + name); } </script> </head> <body> <a href="javascript:HelloWorld('Joe')">Hello Joe</a><br> <a href="javascript:HelloWorld('Tom')">Hello Tom</a><br> <a href="javascript:HelloWorld('Frank')">Hello Frank</a><br> <a href="javascript:HelloWorld('Bob, Carol, Ted & Alice')">Hello to a few other people.</a> </body> </html>
Do you see what's going on here? We're passing values to the function. name is a variable that is used in the function. When we pass 'Joe', or 'Tom' or whatever to the function, the function uses that in place of the variable name. This passing of variables is a very useful thing. We can write a function once and use it a thousand times and get a different result depending on what we pass to it.
Also notice we used a single quote ' nested inside of a double quote "...
<a href="javascript:HelloWorld('Joe')">
Using the following will confuse the browser and generate an error.
<a href="javascript:HelloWorld("Joe")">
You can use single quotes or double quotes... doesn't matter. But when quotes are nested, it makes a HUGE difference. A good habit to get into is to use double quotes first. Use single quotes only for a nested set.
Now, since the best way to learn is to learn by doing, I have something for you to do...
Exercise: Make a web page and insert these three images...
Make it so that as you click on each number, an alert box pops up and says "You clicked on 1" (or 2, or 3).
With all that in mind, here is another exercise...
Exercise: Combine the prompt box with the last exercise so that with each click of a button, it asks you for your name and spits back something like "Hey Joe, you picked number 1."
Javascript Tutor |
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
Javascript Authoring Guide JavaScript FAQ |
HTML 4.0 Reference Google Groups (Advanced Search) |
![]() |