PageTutor.com
Javascript Tutor - Lesson 1

Let's start with a traditional Hello World! Seems every programming tutorial begins with that.

Copy the following and save as hello.html

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

Then add script tags within the head section. The script tags tell the browser that some sort of scripting is contained between (in this case "javascript").

<html>
<head>
<title></title>

<script type="text/javascript">

</script>

</head>
<body>

</body>
</html>

Again, our script tags are within the head section, not the body.

Now we'll make a function. A function does something. It executes a series of instructions. We'll start with an empty shell...

<html>
<head>
<title></title>

<script type="text/javascript">

function ()
{
}

</script>

</head>
<body>

</body>
</html>

We'll name our function HelloWorld. We'll add that, and an alert box that say's "Hello World!"...

<html>
<head>
<title></title>

<script type="text/javascript">

function HelloWorld()
{
   alert ("Hello World!");
}

</script>

</head>
<body>

</body>
</html>

Notice how the function is structured. The word function declaring that it is in fact, a function. The function name - HelloWorld. The parentheses ( ), these have a use that we'll get into later, and the curly brackets - { } that contain the set of instructions.

So, that's it for the function in the head tags. It's just sitting there waiting for something to call it. How about we make it execute when we click on a link? Sounds good to me. Here's a generic link that points nowhere for now...

<html>
<head>
<title></title>

<script type="text/javascript">

function HelloWorld()
{
   alert ("Hello World!");
}

</script>

</head>
<body>

<a href="">Hello</a>

</body>
</html>

Make it point to our function...

<html>
<head>
<title></title>

<script type="text/javascript">

function HelloWorld()
{
   alert ("Hello World!");
}

</script>

</head>
<body>

<a href="javascript:HelloWorld()">Hello</a>

</body>
</html>

Now try it.

Well, whaddya know about that? Your first javascript.

Before we go on, there's something else we should make clear. Javascript and Java are two completely different things. What we just did is Javascript, NOT Java. Java is a whole nuther thing. The only real thing the two have in common are the letters J-A-V-A in their name. Long long ago, in a land far away, Netscape made a new scripting language for their browser. They called it LiveScript. About that time, the Java programming language was gaining in popularity so the folks at Netscape renamed their scripting language to JavaScript to catch the Java wave. The two have been confused ever since. To add to the confusion, Microsoft saw that this scripting thing was pretty cool so they decided to incorporate it into their browser too. Except they call their flavor of javascript Jscript. (Gee, what a clever bunch.)

Now, to further add to the confusion, not only are there differences between Netscape's javascript and Microsoft's Jscript, but because this scripting is an evolving technology, there can be even further differences between scripting support depending on what version of browser you're using... oh goodie. Well, here's the good news... most of the javascript you'll get into is simple basic stuff that is easily handled by the majority of modern browsers. And ALL of the scripting we'll touch on in this tutorial is easily handled by all the major browsers.

And one more thing since I'm thinking about it... and it's VERY important...

JAVASCRIPT IS CASE-SENSITIVE

The function HelloWorld is not the same as helloworld. Be very careful about this. Case related errors can be frustrating because you get an error that says that MyVariable doesn't exist when there it is plain as day - myVariable. Understand?

<< BACK NEXT >>
PageTutor.com - 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
Google Groups (Advanced Search)
Print version of this tutorial available - Get the PageTutor book & CD