Module 5 – JavaScript, AJAX, and jQuery • Module 5 Contains 2 components – Due on Monday March 20th – Start early on this module – One of the most :me consuming modules in the course
• Read the WIKI before starEng along with a few JavaScript and jQuery tutorials
JavaScript • Popular scripEng language widely supported in browsers to add interacEon – Pop-Up Windows – User Input Forms – Calcula:ons – Special Effects
Is JavaScript like Java? • Java and JavaScript are similar like Car and Carpet are similar
• Two completely different languages with different concepts – Java is compiled, JavaScript is interpreted – Java is object-oriented, JavaScript is prototyped based – Java requires strict typing, JavaScript allows for dynamic typing Networking Platform 5 Extensible - CSE 330 – Creative Programming and Rapid Prototyping
5
JavaScript Basics • Declare a variable with var var foo = “JS is fun”;
• Variables are objects • Define a funcEon with funcEon func:on foo() { //Some JS code here }
JavaScript Example (part 1) My JavaScript Example func:on MsgBox(textstring) { alert(textstring); } Networking Platform 9 Extensible - CSE 330 – Creative Programming and Rapid Prototyping
9
JavaScript Example (part 2) Networking Platform 11Extensible - CSE 330 – Creative Programming and Rapid Prototyping
11
JavaScript Event Listeners • We can control events in a more granular way using Event Listeners • Event Listeners allow for custom behavior for every element document.getElementById("hello").addEventListener("click",MsgBox, false);
JavaScript AddiEonal InformaEon • The CSE 330 Wiki provides a great intro into JavaScript along with some excellent links to more comprehensive tutorials
AJAX • Stands for “Asynchronous JavaScript and XML” • Development technique for creaEng interacEve web applicaEons • Not a new Technology but more of a Pa-ern
MoEvaEon for AJAX • Web pages always RELOAD and never get UPDATED • Users wait for the enEre page to load even if a single piece of data is needed • Single request/response restricEons Extensible Networking Platform 17 - CSE 330 – Creative Programming and Rapid Prototyping
17
Components – HTML (or XHTML) and CSS • Presen:ng informa:on
– Document Object Model • Dynamic display and interac:on with the informa:on
– XMLHgpRequest object • Retrieving data ASYNCHRONOUSLY from the web server.
– Javascript • Binding everything together Extensible Networking Platform 18 - CSE 330 – Creative Programming and Rapid Prototyping
18
The DOM • Document Object Model (DOM): plalorm- and language-independent way to represent XML – Adopts a tree-based representa:on – W3C standard, supported by modern browsers
• JavaScript uses DOM to manipulate content – To process user events – To process server responses (via XMLHgpRequest)
The DOM • Unlike other programming languages, JavaScript understands HTML and can directly access it • JavaScript uses the HTML Document Object Model to manipulate HTML • The DOM is a hierarchy of HTML things • Use the DOM to build an “address” to refer to HTML elements in a web page • Levels of the DOM are dot-separated in the syntax
Asynchronous processing - XMLHgpRequest • Allows to execute an HTTP request in background • Callbacks kick back into Javascript Code • Supported in all standard browsers