Introduction to JavaScript: Two Parts to Scripting

There are Two Parts to Scripting:

Accessing an Object or an Object's Property using the proper syntax.
Doing something with that Object or Property.

SCRIPTING: PART ONE

The JavaScript Object Model
Before you can do something to an object, you need to know how to access an object or its properties using correct syntax. Just as an HTML form tag contains an input tag, many objects "contain" other objects. This requires us to follow the correct path to the desired object. JavaScript Object Model

The Dot Syntax
To demonstrate JavaScript syntax, we'll use some familiar HTML syntax. Note: the following table objects and properties are not actual built-in JavaScript objects and properties.
table.tr.td

If we wanted to access the backgroundColor property of a table, we'd append the word "table" with a period, followed by the word "backgroundColor": table.backgroundColor

If we wanted to access the backgroundColor property of a td, we'd first have follow the path to the make-believe td object, then append it with a period, followed by the make-believe backgroundColor property: table.tr.td.backgroundColor
Just as you must declare your table tag before your tr tag before your td tag when coding an HTML table, you need to start with the highest object in the JavaScript Object Model in order to access other objects, or "things" contained in an HTML page. That object is usually the document object because it contains all the page's objects such as forms and images.

Referring to Objects
Since HTML elements are usually duplicated throughout a single page, generic names used to refer to a certain type of element object leaves the question, "which one?" Naming an html element via the html name attribute is one way to refer directly to a specific element object. In some cases where a generic reference can be used, a number representing an element's location within the document's flow is used with the generic reference in notation known as "array notation". We'll start with references to names assigned via the html name attribute.

To gain access to a form object, the actual JavaScript syntax is:
document.nameOfYourForm

Where nameOfYourForm is the value you assign to the HTML attribute, "name":
<form name="nameOfYourForm">

To gain access to a form's element, the syntax is:
document.nameOfYourForm.nameOfYourFormElement

Where nameOfYourFormElement is the value you assign to the HTML attribute, "name":
<input type="text" name="nameOfYourFormElement">

To gain access to an image on a page, the JavaScript syntax is:
document.imageName

To gain access to the src property of an image, the JavaScript syntax is:
document.imageName.src

When it comes to naming your scriptable elements, the names can be almost anything you wish. I often give objects strange names to signify that the name is not official.

Aside from beginning names with numbers, dashes or using reserved words, the only restriction is that you can only use a name once for similar objects on a single page. In other words, don't give form elements appearing within a single set of opening and closing form tags the same name, and don't give two forms contained within a single page the same name.

Just as all of you have different names, your objects must have different names. For instance, if I said, "Student, come here please", and you all behaved like mindless objects, we'd have chaos as you all tried to come forward. If you give similar objects the same name, your browser will probably crash when you reference that name in a script as they all come forward at once.

Arrays
The other way to access certain objects is by their order number in an array. Think of an array as a line of people in a department of licensing office. They are all there for one reason, so they are related by purpose. Each person in the line is assigned a number and when that number is called, the person holding it comes forward. Forms and form elements are arrays, so they can be referenced by the order they appear on the page, and form elements as they appear within a single set of opening and closing form tags. Since JavaScript begins counting at zero, the first form on a page can referenced like this:
document.forms[0]

The first form element in the first form on a page would be referenced like this:
document.forms[0].elements[0]

Naming your objects may be a bit easier than using arrays if you are new to programming, but arrays will be covered in depth in later lessons. Experienced programmers can skip ahead to the Looping Through the Forms and Elements Array lesson for more advanced information.

SCRIPTING: PART TWO
Now lets talk about the second part of scripting; doing something to an object or its properties. You can manipulate an object by changing its value or by running a method on it. We'll start with changing an object or property's value.

Changing a value is usually as simple as following the path to the object or property, then using an equals sign followed by an appropriate (quoted) value. To change the background color property of a document, the syntax is:
document.bgColor="#ff6699"

To change the value of a form's text input, the syntax is:
document.formName.textName.value="hi there!"

To change the value of the source property of an image, the syntax is:
document.imageName.src="otherImage.gif"

Methods
JavaScript has many built-in methods. For instance, the document object has a handy little method called, "write()". Notice the parentheses that follow the word write. This is your clue that you're looking at an object method. To write content to a page using JavaScript, the syntax is:
document.write().

When working with methods, you'll often have to answer a question. In this case, we'd have to tell the script what to write. Answers to method questions are known as parameters or arguments. To write the sentence, "Hello world!" to a page, the syntax is:
document.write("Hello world!")
Where "Hello world!" is the write method's parameter.

One method I like to use with forms is focus(). This method places the cursor within a text input or textarea, which I think is a nice touch when you want your user to enter data in a form field. Basically it saves them the steps of using their mouse to click inside the field. The syntax is:
document.formName.textName.focus()