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 == // returns true; 39 != // returns true; 39 > 28 // returns true; 39 >= 39 // returns true; 39 <= 36 // returns false;

Comparison Operators (15 == 10+5) && (33 == ); - And Logic - Returns false (15 == 10+5) || (33 = ); - 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 case statement3; 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 Fields Links window.document.myForm.visitor.value Document.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.