javascript - Jean-Loup Guillaume website
Transcription
javascript - Jean-Loup Guillaume website
JAVASCRIPT LI288 – web et développement web Introduction Le Javascript est un langage "de script" simplifié "orienté objet" : Initialement élaboré par Netscape en association avec Sun Microsystem. Standardisé par un comité spécialisé, l'ECMA (European Computer Manufactures Association). Javascript permet : de rendre dynamique un site internet développé en HTML : Validation de formulaires, calculs, messages, Modification de la page web, AJAX de développer de véritables applications fonctionnant exclusivement dans le cadre d'Internet. Caractéristiques principales Le Javascript est interprété : Ecrit directement au sein du document HTML sous forme d'un script encadré par des balises HTML spéciales. Exécution chez le client (pas d'appel réseau). Supporté par la plupart des navigateurs web IE, Firefox, Chrome, etc. (compatibilité ?) Syntaxe proche du C Plan du cours Syntaxe : tests, boucles, fonctions Événements / Manipulation de page Objets Insertion dans une page html JSON Cookies JAVASCRIPT SYNTAXE LI288 – web et développement web HTML et JavaScript Utilisation de balises spécifiques : <script language="Javascript">…</script> Deux types d‟insertion dans le code HTML Insertion directe dans le code HTML Insertion comme un module externe Insertion dans une page HTML Placé dans le corps de la page HTML, entre les balises <body> et </body> Le code s'exécute automatiquement lors du chargement de la page. <html> <body> <script language="JavaScript"> alert('bonjour'); </script> </body> </html> Insertion dans une page HTML Placé entre les balises <head> et </head> Le code s'exécute lors d'un événement venant de l'utilisateur. le code correspondant à cet événement se trouve dans le corps du document. En pratique les deux sont similaires sur la plupart des navigateurs. <html> <head> <script language="JavaScript"> function f () { alert('Au revoir'); } </script> </head> <body onUnload=f();> </body> </html> Insertion dans une page HTML A placer dans le <head> ou le <body> Fichier en format texte. Permet de réutiliser les scripts. Inconvénient : requête supplémentaire vers le serveur. <html> <head> <script language="javascript" src="fichier.js"></script> </head> <body> <input type="button" onclick="popup()" value="Clic"> </body> </html> Structure d‟un script Proche de Java et C Règles générales On peut mettre des espaces n'importe où. On sépare les commandes par des point-virgule ";". Les réels sont notés avec un "." et pas une virgule ",". Commentaires : Double slash "//" devant le texte Encadrer le texte par un slash suivi d'une étoile "/*" et la même séquence inversée "*/" Les variables Déclaration et affectation Déclaration avec le mot clé "var". Affectation avec le signe d'égalité (=). Remarques : La déclaration est faite par défaut (si affectation sans déclaration préalable). La lecture d'une variable non déclarée provoque une erreur. Une variable déclarée non affectée est de type undefined (indéfinie). //Déclaration de i, de j et de k. var i, j, k; //Affectation de i. i = 1; //Déclaration et affectation de prix. var prix = 0; //Déclaration et affectation d'un tableau var car = ["a", "b", "c"]; Les variables Booleen (vrai/faux) Nombre (un seul type, pas de int, float, double, …) Tableaux Tableaux associatifs Fonctions Autres types spécifiques Eléments HTML et attributs Les variables La portée (locale/globale) : Globale : déclarée en début de script et accessible à n'importe quel endroit du programme. Locale : déclarée à l'intérieur d'une fonction et accessible uniquement dans la fonction. Les variables Contraintes concernant les noms de variables : Les noms de variables ne peuvent contenir que des lettres, chiffres, ou le caractère "_" (underscore) Les caractères spéciaux et accentués sont interdits : MonPrenom est différent de Monprenom. Un nom de variable ne peut contenir d'espaces. var Mon_Prénom; // incorrect Attention aux majuscules et minuscules : var Mon_Prenom; // correct var Mon Prenom; // incorrect Les mots réservés JavaScript ne peuvent être utilisés comme noms de variable. Les variables Le type d‟une variable dépend de son contenu var maVariable = "Philippe"; // type chaîne maVariable =10; // type nombre (entier) Trois principaux types de valeurs : Chaînes Nombre (entier ou décimaux) : 10^-308 >nombre < 10^308 3 valeurs spéciales : Positive Infinity ou +Infinity (valeur infini positive) Negative Infinity ou –Infinity (valeur infinie négative) Nan (Not a Number) en général le résultat d'une opération incorrecte Boolean true (vrai) et false (faux). Valeurs spéciales JavaScript inclut aussi deux types de données spéciaux : Null : possède une seule valeur, null, qui signifie l‟absence de données dans une variable Undefined : possède une seule valeur, undefined. Une variable qui n‟a jamais stocké de valeur, pas même null est dite non définie (undefined). Opérations sur les chaînes La concaténation : Déterminer la longueur d‟une chaîne : var chaine = "bonjour" + "FI3/FCD1"; var ch1 = 'bonjour'; var longueur = ch1.length; Extraction d‟une partie de la chaîne : var dateDuJour = "04/04/03" var carac = dateDuJour.charAt(2); Extrait le caractère en position 2 de la chaîne var mois = datteDuJour.substring(3, 5); 3: est l‟indice du premier caractère de la sous-chaîne à extraire 5 : indice du dernier caractère à prendre en considération ; ce caractère ne fera pas partie de la sous-chaîne à extraire Syntaxe, les boucles Boucle for : for (i=0; i<5; i++) {…} Boucle while : while do (test) {…} {test} while (test) Syntaxe, les conditions if (test) {} else {} égalité : ==, != inférieur, supérieur : =<, >=, >, < opérations bit à bit : &, | identique à : ===, !== ('1' == 1) // true ('1' === 1) // false opérations logiques : &&, || Les fonctions Définition : Appel : maFonction("12",13); Exemple : calcul de la fonction factoriel function maFonction(arg1,arg2) {instr;} Calcul récursif Choix (if) Mais aussi (à venir) : Appelé sur un événement Utilisation de document.getElementById Utilisation de this.value Fonction factorielle <html> <head> <script language="JavaScript"> function fac(n){ if (n < 2) { return 1; } else { return n * fac(n-1); } } </script> </head> <body> <form> <input id="facArg‚ type="text" onchange="result = fac(this.value); document.getElementById('facResult').value = result;"/> <input id="facResult" type="text" /> </form> </body> </html> Arguments Remarques : Pas de type dans la signature de la fonction On peut déclarer une fonction sans arguments et lui en passer et accéder les arguments dans la fonction function test(argument1) { alert("argument : " + argument1); alert("nombre d'args : " + arguments.length); for (var i=0 ; i<arguments.length ; i++) { alert("arg " + i + " : " + arguments[i]); } } test(); // undefined - 0 test("1"); // 1 – 1 - 1 test("1","2"); // 1 – 2 – 1 - 2 Fonctions d‟ordre supérieur Une fonction peut prendre une fonction en argument Permet plus de flexibilité function map (a,f) { for (var i=0 ; i<a.length ; i++) { a[i]=f(a[i]); } return a.toString(); } function sqr(x) { return x*x; } map([1,2,3],sqr); Quelques fonctions de base eval Cette fonction exécute un code Javascript à partir d'une chaîne de caractères. <html> <body> <script language="JavaScript"> eval('function carre(n){ return n*n;};alert(carre(2));'); </script> </body> </html> Quelques fonctions de base isFinite Détermine si le paramètre est un nombre fini. isNaN Détermine si le paramètre n‟est pas un nombre (NaN : Not a Number). isFinite(240) //retourne true isFinite("Un nombre") //retourne false isNaN("un nombre") //retourne true isNaN(20) //retourne false Quelques fonctions de base parseFloat Analyse une chaîne de caractères et retourne un nombre décimal. Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a Number). parseInt(string, base) Analyse une chaîne de caractères et retourne un nombre entier de la base spécifiée. La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2 (binaire). alert(5+"2"); // affiche 52 alert(5+parseInt("2")); // affiche 7 parseInt("10.33") // 10 parseInt("40 years") // 40 parseInt("He was 40") // NaN parseInt("010") // base 8 (0…) parseInt("0x10") // base 10 (0x…) parseInt("10",3) // base 3 Quelques fonctions de base Number String convertit l'objet spécifié en valeur numérique convertit l'objet spécifié en chaîne de caractères Escape retourne la valeur hexadécimale à partir d'une chaîne de caractère codée en ISO-Latin-1. var jour = new Date("December 17, 1995 03:24:00"); alert (Number(jour)); jour = new Date(430054663215); alert (String(jour)); escape("!&") //retourne %21%26% JAVASCRIPT ÉVÉNEMENTS LI288 – web et développement web Gestionnaire d‟événements Chaque événement a un identifiant de la forme onQuelqueChose par exemple : onLoad, onClick, onMouseOver, etc. Un événement peut exécuter du code javascript Une ou plusieurs instructions En général un appel de fonction Activation : <tag … onEventName="code javascript;"> Les événements de base Evénement onLoad Se produit lorsque une page web est chargée dans la fenêtre du navigateur Toute la page (y compris les images qu‟elle contient si leur chargement est prévu) doit avoir été chargée pour qu‟il ait lieu Cet événement peut être associé à une image seulement ; auquel cas, il se produit une fois son chargement terminé Les événements de base Evénement onClick Se produit lorsque l‟utilisateur clique sur un élément spécifique dans une page, comme un lien hypertexte, une image, un bouton, du texte, etc. Ces éléments sont capables de répondre séparément à cet événement Il peut également être déclenché lorsque l‟utilisateur clique n‟importe où sur la page s‟il a été associé non pas à un élément spécifique, mais à l‟élément body tout entier Les événements de base Événement onMouseover Analogue à onClick sauf qu‟il suffit que l‟utilisateur place le pointeur de sa souris sur l‟un des éléments précités (lien hypertexte, image, bouton, texte, etc.) pour qu‟il ait lieu Événement onMouseout A l‟inverse de onMouseover, cet événement se produit lorsque le pointeur de la souris quitte la zone de sélection d‟un élément. Une liste plus longue Globales : onAbort : chargement d'une image interrompu onError : une erreur durant le chargement de la page onLoad : chargement de la page onUnload : l'utilisateur quitte la page Souris : onBlur : un élément perd le focus onClick : clic sur l'élément onDblclick: double clic sur l'élément onDragdrop : drag and drop sur la fenêtre du navigateur onFocus : le focus est donné à un élément onMouseOver : la souris passe sur un élément onMouseOut : la souris quitte un élément onResize : la fenêtre est redimensionnée Une liste plus longue Formulaires : Clavier : onChange : modification d'un champ de données onReset : effacement d'un formulaire à l'aide du bouton Reset. onSelect : sélection d'un texte dans un champ "text" ou "textarea" onSubmit : clic sur le bouton de soumission d'un formulaire onKeydown : appui sur une touche du clavier onKeypress : appui et maintient sur une touche onKeypress : relâchement d'une touche Attention, selon les versions de javascript, les événements peuvent ne pas exister. JAVASCRIPT OBJETS LI288 – web et développement web Les Objets Les objets de JavaScript, sont soit des entités prédéfinies du langage, soit créés par le programmeur : Le navigateur est un objet qui s'appelle "navigator". La fenêtre du navigateur se nomme "window". La page HTML est un autre objet, que l'on appelle "document". Un formulaire à l'intérieur d'un "document", est aussi un objet. Un lien hypertexte dans une page HTML est objet… Les objets javascript peuvent réagir à des "Evénements". Tous les navigateurs ne supportent pas les mêmes objets Accès aux propriétés d‟un objet voiture.couleur.value voiture.couleur.value = verte Les objets L‟opérateur New : créer une instance d'un objet Objet défini par l'utilisateur Objets prédéfinis, Array, Boolean, Date, Function, Image, Number, Object, ou String. nouvel_objet = new type_objet(parametres) texte = new String("Une chaîne de caractère"); Les objets - création Créer un objet et accéder à ses attributs/méthodes. var obj = new Object(); obj["attribut"] = "valeur"; // ou obj.attribut = "valeur"; obj["methode"] = function(p) { alert("parametre : " + p);}; // ou obj.methode = … alert(obj.attribut); obj.methode("test"); Les objets - création Version avec constructeur function Test(p,q) { this.att1=p; att2 = q; this.al = function() {alert(this.att1);} var al2 = function() {alert(att2)}; } var x = new Test(2,3); alert(x.att1); x.al(); alert(x.att2); try {x.al2();} catch(err) {alert(err);} Les objets - création Création directe sous forme de tableau associatif : Séparation par des virgules "," cf JSON plus loin dans le cours. var obj = { attribut: "valeur", methode: function(p) { alert("parametre : " + p);} }; alert(obj.attribut); obj.methode("test"); Les objets typeof renvoie une chaîne de caractères indiquant quel est le type de l'opérande. var i = 1; typeof i; //retourne number var titre="Les raisins de la colère"; typeof titre; //retourne string var jour = new Date(); typeof jour; //retourne object var choix = true; typeof choix; //retourne boolean var cas = null; typeof cas; //retourne object typeof parseFloat; //retourne function typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.* typeof Math; //retourne function NS 3.*, Opera 3.* L'objet String Propriété : Méthodes : length : retourne la longueur de la chaîne de caractères anchor("lien") : formate la chaîne avec la balise <A> bold( ) : formate la chaîne avec la balise <B> charAt( ) : renvoie le caractère se trouvant à une certaine position charCodeAt( ) : renvoie le code du caractère se trouvant à une certaine position concat( ) : permet de concaténer 2 chaînes de caractères fromCharCode( ) : renvoie le caractère associé au code indexOf( ) : trouve l'indice d'occurrence d'un caractère dans une chaîne substr( ), substring( ) : retourne une portion de la chaîne http://www.toutjavascript.com/reference/index.php L'objet Array Propriété : length : retourne le nombre d'éléments du tableau Méthodes : concat( ) : permet de concaténer 2 tableaux reverse( ) : inverse le classement des éléments du tableau slice( ) : retourne une section du tableau sort( ) : permet le classement des éléments du tableau L'objet Math Propriétés : E, LN2, LN10, LOG2E, LOG10E, PI, SQRT2, SQRT1_2 Méthodes : abs(), max(), min(), sqrt(), pow(), exp(), … ceil( ) : retourne le plus petit entier supérieur à un nombre floor( ) : retourne le plus grand entier inférieur à un nombre round( ) : arrondi un nombre à l'entier le plus proche random( ) : retourne un nombre aléatoire entre 0 et 1 L'objet Date Propriété : aucune Méthodes : getFullYear(), getYear(), getMonth(), getDay(), getDate(), getHours(), getMinutes(), getSeconds(), getMilliseconds() getUTCFullYear( ), … idem en temps universel setFullYear( ), setYear( ), … modification d'une date getTime( ) : retourne le temps stocké dans l'objet Date getTimezoneOffset( ) : retourne la différence entre l'heure du client et le temps universel toGMTString( ), toLocaleString( ), toUTCString( ) : convertissent la date en chaîne de caractère selon la convention GMT, selon la convention locale ou en temps universel JAVASCRIPT MANIPULATION DE PAGE LI288 – web et développement web Entrées/sorties 3 types de boites de messages peuvent être affichés en utilisant Javascript Méthode alert() Méthode confirm() permet à l‟utilisateur de choisir entre les boutons OK et Annuler. Méthode prompt() sert à afficher à l‟utilisateur des informations simples de type texte. Une fois que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte La méthode prompt() permet à l‟utilisateur de taper son propre message en réponse à la question posée La méthode document.write permet d ‟écrire du code HTML dans la page WEB Entrées/sorties <html> <head> <title> une page simple </title> </head> <body> <script language='javascript'> alert('bonjour'); document.write ( prompt('quel est votre nom ?','Indiquer votre nom ici') ); confirm('quel bouton allez-vous choisir ?'); </script> </body> </html> Les objets du navigateur Les objets du navigateur L'objet le plus haut dans la hiérarchie est "window" qui correspond à la fenêtre même du navigateur. L'objet "document" fait référence au contenu de la fenêtre : "document" = ensemble des éléments HTML de la page. On peut accéder ces éléments avec : méthodes propres à l'objet document : getElementById( ) trouve l'élément avec son identifiant (ID) getElementsByName soit des collections d'objets qui regroupent sous forme de tableaux Javascript tous les éléments de type déterminé. L'objet window Propriétés : (accessibles avec IE et N) closed : indique que la fenêtre a été fermée defaultStatus : indique le message par défaut dans la barre de status document : retourne l'objet document de la fenêtre frames : retourne la collection de cadres dans la fenêtre history : retourne l'historique de la session de navigation location : retourne l'adresse actuellement visitée name : indique le nom de la fenêtre navigator : retourne le navigateur utilisé opener : retourne l'objet window qui a créé la fenêtre en cours parent : retourne l'objet window immédiatemment supérieur dans la hiérarchie self : retourne l'objet window correspondant à la fenêtre en cours status : indique le message affiché dans la barre de status top : retourne l'objet window le plus haut dans la hiérarchie L'objet window Méthodes : blur( ) : enlève le focus de la fenêtre close( ) : ferme la fenêtre focus( ) : place le focus sur la fenêtre moveBy( ) : déplace d'une distance moveTo( ) : déplace la fenêtre vers un point spécifié open( ) : ouvre une nouvelle fenêtre print( ) : imprime le contenu de la fenêtre resizeBy( ) : redimensionne d'un certain rapport resizeTo( ) : redimensionne la fenêtre setTimeout( ) : évalue une chaîne de caractère après un certain laps de temps L'objet document Propriétés : applets, forms, images, links : retourne les collection d'applets java, formulaires… présente dans le document cookie : permet de stocker un cookie domain : indique le nom de domaine du serveur ayant apporté le document referrer : indique l'adresse de la page précédente title : indique le titre du document <html><head><title>Test</title></head> <body> <a href="http://www.yahoo.fr/">Yahoo</a> <a href="http://www.google.fr/">Google</a> <script type="text/javascript"> alert(document.title); for(var i=0; i < document.links.length; ++i) "<br>" + document.links[i]); </script> </body></html> L'objet document Méthodes : close( ) : ferme le document en écriture; open( ) : ouvre le document en écriture; write( ) : écrit dans le document; writeln( ) : écrit dans le document et effectue un retour à la ligne L'objet navigator Propriétés appName : application (Netscape, Internet Explorer) appVersion : numero de version. platform : système d‟exploitation (Win32) plugins language mimeTypes JavaEnabled() Manipulation des objets Pour adresser un objet, il faut préciser son « chemin d‟accès » dans l‟arborescence de la structure. Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la fenêtre courante (attention aux frames) On peut omettre window.document (un seul objet "document") <HTML> <BODY onLoad="window.document.f1.zone.value='Bonjour';"> <FORM name="f1"> <INPUT NAME="zone" TYPE="text"> </FORM> </BODY> </HTML> Exemples <HTML><HEAD <script type="text/javascript"> function listStyle(color) { var ml = document.getElementById("maListe"); ml.setAttribute("style","color:"+color); } </script> </HEAD><BODY> <ul id="maListe"> <li><a href="javascript: listStyle('red');">Rouge</a></li> <li><a href="javascript: listStyle('blue');">Bleu</a></li> <li><a href="javascript: listStyle('black');">Noir</a></li> </ul> </BODY></HTML> Pour aller plus loin Toutes les commandes sur : https://developer.mozilla.org/fr/DOM/element#Propr iétés Pour tester/débugger : Firebug (sous firefox 3.5+) Console d'erreur. Utiliser des alertes. JSON JAVASCRIPT OBJECT NOTATION LI288 – web et développement web JSON ? Format d'échange de données. Objectifs : Simple. Extensible. Ouvert. Lisible par un humain. Similaire à la définition des objets Javascript. JSON : JavaScript Object Notation Les types de base Nombres entiers, rééls ou à virgule flottante Chaînes de caractères Booléen true et false Tableaux […, …] ou tableaux associatifs (objets) "clé":valeur : {…, …} null { "Nom":"Guillaume", "Adresse": {"rue":"104 avenue Kennedy", "cp":"75016","ville":"Paris"}, "notes": [1, 2, 4, 8, 16, 32] } JSON et Javascript JSON peut être utilisé directement : Inclusion dans <script> Peut du HTML var data = JSONdata; </script> être converti en un objet Javascript responseData = eval('(' + responseText + ')'); JSON ou XML ? JSON est très utilisé avec AJAX (le X de AJAX est pour XML) JSON : {"nom": "Guillaume", "prenom": "Jean-Loup"} XML : <?xml version='1.0„ encoding='UTF-8'?> <element> <nom>Guillaume</nom> <prenom>Jean-Loup</prenom> </element> JSON ou XML ? Evaluation en JSON : var name = eval('(' + req.responseText + ')').nom.value; Ou : eval('(' + req.responseText + ')').xyz.abc.value; Accès simplifié aux différent niveaux. JSON ou XML ? Evaluation en XML : var root = req.responseXML; var name = root.getElementsByTagName(„nom‟); Ou : root.getElementsByTagName(„xyz‟)[0].firstChild Un peu plus complexe JSON ou XML Taille des données : Vitesse : XML se parse mieux JSON s'évalue avec eval : peu efficace (pour l'instant) Choix : plus petite en JSON (pas de fermeture de tag) XML se compresse mieux JSON : structures de données XML : structuration de documents A vous de faire votre choix ! JAVASCRIPT COOKIES LI288 – web et développement web Les Cookies Chaîne de caractères pouvant être écrite sur le disque dur. A un endroit défini. Ne peut être lue que par le seul serveur qui l'a générée. Que faire avec un cookie Transmettre des valeurs d'une page HTML à une autre. Exemple : gestion d'un caddie sur un site de vente en ligne. Personnaliser les pages présentées à l'utilisateur. Les Cookies Limitations (théoriques, en pratique c'est faux) : Limites en nombre : Pas plus de 20 cookies par serveur. Limites en taille : un cookie ne peut excéder 4 Ko. Limites du poste client : Un poste client ne peut stocker plus de 300 cookies en tout. Stockage - dépend du navigateur IE : C:\Users\admin\AppData\Local\Microsoft\Windows\Temporary Internet Files Firefox : … Les Cookies - structure Nom=Contenu; expires=expdate; path=Chemin; domain=NomDeDomaine; secure Nom=Contenu; En-tête du cookie : deux variables suivies d'un ";" La variable Nom contient le nom à donner au cookie. La variable Contenu contient le contenu du cookie Exemple mon_cookie="oui:visite" Les Cookies - structure Nom=Contenu; expires=expdate; path=Chemin; domain=NomDeDomaine; secure Expires= expdate; Le mot réservé expires suivi du signe "=" (égal). Date à laquelle le cookie sera supprimé du disque dur. Format : A Wdy, DD-Mon-YYYY HH:MM:SS GMT générer avec les fonctions de l'objet Javascript Date Règle générale : indiquer un délai en nombre de jours (ou d'années) avant disparition du Cookie. Les Cookies - structure Nom=Contenu; expires=expdate; path=Chemin; domain=NomDeDomaine; secure path=Chemin; chemin de la page qui a créé le cookie. domain=NomDeDomaine; le nom secure du domaine de la page. (false par défaut) "true" (HHTPS) ou path, "false" (HTTP) : protocole utilisé. domain et secure sont facultatifs. Les Cookies - écriture propriété de l'objet document : document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ; // creation des variables var Nom = "MonCookie" ; var Contenu = "contenu" ; var expdate = new Date () ; // modification de la date d'expiration (10 jours) expdate.setTime (expdate.getTime() + ( 10 * 24 * 60 * 60 * 1000)) ; // ecriture du cookie sur le disque document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ; Les Cookies - lecture Accéder à la propriété cookie de l'objet document : Document.cookie var lesCookies ; lesCookies = document.cookie ; Les Cookies - modification Modification d'un cookie Modifier le contenu de la variable Contenu puis réécrire le cookie sur le disque dur du client Contenu = "Le cookie a été modifié..." ; document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ; Les Cookies - suppression Modifier la date de péremption : Mettre une date dans le passé. Le navigateur se charge du reste // on enlève une seconde a la date courante expdate.setTime (expdate.getTime() - (1000)) ; // écriture sur le disque document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ; AJAX LI288 – web et développement web Application traditionnelle Application WEB traditionnelle : Le client envoie une requete HTTP Le serveur renvoie une page Consommation inutile de la bande passante : Une grande partie du code HTML est commun aux différentes pages de l'application. Le chargement d‟une nouvelle page à chaque requête n‟est pas ergonomique Application traditionnelle Requête 1 Réponse 1 Html Génération du document pour la requête 1 Requête 2 Réponse 2 Html Client … Génération du document pour la requête 2 Serveur HTTP AJAX Qu'est-ce qu'AJAX ? Asynchronous Javascript and XML Pourquoi AJAX: Javascript est très utilisé au niveau du client : validation de Tout formulaire, modifications de la page, … ne peut pas être confié au client : Manque de Limitations sécurité/confiance AJAX Principe de base : Autant faire en sorte que les messages soient le plus petits possibles. Le client et le serveur dialoguent. Le client n'a pas besoin de toute la base de données, juste de suffisamment de données pour le client. Le serveur et le client ont chacun un travail L'application ne doit donc pas être prise en charge entièrement d'un coté ou de l'autre. AJAX = un acronyme de plus C'est juste du Javascript classique. Principe de base : L'application Javascript émet des requêtes vers le serveur avec un protocole donné. Le serveur répond avec les informations demandées. Tout se passe sans rechargement de la page. Mode synchrone ou asynchrone pour le client. Javascript traite les données reçues et modifie la page en conséquence. Qui utilise Ajax Clients de messagerie : Gmail, Yahoo Mail, HotMail Google Maps FlickR, Picasa Deezer Youtube, Dailymotion Myspace, Facebook AJAX Requête 1 Réponse 1 Html et Script Génération du document pour la requête 1 Requête 2 Réponse 2 Client Données Requête 3 Script Réponse 3 Données … Génération du Document pour la requête 2 Génération du Document pour la requête 3 Serveur HTTP Comment ça marche Un exemple sans AJAX : requête faite automatiquement par le navigateur récupération d'une image à distance <body onLoad="javascript:document.images[0].src = 'http://...'"> <img id="img01" src="vide.jpg"></a> </body> Comment ça marche <input type=“text” size=“5” onBlur=“miseAJour()”> 1. La fonction miseAJour crée un objet XMLHttpRequest Existe sur tous les navigateurs "modernes". 2. Cet objet permet de faire une requête vers la page concernée http://www.test.com/page.php?valeur=12 Conceptuellement identique à la recherche d'image. 3. On traite le résultat et on met à jour la page web L'objet XmlHttpRequest AJAX se base sur XmlHttpRequest Initialement développé par Microsoft, en tant qu'objet ActiveX, pour Internet Explorer 5 Puis repris et implémenté sous Mozilla 1 Safari 1.2, Konqueror 3.4 et Opera 8. Pas supporté par certains vieux navigateurs. Proposé en 2006 pour devenir une recommandation du W3C : http://www.w3.org/TR/XMLHttpRequest/ Draft novembre 2009 L'objet XmlHttpRequest Problèmes : Nécessite un navigateur compatible, autorisant le Javascript et XMLHTTP. Nécessite plus de tests car il existe de grandes différences entre les navigateurs. XMLHttpRequest n'est pas implémenté de la même manière selon les navigateurs (et les versions des navigateurs). Solution la plus simple : Aller chercher le code générique avec google. Création de l'objet XMLHttpRequest Pour Internet Explorer (avant IE7) : xhr Ou xhr = new ActiveXObject("Microsoft.XMLHTTP"); = new ActiveXObject("Msxml2.XMLHTTP"); Pour les autres navigateurs : xhr = new XMLHttpRequest(); Création de l'objet XMLHttpRequest function getXMLHttpRequest() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return NULL; }}}}} Création (bis) function getXMLHttpRequest() { if (window.XMLHttpRequest) return new XMLHttpRequest(); if (window.ActiveXObject) { var names = [ "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP" ]; for(var i in names) { try { return new ActiveXObject(names[i]); } catch(e) {} } } window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest."); return null; } Exemple simple <html> <body> <script language="javascript"> function getXMLHttpRequest() {...} function ajax() { var xhr=getXMLHttpRequest(); xhr.open("GET", "test.html", false); xhr.send(null); alert(xhr.responseText); } </script> <a href="javascript:ajax();">Cliquez-moi !</a> </body> </html> Propriétés de l'objet onreadystatechange : Fonction appelée à chaque changement d'état. readyState : statut de l'objet : 0 : non initialisé. 1 : ouverture = méthode open() appelée avec succès. 2 : envoyé = méthode send() appelée avec succès. 3 : en train de recevoir = données en cours de transfert. 4 : terminé = données chargées. responseText / responseXML Réponse sous forme de chaîne de caractères / objet DOM. Propriétés de l'objet status : code numérique de réponse du serveur HTTP, à tester quand les données sont chargées (readyState=4) 200 : OK. 404 : page introuvable. ... En local (sans serveur web), 0=OK statusText : message accompagnant le code de réponse : 404 : Not Found… Méthodes de l‟objet open(method, url, async, user, password) send (contenu) Prépare une requête en indiquant la méthode, l'URL, la drapeau de synchronisation (et éventuellement le nom d'utilisateur et le mot de passe). Effectue la requête, éventuellement en envoyant les données. setRequestHeader("champ","valeur") Assigne une valeur à un champ d'entête HTTP qui sera envoyé lors de la requête. Méthodes de l‟objet abort() Abandonne la requête. getAllResponseHeaders() Renvoie l'ensemble de l'entête de la réponse sous forme de chaîne de caractères. getResponseHeader("champEntete") Renvoie la valeur d'un champ d'entête HTTP. Synchrone ou asynchrone Requête synchrone : Tout est bloqué en attendant la réponse. Mauvais pour l'utilisateur. Les réponses arrivent forcément dans l'ordre. C'est l'approche classique. Requête asynchrone : Le navigateur continue à répondre aux événements en attendant la réponse. Attention à ne pas faire n'importe quoi. Javascript Asynchrone Le choix entre synchrone et asynchrone se fait dans l'appel à XMLHttpRequest (méthode open) : true pour asynchrone false pour synchrone Dans le cas d‟un appel asynchrone, le résultat est récupéré par une fonction : xhr.onreadystatechange = function() { ...}; Cette fonction sera appelée à chaque changement d'état de notre objet. Pour résumer Deux méthodes principales : open : pour établir une connexion. send : pour envoyer une requête au serveur. Récupération des données : Champs responseXml ou responseText. Créer un nouvel objet XmlHttpRequest, pour chaque fichier à charger. Un exemple function ajax() { var xhr=getXMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) alert("Received : " else alert("Error code : xhr.open("GET", "test2.html", true); xhr.send(null); } + xhr.responseText); " + xhr.status);}}; <body> <a href="javascript:ajax();">Cliquez-moi !</a> </body> HTTP GET ou POST GET pour récupérer des données Ne devrait pas provoquer de mises à jour sur le serveur. Les requêtes GET doivent pouvoir être bookmarkées ou mises en cache. POST pour envoyer des données Pour tout ce qui ne correspond pas à un GET AJAX : X = XML Le serveur renvoie des données XML La méthode responseXML de l‟objet XMLHttpRequest renvoie un document XML à traiter La méthode javascript getElementsByTagName(nom) d‟un objet (en l‟occurrence XML) permet de récupérer les éléments par rapport à leur nom dans un élément. var docXML= xhr.responseXML; var items = docXML.getElementsByTagName("donnee"); for (i=0;i<items.length;i++) { alert (items.item(i).firstChild.data); } AJAX ou AJAJ : J = JSON XML pas évident à parser en Javascript (cf cours 1) On utilise plutôt JSON { "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New","onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"}] } } } Exemple d‟utilisation de JSON Coté client : JSON inclus dans JavaScript. Le contenu est assigné à une variable et devient un objet. // Création de la connexion : var req = new XMLHttpRequest(); req.open("GET", "fichier.json", true); req.onreadystatechange = function() { if (req.readyState == 4) { var doc = eval('(' + req.responseText + ')'); } } req.send(null); Exemple d‟utilisation de JSON Coté serveur : Parseurs pour générer du JSON à partir d'objets en Php ou JAVA L'échange de données : Envoi avec AJAX <?php $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); echo json_encode($arr); ?> Affiche : {"a":1,"b":2,"c":3,"d":4,"e":5} Attention ! Les requêtes AJAX asynchrones passent par Internet Aucune garantie que les paquets arrivent dans l'ordre. Aucune garantie qu'une requête soit terminée avant qu'une autre ne soit lancée : Les délais peuvent varier énormément à du serveur et du réseau. cause de la charge Inconvénients JavaScript doit être activé. Les données chargées de façon dynamique ne font pas partie de la page. Prise en compte par les moteurs de recherche pas claire. Asynchrone => affichage avec délai, peut poser problème à l'utilisateur. Le bouton « Page précédente » ne marche pas en général. Conclusions sur Ajax Combinaison des langages standards du WEB (Javascript, DOM HTML, XML) Grâce à l‟objet XMLHttpRequest WEB dynamique « coté client » Utilisé par tous les sites « WEB 2.0 » JQUERY LI288 – web et développement web jQuery Librairie Javascript qui permet de : Simplifier les taches de base en Javascript. Accéder à des partie d'une page HTML : Utilisation d'expressions CSS Modifier l'apparence ou "Xpath" et le contenu de la page. Créer et modifier des événements. Animer une page. Faire de l'"AJAX". Eviter les problèmes de compatibilité entre navigateurs. jQuery Projet open-source, bien supporté et documenté. http://jQuery.com/ Ne se substitue pas à la connaissance de Javascript Tout ne se fait pas naturellement en jQuery. Eviter de tout "Jqueriser". Philosophie jQuery Sélectionner une partie du document. Agir dessus Objet jQuery = ensemble de noeuds du DOM Les objets jQuery se créent avec la fonction $(). $("div") retourne un objet contenant tous les "div" du document. Philosophie jQuery Sélectionner une partie du document. Agir dessus // récupérer tous les div du DOM puis les cacher $("div").hide(); // Simuler un clic sur tous les boutons $(":button").click(); // Ajouter un <span> à la fin de la page $("<span/>").appendTo("body"); Inclure du jQuery Télécharger le fichier jQuery.js Il existe un version jQuery-min.js plus légère Inclure le fichier comme un script externe : <script src="jQuery.js"/> Ou depuis le site de jQuery <script src=http://code.jQuery.com/jQuery-latest.js /> Une seule fonction : $ Exécution quand le DOM est construit Syntaxe courte : Syntaxe longue : $(function(){…}); $(document).ready(function(){…}); ou encore : jQuery("div"); a utiliser en cas d'utilisation d'autres librairies (moins de risque de conflits) Un exemple simple La méthode .addClass() modifie le DOM en ajoutant un attribut de classe $("div").addClass("c1") modifie tous les <div> en <div class="c1"> Un exemple simple Pour faire ça : Créer une fonction : function doIt(){$("div").addClass("c1")} L'exécuter au chargement de la page <body onLoad="doIt()"> Problèmes : Il faut modifier la partie HTML Oblige à attendre que tout soit chargé (notamment les images). Un exemple simple jQuery fournit un événement similaire mais disponible après la création du DOM et avant le chargement des images : $(document).ready(doIt); Avantage : rien à modifier dans le HTML Autre solution : $(document).ready(function(){$("div").addClass("c1");}); Utilisation de $ Créer des objets jQuery var el = $("<div/>") Manipuler des objets existant : $(window).width() Sélectionner des objets $("div").hide(); $("div", $("p")).hide(); Retour des fonctions La plupart des fonctions retournent des objets jQuery : Possibilité de chaîner les appels de fonction. Attention à la lisibilité ! $("div") .show() .addClass("main") .html("Hello jQuery"); Besoin d'aide http://jQuery.com/ Tout Le y est : code sources La doc sur tous les paramètres et toutes les fonctions. Des exemples. Plein de plugins. … Dans la suite Des exemples pour : Sélectionner des objets. Utiliser les événements. Ajouter des effets d'animations. Faire des requêtes "à la AJAX" JQUERY COMMENT SÉLECTIONNER LI288 – web et développement web Sélecteur Principe de base : Un sélecteur retourne un tableau d'objets jQuery : $("*") $("div") est un tableau contenant tous les <div> de la page. $("div").length permet de connaître le nombre de div dans la page. Sélection restreinte Possibilité de sélectionner : par type de bloc par identifiant (id) par classe (class) // <div>Test</div> $("div") // <span id="test">JL</span> $("#test") // <ul class="test">JL</ul> $(".test") Sélection restreinte Possibilité de combiner les sélecteurs. // tous les divs de classe main $("div.main") // tous les tableaux d'identifiant data $("table#data") // objets d'id "content" ou de classe "menu" $("#content, .menu") Sélection restreinte On peut aussi faire des recherches avec find(). Supprimer une restriction avec end(). //Tous les <p> contenant des objets avec classe header $("p").find(".header").show(); // similaire à : $(".header", $("p")).show(); // cacher tous les h1 qui contiennent un p $("h1").find("p").end().hide(); Sélection restreinte Pour obtenir un seul élément : $("div").get(2) ou $("div")[2] $("div").eq(2) // en partant de la fin $("div").eq(-2) Filtres sur les nom d'attributs // les éléments <div /> ayant un identifiant $("div[id]") // les éléments <div /> avec id "test" $("div[id='test']") // les éléments <div /> dont l'id commence par test $("div[id^='test']") // les éléments <div /> dont l'id termine par test $("div[id$='test']") // les éléments <div /> dont l'id contient test $("a[href*='test']") La fonction each appelle une fonction pour chaque élément sélectionné $(this) = élément courant i - index de l'élément courant $("table tr") .each(function(i){ if (i % 2) $(this).addClass("odd"); }); Sélecteurs de hiérarchie Possibilité d'atteindre : Les fils. Tous les descendants. Le ou les frères suivants. <ul> <li>item 1</li> <li>item 2</li> <li class="trois">item 3 <ol><li>3.1</li></ol></li> <li>item 4 <ol><li>4.1</li></ol></li> <li>item 5</li> </ul> // cache 4 et 5 $('li.trois ~ li').hide(); // cache 4 $('li.trois + li').hide(); // cache les <ol> $("ul ol") // ne cache rien $("ul > ol") Sélecteurs de hiérarchie Possibilité de sélectionner avec des fonctions // frère suivant .next(expr) // frère précédent .prev(expr) // frères .siblings(expr) // enfants .children(expr) // père .parent(expr) Sélecteurs supplémentaires // premier paragraphe p:first // dernier élément de liste li:last // quatrième lien a:nth(3) ou a:eq(3) // paragraphes pairs ou impairs p:even or p:odd every // Tous les liens après (greater than) le quatrième ou avant a:gt(3) or a:lt(4) // Liens qui contiennent le mot click a:contains('click') (lower than) Sélecteurs supplémentaires Utilisation de is() $("table td").each(function() { if ($(this).is(":first-child")) { $(this).addClass("firstCol"); } }); Sélecteurs de visibilité // si l'élément est visible $("div:visible") // sinon $("div:hidden") Sélecteurs de formulaires // checkbox $("input:checkbox") // boutons radio $("input:radio") // bouton $(":button") // champ texte $(":text") Sélecteurs de formulaires $("input:checked") $("input:selected") $("input:enabled") $("input:disabled") <select name="valeur"> <option value="1">1</option> <option value="2" selected="selected">2</option> <option value="3">3</option> </select> $("select option:selected").val() Restriction $("div") .slice(1, 4) .not("[name*='green']") .addClass("couleur"); }); <div name="red"></div> <div name="red"></div> <div name="red"></div> <div name="green"></div> <div class="couleur" name="red"></div> <div name="red"></div> <div name="green"></div> <div name="green"></div> <div class="couleur" name="red"></div> <div name="green"></div> Modifier le contenu HTML // modifier le contenu de tous les p du document $("p").html("<div>Bonjour</div>"); // modifier le contenu de div.a en celui de div.c $("div.a").html($("div.c").html()); // idem pour div.b avec échappement du contenu de div.c $("div.b").text($("div.c").html()); <p></p> <p><div>Bonjour</div></p> <div id="a">Bonjour</div> <div id="a"><a href="#">Au revoir</a></div> <div id="b"><a href="#">Au revoir</a></div> <div id="c"><a href="#">Au revoir</a></div> <div id="b"><a href="#">Au revoir</a></div> <div id="c"><a href="#">Au revoir</a></div> Modifier des valeurs val() : permet d'obtenir la valeur des objets val(valeur) permet de modifier la valeur des objets // obtenir la valeur de toutes les checkbox validées $("input:checkbox:checked").val(); // modifier la valeur d'une textbox de nom txt $(":text[name=‘txt’]").val("Hello"); // select or check lists or checkboxes $("#lst").val(["NY","IL","NS"]); Manipulation de CSS Il est possible de modifier les classes des objets : addClass, removeClass, toggleClass hasClass // ajouter et supprimer une classe $("p").removeClass("blue").addClass("red"); // ajouter si absent ou l'inverse $("div").toggleClass("main"); // vérifier l'existence d'une classe if ($("div").hasClass("main")) { //… } Manipulation de CSS // get style $("div").css("background-color"); // set style $("div").css("float", "left"); // set multiple style properties $("div") .css({ "color":"blue", "padding": "1em", "margin-right": "0", marginLeft: "10px" }); Insérer des éléments // Ajouter à la fin de l'objet $("<ul>").append("<li>Test</li>"); $("<li/>").html("Test").appendTo("ul"); // Ajouter au début $("ul").prepend("<li>Test</li>"); $("<li/>").html("Test").prependTo("ul"); Remplacer des éléments // remplace tous les <div>Test</div> par des <h1> $("h1").replaceWith("<div>Test</div>"); // Remplace tous les h1 par un div $("<div>Test</div>").replaceAll("h1"); // Sans modifier le contenu : $("h1").each(function(){ $(this) .replaceWith("<div>"+ $(this).html()+"</div>"); }); Supprimer des éléments // supprimer $("span.names").remove(); // vider tout le contenu $("#mainContent").empty(); // déplacer $("p") .remove(":not(.red)") .appendTo("#main"); Gestion des attributs // <a href="home.htm">...</a> $("a").attr("href","home.htm"); // met tous les attributs comme celui du premier bouton $("button:gt(0)") .attr("disabled", $("button:eq(0)").attr("disabled)); // supprime l'attribut disabled $("button").removeAttr("disabled") Attributs multiples $("img") .attr({ "src" : "/images/smile.jpg", "alt" : "Smile", "width" : 10, "height" : 10 }); JQUERY LES ÉVÉNEMENTS LI288 – web et développement web Le premier événement Chargement de la page $(document).ready(…) Assez similaire onLoad : à onLoad() : quand tout est chargé ready : quand le DOM est prêt (avant chargement des images) $(document).ready(function(){ ... }); Gestionnaire d'événements Événements disponibles : blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error Associer des événements // associer une fonction à un événement $("div").bind("click", function() {$(this).text($(this).html()) + "test"}); // exécuter une seule fois (pour chaque objet) $("div").one("click", function() {$(this).text("test")}); // arrêter d'exécuter l'événement $("div").bind("click", function() {$(this).text("test" + $(this).html()); $("div").unbind("click")}); Trigger Force l'appel aux événements liés à un objet <button>#1</button> <button>#2</button> <div> <span>0</span> clics. </div> <div> <span>0</span> clics. </div> $("button:first").click(function () { update($("span:first")); }); $("button:last").click(function () { $("button:first").trigger('click'); update($("span:last")); }); function update(j) { var n = parseInt(j.text(), 10); j.text(n + 1); } TriggerHandler triggerHandler = trigger mais le comportement par défaut n'est pas exécuté. <button id="old">.trigger("focus")</ button> <button id="new">.triggerHandler("fo cus")</button> <input type="text" value="To Be Focused"/> $("#old").click(function(){ $("input").trigger("focus");}); $("#new").click(function(){ $("input").triggerHandler("focus");}); $("input").focus(function(){ $("<p>Focus</p>").appendTo("body");}); L'objet Event - attributs type : nom de l'événement exécuté target : objet qui a exécuté l'événement cf propagation des événements currentTarget : pageX et pageY : = this position de la souris … Un exemple : position de la souris Exemple avec événement lié au déplacement de la souris. Via un événement lié à tout le document. <div id="log"></div> <script> $(document) .bind('mousemove',function(e){ $("#log") .text(e.pageX + ", " + e.pageY); }); </script> L'objet Event - méthodes preventDefault / isDefaultPrevented : bloque le fonctionnement par défaut stopPropagation / isPropagationStopped / stopImmediatePropagation / isImmediatePropagationStopped Comportement par défaut // modifier le comportement par défaut $("div").triggerHandler("click"); // empêcher le comportement par défaut function clickHandler(e) { e.preventDefault(); } // similaire à : function clickHandler(e) { return false; } Propagation des événements Exemple : menu déroulant multi-niveaux. Un clic se propage sur tous les objets associés : Si on clique sur <li> Niveau 3 : item 2</li> alors on clique aussi sur le <li> du niveau 2 et celui du niveau 1 On a donc trois alertes. La propagation est ascendante. $(document).ready(function () { $("li").click(function () { alert($(this).html()); }); }); <ul> <li> Niveau 1 : item 1</li> <li> Niveau 1 : item 2 <ul> <li> Niveau 2 : item 1</li> <li> Niveau 2 : item 2 <ul> <li> Niveau 3 : item 1</li> <li> Niveau 3 : item 2</li> </ul></li></ul></li></ul> Propagation des événements On peut stopper la propagation des événements : stopPropagation(); Ou de manière similaire faire return false; Attention cela peut bloquer d'autres choses. $(document).ready(function () { $("li").click(function (e) { alert($(this).html()); e.stopPropagation(); }); }); Evénements dans le futur Un événement n'est appliqué qu'aux éléments qui existent : Si un <div> est créé après l'ajout de l'événement, il ne sera pas cliquable. Avec live(), même si le <div> est créé plus tard, il sera cliquable. die() détruit tous les événements live(). // attacher un événement même dans le futur ("div").live("click", fn); // détacher les événements créés avec live ("div").die("click", fn); Remarque Le même événement peut être créé plusieurs fois : Tous les événements seront exécutés. <a href="">clic</a> <script> $("a").click(function(event) { alert(event.type); }); $("a").click(function(event) { alert(event.pageX + ", " + event.pageY); }); </script> JQUERY LES EFFETS LI288 – web et développement web Apparition et disparition // montrer un élément $("div").show(); // montrer un élément lentement (slow=600ms) $("div").show("slow"); // cacher un élément rapidement (fast=200ms) $("div").hide("fast"); // inverser (montrer ou cacher) en une durée fixée $("div").toggle(100); Translation et fading // Translation $("div").slideUp(); $("div").slideDown("fast"); $("div").slideToggle(1000); // Fading $("div").fadeIn("fast"); $("div").fadeOut("normal"); // Fading avec opacité fixée $("div").fadeTo("fast", 0.5); Fin d'un effet $("div") .hide("slow", function() { $("div").show("slow")}); $("div").hide(); $("a").click(function() { $("div") .show("fast", function() { $(this).html("show div");}); }); Effet personnalisé .animate(options, durée, transition, complete, ...) : Options : ensemble de propriétés CSS. Transition : comment se déroule l'animation (linéaire ou pas). Complete : callback exécuté après la fin de l'animation. … // réduction de la largeur à 90%, ajout d'une bordure bleue de largeur 5px et changement d'opacité. Le tout en 1s. $("div") .animate({ width: "90%", opacity: 0.5, borderWidth: "5px"}, 1000); Enchainement d'animations Par défaut les animations sont effectuées l'une à la suite de l'autre. Modifiable en utilisant "queue:false". // enchainement des animations // modification du style, // puis de la largeur // et enfin de l'opacité $("div") .animate({border: "5px solid blue"},2000) .animate({width: "20%"},2000) .animate({opacity: 0.5},2000); // animations simultanées $("div") .animate({border: "5px solid blue"},{queue:false, duration:100}) .animate({width: "20%"}, {queue:false, duration:2000}) .animate({opacity: 0.5},2000); JQUERY FONCTIONNALITÉS "AJAX" LI288 – web et développement web Charger du contenu Pour mettre du contenu dans un objet : c'est un peu plus simple qu'en "Ajax". On peut ne récupérer qu'une partie du fichier Attention : tout le fichier est récupéré puis parsé. // version sans arguments : $("div").load("fichier.html"); // version avec arguments : $("div#content").load( "fichier.php", {"nom":"guillaume"}); // version ne récupérant que l'objet d'id monid $("div").load('test.html #monid'); Charger du contenu Avec GET / POST $.get( "fichier.html", {id:1}, function(data){ alert(data); }); $.post( " fichier.html", {id:1}, function(data){ alert(data); }); Les fonctions AJAX .ajaxComplete() .ajaxError() Fonction à appeler avant l'envoi. .ajaxStop() Fonction à appeler au lancement de la requête. .ajaxSend() Fonction à appeler en cas de fin sur erreur .ajaxStart() Fonction à appeler à la fin de la requête. Fcontion à appeler quand toutes les requêtes Ajax sont terminées. .ajaxSuccess() Fonction à appeler quand la requête termine avec succès. Les fonctions AJAX $('.log').ajaxStart(function() {$(this).append('Start.');}); $('.log').ajaxSend(function() {$(this).append('Send.');}); $('.log').ajaxComplete(function() {$(this).append('Complete.');}); $('.log').ajaxStop(function() {$(this).append('Stop.');}); $('.log').ajaxSuccess(function() {$(this).append('Success.');}); $('.trigger').click(function() { $('.result').load('fichier.json'); }); <div class="trigger"> Trigger </div> <div class="result"></div> <div class="log"></div> <div class="trigger"> Trigger </div> <div class="result">[0]</div> <div class="log"> Start.Send.Success.Complete.S top. </div> Récupérer du JSON - Javascript $.getJSON( "fichier.json", {id:1}, function(users) { alert(users[0].name); }); $.getScript( "script.js", function() { ...; }); De manière générale Il existe la fonction ajax générique : Toutes les autres fonctions sont un cas particulier de celle-ci. $.ajax({ async: false, type: "POST", url: "test.html", data: "nom=JL", success: function(msg){ alert( "Data Saved: " + msg );} }); Attention Les événements AJAX ne sont pas liés à un appel en particulier : il faut se souvenir des appels et retrouver d'où est venu l'appel $('.log') .ajaxComplete(function(e, xhr, settings) { if (settings.url == 'ajax/test.html') { $(this).text('ok.'); } }); CONCLUSIONS LI288 – web et développement web Javascript Code dense (pas de typage) DOM permet de modifier simplement des pages HTML Recherche par ID, par nom, ... Gestion d'événements Permet de rendre tout plus interactif Validation de formulaires, dialogues, etc. AJAX (cours 2/3) Ajax Combinaison des langages standards du WEB (Javascript, DOM HTML, XML) Grâce à l‟objet XMLHttpRequest WEB dynamique « coté client » Utilisé par tous les sites « WEB 2.0 » Un outil à utiliser en attendant le déploiement du HTML5 (prévu pour 2010) jQuery Possibilité de récupérer des objets du DOM. Evénements et animations. AJAX. Tout ça de manière indépendante des navigateurs. Mais encore En plus des fonctions, on a accès à de nombreuses fonctions d'interface utilisateur (jQuery-UI) : Drag and drop Tableaux triables Accordéons Eléments triables Barres de progression Onglets … Plugins plus de 4000 plugins actuellement