Module 5 – Django and Git Django Web Applica\on Framework

Module 5 – JavaScript, AJAX, and jQuery • Module 5 Contains 2 components – Both the Individual and Group portion are due on Monday October 30th – Start early on this module – One of the most time consuming modules in the course

• Read the WIKI before starting along with a few JavaScript and jQuery tutorials

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

1

Module 5 • JavaScript

– Scripting language to add interactivity 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 scripting language widely supported in browsers to add interaction – – – –

Pop-Up Windows User Input Forms Calculations Special Effects

• Implementation of the ECMAScript language

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

3

JavaScript • JavaScript is a prototyped-based scripting 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 function with function function foo() { //Some JS code here }

• Functions are also objects

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

6

Writing 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

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

8

JavaScript Example (part 1) My JavaScript Example function 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 Additional Information • The CSE 330 Wiki provides a great intro into JavaScript along with some excellent links to more comprehensive tutorials

• Additional JS tutorials – http://www.quirksmode.org/js/contents.html – https://docs.webplatform.org/wiki/Meta:javascript/t utorials

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

13

JavaScript Debugging • JSHint is a great resources to help debug your code – http://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 http://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 creating interactive web applications • Not a new Technology but more of a Pattern

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

16

Motivation for AJAX • Web pages always RELOAD and never get UPDATED • Users wait for the entire page to load even if a single piece of data is needed • Single request/response restrictions

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

17

Components – HTML (or XHTML) and CSS • Presenting information

– Document Object Model • Dynamic display and interaction with the information

– XMLHttpRequest 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): platform- and language-independent way to represent XML – Adopts a tree-based representation – W3C standard, supported by modern browsers

• JavaScript uses DOM to manipulate content – To process user events – To process server responses (via XMLHttpRequest)

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 https://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/

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

22

Web Application 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 - XMLHttpRequest • 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 XMLHttpRequest • First you must create the XMLHttpRequest Object in JavaScript • Example – var xmlHttp = new XMLHttpRequest();

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