JavaScript

JavaScript

JavaScript vs. Java • JavaScript and Java are completely different • Java, invented by Sun in 1995, is a complex programming language and platform • JavaScript, invented by Brendan Eich in 1995, is a scripting language. • First used by the Netscape browser • Adopted by ECMA in 1997 • Provides access the the HTML Document Object Model (DOM)

Document Object Model • Platform and language neutral interface • Allows programs and scripts to dynamically access and update: • Content • Structure • Style • of HTML documents

DOM • Represents the document as a forest of Nodes <table> <tbody> <tr> <td>foo</td> <td>bar</td> </tr> <tr> <td>baz</td> <td>qux</td> </tr> </tbody> </table> <table> <tbody> <tr> <tr> <td> <td> <td> <td> foo bar baz qux

DOM Interfaces • DOMException only raised in ‘exceptional’ cases • Document : Node • DocumentType, DOMImplementation, Element • Element createElement(tag) raises DOMException • Text createTextNode(data) • Comment createComment(data) • AttrcreateAttribute(name) raises DOMException • Element getElementById(id) • NodeListgetElementsByTagName(name) • NodeListgetElementsByClassName(name)

DOM Interface • Node • NodeType, parentNode, childNodes • Node insertBefore(newChild, refChild) raises DOMException • Node replaceChild(newChild, oldChild) raises DOMException • Node removeChild(oldChild) raises DOMException • Node appendChild(newChild) raises DOMException • booleanhasChildNodes()

DOM Interface • Element • DOMStringgetAttribute(name) • setAttribute(name, value) • AttrgetAttributeNode(name) • AttrsetAttributeNode(newAttr) • NodeListgetElementsByTagName(name)

JavaScript • Placed inside <script></script> tags • no longer need type=“text/javascript” • <script> tags can be in <head> or <body> • <script src=“filename.js”></script> loads external script file

JavaScript Structure • Statements tell the browser what to do • var x=3; • Should end with ; • Code is a sequence of JavaScript statements • Blocks of code is grouped with {} • JavaScript is case sensitive • myVar != myvar • Uses C++ comments // and /* */

JavaScript Types • Strings • varfname=‘Cam’; varlname=“Moore”; • Numbers • var x=3; var y=2.1; • Boolean • true, false • Arrays • var foo=Array(); var bar=[‘a’, ‘b’, 3]; • Objects • var person={fname:”John”, lname:”Doe”, id=3}

JavaScript Functions • Functions use the ‘function’ keyword • function myFunction(name, job) { alert(“Welcome “ + name + “, the “ + job);var x=5; return x;}

JavaScript Operators • Arithmetic: • +, -, *, /, %, ++, -- • Assignment: • =, +=, -=, *=, /=, %= • Comparison: • ==, ===, !=, >, <, >=, <= • Logical: • &&, ||, ! • Condition: • x=(condition)?value1:value2;

Condition Statements • if(condition){…} • if(condition){…}else{…} • if(condition){…}else if(condition2){…}else{…} • switch(n){case 1:…break;…;default:…}

Loops • for(init; condition; increment) {…} • Classic for loop • for(x in person) {…} • Loops over all properties in person • while(condition){…} • Classic while loop • do{…}while(condition); • Classic do/while loop

JavaScript Labels • Similar to goto statements (EVIL) • label: • … • break label; • … • continue label;

JavaScript

JavaScript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

Javascript

JavaScript

JAVASCRIPT

JAVASCRIPT

JavaScript