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 and comment tags within the HEAD section. These do a few things. The script tags tell the browser that some sort of scripting is contained between (in this case "javascript"). It also contains HTML comments so older or non-JS capable browsers will ignore the scripting contained within. The last thing is a javascript comment (//) which we will learn about later.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

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 language="javascript"></SCRIPT>

</HEAD>
<BODY>

</BODY>
</HTML>

Now we'll add the function name and an alert box that say's "Hello World!"...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></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 language="javascript"></SCRIPT>

</HEAD>
<BODY>

<A HREF="">Hello</A>

</BODY>
</HTML>

Make it point to the function...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"></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, 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 are 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. Again...

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?

Next>>

Lesson

Intro