La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Xavier Tannier Yann Jacob JavaScript.

Présentations similaires


Présentation au sujet: "Xavier Tannier Yann Jacob JavaScript."— Transcription de la présentation:

1 Xavier Tannier Yann Jacob JavaScript

2 Programmation Web / Bases de Données Introduction Quest-ce que JavaScript ? 2 Le clientLe serveur (navigateur)(HTTP) URL Pages HTML statiques La page courante est détruite quand lutilisateur navigue vers une nouvelle page Translation URL => fichier statique URL

3 Programmation Web / Bases de Données Introduction Quest-ce que JavaScript ? 3 Le clientLe serveur (navigateur)(HTTP) URL + paramètres Pages HTML dynamiques (PHP, CGI,…) La page courante est détruite quand lutilisateur navigue vers une nouvelle page Translation URL => Programme => Envoi du résultat du programme URL + paramètres

4 Programmation Web / Bases de Données Introduction Quest-ce que JavaScript ? 4 Le clientLe serveur (navigateur)(HTTP) URL + paramètres Pages HTML contenant du JavaScript La page est modifiée sans rechargement ni nouvelles requêtes au serveur

5 Programmation Web / Bases de Données Javascript, AJAX JavaScript Permet de modifier dynamiquement la page web. Créé par Netscape en PHP, ASP, CGI, etc. : scripts coté serveur. Nécessite un rechargement de la page. – Envoie dun formulaire, clic sur un lien – JavaScript : script coté client. Ne recontacte pas le serveur web. – Réagit aux événements souris, clavier, formulaires – Peut modifier une sous partie de la page Note : aucun lien avec Java. Nom officiel ECMAScript. 5

6 Programmation Web / Bases de Données Javascript, AJAX Ajouter du JavaScript à une page Dans le fichier XHTML – document.write(" Hello World! "); A lextérieur – – Note : ceci ne fonctionne pas avec IE : 6

7 Programmation Web / Bases de Données Javascript, AJAX Syntaxe Comme en C et en Java : – Des points-virgules – Des accolades – Les opérateurs + - * / % = += -= *= /= %= == != = && || ! ?: Comme en Java : – Les structures de contrôle (voir plus loin) – Opérateur + pour la concaténation des chaînes de caractères x = 5 + 5; // 10 x = "5" + "5"; // "55" x = 5 + "5"; // "55" x = "5" + 5; // "55" 7

8 Programmation Web / Bases de Données Javascript, AJAX Syntaxe Variables : var x = 10; – Pas de type de variable à la déclaration – Variables locales au bloc courant – Les variables non déclarées sont créées à la 1 ère affectation – 5 types de variables en interne (booléen, nombre, string, fonction, objet) x = "string \"xyz\" !\nXYZ"; – Opérateur typeof – Opérateur === pour tester la valeur et le type 10 == "10"; // true 10 === "10"; // false – Expressions régulières var str = "Polytech Paris-Sud"; var re = /polytech/i; alert(str.match(re)); 8

9 Programmation Web / Bases de Données Javascript, AJAX Syntaxe Les tableaux sont des objets : – var tab = new Array(); tab[0] = 123; tab[1] = 456; tab["key"] = "value"; – var tab = new Array(123, 456, 789); – var tab = [123, 456, 789]; 9

10 Programmation Web / Bases de Données Javascript, AJAX Syntaxe Structures de contrôle : – if(x){ … } else if(y){ … } else{ … } – switch(x){ case 1: …; break; default : … } – for(x = A; x < B; x++){ … } et break; continue; – while(x){ … } et do{ … } while(x); – for(x in obj){ … } x = les index, clefs, propriétés de obj – try{ … } catch(err) { alert(err.description); } – throw var; Nimporte quelle type de variable peut être une exception – function name(arg1, arg2){ …; return x; } 10

11 Programmation Web / Bases de Données Javascript, AJAX Objets prédéfinis (1/2) Un objet JavaScript est un ensemble de propriétés. Les propriétés de type fonction agissent comme des méthodes. Singletons document, window, navigator, Math,… – document.write("Hello World!"); – window.status = "Hello World!"; – alert(navigator.appName); – alert(Math.sqrt(Math.PI)); Exceptions (lancées par JavaScript), strings,… – catch(err) { alert(err.description); } – var txt = "Hello World!"; – alert(txt.length); – alert(str.toUpperCase()); 11

12 Programmation Web / Bases de Données Javascript, AJAX Objets prédéfinis (2/2) Types standard – var date = new Date(2010, 2, 14); var today = new Date(); // Par défaut aujourdhui – var tab1 = [1, 2, 3]; var tab2 = [10, 20, 30]; tab3 = tab1.concat(tab2); // [1, 2, 3, 10, 20, 30] // Et aussi push, pop, slice, join, sort,… Surcharge dopérateurs (uniquement pour les types standard) – if (today > date) { alert("En retard pour la St Valentin"); } – date.setDate(date.getDate() + 45); // 28/04/

