JavaScript Primers #1

Use these to jump around or read it all

The Concept
The Script
Script Effect
Deconstructing the Script
What You've Learned
Your Assignment

The Concept

This first script is meant to introduce you to the very basics of creating and placing a JavaScript on your page. During the deconstruction, you'll be given a few do's and don'ts when writing JavaScript.

The concept of this script is to use JavaScript to place text on a Web page. In this case, the text will be red.

Here's the first script:

The Script

<SCRIPT LANGUAGE="javascript">
document.write
("<FONT COLOR='RED'>This Is Red Text</FONT>")
</SCRIPT>

The Script's Effect

Deconstructing the Script

Since this is the first script, it's fairly easy, so allow us to take some time here to discuss JavaScript in general.

What Is Java Script?

First off, it is not Java. It's easy to get confused and think that Java and JavaScript are one in the same. Not so. Java is a programming language developed at Sun Microsystems. JavaScript, on the other hand, was created by the good people at Netscape.

The two are similar in that they are both what are known as Object Orientated Programming (OOP). That means that you build smaller objects that make up the whole. That will make more sense as we go on. The main difference is that Java programming can create fully stand-alone events. A Java "applet" (so-called because it's a small application) may run on a Web page, but is actually a fully contained little program. In addition, Java cannot run as text. It must be "compiled" into what's known as a "machine language" before it can be run.

JavaScript is close to Java in that Netscape sort of pared down Java into an easier set of commands. JavaScript cannot stand alone. It must be running inside of a Web page, and the Web page must be displayed in a browser that understands the JavaScript language, like all Netscape browsers 2.0 and above.

Writing JavaScript

First off, remember that JavaScript is not HTML! I am often asked if one is simply a different version of the other. Nope. However, when writing JavaScript, you follow a lot of rules that are similar to the rules of writing HTML.
First off, the JavaScript goes inside the HTML document. We'll get into placement later. JavaScript is saved as text right along with the HTML document.

The major difference between the two is that HTML is very forgiving in terms of its shape. White space means nothing to HTML. How much space you leave between words or paragraphs doesn't matter. In fact, there's no reason why you couldn't write an HTML document as one long line. It doesn't matter.

The opposite is true in JavaScript. It does have a shape. There are some times when you can break the shape of a script, but not very many. For instance, the second line of the script in this primer looks like this:

document.write
("<FONT COLOR='RED'>This Is Red Text</FONT>")

That's its shape and it must remain in that shape. Let's say you paste this into a text editor with small margins. When you paste it, the margins jump the line down so it now looks like this:

document.write
("<FONT COLOR='RED'>This Is Red Text</FONT>
")

You have altered the form and this script will now throw an error (we'll get into errors and fixing them in the next lesson).

Editing JavaScript

Whether you're editing or writing script, you can not allow margins to get in the way. Always edit your work in a text editor that has no margins. I don't mean margins set to their widest point. I mean NO MARGINS. You should be able to write off of the right side of the text screen for miles. Doing it any other way is going to cause you problems.

Is JavaScript Case Sensitive?

Yes.

Back to the Deconstruction

Let's start at the top. The first line of text looks like this:

<SCRIPT LANGUAGE="JavaScript">

That's HTML code to alert the browser that what immediately follows is going to be a JavaScript script. That seems simple enough. All JavaScripts start with this exact command.

But what about that LANGUAGE="JavaScript" deal? Do you really need that? Yes. There are other types of scripts, VBS and LiveScript for example. Using that LANGUAGE sub-command will keep it all straight in the browser's mind.

Since we're only dealing with three lines of text here, allow me to jump right to the end. This:

</SCRIPT>

...ends every JavaScript. No exceptions. Now, put that on a brain cell. That's the last time those two commands will be discussed. Remember, start with <SCRIPT LANGUAGE="javascript"> and end with </SCRIPT>. Moving forward...

Now we hit the meat of the script:

document.write
("<FONT COLOR='RED'>This Is Red Text</FONT>")

This script is simple enough that you can just about guess what each little bit does, but let's go over it anyway so that we're all speaking with the same common terms.

The script follows this path, the DOCUMENT (the HTML document) is announced. The document will be altered by WRITE-ing something to it. What will be written to the document is inside the parentheses.

Now some terms. The DOCUMENT above is what's known as an "object". The WRITE that follows, separated by a period, is what is known as the object's "method." So, the script is basically saying, take the object (something that already exists) and write something to it.

The text inside of the parentheses is called the method's "instances" or what will be done when the method is acted upon the object. With me so far?

Notice that what is inside of the parentheses is encased in quote marks. In HTML, those quote marks are not required. Here, they are. You must use them.

The text inside the quote marks is simple HTML. You should recognize the text as a FONT command that will turn text red. Notice that the quote marks around the HTML code are single quotes. They have to be. If you use double quotes, then the JavaScript will think it has met the end of the line and you only get part of your text written to the object. And that will throw an error.

Remember: Inside of double quotes... use single quotes.

So, did the JavaScript actually turn the text red? No. The HTML did that for you. All the JavaScript did was write the code to the page. Neat, huh?

What You Have Learned

Your Assignment

Alter the script above so that it will produce two lines of text, one red and one blue. But you must do this by writing more Javascript commands, not by simply adding more HTML to the instance. It will produce this on the page when you run it:

This is red text
This is blue text

Here's a possible answer (this will open a new window )

The Concept
The Script
Script Effect
Deconstructing the Script
What You've Learned
Your Assignment