JavaScript Basics

JavaScript Terminology. JavaScript programming uses specialized terminology.

• Dot Syntax is used to combine terms, for example the object and property window.status;, or the object and method document.write("Hello World");.
• Objects refers to windows, documents, images,  tables, forms, buttons or links, etc. Because you can have more than one of an object type, objects should be named. Objects have properties that act as modifiers. The things that objects can do are called methods. Objects can be thought of as things and methods as actions.
• Properties are object attributes. Background color as a document property is expressed by document.bgcolor. Object's properties are defined by using dot syntax: the object's name, a period, and the property name.
• Methods are actions applied to particular objects, that is, things that they can do. For example, document.open(index.htm) or document.write("text here"), where open() and write() are methods and document is an object.
• Events associate an object with an action. JavaScript uses commands called event handlers to program events. Event handlers place the string "on" before the event. For example, the onMouseover event handler allows the page user to change an image, and the onSubmit event handler can send a form. Page user actions typically trigger events. For example onClick="javascript:formHandler()" calls a JavaScript function when the user clicks a button or other element.
• Functions are statements that performs tasks. JavaScript has built-in functions and you can write your own. A function is a series of commands that will perform a task or calculate a value. Every function must be named. Functions can specify parameters, the values and commands that run when the function is used. A written function can serve to repeat the same task by calling up the function rather that rewriting the code for each instance of use. A pair of curly brackets {} surrounds all statements in a function.
• Values are bits of information. Values types are Number, String, Boolean, Null, Object, and Function. A string value is a string of characters enclosed in quotes. A Boolean is either true or false. An Object value type is any value associated with an object.
• Variables contain values. The var keyword is used to declare variables. Variables use the equal sign to specify their value, such as name="form1". Assignments place a value in a variable and are accomplished using the equal sign. Variables can be numeric, string, Boolean or null. Variables are created by declaration using the var command, such as var date;. Variables can also be created using an initial value state, such as var month = January;, or simply month = January;. Variable names are restricted. They must begin with a letter or an underscore, only letters, numbers or underscores can be used, they cannot contain spaces, and they cannot use JavaScript reserved words. And, of course, they are case sensitive.
• Expressions are commands that assign values to variables. They always use an assignment operator, such as the equals sign. The variable declaration var month = January; is an expression. Statements and commands end with a semicolon.
• Operators are used to handle variables. Arithmetic functions are operators.
• Comparisons evaluate the value of one variable in relation to another variable or a value specified in an expression.

JavaScript Event Handlers. Actions by page users trigger event handler commands in the JavaScript. The program will then perform whatever commands are assigned to the event. Common event handlers are listed in the following table.

Event Handler	Action
onAbort	The user stopped loading a page
onBlur	The user moves from an object
onChange	The user changed an object
onClick	The user mouse-clicked an object
onError	An error occurred in the script
onFocus	The user activates an object
onLoad	The object has been loaded
onMouseover	The cursor has moved over the object
onMouseout	The cursor has moved off the object
onSelect	The user selected the object
onSubmit	The user submitted a form
onUnload	The user leaves the window

<a href="redirect.html" onMouseover="self.status='Your mouse pointer is on a hyperlink for the page "redirect.html".';return true">Test</a>

The next example, added to the body tag, displays an alert window when the page containing the tag opens. The alert contains the message between apostrophes within the parenthesis, which you can customize.  Try it.  Testing, 1, 2, ...

<body text="#000000" bgcolor="#FCE072" onLoad="alert('WELCOME. This page is just for testing the JavaScript  SORRY.')">

JavaScript Examples. In the following examples I do not include the <script>and </script> tags, HTML tags or comment lines. These examples are employed using the methods described above. The first example is a method for displaying text in a Web page. The syntax for this method can also be writeIn, a method that attaches a break to each line of text. The writeIn method should be used with preformatted text.

document.write("This is where you place the text that will appear in the Web page.")

The write method also permits use of HTML tags within the parenthesis, as seen below.

document.write("<b>Hello World.</b>")

These two examples explicitly specified the text to be written. You can also include variables you have created. The first two lines below are the portion of the script that creates the variables used in the third line. The plus operator performs the function of combining the elements.

var month = April;
var date = fifteenth;

document.write("Remember, your taxes are due on " + month + date);

Functions. JavaScript operators and expressions can be combined to create functions. For a function to work properly it must be placed in the HTML file before the command that calls it. A function consists of the word "function" followed by a name, parenthesis and an open brace on the first line, then the function statements on the following line and the closing brace. The parenthesis contain all parameters separated by commas. The curly braces (brackets) designate the command block. Event handlers are usually used to call functions. Note how the function formHandler in the GO TO form script below is handled by the form button event onClick. JavaScript function names are case-sensitive. Function names begin with a letter or an underscore and cannot have a whitespace. The JavaScript function syntax follows.

function function_name(value, value){
   JavaScript commands and expressions
 }

Conditional Statements. A conditional statement is a command that runs only under specified conditions. Conditions require operators. Comparison operators compare two elements and return a Boolean expression, either true or false. Logical operators connect two or more Boolean expressions. Here follows the general syntax of a conditional statement that runs if a condition is met.

if (condition){
    JavaScript commands and expressions
 }

This example uses the conditional statement with an else command separating two command blocks, the first of which runs if the condition is met, the other if not.

if (month=="December"){ alert("Happy Holidays."); } else {
alert("Greetings.");
}

This conditional statement is a command to break a framed document out of the frame to display in its own window.

if (top.frames.length > 0) {
   top.location=self.location;
 }

Forms and JavaScripts. Handling a form is a common JavaScript task. A JavaScripted form relies on one or more event handlers, such as onClick or onSubmit, that trigger a JavaScript action when the user performs a command, like clicking a submit button. Form control objects can include the usual graphical interface elements, like a text entry field, buttons, radio buttons, pop-up menus or check boxes.

The next example is a simple GO TO drop-down menu of hyperlinks.  Place the first section of code in the <head> section.

<script language="JavaScript"> <!-- Hiding
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
// --> </script>

Place this script portion in the <body> section where the form is located. The name of this form must match the name used in the script above in the formHandler function. You can customize the links and their labels, and the number of links.

<form name="form">
<select name="site" size=1>
<option value="authoring.html">Building a Web page</option>
<option value="elements.html">Elements of Web Design </option>
<option value="frames/creating_frames.html">Creating Frames </option>
<option value="ftp.html">File Transfer Protocol</option>
<option value="javascript.html">JavaScript </option>
<option value="multimedia.html">Multimedia </option>
</select>
<input type=button value="Go!"
onClick="javascript:formHandler()">
</form>

For your cutting and pasting convenience, the product of the scripted form is presented in a separate file.

Useful JavaScript Links.

• JavaScript City is a guide to free JavaScripts, tutorials, and resources on the web.
• The JavaScript Source is a resource with free "cut and paste" JavaScript.
• JavaScript.com Developer's Site
• Builder.com.
• Script Examples for JavaScript for the World Wide Web: Visual QuickStart Guide, 3rd Edition.
• Web Teacher's JavaScript Tutorial will take you step by step.
• JavaScript 4 U Web Ring Sites List.