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

Networking Platform 1 Extensible - CSE 330 – Creative Programming and Rapid Prototyping

1

Module 5 •  JavaScript

–  Scrip:ng language to add interac:vity to HTML pages –  Java and JavaScript are completely different languages

•  AJAX

–  Asynchronous JavaScript and XML (AJAX) –  Allows for retrieval of data from web servers in the background

•  jQuery

–  JavaScript library

Networking Platform 2 Extensible - CSE 330 – Creative Programming and Rapid Prototyping



2

JavaScript •  Popular scripEng language widely supported in browsers to add interacEon –  Pop-Up Windows –  User Input Forms –  Calcula:ons –  Special Effects

•  ImplementaEon of the ECMAScript language

Networking Platform 3 Extensible - CSE 330 – Creative Programming and Rapid Prototyping

3

JavaScript •  JavaScript is a prototyped-based scripEng language –  Dynamic, weakly typed

•  Interpreted language –  You do not compile it

•  Uses prototypes instead of classes for inheritance

Networking Platform 4 Extensible - CSE 330 – Creative Programming and Rapid Prototyping

4

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 }

•  FuncEons are also objects

Networking Platform 6 Extensible - CSE 330 – Creative Programming and Rapid Prototyping

6

WriEng a JavaScript Program •  JavaScript programs can either be placed –  directly into the HTML file or –  can be saved in external files

•  You can place JavaScript anywhere within the HTML file: within –  the tags or –  the tags

Networking Platform 7 Extensible - CSE 330 – Creative Programming and Rapid Prototyping

7

Using the Tag –  SRC property is required only if you place your program in a separate file

script commands and comments •  Older versions of HTML (before 5) used a slightly different format –  –  This is no longer necessary, simply use

– Creative Extensible Networking Platform 8 - CSE 330 Programming and Rapid Prototyping

8

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);



Extensible Networking Platform 12 - CSE 330 – Creative Programming and Rapid Prototyping

12

JavaScript AddiEonal InformaEon •  The CSE 330 Wiki provides a great intro into JavaScript along with some excellent links to more comprehensive tutorials

•  AddiEonal JS tutorials –  hgp://www.quirksmode.org/js/contents.html –  hgps://docs.webplakorm.org/wiki/Meta:javascript/ tutorials

Extensible Networking Platform 13 - CSE 330 – Creative Programming and Rapid Prototyping

13

JavaScript Debugging •  JSHint is a great resources to help debug your code –  hgp://www.jshint.com/

•  Tools for browsers also exist –  Firefox •  Firebug extension

–  Chrome and Safari •  Webkit Inspector comes bundled with the browser

Extensible Networking Platform 14 - CSE 330 – Creative Programming and Rapid Prototyping

14

JavaScript Examples

hgp://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/

Extensible Networking Platform 15 - CSE 330 – Creative Programming and Rapid Prototyping

15

AJAX •  Stands for “Asynchronous JavaScript and XML” •  Development technique for creaEng interacEve web applicaEons •  Not a new Technology but more of a Pa-ern

Extensible Networking Platform 16 - CSE 330 – Creative Programming and Rapid Prototyping

16

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)

Extensible Networking Platform 19 - CSE 330 – Creative Programming and Rapid Prototyping

19

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

Extensible Networking Platform 20 - CSE 330 – Creative Programming and Rapid Prototyping

20

DOM

Extensible Networking Platform 21 - CSE 330 – Creative Programming and Rapid Prototyping

21

Accessing the DOM Example

hgp://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/

Extensible Networking Platform 22 - CSE 330 – Creative Programming and Rapid Prototyping

22

Web ApplicaEon and AJAX

Extensible Networking Platform 23 - CSE 330 – Creative Programming and Rapid Prototyping

23

Request Processing

Extensible Networking Platform 24 - CSE 330 – Creative Programming and Rapid Prototyping

24

Asynchronous processing - XMLHgpRequest •  Allows to execute an HTTP request in background •  Callbacks kick back into Javascript Code •  Supported in all standard browsers

Extensible Networking Platform 25 - CSE 330 – Creative Programming and Rapid Prototyping

25

Using XMLHgpRequest •  First you must create the XMLHgpRequest Object in JavaScript •  Example –  var xmlHgp = new XMLHgpRequest();

•  Older browsers might require different syntax –  For example (Internet Explorer versions