HTML 4 Rookies Home HTML 4 Test Lab HTML 4 Rookies Images HTML 4 Rookies Forum HTML 4 Rookies Midis

What's This Javascript Stuff?

You won't be building web pages long before you start to hear about javascript. You've no doubt stumbled across pages that use it. If you've ever been to one of those pages with those annoying alert boxes that pop up with silly messages, bought a book at Amazon, or used the Color Wizard or HTML Test Lab here at ROOKIES, you've encountered javascript.

Javascript can be used for the Silly, The esthetic, or the serious.

The bottom line is that javascript will add interactivity and processing power to your page.

This is really important. If you use only HTML, your page is somewhat static. You can use it to give information, or receive information to be sent to you. It serves both those purposes very well.

But with javascript, you can give your page the ability to collect data, process that data, and display the results of those computations on the very same page!

Check out the little adding machine I made. Punch in a couple numbers and hit the ADD Key.

Pretty simple, but what's actually occurring behind the scenes is an incredible thing. This little Number Adder works because it's driven by an actual computer program which is embedded into this webpage. It's a simple program that a chimpanzee could write with a little training, but it's a program nonetheless. The important thing is that when you input those two numbers and press the button, the work is done right there on your computer instead of being sent to mine.

Embedded Instructions

A computer program is nothing more than a very detailed list of instructions. Contrary to popular belief, computers are not very smart, and when we tell them to do something, we have to explain it in detail. Because computers talk in a very strange languge consisting of 1's and 0's, and we don't, communicating these instructions in machine language would be a very complicated thing.

The answer to this dilemna is that we write our instructions in a go-between language which the computer has learned to translate into 1's and 0's. We're kinda happy, the machine's kinda happy, and the end result is that you can type a 5 and a 7 into the box above, hit a button, and learn that the sum is 12.

Now here's the bad news. I'm not going to teach you javascript in this lesson. That would be like trying to teach you algebra in 15 minutes. There are some pretty good tutorials on the web, and I'll point you in their direction, but you really need to buy a book for this. I suggest JavaScript For Dummies by Emily A. Vander Veer. I'm not a huge fan of the Dummies series, but this particular book is excellent.

The good news is that you don't really need to know how to write javascript to use it in your page. If you learn a few essentials, and know how to cut and paste, there are a wealth of scripts available for free on the web. You just have to plug them into your source code.

Embedding Your Code

You can embed javascript anywhere in your document. A common practice is to place the code itself in the head section, and then trigger the code with an Event Handler. (We'll get to Event Handlers in a moment.)

The important thing to remember is that your code will be placed (Nested) between an opening and closing SCRIPT tag.

<SCRIPT LANGUAGE="javascript"> Your javscript here </SCRIPT>

JS Junction...What's Your Function?

A javascript will consist of different things, but FUNCTIONS are usually an important part of the script. Think of a function as a machine which performs work. Remember how I told you that a program was a list of instructions? A Function is a small block of instructions inside your program which execute only when you call their name. Functions have names, and when you call a functions name, it does it's job.

You'll recognize a Function because it begins with the word "function" followed by a name and a set of parenthesis.

function Grizz()

Immediately after the parenthesis, you'll see several lines of code enclosed in a pair of curly braces. These are the commands which the function will execute.

Notice, in the example above, I named my function "Grizz". I did that to demonstrate that I can name my project anything I want.

Now let's suppose that in real life, my household chores were defined in a function. It might look something like this:

function Grizz(){
take out trash;
sweep kitchen floor;
make needed repairs;

Now if real life resembled javascript, my wife would simply call my name, and I would immediately jump to my feet and perform three tasks: I would take out the trash, sweep the kitchen floor, and make any needed repairs. When I accomplished all three tasks, I would settle into my normally inactive state, until she chose to call my name again.

She might like that!

Now let's look at a javascript function:

function ChangeBgColor(){
document.bgColor=pink }

This is a simple function which executes 1 command; It changes the background color of a webpage. Notice it followed the format of:

function NAME(){
commands in curly-braces;

Events...Get A Grip

Why Don't It Work, Grizz?

Pull Down Boxes

Submit And Reset

I Want To Be Whole!

Practice this lesson's HTML in the

Return to
HTML 4 Rookies

Copyright©1998 by Dozier Internet Service