3. javascript - perso.univ-mlv.frperso.univ-mlv.fr/ocure/m1web2/m1web2_0910_cm2.pdfo.curé [79 ]...

O.Curé [77 ]

3. Javascript

O.Curé [78 ]

Présentation

● Développé pour ajouter de l'interactivité aux pages HTML.

● Souvent inséré directement dans les pages HTML.

● Un langage de script (un langage de programmation léger)

● Langage interprété, orienté objet, typage dynamique

O.Curé [79 ]

Possibilités

● Pour ajouter du texte dynaniquement dans une page

● Pour réagir aux événements● Pour lire et écrire des éléments HTML● Pour valider des données saisies● Pour créer des cookies● Pour détecter le navigateur du client● ...

O.Curé [80 ]

Balises DIV, SPAN et LAYER

● Positionnement relatif contre absolu:– <DIV ID = ''name'' STYLE= ''position: absolute; top

30px; left 10px; ''>

– <DIV STYLE= ''float: left;''>

●

O.Curé [81 ]

Inclure le code Javascript

● Inclusion dans la page HTML (dans head ou body)

<body>

<script type=''text/javascript''>

Alert('Hello'); </script>

</body>

● Ou référence à un fichier externe<body>

<script language=''javascript'' type=''text/javascript'' src=''text.js''>

</script>

</body>

O.Curé [82 ]

Variable

● Avec ou sans var:

var i = valeur ou i = valeur

● Une variable (locale) déclarée dans une fonction limite l'accès de la variable à l'intérieur de la fonction.

● La déclaration d'une variable (globale) hors d'une fonction permet l'accès de celle-ci dans toutes le fonctions

● Durée de vie d'une variable : début à la déclaration et fin lors de la fermeture de la page.

O.Curé [83 ]

Popup

● Alert box

– Utilisateur doit cliquer sur « OK » pour poursuivre

– alert("message")

● Confirm box

– Utilisateur doit cliquer sur « Ok » ou « Cancel » pour poursuivre

– confirm("message")

● Prompt box

– Utilisateur doit cliquer sur « Ok » ou « Cancel » pour poursuivre après une saisie

– prompt("message","valeur par défaut")

O.Curé [84 ]

Elément du langage

● Conditionnelle– if, if.. else, switch

● Boucle– for, while

● try...catch● throw

O.Curé [85 ]

Javascript et les objets

● Comme en POO, Object est un type dont les autres objets dérivent.

● La comparaison avec le POO s'arrête là.● Création:

– var monObjet = new Object();

● Pas de méthodes, pas propriétés.

O.Curé [86 ]

Ajouter des propriétés

● On peut ajouter des propriétés à notre instance de Object.

– monObjet.annee = 2009;

– monObjet.etat = 'neuf';

– monObjet.achat = new Date(2010,1,1);

● Chaînage de références

– var createur = new Object();

– createur.nom = 'pierre';

– monObjet.createur = createur;

● Accès

– var nomCreateur = monObjet.createur.nom;

O.Curé [87 ]

JSON (Javascript Object Notation )

● Notation plus compacte et facile d'utilisation.

var monObjet = {

annee: 2009,

achat: new Date(2010,2,1),

etat: 'neuf',

createur: { nom : 'pierre'},

valeurs: {2,3,5,7,9}

};

O.Curé [88 ]

Variable et propriétés

● Stockage d'une référence à un objet JS:

– var maVar = 'salut';

– unObjet.unePropriété = 'bonjour';

● Lorsque var est utilisé au plus haut niveau d'une page HTML (hors d'une fonction), il correspond à une propriété de window. Donc, il y a équivalence entre:

– var foo = bar;

– window.foo=bar;

– foo = bar;

● bar est non qualifié donc c'est une propriété de window.

O.Curé [89 ]

Synthèse

● Un objet Javascript est une collection non ordonnée de propriétés

● Une propriété consiste en un couple nom/valeur.

● JSON facilité le déclaration d'objets● Les variables de haut-bniveau d'un

document sont des propriétés de window.

O.Curé [90 ]

Les fonctions

● Les fonctions comme objet central de javascript

● Les fonctions JS sont considérées comme des objets.

● Elles peuvent être:– Affectées à des variables, des propriétés

