1 / 39

Programmation Web : DOM / JavaScript

Programmation Web : DOM / JavaScript. Jérôme CUTRONA jerome.cutrona@univ-reims.fr. DOM = Document Object Model. API (Application Programming Interface) pour la manipulation de HTML / XML Définit la structure logique des documents Définit la façon d’y accéder, de la manipuler

gaura
Download Presentation

Programmation Web : DOM / JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programmation Web :DOM / JavaScript Jérôme CUTRONA jerome.cutrona@univ-reims.fr Programmation Web 2013-2014

  2. DOM = Document Object Model • API (Application Programming Interface) pour la manipulation de HTML / XML • Définit la structure logique des documents • Définit la façon d’y accéder, de la manipuler • Créer des documents • Parcourir leur structure • Ajouter, effacer, modifier des éléments • Ajouter, effacer, modifier leur contenu Programmation Web 2013-2014

  3. Qu’est-ce que le DOM ? <table> <tbody> <tr><td>A</td> <td>B</td> </tr> <tr><td>C</td> <td>D</td> </tr> </tbody> </table> Programmation Web 2013-2014

  4. Qu’est-ce que le DOM ? • Représentation arborescente du document • Modèle objet (structure + méthodes) • Permet la manipulation du document • Une implémentation : JavaScript… • … Des implémentations : • JavaScript IE • JavaScript Mozilla / Firefox • JavaScript Opera • … Programmation Web 2013-2014

  5. JavaScript : Principe • Langage de script objet • Syntaxe style C / C++ / Java • Sensible à la casse • N’est PAS du Java • Exécuté par le client Web • Peut être désactivé sur le client • Nombreux objets pour la manipulation HTML • Gestion des événements HTML • Rendre les pages dynamiques (HTML+CSS+JS) • Haut niveau d’incompatibilité… Programmation Web 2013-2014

  6. JavaScript : Exemple <html> <head> <title>Ma première page Web</title> </head> <body> <scripttype="text/javascript"language="JavaScript"> <!-- document.writeln("Salut !") ; // --> </script> </body> </html> Programmation Web 2013-2014

  7. Structures conditionnelles if(condition) { instructions ; } [ else { instructions ; } ] Programmation Web 2013-2014

  8. Structures conditionnelles switch(expression) { caseétiquette: instructions ; break ; caseétiquette: instructions ; break ; default: instructions ; } Programmation Web 2013-2014

  9. Structures itératives while(condition) { instructions ; } do { instructions ; } while(condition) ; Programmation Web 2013-2014

  10. Structures itératives for(instr ;condition ; instr) { instructions ; } for(variable inobjet|tableau) { instructions ; } for each(variable inobjet|tableau) { instructions ; } Programmation Web 2013-2014

  11. Commentaires // Commentaire ligne /* Commentaire multi-lignes */ Programmation Web 2013-2014

  12. Variables • Déclaration de variables facultative • Variables non typées à la déclaration varnom_variable ; • Typage dynamique à l’affectation : • Nombres (42, 3.14) • Booléens (true, false) • Chaînes ("Salut !", 'Salut !' ) • null • undefined • Fonctions • Objets Programmation Web 2013-2014

  13. Typage des variables à l’affectation undefined number number string boolean object function object Programmation Web 2013-2014 var v ; window.alert("Type de " + v + " : " + typeof v) ; v = 12 ; window.alert("Type de " + v + " : " + typeof v) ; v = 12.42 ; window.alert("Type de " + v + " : " + typeof v) ; v = 'hello' ; window.alert("Type de " + v + " : " + typeof v) ; v = true ; window.alert("Type de " + v + " : " + typeof v) ; v = null ; window.alert("Type de " + v + " : " + typeof v) ; v = function(a){return a+12 ; } ; window.alert("Type de " + v + " : " + typeof v) ; v = { a:12, b:'attr'} ; window.alert("Type de " + v + " : " + typeof v) ;

  14. Fonctions : définition classique • Valeur de retour non typée • Paramètres non typés // Définition : functionma_fonction(arguments) { instructions ; returnquelque_chose; // ou pas… } // Appel : ma_fonction(12) ; Programmation Web 2013-2014

  15. Fonctions : variable et affectation 84 144 144 24 Programmation Web 2013-2014 Fonction est un type de variable function f(a){ return a + a ; } var g = function(a){ return a * a ; } ; function h(a, une_fonction){ returnune_fonction(a) ; } window.alert("f(42) : " + f(42)) ; window.alert("g(12) : " + g(12)) ; window.alert("h(12, g) : " + h(12, g)) ; window.alert("h(12, f) : " + h(12, f)) ;

  16. Fonctions : variable et affectation Voir Programmation Web 2013-2014 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Les fonctions sont un type de variable</title> <scripttype='text/javascript'> // Au chargement complet du document window.onload = function(){ var bouton = document.forms['formu'].elements['btn'] ; bouton.onclick = function(){ window.alert('Click') ; } } </script> </head> <body> <formname='formu'> <inputtype='button'name='btn'value='Cliquez'> </form> </body> </html>

  17. Portée des variables Programmation Web 2013-2014 • La portée des variables est liée aux fonctions et non aux blocs if, while, etc. • Les variables sont globales si • déclarées hors de toute fonction • déclarées dans une fonction SANS le mot clé var • Les variables sont locales à une fonction si • déclarées dans une fonction AVEC le mot clé var • Les variables sont accessibles • après la déclaration • après la première affectation

  18. Portée des variables : illustration string string string undefined string string undefined number string undefined undefined undefined Voir Programmation Web 2013-2014 var a = 'contenu variable a' ; function f(){   b = 'contenu variable b' ; var c = 'contenu variable c' ; window.alert("Dans f() a est de type " + typeof a) ; window.alert("Dans f() b est de type " + typeof b) ; window.alert("Dans f() c est de type " + typeof c) ; window.alert("Dans f() i est de type " + typeof i) ; } function g(){ for(var i=0; i<1; i++){ document.write(i) ; } window.alert("Dans g() a est de type " + typeof a) ; window.alert("Dans g() b est de type " + typeof b) ; window.alert("Dans g() c est de type " + typeof c) ; window.alert("Dans g() i est de type " + typeof i) ; } window.alert("Au niveau global a est de type " + typeof a) ; window.alert("Au niveau global b est de type " + typeof b) ; window.alert("Au niveau global c est de type " + typeof c) ; window.alert("Au niveau global i est de type " + typeof i) ; f() ; g() ;

  19. Fermetures (closures) Programmation Web 2013-2014 • Portée des variables d’une fonction étendue : • aux fonctions définies dans une fonction • aux fonctions définies dans les fonctions définies dans une fonction • aux fonctions définies dans les fonctions définies dans les fonctions définies dans une fonction • … • Une fonction peut accéder aux variables de son contexte et aux variables des contextes parents • La capture des variables se fait à la fin de l’appel de la fonction contenant les déclarations

  20. Fermetures : exemple En global, a est undefinedDans f(), a est numberAvant g(), a vaut 12Dans g(), a est numberAprès g(), a vaut 13 Voir Programmation Web 2013-2014 function f(){ // Variable a locale à f() var a = 12 ; window.alert("Dans f(), a est "  + typeof a) ; // Fonction g() définie dans la fonction f() function g(){    a++ ; // Incrémentation de a définie dans fonction f() window.alert("Dans g(), a est " + typeof a) ; } window.alert("Avant g(), a vaut " + a) ;   g() ; window.alert("Après g(), a vaut " + a) ; } window.alert("En global, a est " + typeof a) ; f() ;

  21. Fermetures et événements Programmation Web 2013-2014 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>Fermetures et événements</title> <styletype='text/css'> #id_bouton1, #id_bouton2, #id_bouton3, #id_bouton4, #id_bouton5{ width : 15em ; display : block ; } </style> <scripttype='text/javascript'>/* Page suivante */</script> </head> <body> <inputid='id_bouton1'type='button'value='Appuyez'> <inputid='id_bouton2'type='button'value='Appuyez'> <inputid='id_bouton3'type='button'value='Appuyez'> <inputid='id_bouton4'type='button'value='Appuyez'> <inputid='id_bouton5'type='button'value='Appuyez'> </body> </html>

  22. Fermetures et événements Voir Toutes les actions concernent le dernier bouton… Programmation Web 2013-2014 <scripttype='text/javascript'> window.onload = function(){ var secondes = 5 ; for(var i=1; i<6; i++){ var bouton = document.getElementById('id_bouton' + i) ; bouton.onclick = function(){ // Texte du bouton bouton.value = "Patientez " + secondes + " secondes" ; // Désactivation du bouton bouton.disabled = true ; // Mise en place d'un compte à rebours window.setTimeout( // Fonction à lancer à la fin du compte à rebours function(){ // Texte du bouton bouton.value = "Merci de votre attente" ; // Activation du bouton bouton.disabled = false ; }, secondes * 1000/* Attente de millisecondes */) ; }}} </script>

  23. Fermetures et événements Voir Dans cette nouvelle version, les actions correspondent bien à chaque bouton ! Programmation Web 2013-2014 <scripttype='text/javascript'> function patienter(bouton, secondes){ bouton.onclick = function(){ // Texte du bouton bouton.value = "Patientez " + secondes + " secondes" ; // Désactivation du bouton bouton.disabled = true ; // Mise en place d'un compte à rebours window.setTimeout( // Fonction à lancer à la fin du compte à rebours function(){ // Texte du bouton bouton.value = "Merci de votre attente" ; // Activation du bouton bouton.disabled = false ; }, secondes * 1000/* Attente de millisecondes */) ; } } window.onload = function(){ for(var i = 1; i<6; i++){ var temps = 1 + Math.floor(Math.random()*5) ;         patienter(document.getElementById('id_bouton' + i), temps) ; } } </script>

  24. JSON (JavaScript Object Notation) • Format de structure de données • Utilise la syntaxe des objets JavaScript • {"menu": {"id": "file", "value": "File" "popup": {"item": [ {"value": "New" }, {"value": "Open"}, {"value": "Close"}] }}} • <menu id="file" value="File"> <popup> <item value="New" /> <item value="Open" /> <item value="Close" /> </popup></menu> Équivalent XML Programmation Web 2013-2014

  25. JSON (JavaScript Object Notation) http://www.json.org/ • Deux structures : • Objet • {} • {chaîne : valeur} • {chaîne : valeur, chaîne : valeur, …} • Tableau • [] • [valeur] • [valeur, valeur, …] • Valeur : • chaîne|nombre|objet|tableau|true|false|null Programmation Web 2013-2014

  26. JSON (JavaScript Object Notation) http://www.json.org/ • object • {} • { members } • members • pair • pair , members • pair • string : value • array • [] • [ elements ] • elements • value • value , elements • value • string • number • object • array • true • false • null • string • "" • " chars " • chars • char • char chars • char • any-Unicode-character-except-"-or-\-or-control-character • \" • \\ • \/ • \b • \f • \n • \r • \t • \u four-hex-digits Programmation Web 2013-2014

  27. JSON (JavaScript Object Notation) http://www.json.org/ • number • int • int frac • intexp • int frac exp • int • digit • digit1-9 digits • - digit • - digit1-9 digits • frac • . digits • exp • edigits • digits • digitdigitdigits • e • e • e+ • e- • E • E+ • E- Programmation Web 2013-2014

  28. JSON (JavaScript Object Notation) http://www.json.org/ Programmation Web 2013-2014

  29. JSON (JavaScript Object Notation) http://www.json.org/ Programmation Web 2013-2014

  30. JSON (JavaScript Object Notation) http://www.json.org/ Programmation Web 2013-2014

  31. JSON (JavaScript Object Notation) http://www.json.org/ Programmation Web 2013-2014

  32. Développement orienté objet Programmation Web 2013-2014 JavaScript est un langage orienté objet à base d’instances et non à base de classes (POO orientée prototype) Une instance peut être construite à partir d’une fonction constructeur this est initialisé par le constructeur pour faire référence à l’instance courante L’héritage dans la programmation objet orientée prototype se fait à base de clonage L’instance est composée de slots de données (les fonctions sont des données !)

  33. Développement orienté objet : « attributs » Garfield a 4 pattes Odie a 4 pattes Programmation Web 2013-2014 Mon premier prototype : <scripttype='text/javascript'> function Animal(nb_pattes){ this.pattes = nb_pattes ; } ; vargarfield = new Animal(4) ; varodie = new Animal(4) ; window.alert("Garfield a " + garfield.pattes + " pattes<br>") ; window.alert("Odie a "   + odie['pattes'] + " pattes<br>") ; </script>

  34. Développement orienté objet : « attributs » Garfield a 4 pattes et aime les lasagnes Odie a 4 pattes et aime les os Programmation Web 2013-2014 <scripttype='text/javascript'> function Animal(nb_pattes){ this.pattes = nb_pattes ; } ; vargarfield = new Animal(4) ; garfield.aime = 'les lasagnes' ; varodie = new Animal(4) ; odie.aime = 'les os' ; window.alert("Garfield a " + garfield.pattes + " pattes et aime "+ garfield.aime + "<br>") ; window.alert("Odie a " + odie.pattes + " pattes et aime "+ odie.aime + "<br>") ; </script>

  35. Développement orienté objet : « méthodes » Garfield a 4 pattes ZZZzzz... Odie a 4 pattes Programmation Web 2013-2014 <scripttype='text/javascript'> function Animal(nb_pattes){ this.pattes = nb_pattes ; this.dormir = function(){ return"ZZZzzz..." ; } } ; Chat.prototype = new Animal(4) ; function Chat(){ } ; Chien.prototype = new Animal(4) ; function Chien(){ } ; vargarfield = new Chat() ; varodie = new Chien() ; window.alert("Garfield a " + garfield.pattes + "<br>") ; window.alert("Garfield, au lit ! " + garfield.dormir() + "<br>") ; window.alert("Odie a " + odie.pattes + "<br>") ;

  36. Développement orienté objet : « méthodes » ZZZzzz... ... Programmation Web 2013-2014 <scripttype='text/javascript'> function Animal(nb_pattes){ this.pattes = nb_pattes ; this.dormir = function(){return"ZZZzzz..." ; } } ; Chat.prototype = new Animal(4) ; function Chat(){} ; Chien.prototype = new Animal(4) ; function Chien(){ this.dormir = function(){return"..." ; } } ; vargarfield = new Chat() ; varodie = new Chien() ; window.alert("Garfield, au lit ! " + garfield.dormir() + "<br>") ; window.alert("Odie, au lit ! " + odie.dormir() + "<br>") ; </script>

  37. Objets anonymes Garfield a 4 pattes Garfield aime le poisson Odie a 4 pattes Odie aime la viande Programmation Web 2013-2014 <scripttype='text/javascript'> function Animal(param){ this.pattes = param.pattes || 4 ; this.aime = param.aime || '?' ; } ; Chat.prototype = new Animal({pattes : 4, aime : 'le poisson'}) ; function Chat(){} ; Chien.prototype = new Animal({pattes : 4, aime : 'la viande'}) ; function Chien(){ } ; vargarfield = new Chat() ; varodie = new Chien() ; window.alert("Garfield a " + garfield.pattes + " pattes<br>") ; window.alert("Garfield aime " + garfield.aime + "<br>") ; window.alert("Odie a " + odie.pattes + " pattes<br>") ; window.alert("Odie aime " + odie.aime + "<br>") ; </script>

  38. Outil indispensable : Firebug Programmation Web 2013-2014 • Module complémentaire de Firefox • Permet : • l’édition • le débogage • le suivi de tous les éléments constitutifs d’une page Web : • HTML • CSS • JavaScript • échanges HTTP • Traces JavaScript avec console.log(msg)

  39. Outil indispensable : Firebug Programmation Web 2013-2014

More Related