13 Programmation Web / Bases de Données Javascript, AJAX Objets Définir vos propres objets : objets anonymes Var obj = new Object; obj.x = 1; obj.y = 2; Définir une classe function MaClasse(arg){ this.x = 1; this.y = arg; } var obj = new MaClasse(2); 13

14 Programmation Web / Bases de Données Javascript, AJAX Objets Prototype : tous les objets ont un prototype – Quand on accède à obj.x, JavaScript vérifie si obj contient une propriété x, sinon si obj.prototype contient x, ou obj.prototype.prototype, etc. – A.prototype.MaMethode = function(arg){ this.varA += arg; }; A.prototype.defVar = -2; function A() { this.varA = 2; } B.prototype = new A; function B() { this.varB = 4; } x = new B(); alert(x.defVar +','+ x.varA +','+ x.varB); // "-2,2,4" x.MaMethode(5); alert(x.varA); // "7" 14

15 Programmation Web / Bases de Données Javascript, AJAX Objets Variables privée : avec des closures function Classe(){ var x = 42; this.GetX = function() { return x; } this.SetX = function(newX) { x = newW; } } Plus dinfos (super constructeur, polymorphisme,…) : 15

16 Programmation Web / Bases de Données Javascript, AJAX Interactions avec lutilisateur Événements : attributs onXXX en HTML4 – – LIMSI – Si checkForm() retourne false, script.php nest pas appellé Événements : propriétés onXXX du DOM – element.onclick = maFonction; (Pas de parenthèses) – maFonction a accès à this : element.onclick = maFonction; another_element.onclick = maFonction; function maFonction() { this.style.backgroundColor = '#FF0000'; } – On verra comment avoir element plus tard ( getElementsByXXX ) Plus dinfo : 16

17 Programmation Web / Bases de Données Javascript, AJAX Cookies Les cookies sont aussi disponibles en JavaScript – document.cookie : tous les cookies dun coup concaténés en une seule string – function getCookie(name){ if(document.cookie.length > 0){ var start = document.cookie.indexOf(name + "="); if (start != -1){ start += name.length + 1; end = document.cookie.indexOf(";", start); if(end==-1) end = document.cookie.length; return unescape(document.cookie. substring(start, end)); } } return ""; } Utilisez une librairie (on verra plus tard aussi) 17

18 Programmation Web / Bases de Données Javascript, AJAX XHTML Document Object Model (DOM) Les documents XHTML sont des arbres XML, et DOM un moyen de parcourir et modifier ces arbres Des objets JavaScript représentent les nœuds – x.innerHTML le texte contenu dans x – x.nodeName le type de balise de x (p, div,…) – x.parentNode référence au noeud parent de x – x.childNodes liste des nœuds enfants de x – x.attributes liste des attributs (class,…) de x – x.style.attributCSS change le style de lélément 18

19 Programmation Web / Bases de Données Javascript, AJAX XHTML Document Object Model (DOM) 19

20 Programmation Web / Bases de Données Javascript, AJAX XHTML DOM Accès aux nœuds – document.body : le nœud body + navigation avec parentNode, childNodes, next/previousSibling, etc. ( document.documentElement donne la racine ) – Par id : retourne un objet de type nœud document.getElementById("menu"); – Par type de balise : retourne une liste de nœuds document.getElementsByTagName("p"); – Pas de getElementsByClass dans le standard 20

21 Programmation Web / Bases de Données Javascript, AJAX XHTML DOM Alternative à innerHTML : – x.innerText : Internet Explorer seulement ! – x.childNodes[0].nodeValue : le texte contenu dans un nœud est lui-même un nœud spécial de type nodeType = 3 (Text) x.style.attributCSS – attributCSS a presque le même nom quen CSS – On enlève les "-" et on met une majuscule sur le mot suivant – background-color style.backgroundColor – font-family style.fontFamily – (Plus dinfo 21

22 Programmation Web / Bases de Données Javascript, AJAX XHTML DOM x.attributXHTML – document.getElementById("UneForm").action = "script.php"; – document.getElementById("UneCheckbox").checked = true; – document.getElementById("UneImg").src = "over.png"; Fonctions spéciales pour certaines balises – document.getElementById("UneTable").deleteRow(2); – document.getElementById("UneForm").submit(); 22

23 Programmation Web / Bases de Données Javascript, AJAX XHTML DOM parent.removeChild(node); var node = document.createElement("p"); node.class = "test"; node.innerHTML = "Nœud créé " + "dynamiquement"; parent.appendChild(node); var newnode = node.clone(); parent. appendChild(newnode); 23

24 Programmation Web / Bases de Données Introduction AJAX 24 Le clientLe serveur (navigateur)(HTTP) URL + paramètres Pages HTML avec AJAX La page est modifiée sans rechargement. Le Javascript peut contacter le serveur web (en arrière plan) pour obtenir de nouvelles informations et modifier la page en conséquence. URL + paramètres

25 Programmation Web / Bases de Données Javascript, AJAX AJAX Asynchronous JavaScript and XML JavaScript peut envoyer des requêtes au serveur web, en arrière plan, sans recharger la page web principale AJAX nest pas un langage de programmation, cest une technique Suggestions dans Google, édition inline dans Flicker, mises à jour automatique dans Twitter… Nouvel objet : XMLHttpRequest 25

26 Programmation Web / Bases de Données Javascript, AJAX XMLHttpRequest if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); }else{ // IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } Exemple synchrone (cest-à-dire bloquant, à éviter) xmlhttp.open("GET", "/citation.php?id=12", false); xmlhttp.send(null); document.getElementById("cit").innerHTML = xmlhttp.responseText; 26

27 Programmation Web / Bases de Données Javascript, AJAX XMLHttpRequest Asynchrone : on utilise des callbacks xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ elem.innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", url, true); xmlhttp.send(null); 27

28 Programmation Web / Bases de Données Javascript, AJAX Saisir un mot : Suggestions: Exemple : auto-complétion / suggestion 28 function showHint(){ if(this.value.length == 0){ document.getElementById("suggest").innerHTML=""; return; } xmlhttp = new XMLHttpRequest(); var url = "suggest.php?txt=" + this.value; xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ document.getElementById("suggest").innerHTML = xmlhttp.responseText; } }; xmlhttp.open("GET", url, true); xmlhttp.send(null); } document.getElementById("txt1").onkeyup = showHint;

