DOM, Jav Ja a v Script a and AJA AJ X A Madalina Croitoru IUT Mont Mon pellier

Size: px

Start display at page:

Download "DOM, Jav Ja a v Script a and AJA AJ X A Madalina Croitoru IUT Mont Mon pellier"

Loren Blake
8 years ago
Views:

1 DOM, JavaScript and AJAX Madalina Croitoru IUT Montpellier

2 JavaScript Initially called LiveScript Implemented in Netscape Navigator Microsoft adapts it in 1996: Jscript European Computer Manufacturers Association (ECMA) standardizes it in 1997

3 JavaScript Interpreted language Host environment: Wb Web navigator, works by integrating ti JavaScript code in the XHTML documents using the <script> tag Stand alone application (Adobe Creative Suite) Part of operating systems (Dashboard Max OS X)

XHTML documents using the <script> tag Stand alone

4 JavaScript in navigators JavaScript gives HTMLdesigners a programming tool JavaScript can put dynamic text into an HTML page JavaScript can react to events JavaScript can read and write HTML elements

put dynamic text into an HTML page JavaScript can

5 Datatypes Number, String, Boolean, Object,Null, Undefined Type conversion on the fly (to find out the type of an expression use typeof) Value: NaN (Not A Number) Variable defined with var, if not any value provided then considered undefined If var is not used then the variable is considered globat (to avoid!)

Number) Variable defined with var, if not any value provided then considered

6 Objects in JavaScript Everything is an object in JavaScript Predefined: Global, Object, Function, Array, String, Boolean, Number, Math, Date Created with new Classes extended (adding methods) done with prototype To know the type of an object use the instanceof operator

Number, Math, Date Created with new Classes extended (adding

7 JavaScript in a browser For instance the access of the global object window: <script type= application/javascript > Var nav = window.navigator.useragent; //browser information </script>

8 Scripts in <head> <html> <head> <script type="text/javascript"> function message() { alert("this alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>

9 Scripts in <body> <html> <head> </head> <body> <script type="text/javascript"> document.write("this message is written by JavaScript"); </script> </body> </html>

10 JavaScript Blocks of Code <script type="text/javascript"> p { document.write("<h1>this isa heading</h1>"); document.write("<p>this is a paragraph.</p>"); document.write("<p>this is another paragraph.</p>"); } </script>

11 JavaScript dynamicity <script type="text/javascript"> //Youwill receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d=new Date(); theday=d.getday(); switch (theday) { case 5: } </script> case 6: case 0: default: document.write("finally Friday"); break; document.write("super Saturday"); break; document.write("sleepy Sunday"); break; document.write("i'm looking forward to this weekend!");

getday(); switch (theday) { case 5: } </script> case 6: case 0: default: document.

12 JavaScript dynamicity events A mouse click ouse cc A web page or an image loading: onload and onunload Mousing over a hot spot on the web page: onmouseover and onmouseout Selecting an input field in an HTML form: onfocus, onblur and onchange Submitting an HTML form: onsubmit A keystroke

page: onmouseover and onmouseout Selecting an input field in an HTML

13 JavaScript dynamicity DOM HTML DOM Properties: x.innerhtml the text value of x x.nodename the name of x x.nodevalue the value of x x.parentnode the parent node of x x.childnodes the child nodes of x x.attributes the attributes nodes of x HTML DOM Methods: x.getelementbyid(id) get the element with a specified id x.getelementsbytagname(name) get all elements with a specified tag name x.appendchild(node) insert a child node to x x.removechild(node) remove a child node from x

attributes the attributes nodes of x HTML DOM Methods: x.getelementbyid(id) get the element with a specified id x.

14 innerhtml Property <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").innerhtml; document.write("<p>the text from the intro paragraph: " + txt + "</p>"); </script> </body> </html>

15 childnodes and nodevalue <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt=document.getelementbyid("intro").childnodes[0].nodevalue; document.write("<p>the text from the intro paragraph: " + txt + "</p>"); </script> </body> </html>

getelementbyid("intro").childnodes[0].nodevalue; document.

16 HTML, JavaScript et PHP 1. Le client utilise JavaScript pour prétraitements 2. Le client demande une page PHP 3. Le serveur exécute les «processing instructions» PHP et construit la réponse en HTML Utilisateur Poste client 4. Réponse contenant du HTML et JavaScript qui sera affichée par le navigateur de l utilisateur Serveur Web

Le serveur exécute les «processing instructions» PHP et construit la réponse en

17 AJAX Le client demanded une page PHP Réponse contenant du HTML et JavaScript Utilisateur Poste client JavaScript fait un appel non visible au serveur Serveur Web Le serveur répond en envoyant la donnée JavaScript met a jour la page pg en utilisant cette donnée

non visible au serveur Serveur Web Le serveur répond en envoyant

18 AJAX Asyncronous JavaScript and XML: Relies on a number of open technologies: XHTML, CSS DOM model for the Web client, XML Asynchronous data transfer using the XMLHttpRequest object JavaScript based processing

for the Web client, XML Asynchronous data transfer

19 The XMLHttpRequest Object Available on the web navigator via JavaScript Allows to make a HTTP request (GET, POST) from a browser towards an application on a server in a (a) syncronous way: Web pages pg do not need to be fully loaded because their XHTML content (modelled in XML) can be manipulated using DOM xmlhttp=new XMLHttpRequest();

a (a) syncronous way: Web pages pg do not need to be fully loaded because their

20 The XMLHttpRequest Object

21 XMLHttpRequest object methods Open(): opens a http connection o with the eserver e making a demand: GET, POST xmlhttp.open("get","ajax_info.txt",true); p Send(): transmits (a)synchronically data to the server xmlhttp.send(); Abort(): stops current transfer setrequestheader(): specifies certain HTTP preferences (e.g. Content type)

22 XMLHttpRequest object properties readystate: the code state of the tranfer (e.g. 4 is returned when the transfer is completed) status: returns the HTTP code state of the server (e.g. 200 OK, 404 Not Found, etc.) onreadystatechange handling transfer events: xmlhttp.onreadystatechange=function() { if (xmlhttp readystate 4 && xmlhttp status 200) if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } } xmlhttp.open("get","ajax_info.txt",true); xmlhttp.send();

23 Use of AJAX Periodic updates to a page (news) Suggest, completion Real time validation of user entered data Eiti Existing libraries: i Client level: Dojo, jquery, Prototype, Rico, YUI etc. Server level: l HTML::AJAX (Php), Symphony (Php), jmaki (Java), DWR (Java), AJAX ASP.NET (C#) etc. Specialised APIs: Google AJAXLibraries

24 Mash ups Combining, either at the client or at the server level, the content coming from several different sources offering new functionalities / experiences

JavaScript: Client-Side Scripting. Chapter 6

JavaScript: Client-Side Scripting Chapter 6 Textbook to be published by Pearson Ed 2015 in early Pearson 2014 Fundamentals of Web http://www.funwebdev.com Development Section 1 of 8 WHAT IS JAVASCRIPT