JavaScript Tutorial

HOME

Not Java
Java is a complete programming language created by Sun, which is platform independent. You compile your program into bytecode, which can then be executed on any type of machine, as long as it has a Java virtual machine installed. Java is a full-featured programming language suitable for large application development.
JavaScript is a language developed by Netscape with a similar syntax to Java (i.e. the language looks the same). However, it is much less complete, and is not compiled but interpreted. It is intended to be used for scripting within web pages, and as such is very simple. It consists of a core language and a number of external objects which provide extra functionality such as communications with the current document or whatever.

Embedding JavaScript
JavaScript code is put into an HTML document using the SCRIPT tag. You can put as many scripts into a single document as you like, using multiple SCRIPT tags. A script embedded in HTML with the SCRIPT tag uses the format:

<script language="JavaScript">

document.write("Hello World!");

</script>

The LANGUAGE attribute is optional, but recommended. You may specify that a section of code only be executed by browsers which support a particular version of JavaScript; for instance:

<script language="JavaScript1.2">

Another attribute of the SCRIPT tag, SRC, can be used to include an external file containing JavaScript code rather than code embedded into the HTML:

<script language="JavaScript" src="myfunctions.js">

The external file is simply a text file containing JavaScript code, and whose filename ends with the extension ".js".

Elements of Javascript

Variables
Variables store and retrieve data, also known as "values". A variable can refer to a value which changes or is changed. Variables are referred to by name. JavaScript is case sensitive so letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase). Typically, variable names are chosen to be meaningful regarding the value they hold.

Operators

Comparison
A comparison operator compares its operands and returns a logical value based on whether the comparison is true or not. The operands can be numerical or string values. When used on string values, the comparisons are based on the standard lexicographical (alphabetic) ordering.

Boolean

Boolean operators are typically used to combine multiple comparisons into a conditional expression. For example, you might want to test whether (total==100) AND (Flag=1).

A boolean operator takes two operands, each of which is a true or false value, and returns a true or false result.

String

Strings can be compared using the comparison operators. Additionally, you can concatenate strings using the + operator. "ice" + "cream" yields "icecreamt"

assignment The assignment operator (=) lets you assign a value to a variable. You can assign any value to a variable, including another variable (whose value will be assigned).

Statements

• Statements define the flow of a script, known as "program flow."
• JavaScript statements should be terminated with a semicolon (;).
• A set of statements that is surrounded by braces is called a block.{}

Conditional statements direct program flow in specified directions depending upon the outcomes of specified conditions.

if...else

if the condition evaluates to true then the block of statements1 is executed. Optionally, an else clause specifies a block of statements2 which are executed otherwise. You may omit the else clause if there are no statements which need to be executed if the condition is false.

if (condition)

{ statements1; }

else

{ statements2; }

Loops

for

The for loop repeatedly cycles through a block of statements until a test condition is false. Typically, the number of times a loop is repeated depends on a counter. The JavaScript for syntax incorporates the counter and its increments:

for (initial-statement; test; increment) { statements; }

The initial-statement is executed first, and once only. Commonly, this statement is used to initialize a counter variable. Then the test is applied and if it succeeds then the statements are executed. The increment is applied to the counter variable and then the loop starts again.

Consider a loop which executes 10 times:

for (i=0; i<10; i++) { statements; }

do...while statement executes a block of statements repeatedly until a condition becomes false. Due to its structure, this loop necessarily executes the statement at least once.

do { statements;}

while (condition)

switch

Commonly known as a "case statement," switch matches an expression with a specified case, and executes the statements defined for that case.

switch (expression)

{

case label : statement; break;

case label : statement; break;

... default : statement;

}

or

switch(value)

case A

{ statements;}

case B

{ statements;}

Functions

The function definition is a statement which describes the function: its name, any values (known as "arguments") which it accepts incoming, and the statements of which the function is comprised.

function myfunction(arg1,arg2,etc)

{ statements; }

A function doesn't necessarily require arguments, in which case you need only write out the parenthesis; e.g. funcName(). If you do specify arguments, those arguments will be variables within the function body (the statements which make up the function). The initial values of those variables will be any values passed on by the function call.

It's best to define the functions for a page in the HEAD portion of a document. Since the HEAD is loaded first, this guarantees that functions are loaded before the user has a chance to do anything that might call a function.

Scope

When you assign a new variable to an initial value, you must consider the issue of scope. A variable may be scoped as either global or local. A global variable may be accessed from any JavaScript on the page. A local variable may only be accessed from within the function in which it was assigned. You create a new global variable by simply assigning it a value: newVariable=5; However, if you are coding within a function and you want to create a local variable which only scopes within that function you must declare the new variable using the var statement:

function myFunction()

{ var counter=1; total=0; ...additional statements... }

Objects

An object is a collection of properties (variables) and methods (functions) all classed under a single name. In JavaScript you may create your own objects for storing data or you can use use the many "built-in" objects which allow you to work with, manipulate, and access the Web page and Web browser. This set of pre-existing objects is known as the "Document Object Model". Document Object Model Often referred to as the DOM, this object model is a hierarchy of all objects "built in" to JavaScript.

Events

JavaScript programs are typically event-driven. Events are actions that occur on the Web page, usually as a result of something the user does, although not always. For example, a button click is an event, as is giving focus to a form element; resizing the page is an event, as is submitting a form. It is these events which cause JavaScript programs to spring into action. For example, if you move your mouse over this phrase, a message will pop-up, courtesy of JavaScript. An event, then, is the action which triggers an event handler.

The event handler specifies which JavaScript code to execute. Often, event handlers are placed within the HTML tag which creates the object on which the event acts: For example, a hyperlink is subject to a MouseOver event, meaning that its event handler will be triggered when the mouse passes over the link. Therefore, you place the event handler for a hyperlink's MouseOver inside the A tag:

<a href="" onMouseOver="myfunction();">

Common Events Occurs when...

• click User clicks on form element or link onClick
• change User changes value of text, textarea, or select element onChange
• focus User gives form element input focus onFocus
• blur User removes input focus from form element onBlur
• mouseover User moves mouse pointer over a link or anchor onMouseOver
• mouseout User moves mouse pointer off of link or anchor onMouseOut
• select User selects form element's input field onSelect
• submit User submits a form onSubmit
• resize User resizes the browser window onResize
• load User loads the page in the Navigator onLoad
• unload User exits the page onUnload

HOME TOP