Welcome to the world of JavaScript....

This tutorial is intended for those who have had some prior programming or scripting language experience. It's beyond both the scope and space limitations of this site to require all of the basic fundamentals of "javascript" programming, so if you do not at least have some familiarity with HTML you may find yourself in over your head. Even if you are adept at HTML you will find "javascript" a much different experience, but with some persistence you will be able to catch on.

Before we start any actual scripting, there are a few fundamental things you really need to know. First of all, "javascript" is basically different than HTML, even though "javascript" was designed primarily for web pages and has to have an HTML page to operate with. Javascript, unlike HTML, is case-sensitive. This means that if you use the "javascript" term 'onClick' for instance, you can not use 'On click', 'ONCLICK', or any other form of the word; it has to be written as onClick. It doesn't usually matter whether you use upper or lower case in HTML but it does matter in "javascript". The importance of adherence to detail can't be over-stressed if you want to save yourself a myriad of headaches.

Javascript is not Java. Javascript was origionally developed by Netscape, while Java is a product of Sun Microsystems. Both JavaScript and Java are Object Oriented Programming languages, commonly referred to as OOP. Javascript is a shortened or simplified variation of Java, but there the similarity ends. Java can be used to make stand-alone executable programs, while "javascript" needs HTML and a browser that supports or interprets "javascript" before it can do anything.

Text format is important in "javascript" also. In HTML you can break lines just about anywhere you want to and the output will look okay. Not so in "javascript"; the way the text is laid out is as important as the commands you use. There are rules as to when you can break a line of text and start a new one, and if these rules are not adhered to your script simply won't work and you will get an error message. Even an extra space between letters, when it should not be there, will cause an error. To sum it all up, it behooves the would-be "javascript" programmer to develop an eagle eye and a meticulous attention to detail.

Well, being forewarned and hopefully forearmed, if you're ready to go, let's get on with our first example.

<script language=""javascript"">
<!-- Hide

document.write("Hello, World!")

//End Hiding-->
</script>

Here's what the script does:

So you're not impressed, eh? Well, we'll get to the impressive things later. First we have to understand the mechanics of what the script did. Every "javascript" starts with this term:

<script language="JavaScript">

This tells the browser that it can expect scripting code, and that the code is "javascript". You may occasionally run across script examples that simply use the term <script>. Some lazy programmers write it this way because the default scripting language for IE and Netscape is JavaScript, and it will work. However, it's important to stress the practice of developing good programming habits right off the bat, and simply writing <script> is not a good habit. Here's why:

There is also more than one scripting language, and the browser has to be told whether the script is anything other than "javascript". Some others are VBScript and JScript, both of which are pretty much IE specific. You should also know that this script tag is not "javascript"; it's actually HTML code that tells the browser what to expect. Whenever you find the HTML brackets < and > you can be pretty certain that it's HTML code working along with the "javascript".

The next line in our example script, <!-- Hide, does just what it implies. But hides what, you ask? Well, there are still quite a few browsers out there in cyberland that don't support "javascript", and this comment line keeps them from printing the script code all over the page, which can be pretty messy. This is also an HTML term, as you probably know, which is used to hide comments so they are not viewed in the user's window. Browsers capable of handling "javascript" will know that it is used for the purpose mentioned above and will go on to execute the script.

Now we come to the "javascript" stuff. This line:

document.write("Hello, World!")

... says to the browser, "Take this page and write 'Hello World!' on it." Do you remember when we mentioned Object Oriented Programming earlier? Well, the word 'document' is the object in this line of code. The period between this word and 'write' is one of those little details I was telling you about. It is not there for the end of a sentence, it is actually a piece of "javascript" code that separates the object from the method, the method being the word 'write'. In other words, the code declares the object (document) and the method of the object (write). Next we come to the term ("Hello, World!"), which is called the method's 'instance'. Do you see the hierarchal pattern? Think of it as if the object is the boss, the method works under the object, and the instance works under the method. Also, the parentheses are necessary for the instance of a method. The quote marks are also necessary around the text to be printed... remember, this is "javascript" now, and not HTML.

You're losing me!!

Don't worry if you can't digest all this right now- it will begin to rub off and soak in as we go along. Just try to remember the sequence of the thing: Object.Method(Instance). Another detail here: this line of code must be all on the same line. One of the most common ways that errors are generated is the breaking of lines that should not be broken. This can happen if you have your text editor set to wordwrap, or with narrow margins. Always keep your text editor set so you can write right off the right side as far as you need to.

All the details mentioned above are not designed just to give you a headache; they are necessary and have to be in a particular form so that the part of the browser that handles the "javascript" code can understand it correctly. It's actually a form of short-hand. For instance, you only have to put a dot between the object and the method in order for the browser to tell when the object ends and the method begins; you don't have to write a separate command. And the order of the terms is what the browser expects them to be.

Okay. I'm sure you know that //End Hiding--> means that this is the end of the comment and that </script> means that this is the end of the script. But keep in mind that this last term is as important as the first line of the script; the browser has to know that the script is ended. Now, let's add a little more to our script.

<script language=""javascript"">
<!-- Hide

document.write("<font color='green' size='5'>Hello, World!</font>")

//End Hiding-->
</script>

Here's what you get:

Yes, you're right- we didn't add any more "javascript", we just added some HTML tags. This is a better example of how "javascript" and HTML can work together. Actually, all the "javascript" does in this script is print the words, modified by the HTML, to the page. But what I want you to notice is the use of the single quotes around the word green and the number 5. Whenever you have to make a quote inside of another set of quotes, you must use the single quotes. If you don't, you'll get an error. Make a mental note of this.

Well, that's about it for our first lesson; if all that didn't discourage you, then reward yourself with a cup of coffee or whatever you drink, and then let's go on to lesson 2 and learn a little about events and event handlers. All set?