d'un objet, passées comme paramètre, retournées comme résultat, déclarées à en utilisant un formalisme comme JSON.

O.Curé [91 ]

Les fonctions (suite)

● Une fonction Javascript contient du code qui sera exécuté seulement lors de son invocation

● On peut invoquer une fonction depuis n'importe où dans la page ou depuis une autre page si la fonction se trouve dans un fichier externe.

● On peut définir une fonction dans la balise head ou body. La convention est de les définir dans head.

● Le code ne se trouvant pas dans une fonction est exécuté dès le chargement de la page.

O.Curé [92 ]

Example

<html>

<head>

<script type="text/javascript">

function displaymessage() {

alert("Hello World!")

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!" onclick="displaymessage()" >

</form>

</body>

</html>

O.Curé [93 ]

Function comme un objet

● Le code suivant ne crée pas une fonction 'test':– function test { alert('faire un truc');}

● Cela va créer un instance Function et l'affecter à une propriété window:– test = function() { alert('faire un truc');}

O.Curé [94 ]

Equivalence

● Les déclarations suivantes sont équivalentes:– function hello() { alert('hello');}

– hello = function() {alert('hello');}

– window.hello = function() {alert('hello');}

O.Curé [95 ]

Asynchrone

● La nature d'une page web est asynchrone.

● La notion de callback est prépondérante dans la programmation asynchrone.

● Exemple:

function hello() {alert('hello');}

setTimeout(hello,5000);

● La fonction hello est un paramètre de setTimeout. Après 5sec. appelle hello (callback).

● On pouvait aussi écrire:

setTimeout(function {alert('hello');},5000);

O.Curé [96 ]

Fonction comme propriété d'un objet

● Le mot clé this donne l'accès à l'objet associé à une fonction.

● Différence avec utilisation en POO (ex Java)

– this ne pointe pas sur l'instance où a été déclarée la méthode (POO) mais sur l'instance d'où elle est invoquée. La notion de contexte d'appel est importante.

O.Curé [97 ]

Fonction et contexte

● On peut fixer le contexte d'une fonction avec les méthodes call() et apply().

● Ce sont des méthodes définies par le constructeur de function.

● call() invoque la fonction en spécifiant (1er argument) l'objet devant servir de contexte. Les arguments suivant de call sont les paramètres de la fonction.

● Apply() fonctionne de manière similaire à call()mais le second paramètre est un tableau d'objets qui deviendront les paramètres de la fonction.

O.Curé [98 ]

Exemple<html> <head> <script>

var o1 = {handle:'o1'};



window.handle = 'window';

function whoAmI() { return this.handle;}

o1.identifyMe = whoAmI;

alert(whoAmI());

alert(o1.identifyMe());

alert(whoAmI.call(o2));

alert(whoAmI.apply(o3));

</script> </head> <body></body> </html>

Affiche séquentiellement:window, o1, o2 puis o3

O.Curé [99 ]

Synthèse

● En javascript, on ne peut pas dire qu'une fonction est une méthode d'un objet.

● On peut dire:– Une fonction f agit comme la méthode

d'un objet o lorsque o sert comme contexte de la fonction f.

● Exemple:– alert(o1.identifyMe.call(o3));

O.Curé [100 ]

Evénements et leurs gestions

● Chaque élément d'une page web a des événements qui peuvent déclenchés une action.

● Des attributs sont insérés dans les éléments HTML pour définir événements et gestionnaires.

● Exemple:

– Clic souris

– Chargement d'une page ou d'une image

– Curseur passant sur une zone donnée

– Sélection d'une boîte d'un formulaire

– Soumission d'un formulaire

– Frappe clavier

O.Curé [101 ]

Evénements

● onabort – chargement d'une image est interrompu

● onblur – un élément perd le focus

● onchange – le contenu d'un champ a changé

● onclick – Clic souris sur un objet

● ondblclick – Double clic souris sur un objet

● onerror – Une erreur survient lors du chargement d'une image ou d'un document

● onfocus – Un élément prend le focus

● onkeydown – Une touche clavier est pressée

O.Curé [102 ]

Evénements (suite)● onkeypress – une touche clavier est pressée ou

maintenue

● onkeyup – relâchement d'un touche clavier

● onload – fin de chargement d'une page/image

● onmousedown – bouton de la souris est pressé

● onmousemove – la curseur a bougé

● onmouseout – la curseur de la souris sort d'un élément

● onmouseover – le curseur se déplace au dessus d'un élément

● onmouseup – le bouton de la souris est relâché

O.Curé [103 ]

Evénements (fin)

● onreset – le bouton reset en cliqué● onresize – une fenêtre est

redimensionnée● onselect – sélection d'un texte● onsubmit – clic sur un bouton submit● onunload – l'utilisateur quitte une page

O.Curé [104 ]

onload et onUnload

● Les evts onload et onUnload sont déclenchés lorsque l'utilisateur entre ou quitte une page

● L'evt onload est souvent utilisé pour détecter le type et la version du navigateur de l'utilisateur et charger la version adéquate de la page.

● Ils sont aussi utilisés pour gérer les cookies

O.Curé [105 ]

OnFocus, onBlur et onChange

● Les evts onFocus, onBlur et onChange sont souvent utilisés pour la validation des formulaires

● Exemple: la fonction checkEmail() va être invoquée à chaque fois que l'utilisateur change le contenu d'un champ:

<input type="text" size="30"

id="email" onchange="checkEmail();">;

O.Curé [106 ]

Exemple onBlur

<html>

<head>

<script type="text/javascript">

function upperCase() {

var x=document.getElementById("fname").value;

document.getElementById("fname").value=x.toUpperCase();

}

</script>

</head>

<body>

Enter your name:

<input type="text" id="fname" onblur="upperCase()">

</body>

</html>

O.Curé [107 ]

onSubmit

● L'evt onSubmit est utilisé pour valider les champs d'un formulaire avant sa soumission

● Exemple: la fonction checkForm() sera appelé lorsque l'utilisateur cliquera sur le bouton submit du formulaire. Si la valeur d'un champ n'est pas accepté, la soumission sera annulé. La fonction retourne vrai ou faux. Si c'est vrai, le formulé sera envoyé sinon, le submit sera annulé.

<form method="post" action="xxx.html" onsubmit="return checkForm()">

O.Curé [108 ]

Exemple onSubmit

<html><head><script type="text/javascript"> function validate() { // return true or false based on validation logic }</script></head><body> <form action="tryjs_submitpage.htm" onsubmit="return validate()"> Name (max 10 chararcters): <input type="text" id="fname" size="20"><br /> Age (from 1 to 100): <input type="text" id="age" size="20"><br /> E-mail: <input type="text" id="email" size="20"><br /> <br /> <input type="submit" value="Submit"> </form></body></html>

O.Curé [109 ]

OnMouseOver et onMouseOut

● Les evts onMouseOver et onMouseOut sont utilisés pour créer de boutons « animés ».

● Exemple : Une AlertBox apparaît lorsque un onMouseOver evt est détecté:

<a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');return false">

<img src="w3schools.gif" width="100" height="30">

</a>

O.Curé [110 ]

4. Ajax

O.Curé [111 ]

Asynchronous Javascript et XML

● Apparition du terme en 2005

● « Ajax n'est pas une technologie, il s'agit de plusieurs technologies se développant chacune de leur côté et combinées pour donner des résultats aussi nouveaux que puissants. Ajax comporte:– Une présentation fondée sur les standards XHTML et CSS;

– Un affichage dynamique et interactif grâce à DOM (Document Object Model);

– Un système d'échange et de manipulation de données utilisant XML et XSLT; un mécanisme de récupération de données asynchrones utilisant XMLHttpRequest;

– Javascript pour lier le tout.

O.Curé [112 ]

Principe

● Permettre l'échange d'informations entre le navigateur (poste client) et le serveur Web sans recharger l'ensemble de la page Web utilisée.

● Echange fait de manière asynchrone (synchrone possible)

O.Curé [113 ]

XMLHttpRequest

● Un object Javascript● Adopté par Mozilla, Firefox, Safari et

Opera● Communique avec le serveur via le

standard HTTP GET/POST● Travaille en tâche de fond pour

supporter une communication asynchrone.– Pas d'interrruption l'activité de l'utilisateur

O.Curé [114 ]

Appel Ajax

● Attention aux navigateurs et aux versions:– IE (jusque 6):

● var requeteAjax = new ActiveXObject('Microsoft.XMLHTTP');

● requeteAjax.open('GET','data.txt',false);

● requeteAjax.send(null);

– Firefox:● var requeteAjax = new XMLHttpRequest();



O.Curé [115 ]

Exemple

O.Curé [116 ]

Les étapes

1. Apparition d'un événement client

2. Création d'un objet XMLThttpRequest

3. Configuration de l'objet XMLHttpRequest

4. Cet objet lance une requête asynchrone

5. ValidateServlet retourne un document XML contenant un résultat

6.L'objet XMLHttpRequest appelle la fonction callback() et traite le résultat

7.HTML DOM est mis à jour

O.Curé [117 ]

Evt client

● Une fonction Javascript est invoquée comme résultat d'un evt.

● Ex: validateUserId():● <input type=''text'' size=''20''

– id=''userId'' name=''id''

– onkeyup=''validateUserId();''>

O.Curé [118 ]

Création objet XMLHttpRequest

var req;function initRequest() { if(window.XMLHttpRequest) { req= new XMLHttpRequest(); } else if (window.ActiveXObject) { IsIE = true; Req = new ActiveXObject(''Microsoft.XMLHTTP''); }} function validateUserId() { initRequest(); req.onreadystatechange = processRequest; if(!target) target=document.getElementById(''userId''); var url = ''validate?id=''+escape(target.value); req.open(''GET'', url, true); req.send(null);}

O.Curé [119 ]

Configuration objet XMLHttpRequest


O.Curé [120 ]

Requête asynchrone


O.Curé [121 ]

Résultat XML

public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException { String targetId = request.getParameter("id"); if ((targetId != null) && !accounts.containsKey(targetId.trim())) { response.setContentType("text/xml"); response.setHeader("CacheControl", "nocache"); response.getWriter().write("<valid>true</valid>"); } else { response.setContentType("text/xml"); response.setHeader("CacheControl", "nocache"); response.getWriter().write("<valid>false</valid>"); } }

O.Curé [122 ]

callback()

L'objet XMLTHttpRequest a été configuré pour invoquer la fonction processRequest() lorsqu'il y a un changement d'état de l'objet.

function processRequest() { if(req.readyState == 4) { if(req.status == 200) { Var message = … ; ...

O.Curé [123 ]

Modification du HTML DOM

● Modification en exploitant l'API DOM● document.getElementById(''userIdMessage'') où ''userIdMessage'' est l'attribut id d'un élément du document HTML

● Javascript peut maintenant être utilisé pour modifier, ajouter, supprimer les éléments du document HTML.

O.Curé [124 ]

Modification du HTML DOM

<script type="text/javascript"> function setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } var messageBody = document.createTextNode(messageText); if (userMessageElement.childNodes[0]) { userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]); } else { userMessageElement.appendChild(messageBody); }}</script><body><div id="userIdMessage"></div></body>

O.Curé [125 ]

Les méthodes de XMLHttpRequest

● open(''HTTP method'',''url'',syn/asyn);● send(content)

– Envoyer une requête en incluant une chaîne de caractères ou un objet DOM

● abort()● getAllResponseHeaders()● getResponseHeader(''header'')● setRequestHeader(''label'',''value'')

O.Curé [126 ]

Propriétés de XMLHttpRequest

● onreadystatechange– Affecté à un objet javascript qui s'activera

à chaque changement d'état

● ReadyState : état courant de la requête– 0: non initialisé, 1: chargement, 2: chargé,

3: interactive (des données ont été retournées), 4: complété

● status– État HTTP (ex: 200: 0k, 404, ..)

O.Curé [127 ]

Propriétés de XMLHttpRequest (2)

● responseText– Version chaîne des données retournées

par le serveur

● responseXML– Version XML

● statusText– État retourné par le serveur.

O.Curé [128 ]

Accès aux données récupérées

● La réponse est contenue dans responseText:– requeteAjax.responseText

● Exemple simple:– <BODY>

● <SCRIPT TYPE=''text/javascript''>

– var requeteAjax = new XMLHttpRequest();

– requeteAjax.open('GET','data.txt',false);

– requeteAjax.send(null);

– alert(requeteAjax.responseText);● </SCRIPT>

– </BODY>

O.Curé [129 ]

Placer du contenu dans la page

● Avec document.write():

● Si on veut interagir avec les éléments de la page, il faut utiliser document.getElementById():– <BODY>

● <DIV ID=''div1''>Zone 1</div>

● <DIV ID=''div2''></div>

● <SCRIPT TYPE=''text/javascript''>

– var requeteAjax = new XMLHttpRequest();

– requeteAjax.open('GET','data.txt',false);

– requeteAjax.send(null);

– var div= document.getElementById('div2');

– div.innerHTML = requeteAjax.responseText;● </SCRIPT>

– </BODY>

O.Curé [130 ]

Avec interactions

● Par exemple, en cliquant sur le bouton d'un formulaire:– <INPUT type="button" value="maj" onclick="getData();"/>

– <DIV ID="div2">ras</DIV>

– <SCRIPT TYPE=''text/javascript''>

● function getData() {

● var requeteAjax = new XMLHttpRequest();



● var div= document.getElementById('div2');

● div.innerHTML = requeteAjax.responseText;

● }

– </SCRIPT>

O.Curé [131 ]

Synthèse

● L'utilisateur tape une URL dans un navigateur

● Le serveur va envoyer le contenu de la page

● L'utilisateur clique sur le bouton d'un formulaire, il invoque alors le navigateur (envoi de la requête Ajax)

● Le serveur envoie de nouvelles données

● Javascript réceptionne les données, pas le navigateur. Le code traite les données pour satisfaire l'action.

O.Curé [132 ]

Exploitation de CSS

● L'usage des CSS offre de nouvelles fonctionnalités dans la mise en forme, une meilleure séparation entre la forme/contenu et l'adaptation au lecteur (media).

● On utilise DIV/SPAN pour la présentation et TABLE pour les données tabulaires.

O.Curé [133 ]

DOM vs innerHTML

● Navigation/modification par DOM APIfunction setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } var messageBody = document.createTextNode(messageText); if (userMessageElement.childNodes[0]) { userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]); } else { userMessageElement.appendChild(messageBody); }}

