HTMLisEasy.com
HTML tutorials for the rest of us...
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 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>

Try it.

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>

Try it.

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...

1 2 3

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.

Learn by doing
There is 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 suffer through each and every one, you'll slowly start to gain proficiency. 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.

As you are presented with exercises, it's perfectly OK to click the solution link first to see the effect on a web page. This way you'll know exactly what I'm looking for. But don't cheat and look at the code. Try to figure it out for yourself first... I mean really try... then look at the code. Anyone can look at how I coded something and more or less understand it. I don't want you to just understand it... I want you to be able to DO it! Big difference.

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."

Here is a solution.

<< BACK NEXT >>
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)