Javascript

What is JavaScript?

• Scripting (interpreted) language designed for the web

• Beware: JavaScript is case sensitive

Why javascript?

• Supported by almost all browsers

• Very popular– Lots of scripts available for download

• Authoring programs such as Micromedia Flash and Director depend upon javascript

• External code libraries (*.js file)– Reuseable code

History

• Originally called LiveScript• Invented by Brendan Eich at Netscape, 1995• Named changed to JavaScript because of Java• Similar to Microsoft’s Jscript• ECMA (European Standards Group)

– Produced ECMAscript– JavaScript and JScript now based on ECMAscript

Objects

• JavaScript is object oriented– Web browser Window– HTML document

• Hierarchy defined by ‘dot syntax’– Car.trunk.sparetire– Window.document.garden

• Refers to the garden image in a document in a window

Instance

• An incarnation of an object– car.trunk.sparetire– ford.trunk.sparetire– gm.trunk.sparetire

Properties

• Instances of objects can have properties– Window.document.bgColor

Values

• Properties have values– ford.color=“green”;

Variables

• Type of variable is determined by the data in it.

• Var defines a global variable

• myNewVariable = 0;– Defines a local variable called myNewVariable

as a numeric value

• var myFavoriteColor = “teal”;Beetle.color = myFavoriteColor;

Arrays

• Collection of data (variable)

• Can hold any type of data

var spiceRack = new Array();

spiceRack[0] = “oregano”;

spiceRack[1] = “salt”;

spiceRack[2] = “pepper”;

Methods

• An action associated with an object

• Methods can take values– ford.slowDown(“fast”);– ford.slowDown(“slow”);

• Methods can be triggered by events

document.write(“Hi there!”);

Assignment Operators

var myAge = 39;myAge += 4;

// is the same as myAge = myAge + 4;myAge -=4;

// is the same as myAge = myAge – 1;myAge *= 4;

// is the same as myAge = myAge * 4;myAge /= 4;

// is the same as myAge = myAge / 4;

Comparison Operators

39 == 30 + 9 // returns true;

39 != 25 + 9 // returns true;

39 > 28 // returns true;

39 >= 39 // returns true;

39 <= 36 // returns false;

Comparison Operators

(15 == 10+5) && (33 == 28 + 3);

- And Logic

- Returns false

(15 == 10+5) || (33 = 28 + 3);

- Or Logic

- Returns true

Conditional Statements (if)

If (Condition){

statement 1;statement 2;

}Else{}

Conditional Statements (switch)

switch (expression) {case label1: //begins first case (action)

statement1;statement2;break;

case label2: //begins second casestatement3;break;

default:statement4;

}

Loop Statements (for)

For (initial value of a counter;

ending value;

increment)

{

statements;

}

Loop Structures (while)

While (condition is true)

{

statements;

}

Loop Structures (Do)

Do

{

statements;

} while (condition is true);

Functions

• Group of JavaScript statements• Invoked by JavaScript statements

function doSomething(parm1, parm2, etc){

var theVisitor = parm1;window.document.write(“Is this OK, “ + theVisitor + “?”);

}

Document Object Model

• Internal map of all objects on a Web Page• Hierarchy

Window Document

Form FieldsLinks

window.document.myForm.visitor.valueDocument.myForm.visitor.value

Events

• Objects encounter events

• Event Handler is the code that responds to an event

Write a JavaScript program that prints out even numbers from 0 to

10

Write a program that loads an array with the months of the year

and them prints them out.