Objects

JavaScript is a lightweight Object Oriented Programming (OOP) language used exclusively on web pages. JavaScript recognizes a variety of objects relating to the viewer's browser, open windows, frames, and the HTML files loaded in them.

The objects that JavaScript recognizes can contain "child" objects. They can also have Properties that can be changed and Methods that can be used to create dynamic effects.

At the top of the object heirarchy is the "navigator"object. This represents the browser the viewer is using. You can't change much about the "navigator" object, but you can access its properties to detect what browser a specific viewer is using.

Beneath the overall "navigator" object is the "window" object. The "window" object refers to a browser window and has all sorts of neat properties and methods we'll learn about later on. The major "window" methods we've been using in this section are boxes -- alert(), confirm(), and prompt(). Directly beneath the "window" object are frames. We'll go into frames more later, too.

Next in line is the "document" object. This refers to the page (HTML file) loaded in a particular window. It contains all kinds of child objects like images and links that we'll learn how to access later. It also has a variety of Properties and Methods. We've already used the "document.fgColor" and "document.bgColor" properties and used the "document.write()" method.

Events, Functions, and Statements

All programming languages must do two things: 1) detect what the user is doing, and 2) react to the user's actions. This is called "interactivity" when used in the context of web pages.

JavaScript detects what the viewer is doing through a series of "Events" that JavaScript recognizes. Some of the most common events are: "onLoad", "onUnload", "onClick", "onMouseOver", "onMouseOut", "onFocus", and "onBlur". These Events are put in HTML tags just like attributes to pick up on the viewer's actions.

<a href="page2.htm" onMouseOver="myLittleFunction()">

When JavaScript detects that an Event has occurred. It checks to see what it should do. Generally it's directed to a Function. A function is a group of JavaScript statements that will do something in reaction to the Event.

A function is necessary so that the statements it contains will only be activated when a specific Event occurs.

Properties & Methods

JavaScript statements are the part of JavaScript that do the work. Most statements have two parts: 1) Accessing an object followed by a property or method of that object, and 2) changing the property or using the method accessed.

The statement 'document.bgColor="red"' accesses the current document object and then accesses its background color property (bgColor). It then sets this property to the value "red" making the background of the page red.

Properties are charactistics of an object. Methods are things the object can do. Properties are generally set using an equals sign: document.fgColor = "green". Methods have instructions put in parentheses: document.write("Hi There!").

In short, any given object may have any combination of child objects, properties, or methods.

IF/ELSE

The IF/ELSE statement is one of the most powerful and most used statements in JavaScript. It can be divided into two sections: 1) A condition to test, and 2) a set of statements to execute if the condition is true (exists).

if (condition) {statements to execute if "condition" is true}

else {statements to execute if "condition" is false}

In the "condition" part of the IF/ELSE statement, you can test for equality by using two equals signs -- (name == "Ben") or (x == 5). In these cases the condition is true if the variable "name" contains the value "Ben" or if x=5. Remember to use two equals signs when testing for equality. Use a single equals sign when assigning a value.

Other conditions include "not equal" (!=), "less than" (<), and "greater than" (>).

Boxes

The pop up boxes we've used so far are all methods of the "window" object. There are three of these:

1) The Alert Box. Coded "alert()" or "window.alert()". This is just a box that presents a message and a single "OK" button to clear the box and continue.

2) The Confirm Box. Coded "confirm()" or "window.confirm()". This box contains a message and two buttons -- "OK" and "Cancel". These buttons return different Boolean values. "OK" returns the Boolean true and "Cancel" returns the Boolean false.

3) The Prompt Box. Coded "prompt()" or "window.prompt()". This box contains a message and a text box that the viewer can type data into. It has an "OK" and "Cancel" button. The "OK" button returns the value of what the viewer typed in. The "Cancel" button returns the null value.

Variables

The values returned by confirm() and prompt() boxes can be stored in variables that are set equal to the box's code:

var name = prompt("Enter Your Name","Name");

The above would present a prompt() box that asks for the viewer's name. The variable "name" would contain this value if the viewer clicks "OK". If the viewer clicks "Cancel" then name would equal null (name = null).

You should name your variables descriptively so you'll remember what they represent. Variables are always used at least twice. Once to be assigned a value and another time to use that value.

Parameters

Parameters work like a lot like variables. Data put in the parantheses of a function call and sent to a receiveing variable in the function's parentheses.

<html>
<head>

<script language="JavaScript">
function test(name){
alert (name);}
</script>

</head>

<body>
<a href="javascript:test('Billy')">Billy's Link</a>
<a href="javascript:test('George')">Geroge's Link</a>

</body>
</html>

The above code would send the string "Billy" when the text "Billy's Link" is clicked. This would store "Billy" in the receiveing parameter "name". The alert box would pop up displaying the value of "name", which would be "Billy" in this case.

If "George's Link" is clicked, the string "George" would be sent to the receiving parameter "name" and "Gerorge" would be displayed in the alert() box.

The document.write() Method

The "document.write()" method will write literal values, like literal text strings, or display the value of variables.

document.write("My name is " + input_name)

The above would write the literal string "My name is " (including the space at the end of the literal string) followed by the value of the variable "input_name". Plus signs (+) are used to concantontate or "add" literals and variables in most methods like "document.write()" or the messages in boxes.

Make sure you're familiar with the above topics in detail. Practice the exercises in the first six JavaScript lessons and then move on to the First JavaScript Exam.