Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

10:31:21 10:31:21 Programmation Web Programmation Web 1 1 Programmation Web : P

10:31:21 10:31:21 Programmation Web Programmation Web 1 1 Programmation Web : Programmation Web : DOM / JavaScript DOM / JavaScript 2 2 10:31:27 10:31:27 Programmation Web Programmation Web DOM = Document Object Model DOM = Document Object Model API (Application Programming Interface) pour la API (Application Programming Interface) pour la manipulation de HTML / XML manipulation de HTML / XML Définit la structure logique des documents Définit la structure logique des documents Définit la façon d’y accéder, de la manipuler Définit la façon d’y accéder, de la manipuler Créer des documents Créer des documents Parcourir leur structure Parcourir leur structure Ajouter, effacer, modifier des éléments Ajouter, effacer, modifier des éléments Ajouter, effacer, modifier leur contenu Ajouter, effacer, modifier leur contenu 3 3 10:31:31 10:31:31 Programmation web Programmation web Qu’est-ce que le DOM ? Qu’est-ce que le DOM ? < <table table> > < <tbody tbody> > < <tr tr>< ><td td> >Shady Grove Shady Grove</ </td td> > < <td td> >Aeolian Aeolian</ </td td> > </ </tr tr> > < <tr tr>< ><td td> >Over the River, Charlie Over the River, Charlie</ </td td> > < <td td> >Dorian Dorian</ </td td> > </ </tr tr> > </ </tbody tbody> > </ </table table> > 4 4 10:31:36 10:31:36 Programmation web Programmation web Qu’est-ce que le DOM ? Qu’est-ce que le DOM ? Représentation arborescente du document Représentation arborescente du document Modèle objet (structure + méthodes) Modèle objet (structure + méthodes) Permet la manipulation du document Permet la manipulation du document Une implémentation : JavaScript… Une implémentation : JavaScript… … … Des implémentations : Des implémentations : JavaScript IE JavaScript IE JavaScript Mozilla / Firefox JavaScript Mozilla / Firefox JavaScript Opera JavaScript Opera … … 5 5 10:31:40 10:31:40 Programmation Web Programmation Web JavaScript : Principe JavaScript : Principe Langage de script objet Langage de script objet Syntaxe style C / C++ / Java Syntaxe style C / C++ / Java Sensible à la casse Sensible à la casse N’est PAS du Java N’est PAS du Java Exécuté par le client Web Exécuté par le client Web Peut être désactivé sur le client Peut être désactivé sur le client Nombreux objets pour la manipulation HTML Nombreux objets pour la manipulation HTML Gestion des événements HTML Gestion des événements HTML Rendre les pages dynamiques (HTML+CSS+JS) Rendre les pages dynamiques (HTML+CSS+JS) Haut niveau d’incompatibilité… Haut niveau d’incompatibilité… 6 6 10:31:44 10:31:44 Programmation Web 2012-2013 Programmation Web 2012-2013 JavaScript : Balise script JavaScript : Balise script < <script script type type= ="text/javascript" "text/javascript" language language= ="JavaScript" "JavaScript"> >  // --> </ </script script> > < <script script type type= ="text/javascript" "text/javascript" language language= ="JavaScript" "JavaScript" src src= ="URI" "URI"> > </ </script script> > Masquer le script aux Masquer le script aux navigateurs non compatibles navigateurs non compatibles avec JavaScript avec JavaScript 7 7 10:31:47 10:31:47 Programmation Web 2012-2013 Programmation Web 2012-2013 JavaScript : Exemple JavaScript : Exemple < <html html> > < <head head> > < <title title> >Ma première page Web Ma première page Web</ </title title> > </ </head head> > < <body body> > < <script script type type= ="text/javascript" "text/javascript" language language= ="JavaScript" "JavaScript"> >  // --> </ </script script> > </ </body body> > </ </html html> > 8 8 10:31:51 10:31:51 Programmation Web 2012-2013 Programmation Web 2012-2013 Variables Variables Déclaration de variables facultative Déclaration de variables facultative Variables non typées à la déclaration Variables non typées à la déclaration var var nom_variable nom_variable ; ; Typage dynamique à l’affectation Typage dynamique à l’affectation Types gérés: Types gérés: Nombres ( Nombres (10, 3.14 10, 3.14) ) Booléens ( Booléens (true true, , false false) ) Chaînes ( Chaînes ("Salut !" "Salut !", , 'Salut !' 'Salut !' ) ) null null undefined undefined 9 9 10:31:55 10:31:55 Programmation Web 2012-2013 Programmation Web 2012-2013 Structures conditionnelles Structures conditionnelles if if ( (condition condition) ) { { instructions ; instructions ; } } [ [ else else { { instructions ; instructions ; } } ] ] 10 10 10:31:59 10:31:59 Programmation Web 2012-2013 Programmation Web 2012-2013 Structures conditionnelles Structures conditionnelles switch switch ( (expression expression) ) { { case case étiquette étiquette : : instructions ; instructions ; break break ; ; case case étiquette étiquette : : instructions ; instructions ; break break ; ; default default : : instructions ; instructions ; } } 11 11 10:32:03 10:32:03 Programmation Web 2012-2013 Programmation Web 2012-2013 Structures itératives Structures itératives while while ( (condition condition) ) { { instructions ; instructions ; } } do do { { instructions ; instructions ; } } while while ( (condition condition) ) ; ; 12 12 10:32:07 10:32:07 Programmation Web 2012-2013 Programmation Web 2012-2013 Structures itératives Structures itératives for for ( (instr ; instr ; condition ; instr condition ; instr) ) { { instructions ; instructions ; } } for for ( (variable variable in in objet objet) ) { { instructions ; instructions ; } } 13 13 10:32:11 10:32:11 Programmation Web 2012-2013 Programmation Web 2012-2013 Commentaires Commentaires // Commentaire ligne // Commentaire ligne /* Commentaire multi-lignes */ /* Commentaire multi-lignes */ 14 14 10:32:15 10:32:15 Programmation Web 2012-2013 Programmation Web 2012-2013 Fonctions Fonctions Valeur de retour non typée Valeur de retour non typée Arguments non typés Arguments non typés // Déclaration // Déclaration function function ma_fonction ma_fonction( (arguments arguments) ) { { instructions ; instructions ; return return quelque_chose; quelque_chose; // ou pas… // ou pas… } } ma_fonction ma_fonction( (12 12) ; ) ; // Appel // Appel 15 15 10:32:19 10:32:19 Programmation Web 2012-2013 Programmation Web 2012-2013 Objets prédéfinis Objets prédéfinis window window alert( alert(message message) ) // Message d’avertissement // Message d’avertissement confirm( confirm(message message) ) // Message de confirmation : retourne // Message de confirmation : retourne true ou false true ou false prompt( prompt(message message, , valeur_par_défaut valeur_par_défaut) ) // Boîte de saisie : retourne la chaîne // Boîte de saisie : retourne la chaîne saisie saisie 16 16 10:32:23 10:32:23 Programmation Web 2012-2013 Programmation Web 2012-2013 Objets prédéfinis Objets prédéfinis document document write( write(message message) ) // Ecrire dans le document // Ecrire dans le document writeln( writeln(message message) ) // Ecrire dans le document (retour à la // Ecrire dans le document (retour à la ligne) ligne) 17 17 10:32:27 10:32:27 Programmation Web 2012-2013 Programmation Web 2012-2013 Chaînes : Propriétés & Méthodes Chaînes : Propriétés & Méthodes Propriétés Propriétés length length … … Méthodes Méthodes charAt( charAt(index index) ) charCodeAt( charCodeAt(index index) ) concat( concat(chaine2 chaine2, , chaine3 chaine3, …) , …) fromCharCode( fromCharCode(code1 code1, , code2 code2, …) , …) indexOf( indexOf(aiguille aiguille[, [, index index]) ]) lastIndexOf( lastIndexOf(aiguille aiguille[, [, index index]) ]) match( match(expr_reg expr_reg) ) 18 18 10:32:31 10:32:31 Programmation Web 2012-2013 Programmation Web 2012-2013 Chaînes : Exemples Chaînes : Exemples var var s = s = "Bon anniversaire Benjamin" "Bon anniversaire Benjamin" ; ; document.write(s.charAt( document.write(s.charAt(2 2)) ; )) ;   n n document.write(s.charCodeAt( document.write(s.charCodeAt(2 2)) ; )) ;   110 110 document.write(s.concat( document.write(s.concat(" du groupe C12" " du groupe C12")) ; )) ;   Bon anniversaire Benjamin du groupe C12 Bon anniversaire Benjamin du groupe C12 document.write(String.fromCharCode( document.write(String.fromCharCode(65 65, , 66, 67 66, 67)) ; )) ;   ABC ABC document.write(s.indexOf( document.write(s.indexOf("Benjamin" "Benjamin")) ; )) ;   17 17 document.write(s.lastIndexOf( document.write(s.lastIndexOf("a" "a")) ; )) ;   21 21 document.write(s.match( document.write(s.match(/Benjamin$/ /Benjamin$/)) ; )) ;   Benjamin Benjamin ( (null si non trouvé null si non trouvé) ) 19 19 10:32:36 10:32:36 Programmation Web 2012-2013 Programmation Web 2012-2013 Chaînes : Méthodes Chaînes : Méthodes Méthodes Méthodes replace( replace(expr_reg, nouvelle_chaine expr_reg, nouvelle_chaine) ) search( search(expr_reg expr_reg) ) slice( slice(debut debut[, [, fin fin]) ]) split( split(separateur separateur[, [, limite limite]) ]) substr( substr(debut debut[, [, taille taille]) ]) substring( substring(debut debut, , fin fin) ) toLowerCase() toLowerCase() toUpperCase() toUpperCase() Opérateurs Opérateurs + + 20 20 10:32:41 10:32:41 Programmation Web 2012-2013 Programmation Web 2012-2013 Chaînes : Exemples Chaînes : Exemples var var s = s = "Bon anniversaire Benjamin" "Bon anniversaire Benjamin" ; ; document.write(s.replace( document.write(s.replace(/i/g /i/g, , 'I' 'I')) ; )) ;   Bon annIversaIre BenjamIn Bon annIversaIre BenjamIn document.write(s.search( document.write(s.search(/n{2}/i /n{2}/i)) ; )) ;   5 5 document.write(s.slice( document.write(s.slice(17 17)) ; )) ;   Benjamin Benjamin document.write(s.split( document.write(s.split(" " " ")) ; )) ;   Bon,anniversaire,Benjamin Bon,anniversaire,Benjamin document.write(s.substr( document.write(s.substr(4 4, , 12 12)) ; )) ;   anniversaire anniversaire document.write(s.substring( document.write(s.substring(4 4, , 16 16)) ; )) ;   anniversaire anniversaire document.write(s.toUpperCase()+s.toLowerCase()) ; document.write(s.toUpperCase()+s.toLowerCase()) ;   BON ANNIVERSAIRE BENJAMINbon anniversaire benjamin BON ANNIVERSAIRE BENJAMINbon anniversaire benjamin 21 21 10:32:45 10:32:45 Programmation Web 2012-2013 Programmation Web 2012-2013 Objet Objet Math Math Propriétés Propriétés E, LN10, LN2, LOG10E, LOG2E, PI, E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2 SQRT1_2, SQRT2 Méthodes Méthodes abs( abs(val val) ) acos( acos(val val), cos( ), cos(val val), … uploads/s1/ javascript 1 .pdf