Javascript Tutor - Lesson 3
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 language="javascript"><!--
function HelloWorld()
{
myname = prompt("What's yer name bub?", "");
alert ('Hello ' + myname);
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:HelloWorld()">Hello</A>
</BODY>
</HTML>
Try it.
Is't it cool?
In the prompt box thing, the part that says "What's yer name bub?"
is fairly self explanatory. But what's the empty double quotes ("")
for? That's for the default string. Put something in the quotes (like "Sporto")
and re-run it to see the effect.
Note also that we did
something strange. We made the variable myname equal to the prompt function...
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 language="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>
Try it.
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.
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).
Here is a solution.
There's something very important I must emphasize - 90% of your learning will
come from doing these exercises. If you skip them, you won't get much out of
this tutorial. If you do each and every one, you'll slowly start to gain an
understanding. Bear in mind it does come slowly. There aren't many geniuses
in this world... the rest of us have to study hard and work at it.
I hope that point got driven home.
With 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."