O.Curé [134 ]

DOM vs innerHTML (2)

● InnerHTML est une propriété permettant d'accéder au contenu d'une balise HTML

● Il est plus facile de modifier du contenu avec innerHTML qu'avec DOM

function setMessageUsingDOM(message) { var userMessageElement = document.getElementById("userIdMessage"); var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } userMessageElement.innerHTML = messageText;

}

O.Curé [135 ]

Les frameworks AJAX

● En général, on écrit de l'AJAX à l'aide de framework

● Ce sont des API de haut niveau permettant de s'abstraire de la complexité XMLHttpRequest

● Ex: jQuery, ext JS, DOJO toolkit, Prototype, Rico

O.Curé [136 ]

Limites AJAX

● Pas de standardisation de XMLHttpRequest (IE)

● Pas de support XMLHttpRequest dans les « vieux » navigateurs

● Incompatibilités ● Sécurité (code javascript visible)

O.Curé [137 ]

Complément sur JSON

● Un format pour l'échange de données (comparable à XML)

● Mais plus simple à lire et écrire, plus léger

● Parsing et génération simple● Format textuel● Indépendant des langages prog.

O.Curé [138 ]

Complément sur JSON (2)

● Les objets JSON sont typés : string, number, array, boolean (uniquement string avec XML)

● Format natif pour javascript– Avec XML, il faut un parsing (DOM/SAX API)– Récupérer une valeur est aussi simple

qu'avec une propriété javascript.

O.Curé [139 ]

Structure

● Collection de couples clé/valeur– Supports différents suivant le lang. de

prog. : objet, record, struct, dictionnaire, table de hachage, tableau associatif, list, etc.

● Liste ordonnée de valeurs● Structure universelle supportée par

l'ensemble de lang. De prog.

O.Curé [140 ]

Objet JSON

● Un objet JSON est un ensemble non ordonné de clé/valeurs.

● Débute par '{' et se termine par '}'● Séparation par ','.● Imbrications possiblesvar monObj = { ''v1'': [

{''a'':1, ''b'':''abc''},{''a:2,''b'':''def''}]};

monObj.v1[0].b //abc

3. javascript - perso.univ-mlv.frperso.univ-mlv.fr/ocure/m1web2/m1web2_0910_cm2.pdfo.curé [79 ]...

Documents