29 Programmation Web / Bases de Données Javascript, AJAX Framework/Library Couche supplémentaire par-dessus les API XMLHttpRequest et Document Object Model – Fonctionnalités cross-browser – Fonctions utilitaires – Vérification derreur Prototype : jQuery : 29

30 Programmation Web / Bases de Données Javascript, AJAX Prototype Sélecteur déléments DOM par id : $ – $("id").scrollTo(); – $("sect1", "sect2", "footer).hide(); Sélection déléments universel : $$ – $$("expression CSS").remove(); – $$(".classe").removeClassName("class"); – $$("ul ol, ul ul").show(); Plein de nouvelles fonctions à appliquer aux éléments 30

31 Programmation Web / Bases de Données Javascript, AJAX Auto-complétion / suggestion avec prototype 31 new Ajax.Request('suggest.php', { method: 'get', parameters: { txt: $F('txt1'), param2: 12 }, onSuccess: function(transport){ var r = transport.responseText; $('suggest').update(r); }, onFailure: function(){ $('suggest').update("Erreur AJAX"); } });

32 Programmation Web / Bases de Données Javascript, AJAX Prototype : encore plus court 32 new Ajax.Updater('suggest', 'suggest.php', { method: 'get', parameters: { txt: $F('txt1') } );

33 Programmation Web / Bases de Données Javascript, AJAX Mettre à jour une liste 33 new Ajax.Updater('suggest', 'suggest.php', { method: 'get', insertion: Insertion.Top, parameters: { txt: $F('txt1') } );

34 Programmation Web / Bases de Données Javascript, AJAX Mettre à jour régulièrement 34 new Ajax.PeriodicalUpdater('chat', 'getchatmessages.php', { method: 'get', frequency: 1, decay: 2 } );

35 Programmation Web / Bases de Données Javascript, AJAX Gestion des événements Plusieurs callback pour le même événement $(id').observe('click', respondToClick); function respondToClick(event) { var element = event.element(); element.addClassName('active'); event.stop(); // équivalant de return false } Quand le navigateur télécharge la page web, le JavaScript est exécuté au fut et à mesure. Le script ne peut donc pas « voir » les éléments DOM qui ne sont pas encore téléchargés. (Plus dinfo : document.observe("dom:loaded", function() {... }); 35

36 Programmation Web / Bases de Données Javascript, AJAX jQuery jQuery est similaire à Prototype. – Fonction $ équivalente à $$ de Prototype ( $("#id") est équivalente à $ de Prototype) – Équivalent de Ajax.Updater : – $("#suggest").load("suggest.php",{ txt: $("txt1").val() }); 36

37 Programmation Web / Bases de Données Javascript, AJAX Plus de librairies Cookie : Effets visuels : Valider des formulaires avant leurs soumissions : Modifier des : et Programmer du JavaScript en Java : 37

38 Programmation Web / Bases de Données Introduction noscript Vous avez besoin de Javascript Mieux : Pas de Javascript. Aller à la Version web 1.0 Encore mieux : supporter JavaScript et pas de JavaScript dans la même page grâce à une utilisation judicieuse de event.stop() 38

39 Programmation Web / Bases de Données Javascript, AJAX Références Spécification de Document Object Model Spécification de JavaScript ECMA-ST/ECMA-262.pdf ECMA-ST/ECMA-262.pdf Spécification de XMLHttpRequest 39


Télécharger ppt "Xavier Tannier Yann Jacob JavaScript."

Présentations similaires


Annonces Google