Sponsored byUpsilon Pi EpsilonThe Computer Science Honors SocietyJavascript

JavaScript: a brief historyDeveloped by Netscape Communications Corporation as Mocha, then LiveScript, and finally renamed to JavaScript. JavaScript was first introduced in Netscape version 2.0B3 in 1995. In Internet Explorer, JavaScript is implemented as JScript, which is not exactly the same.The latest version of the language is JavaScript 1.7.ECMAScript is a standardized version of JavaScript.

JavaScript: the basics

JavaScript code goes here

Code Sits Between tags C/Java style syntax, for the most part LOOSELY TYPED - more on this later Can reside in external file also:

JavaScript: the basics

the title of the document JavaScript code

HTML Code/Tags/Content whatever

JavaScript: the basicsEvent Handlers (most basic html interaction tool)onclick, onmouseover, onmouseout, onload, ondoubleclick, etc.Written in the HTML as an attribute

JavaScript: Hello World

JavaScript-Hello-World

function greetings(sender) {alert (Hello World!); }

JavaScript: Challenge!Create a web page with a header that says Hello World....When the user roles over the header, change the text to read Hello JavaScript!.Use an external JavaScript file.Hint: Use Google to look up onmouseoverHint: Event handlers can pass objects -- think of the header as an object itself (a DOM object)Hint: DOM Objects have an innerHTML propertyBonus: Change the font and background color when you role over the textBe Creative! Add whatever you want, well help.

JavaScript: TypesNumberStringBooleanObjectFunctionArrayDateRegExpNullUndefined

Variables can hold any type!

JavaScript: NumbersAll numbers are 64 bit floating point (IEEE)Familiar parseInt(123) syntax to get a number from a stringMath object contains advanced math functionsNaN is returned in any operation that does not result in a valid numberSpecial Infinity and -Infinity values

JavaScript: StringsReally just Objects (like almost everything)Sequences of Unicode charactersBuilt-in length, charAt(), toUpperCase() and other propertiesstring literals are also present

JavaScript: Other TypesBools -- just what you thinkRegExp -- Regular Expression ObjectsNull -- deliberate no value for an arbitrary variable Undefined -- variable that has not even been initialized

JavaScript: OperatorsSame as C/C++/Java: ++, +=, +, -, /, *, string, bitwise and/or/not, &&, ||, !, etc...Boolean expressions == performs type coercion0 == False .... dog == True=== is literal comparsionFalse === False .... dog !== TrueIf, Else, For, While, DoWhile, Switch -- same

JavaScript: ObjectsIn JavaScript, all objects are collections of name value pairs.C++ Hash Table, PHP Associative Array, Cocoa/Python Dictionary Name is a JavaScript stringValue is any JavaScript type, including other Objects

JavaScript: Objectsvar obj= new Object();var Obj { };Createobj.name= John;obj[name]= John;Add PropertiesObject Literal Syntaxvar email {message: Hi Pamela!,details: {to: Pamela,from: Ross}}

JavaScript: Arraysvar a= new Array();a[0]= red;a[1]= blue;var a= {red, blue};Create Full-fledged JavaScript Objects themselves Built-in Length property = highest index + 1 Other Built-in methods:a.toString(), a.toLocaleString(), a.concat(item, ..), a.join(sep),a.pop(), a.push(item, ..), a.reverse(), a.shift(), a.slice(start, end),a.sort(cmpfn), a.splice(start, delcount, [item]..), a.unshift([item]..)

JavaScript: FunctionsVery flexible system -- functions are all JavaScript ObjectsCan take any number of named parametersParameters not required to be passed inMore parameters can be passed than asked for in your functionReturn either an explicit value, or undefined

JavaScript: Functionsfunction add(x, y) { var total = x + y; return total;}> add()NaN> add(2, 3)5

JavaScript: Functionsfunction avg() { var sum = 0; for (var i=0, j=arguments.length; i avg(2, 3, 4, 5)3.5> avg.apply(null, [2, 3, 4, 5])3.5

JavaScript: FunctionsYou can assign functions to variables, and do all kinds of crazy things with scope:Example, when you say in HTML:

Its just like saying bar.onclick= foo in JS

JavaScript: ClassesJavaScript Classes are just functions that initialize new objects (think constructors)this refers to the current objectnew is similar to C++ -- call it on constructor functionsfunction Person(first, last) { this.first = first; this.last = last; this.fullName = function() { return this.first + ' ' + this.last; } this.fullNameReversed = function() { return this.last + ', ' + this.first; }}var ross = new Person("Ross", "Boucher");

JavaScript: ClassesPrevious method duplicates member functions for every instanceAlternate approach to creating a class:function personFullName() { return this.first + ' ' + this.last;}function personFullNameReversed() { return this.last + ', ' + this.first;}function Person(first, last) { this.first = first; this.last = last; this.fullName = personFullName; this.fullNameReversed = personFullNameReversed;}

JavaScript: ClassesStill another approach, using Prototype:function Person(first, last) { this.first = first; this.last = last;}

Person.prototype.fullName = function() { return this.first + ' ' + this.last;}

Person.prototype.fullNameReversed = function() { return this.last + ', ' + this.first;}

var ross= new Person(Ross, Boucher);

JavaScript: PrototypePrototypes are a set of properties shared across all objects of the same typeIn this case, all Person objects will have the two methods assigned to Person.prototypeForms part of a lookup chainCan add to the prototype of built-in objectsNot to be confused with the library of the same name

JavaScript: DOMdocument is a built in object for interacting with the DOMdocument.getElementById(string) allows you to get a reference to a specific node in your documentdocument.createElement(tag) allows you to create new elementsdocument.createNode(text) allows you to create new text nodes

JavaScript: DOMDocuments are made up entirely of nodesElement Nodes: every tag in your HTML is an elementHave children nodes, attributesText Nodes: these contain text, and are children of elements like nodesHave no children or attributesNodes have common methodsnodeType, nodeName, nodeValue

JavaScript: Challenge 2!Wow, that was a lot of material. Lets try applying it!Create a container DIV, and a few floating divs inside (hint: assign these inner divs to a class)Make this look like a few boxes inside a larger box.Add a link or form button to dynamically add new divs inside the container (also floated)Hint: give your container a unique ID so you can access it with document.getElementById(myId);Hint: use an event handler on the buttonHint: google appendChild()Bonus: Apply a different style to added divsBonus++: Apply a different style every time!