1 / 48

Le langage Javascript pour le web

Le langage Javascript pour le web. 1 ière partie: Syntaxe du langage Javascript et Objets du noyau. Plan:. Déclaration, Variables Opérateurs Boucle for Test conditionnel if … else. Structure et syntaxe Fonctions function() Objets du Noyau. Objet Date

chinue
Télécharger la présentation

Le langage Javascript pour le web

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. Le langage Javascript pour le web 1ière partie: Syntaxe du langage Javascript et Objets du noyau Plan: Déclaration, Variables Opérateurs Boucle for Test conditionnel if … else Structure et syntaxe Fonctions function() Objets du Noyau Objet Date Objet String (chaîne de caractères) Objet Array (les tableaux) E. Christoffel MCF, ULP

  2. Structure du langage javascript et syntaxe de base Le code javascript est déclaré dans le document HTML par les balises HTML <script> et </script>: <script language="JavaScript1.3"> … </script> Le code est en général déclaré dans l'entête du document, soit entre les balises <head> … </head>. Plutôt que d'écrire le code javascript dans le fichier HTML, il peut être écrit dans un fichier annexe, enregistré avec l'extension .js , soit le fichier leCodeJS.js , l'attribut SRC permet d'y faire référence: <script src="lecodejs.js"></script> Les instructions s'écrivent une par ligne, et se terminent par un ; Les variables sont déclarées par le mot clé var, mais la déclaration est optionnelle: var laMarque; var acheter=true; var lAccessoire="Kit piéton"; var quantite=2; lAccessoire="Chargeur d'accumulateur"; lAccessoire='Chargeur d\'accumulateur'; Les variables ne sont pas typées (inutile de préciser si c'est un nombre, du texte, un objet…). Les commentaires sont précédés de // pour un commentaire sur 1 seule ligne, ou entre /* et */ pour un commentaire sur plusieurs lignes: // ceci est un commentaire /* éventuellement sur plusieurs lignes */ L'attribut LANGUAGE est optionnel, est précise la version javascript utilisée (actuellement version 1.3) Variable booléenne, 2 valeurs possibles true/false Une chaîne de texte est contenue entre des " Distinguer l'utilisation des " et '. Le \ qui précède un ' permet de considérer le ' comme un caractère et non un élément de la syntaxe

  3. Les opérateurs javascript Les opérateurs arithmétiques classiques: + , - , * , / a=a+b*c; L'incrément ou décrément d'une unité: ++ , -- i++; j--; Les opérateurs agissant sur les chaînes de texte: + , += , c'est une concaténation de chaînes de texte texte1=texte2+" "+texte3; // concaténation de chaînes texte1+=" la suite du message"; // " la suite du message" est rajoutée au contenu de texte1 var suiteTexte="la suite du texte"; // déclaration d'une variable contenant du texte Texte3="début de texte "+suiteTexte+" la fin du texte"; //concaténation de chaîne de texte et de variables Les opérateurs de comparaison utilisés dans les test conditionnels if : == , != , > , < , >= , <= if (a==b) {instructions;} else if (c!=d) {instructions;} Les opérateurs logiques permettent d'effectuer plusieurs comparaisons : && , ||, ! if ((a==b) && (a!=1)) {instructions;} // opérateur AND (ET), les 2 comparaisons doivent être satisfaites if ( (a>b) || (a=1) ) {instructions;} // opérateur OR (OU), l'une ou l'autre comparaison doit être satisfaite if (!a){instructions;} // opérateur NOT (non), équivalent au contraire, cas des valeurs booléenne, retourne true si a=false par ex.

  4. Boucle for, exemples pratiques for (valeur initiale; condition ; incrément ) { instructions; } Syntaxe Les instructions sont exécutées tant que la condition est vérifiée. On souhaite lire chaque caractère constituant une chaîne de texte. var chaineTexte="javascript"; var nbCar; nbCar=chaineTexte.length; L'instruction for suivante (1) initialise la variable i à 0 ;(2) effectue un test conditionnel, à savoir si i<nbCar ;(3) exécute une série d'instructions séquentiellement si le test conditionnel retourne true ; (4) incrémente la variable i: for (i=0;i<nbCar;i++){ leCaractere=chaineTexte.charAt(i); alert("le caractère en position : "+i+" est un "+leCaractere); }

  5. if (condition) { instructions; } else if { instructions; } if (condition) { instructions; } else { instructions; } Si le test conditionnel est vérifié, alors ces instructions sont exécutées. Syntaxe Sinon, ces autres instructions sont exécutées. Test conditionnel if…else, exemples pratiques On souhaite recherché le caractère @ constituant une adresse e-mail. var chaineTexte="christof@mail.com"; var nbCar; nbCar=chaineTexte.length; L'instruction for suivante (1) initialise la variable i à 0 ;(2) effectue un test conditionnel, à savoir si i<nbCar ;(3) exécute une série d'instructions séquentiellement si le test conditionnel (2) retourne true ;(4) comparaison du caractère extrait de la chaîne au caractère @, soit un message de correspondance est affiché, sinon un message de non correspondance des caractères est affiché ;(5) incrément de la variable i: for (i=0;i<nbCar;i++){ leCaractere=chaineTexte.charAt(i); if (leCaractere=="@") { alert("le caractère en position : "+i+" est un @"); } else { alert("le caractère en position : "+i+" n'est pas un @"); } } Syntaxe réduite : (condition) ? expression1 : expression2 si la condition est vérifiée, l'expression1 est exécutée, sinon l'expression2

  6. Le langage Javascript pour le web 1ière partie: Syntaxe du langage Javascript et Objets du noyau Plan: Déclaration, Variables Opérateurs Boucles for, do … while, while Test conditionnel if … else, switch Structure et syntaxe Fonctions function() Objets du Noyau Objet Date Objet String (chaîne de caractères) Objet Array (les tableaux) E. Christoffel MCF, ULP

  7. Nom de la fonction function nom (argument1, argument2,...) { instructions; instructions; return variable; } Syntaxe Liste d'arguments (valeurs affectées à des variables) utiles pour l'exécution de la fonction. Les valeurs peuvent être des nombres, des chaînes de texte ou des objets. La valeur de la variable est retournée par return Les fonctions function(), exemples pratiques On souhaite calculer la part de T.V.A (laTVA) sur un prix hors taxe (lePrixHT), puis le prix TTC de l'article (lePricTTC): … laTVA=TVA(lePrixHT); lePrixTTC=lePrixHT+laTVA; … function TVA(prix) { var taux=0.196; return prix*taux; } Une fonction peut ne retourner aucune valeur, cas d'un message à afficher dans une boite 'alerte': unCommentaire="suivre la procédure a)"; lAffichage(unCommentaire); … function lAffichage(leMessage) { alert(leMessage); } • Les variables: • prix: contient la valeur de la variable passée en argument lors de l'appel, soit la valeur de lePrixHT • la déclaration de la variable taux par var, fait que taux n'existe que dans la fonction. • En conclusion prix et taux n'existent que dans la fonction. Ici le résultat du produit est retourné

  8. Le langage Javascript pour le web 1ière partie: Syntaxe du langage Javascript et Objets du noyau Plan: Déclaration, Variables Opérateurs Boucles for, do … while, while Test conditionnel if … else, switch Structure et syntaxe Fonctions function() Objets du Noyau Objet Date Objet String (chaîne de caractères) Objet Array (les tableaux) E. Christoffel MCF, ULP

  9. L'Objet Date, propriétés et méthodes L'objet Date est un objet du noyau javascript. Un constructeur de date permet la déclaration (ou création, instance) d'un objet de type date: laDate=new Date(); // retourne dans la variable laDate l'objet le jour et l'heure (d'après l'horloge du PC) laDate=new Date(année,mois,jour,heure,mn,s); // retourne une date autre que celle du moment. Jours et mois sont comptés à partir de 0 et non de 1. Pour chaque objet Date, des propriétés sont lues ou écrites, des méthodes sont appliquées: laDate.propriété laDate.méthod()

  10. L'Objet Date, exemples pratiques En pratique, les propriétés lues seront stockées dans une variable: laDate=new Date(); // retourne la date et heure du moment var leJour; // variable contenant le jour du mois leJour=laDate.getDate(); // retourne le jour du mois compté depuis 0 laDate.setDate(5); // fixe maintenant dans l'objet date, qui contenait la date et l'heure au moment de la création de l'objet, un nouveau jour du mois. La méthode parse() permet par ex. de calculer le temps écoulé entre 2 dates. La syntaxe est un peu différente des exemples ci-dessus, car la méthode est appliqué au constructeur/objetDate directement, avec pour argument la date à convertir en millisecondes écoulées depuis le 1er janvier 1970: laDate1=new Date(2001,10,18); // date du 18 novembre 2001 laDate2=new Date(2000,10,18); // date du 18 novembre 2000 s1=Date.parse(laDate1); // la méthode parse() est appliqué au constructeur/objet s2=Date.parse(laDate2); // Date avec laDate1 ou laDate2 en argument s3=s1-s2; // calcul de la différence en millisecondes entre ces 2 dates s4=s3/1000/60/60/24; // conversions des millisecondes en jours alert(s4); // affichage du nombre de jours écoulés

  11. L'Objet String, propriétés et méthodes L'objet String est un objet du noyau javascript. Une variable est déclarée de la manière suivante:var laChaineTexte; // Cette variable est implicitement un objet String, mais si c'est un nombre (objet Number), on peut effectuer des opérations +, -, * et / . Rappel: les variables ne sont pas typées!laChaineText="contenu de la variable"; //Pour affecter un contenu à la variable Pour chaque objet String, et donc chaîne de texte, des propriétés sont lues ou écrites, des méthodes sont appliquées: laChaineTexte.propriété laChaineTexte.méthod() En générale le résultat sera retourné dans une nouvelle variable.

  12. L'Objet String, exemples pratiques En pratique, les propriétés lues seront stockées dans une variable: var longueur; // variable contenant la longueur (ou nombre de caratère) d'une chaîne de texte var laChaineTexte="christof@mail.com"; // déclaration et initialisation d'une variable longueur=laChaineTexte.length; // lecture de la longueur de la chaîne de texte, pour une chaîne vide, 0 sera retourné. L'exemple ci-dessous recherche au sein de la chaîne de texte la présence du caractère @, si par ex. on souhaite tester la validité d'une adresse e-mail. Les étapes sont les suivantes (1) lire la longueur de la chaîne (2) exécuter une boucle for sur chaque caractère de la chaîne, le 1er est indexé 0, le dernier est indexé (longueur-1) (3) lire le caractère à une position donnée par la méthode charAt(position)(4) effectuer un test conditionnel if, à savoir, ce caractère est-il égal à @? (5) message d'alerte si le caractère est identifié. longueur=laChaineTexte.length; // lecture de la longueur de la chaîne for (i=0;i<longueur;i++) { //début de la boucle for, incrément sur i de 0 à (longueur-1) leCaractere=laChaineTexte.charAt(i); // lecture du caractère en position i if (leCaractere=='@') { // test conditionnel if, égalité avec @? alert("Caractère trouvé en position : "+i); //message d'alerte indiquant la position } // fin du test conditionnel if } // fin de la boucle for Exercice: appliquer les propriétés et méthodes sur une chaîne de texte, et visualiser le résultat par une fenêtre d'alerte.

  13. L'Objet Array, propriétés et méthodes L'objet Array est un objet du noyau javascript. Tout nouveau tableau doit être déclaré, suivant la syntaxe: leTableau=new Array(dimension); // ou la variable dimension précise le nombre d'éléments du tableau leTableau[0]="le 1er élément d'indice 0!"; // affectation des éléments individuels du tableau leTableau[1]="le 2ième élément d'indice 1!"; // Attention le 1er élément à pour indice 0! Le dernier a pour indice (dimension-1) Il n'est pas nécessaire de préciser le nombre d'éléments du tableau, sa dimension. Celle-ci sera automatiquement ajustée par javascript en fonction du contenu du tableau: leTableau=new Array(); Il est possible d'affecter directement un contenu à chaque cellule du tableau lors de la déclaration: leTableau=new Array("l'élément 1","l'élément 2"); Plutôt que d'indexer chaque cellule du tableau pour y affecter un contenu, on peut utiliser le code simplifié suivant: leTableau=new Array(); leTableau=["l'élément 1","l'élément 2",3]; Noter que pour accéder à un élément du tableau, on utilise les [ ]: leContenu=leTableau[i]; // lecture du contenu de la iième cellule Pour chaque tableau, des propriétés sont lues ou écrites, des méthodes sont appliquées: leTableau.propriété leTableau.méthod() En générale le résultat sera retourné dans une variable ou un nouveau tableau, soit le même tableau. Affectation d'une chaîne de texte Affectation d'une valeur numérique

  14. L'Objet Array, exemples pratiques En pratique, les propriétés lues seront stockées dans une variable: nbElement=leTableau.length; // lecture de la dimension du tableau leTableau La fonction split(caractère) de l'objet String permet de décomposer une chaîne de texte à partir d'un caractère de séparation. Le résultat de la décomposition est stocké dans un tableau. Il n'est pas utile de déclarer ce tableau. Soit l'exemple de la variable contenant l'adresse e-mail: var lEmail="christof@mail.com"; // déclaration et initialisation d'une variable laDecomposition=lEmail.split("@"); // méthode de décomposition appliquée à lEmail leNom=laDecomposition[0]; // le tableau laDecomposition est constitué de 2 cellules leDomaine=laDecomposition[1]; // accessibles par les index 0 et 1 Il peut être utile de déclarer un tableau à 2 dimensions. Supposons par ex. des employés d'une entreprise, identifiés par un numéro de matricule, auquel est associé les noms et prénoms. Déclarons un tableau pour les matricules: leMatricule=new Array(); // déclaration du tableau leMatricule Maintenant, à chaque matricule est associé un nom et un prénom, soit 3 données (matricule, nom, prénom). Ainsi, chaque élément du tableau leMatricule est déclaré comme un nouveau tableau. Effectuons cette déclaration par une boucle for: for(i=0;i<2;i++){ leMatricule[i]=new Array(); } Puis, affectons les données pour chaque employé: leMatricule[0]=["1667","Christoffel","Eric"]; leMatricule[1]=["1667","Tellier","Pierre"]; La méthodes alert ci-dessous permet de lire respectivement les 3 données (matricule, nom et prénom) ou une seule: alert(leMatricule[0]); alert(leMatricule[0][1]); Alternative à un tableau à 2 dimensions: Employé=new Array( '1667$Christoffel%Eric%', '1667$Tellier%Pierre') Ici, une donnée est composée de caractères de séparation ($, %), permettant la découpe de la chaîne de texte par la méthode split( ). Exercice: extraire le prénom du 2ième employé. Exemple pratique: réalisation d'une barre de navigation dynamique, contenant des informations telles que: libellé du lien, lien href,…

  15. Le langage Javascript pour le web 2ième partie: Objet window, la fenêtre du navigateur Plan: Document Object Model, D.O.M Objet window Objet window d'après le D.O.M propriétés, méthodes et événements Création d'une nouvelle fenêtre E. Christoffel MCF, ULP

  16. Les objets Javascript respectent une hiérarchie. L'objet de plus haut niveau est la fenêtre du navigateur. Celui-ci contient le document HTML, et ainsi de suite… Cette hiérarchie est décrite par le Document Object Modele (DOM) Fenêtre du navigateur Document HTML Formulaire Boutons radio Cette hiérarchie, indispensable pour accéder à un objet donné, sera vue en détail pour chaque objet étudié. C'est un concept de programmation orientée objets

  17. Le langage Javascript pour le web 2ième partie: Objet window, la fenêtre du navigateur Plan: Document Object Model, D.O.M Objet window Objet window d'après le D.O.M propriétés, méthodes et événements Création d'une nouvelle fenêtre E. Christoffel MCF, ULP

  18. L'Objet Window, hiérarchie d ’après le DOM Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model Textarea Objet Window Hiérarchie Parent de tous les autres objets HTML

  19. L'Objet Window, propriétés, méthodes et événements Pour la fenêtre window, des propriétés sont lues ou écrites, des méthodes sont appliquées, des événements sont détectés: window.propriété window.méthod() window.history.back() window.history.forward() Netscape 4!

  20. L'Objet Window, exemples pratiques En pratique, les propriétés lues seront stockées dans une variable: var nbFrame; // variable contenant le nombre de frames dans la fenêtre nbFrame=window.frames.length; // lecture de la dimension du tableau frames[ ] nbFrame=window.length; // qui est également une propriété de l'objet wondow Il est possible d'afficher un message dans la barre de 'status', au bas de la fenêtre window: var leMessage="Bienvenu à tous"; // Définition du contenu de la variable leMessage window.status=leMessage; // Affichage du message dans la barre de 'status' Certaines méthodes permettent d'afficher une fenêtre de message, avec ou sans boutons 'OK' et 'Cancel', et éventuellement un champ de saisie: alert("Bonjour"); // une fenêtre de type 'alert' s'ouvre, elle se referme après validation 'OK' leChoix=confirm("Voulez-vous continuer?"); // la variable leChoix contiendra la valeur booléenne true/false suivant le clique de souris sur les boutons 'OK' ou 'Cancel' respectivement. Des événements sont associés à la fenêtre window, notamment le chargement accompli du document HTML et ou de l'ensemble des frames. La déclaration de détection de l'événement se fait dans la balise HTML BODY: <body bgcolor="#ffffff" onload="maFonction()"> <body bgcolor="#ffffff" onload="alert('Bonjour')"> La fonction nommée maFonction() est alors exécutée, ou plus simplement tout code HTML tel que la méthode alert(), ... Noter l'utilisation simultanée de ' et "Les " étant utilisés pour délimiter la valeur de l'attribut HTML, les simples ' délimitent l'argument de la fonction appelée.

  21. L'Objet Window, exemples pratiques Il est souvent utile d'ouvrir une fenêtre nouvelle pour afficher une nouvelle page HTML, existante ou créée à la volée. La syntaxe est la suivante: laFen=window.open("URL","nomFenetre","paramètres d'apparence de la fenêtre") • où laFen est une variable contenant l'objet window de la nouvelle fenêtre créée. Nous y ferons référence plus tard pour accéder à cette nouvelle fenêtre, • URL est l'adresse de la page HTML qui sera chargée dans cette nouvelle fenêtre: • laFen=window.open("http://depulp.u-strasbg.fr","leDepulp",""); • un nom est attribué à la fenêtre: "nonFenetre" • les paramètres d'apparence de la fenêtre sont exposés dans le tableau ci-dessous. Une chaîne de texte est construite suivant la syntaxe: "paramètre=yes,paramètre=valeur,…". Par défaut, l'état des paramètres est no (ou 0). Valeur en pixel Etat yes/no ou 0/1 laFen=window.open("","laFenetre","width=300,height=300,menubar=yes,toolbar=0,location=yes,scrollbars=0,resizable=yes,fullscreen=0,top=400,left=300"); Ici, aucune page HTML n'est chargée, la fenêtre sera donc vide!

  22. Le langage Javascript pour le web 3ième partie: Les balises HTML et les Objets javascript correspondants Plan: Objet document Collection d'objets all Les formulaires Les images E. Christoffel MCF, ULP

  23. L'Objet document, hiérarchie d ’après le DOM Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model Textarea Objet Window Hiérarchie Objet document Parent de certains objets HTML L'objet document est créé par la balise HTML <body>

  24. L'Objet Document, propriétés, méthodes et événements Malgré le fait que l'objet document appartienne à l'objet window, nous y accéderons directement par:document Ainsi, des propriétés sont lues ou écrites, des méthodes sont appliquées, des événements sont détectés: document.propriété document.méthod()

  25. L'Objet Document, exemples pratiques En pratique, les propriétés lues seront stockées dans une variable: var couleur; // variable contenant une couleur lue de l'objet document couleur=document.linkColor; // lecture de la couleur des liens hypertextes couleur="#ff00ff"; // code de la couleur magenta affecté à la variable couleur document.fgColor=couleur; // on fixe une nouvelle couleur de texte On accède à la collection des formulaires ou des images par: document.forms[i]; // pour le iième formulaire document.images[i]; // pour la iième image du document Les méthodes open(), write() et close() servent à créer à la volée de nouveau document HTML, dans une nouvelle fenêtre par ex. Reprenons l'exemple du chapitre précédent avec l'ouverture d'une nouvelle fenêtre: laFen=window.open("","laFenetre","width=300,height=300, top=400,left=300"); // ouverture d'une nouvelle fenêtre, c'est un nouvel objet affecté à la variable laFen. Pour l'instant, cette fenêtre ne contient aucune page HTML, car l'argument correspondant de la méthode open() de l'objet window est vide! Attention, ne pas confondre la méthode open() de l'objet window, avec la méthode open() de l'objet document! Pour générer un contenu HTML dans cette nouvelle fenêtre, nous devrons (1) écrire le code HTML dans une variable, (2) ouvrir un 'flux d'écriture', (3) y écrire le code HTML puis (4) refermer le 'flux d'écriture': var codeHTML; // déclaration de la variable qui contiendra le code HTML et initialisation codeHTML='<html><body bgcolor="#ffdead"><p>Test d\'écriture à la volée<br></body></html>'; laFen=window.open("","laFenetre","width=300,height=300");// création fenêtre, objet laFen laFen.document.open(); // ouverture du flux d'écriture pour l'objet laFen, la nouvelle fenêtre laFen.document.write(codeHTML); // la variable codeHTML est écrite dans la nouvelle fenêtre laFen.document.close(); // fermeture du flux Noter le \ pour que le ' ne soit pas la terminaison de la chaîne de texte!

  26. Le langage Javascript pour le web 3ième partie: Les balises HTML et les Objets javascript correspondants Plan: Objet document Collection d'objets all Les objets personnalisés Les formulaires Les images collection all[ ], propriétés et méthodes méthode getElementById( ), accès aux objets méthode getElementById( ) sous Netscape 6 E. Christoffel MCF, ULP

  27. La collection d'objets all sous MIE, propriétés et méthodes La collection d'objets all est un tableau de tous les objets HTML, all[ ], à savoir que chaque balise HTML est un objet. En fait, all est une propriété de l'objet document, et s'accède donc par: document.all Nous retiendrons, pour l'instant, uniquement 2 propriétés et 1 méthode:

  28. La collection d'objets all sous MIE, exemple pratique Soit le code HTML ci-dessous. Ecrire une application javascript, qui (1) s'exécute au chargement du document HTML, (2) affiche le nombre de balises HTML du document, et finalement (3) affiche l'intitulé de chaque balise HTML. <html> <head> <title>Titre du document</title> </head> <body> <!-- Insertion du code HTML --> </body> </html> Solution, la fonction debut() est appelée lorsque l'événement onload, dans la balise body, est détecté: function debut() { longueur=document.all.length; //lecture du nombre d'objets répertoriés dans la collection all[ ] st=""; for ( var i=0; i<long; i++ ) { //boucle sur chaque objet de la collection all[ ] st+=i+":"+document.all[i].tagName+"\n"; //lecture de la propriété tagName, intitulé de la balise } alert(st); }

  29. La collection d'objets all sous MIE, accès à un objet particulier Puisque la collection d'objets all est un tableau de tous les objets HTML, all[ ], un objet particulier est accédé, soit par le rang (indice i du tableau all[i], soit par un identificateur (attribut ID d'une balise HTML): Soit la déclaration d'un objet en HTML, avec l'attribut ID et un autre attribut: <balise id="nomObjet" attribut1="valeur1" …> La ligne de code javascript suivante permet de lire la valeur de l'attribut1, depuis la propriété nommée propAtt correspondante en javascript pour cet objet (si cette propriété existe!): var lAttribut1; lAttribut1=document.all['nomObjet'].propAtt Cette syntaxe permet de s'affranchir de la hiérarchie des objets, pour accéder à un objet particulier! Considérons alors les attributs name et id d'une balise HTML, en l'occurrence dans le cas d'un formulaire: <form name="nomForm" id="FormID"> <input type="text" name="nomInput" id="InputID"> </form> La valeur saisie dans le champ est lue par l'intermédiaire du nommage des champs par l'attribut name: laSaisie=document.forms['nomForm'].elements['nomInput'].value; // ou plus simplement: laSaisie=document.nomForm.nomInput.value; Maintenant, l'utilisation de l'identificateur id, permet de s'affranchir de la hiérarchie des objets pour accéder au champ input:laSaisie=document.all['InputID'].value;

  30. Alternative à la collection d'objets all: la méthode getElementById() de l'objet document, sous MIE 5.x La méthode getElementById() de l'objet document permet d'accéder à un objet par son identificateur ID: <form name="nomForm" id="FormID"> <input type="text" name="nomInput" id="InputID"> </form> Comme précédemment, la saisie dans le champ INPUT s'obtient par: laSaisie=document.getElementById('InputID').value; Remarque: cette méthode n'existe pas sous MIE 4.x!

  31. La méthode getElementById() de l'objet document, sous Netscape 6 Comme sous MIE 5.x, la méthode getElementById() de l'objet document permet d'accéder à un objet par son identificateur ID: <form name="nomForm" id="FormID"> <input type="text" name="nomInput" id="InputID"> </form> Comme précédemment (A9, A10), la saisie dans le champ input s'obtient par: laSaisie=document.getElementById('InputID').value; A nouveau, la hiérarchie de l'objet n'a pas besoin d'être développée. Enfin, une méthode commune entre Netscape 6 et MIE 5.x, qui devrait permettent une simplification des codes javascript!

  32. Le langage Javascript pour le web 3ième partie: Les balises HTML et les Objets javascript correspondants Plan: Objet document Collection d'objets all Les formulaires Les images Introduction la collection forms[ ] des formulaires événement onsubmit la collection elements[ ]: text… E. Christoffel MCF, ULP

  33. L'Objet Formulaire, hiérarchie d ’après le DOM Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model Textarea Objet Window Hiérarchie Objet document Objet Formulaire La collection d’objets ‘ Formulaire ’ est contenu dans un tableauforms[ ]

  34. L'Objet Formulaire, propriétés, méthodes et événements En respectant la hiérarchie des objets, chaque formulaire peut être adressé via javascript par la collection forms[ ]:document.forms[i] , i étant le iièmeformulaire compté depuis i=0document.forms[‘nomFormulaire’] , où ‘nomFormulaire’ est la valeur de l ’attribut NAME de la balise <form name="nomFormulaire">. On peut aussi écrire:document.nomFormulaire Pour chaque formulaire, des propriétés sont lues ou écrites, des méthodes sont appliquées, des événements sont détectés: document.nomFormulaire.propriété document.nomFormulaire.méthod() Nouveauté xhtml: L'attribut name d'une balise html n'existe plus, et est remplacée par l'attribut id (identificateur). Sous MIE, il existe une collection de tous les objets: all[ ], tableau de tous les objets. L'objet formulaire s'accède alors par: document.all[‘idFormulaire’] , où ‘idFormulaire’ est la valeur de l ’attribut id de la balise <form id="idFormulaire">. On peut aussi écrire, plus simplement:idFormulaire Sous Netscape 7, il existe une méthode permettant d'accéder à un objet donné: getElementById( ). L'objet formulaire s'accède alors par: document. getElementById(‘idFormulaire’) Nous y reviendrons dans le cours DHTML.

  35. L'Objet Formulaire, exemples pratiques En pratique, les propriétés lues seront stockées dans une variable: var nbForm; // variable contenant le nombre de formulaire du document nbForm=document.forms.length; // lecture de la dimension du tableau forms[ ] var nomForm; // variable contenant le nom d ’un formulaire particulier nomForm=document.forms[i].name; //i doit être < nbForm Le code ci-dessous permet de ré-initialiser le formulaire (équivalent du bouton <input type="reset"..> en HTML). Le formulaire peut être accédé de multiples façons: document.forms[i].reset(); // reset du iième formulaire document.forms[‘leForm’].reset(); // où le nom du formulaire a été déclaré dans la balise <form name="leForm"…> document.leForm.reset(); // idem que ci-dessus document.forms[nomForm].reset(); // la variable nomForm contient le nom du formulaire Le click sur le bouton submit (défini par la balise HTML <input type="submit"…>) sera détecté par l ’événement onsubmit déclaré dans la balise HTML <form … onsubmit="return maFonction()">. Soit par ex. la fonction testSiValid() associée à l ’événement onsubmit. Les réponses du formulaire seront envoyées au programme php si et seulement si l ’instruction Javascript ‘return true’ est rencontrée dans la fonction. ‘return false’ empêche l ’envoi des réponses. maFonction() retourne alors true ou false, ce qui équivaut, pour la balise form à <form … onsubmit="return true"> (le formulaire est envoyé)ou <form … onsubmit="return false"> (le formulaire n ’est pas envoyé): function testSiValid( ) { var nbErreur=0; // variable de comptage du nombre d ’erreurs /* suite d ’instruction de test ….. */ if (nbErreur>0) { //avions-nous des erreurs? return false;} //si oui, le formulaire n ’est pas soumis else {return true;} //en l absence d ’erreur, le formulaire est soumis } important

  36. Objet Window Hiérarchie Objet document Objet Formulaire Collectiond’objets (d’éléments)du Formulaire L'Objet input, hiérarchie d ’après le DOM Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model Textarea La collection d’objets ‘ Input ’ est contenu dans un tableauelements[ ]

  37. TextPassword Hidden L'Objet input type=‘  ’, propriétés, méthodes et événements En respectant la hiérarchie des objets, chaque élément INPUT peut être adressé via javascript par les collections forms[ ].elements[ ]: document.forms[i].elements[j] , où j est le jième élément duiième formulaire compté depuis j=0, i=0document.forms[‘nomFormulaire’].elements[‘nomInput’] ,où 'nomFormulaire' est la valeur de l ’attribut name de la balise form, et 'nomInput' celle de la balise input. On peut aussi écrire:document.nomFormulaire.nomInput Pour chaque objet Input, des propriétés sont lues ou écrites, des méthodes sont appliquées, des événements sont détectés: document.nomFormulaire.nomInput.propriété document.nomFormulaire.nomInput.méthod() Nouveauté xhtml: L'attribut name d'une balise html n'existe plus, et est remplacée par l'attribut id (identificateur). Sous MIE, par la collection de tous les objets: all[ ], tableau de tous les objets, on accède directement à un élément particulier du formulaire: document.all[‘idChamp’] , où ‘idChamp’ est la valeur de l ’attribut id de la balise <input id="idChamp">. On peut aussi écrire, plus simplement:idChamp Sous Netscape 7, on utilise la méthode permettant d'accéder à un objet donné: getElementById( ). Un élément du formulaire s'accède alors par: document. getElementById(‘idChamp’)

  38. TextPasswordd, Hidden L'Objet input type=‘  ’  , exemples pratiques En pratique, les propriétés lues seront stockées dans une variable: var nbElem; // variable contenant le nombre d ’éléments du formulaire nbElem=document.forms[i].elements.length; // lecture de la dimension du tableau elements[ ] du formulaire i. Soit le code HTML d ’un formulaire contenant un champ INPUT de type texte: <form name="leForm"> <input name="leText" type="text"> var valeurSaisie; // variable contenant la valeur saisie dans un champ INPUT valeurSaisie=document.leForm.leText.value; // lecture de la valeur saisie dans le champ nommé "leText" maj=valeurSaisie.toUpperCase(); //le contenu de la variable valeurSaisie est mis en majuscule dans la variable maj document.leForm.leText.value=maj; // ré-écriture du contenu de la variable maj dans le champ Input nommé "leText" On peut, par simplification, déclarer une variable qui contiendra l'objet formulaire: objForm=document.leForm; // la variable objForm contiendra l'objet formulaire nommé leForm Puis l'objet input du formulaire peut aussi être affecté à une variable: objInput=objForm.leText; // la variable objInput contient alors l'objet input nommé leText du formulaire nommé leForm. valeurSaisie=objInput.value; // lecture de la valeur saisie dans le champ nommé "leText" On peut détecter le changement du contenu d'un champ input par l'événement onchange généré: <input name="leText" type="text" onchange="alert('Le contenu a changé!')"> Une fenêtre alert s'ouvre, lorsque le champ input a perdu le focus et que son contenu a été modifié. Le champ de type INPUT ne retourne que du texte, si on souhaite lire une valeur numérique (ex. une quantité), on utilisera la méthode de noyau javascript parseInt(): qteTexte=document.leForm.laQuantite.value; //la saisie dans le champ INPUT nommé laQuantite qteNombre=parseInt(qteTexte); // est toujours du texte, le texte est alors converti en nombre

  39. Notions d'objets sous javascript - Transformation du type de l'Objet En raison de la hiérarchie des objets (un objet appartient à un objet parent), et à partir des propriétés et méthodes d'un objet, on observe la transformation du type de l'objet ci-dessous: • nom de variable. • Cette variable contient soit: • un nombre • du texte • ou un objet l'objet document l'objet formulaire de l'objet document l'objet element de l'objet formulaire de l'objet document lObj=document.leForm.leNom.value.length objet String obtenu par la propriété value de l'objet element de l'objet formulaire de l'objet document objet Number obtenu par la propriété length de objet String obtenu par la propriété value de l'objet element de l'objet formulaire de l'objet document

  40. Le langage Javascript pour le web 3ième partie: Les balises HTML et les Objets javascript correspondants Plan: Objet document Collection d'objets all Les objets personnalisés Les formulaires Les images propriétés, méthodes et événements pré-chargement des images en mémoire images réactives E. Christoffel MCF, ULP

  41. L'Objet Image, hiérarchie d ’après le DOM Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model Textarea Objet Window Hiérarchie Objet document Objet Image La collection d’objets ‘ Image ’ est contenu dans un tableauimages[ ]

  42. L'Objet Image, propriétés et méthodes (et événements) En respectant la hiérarchie des objets, chaque image peut être adressée par la collection images[ ]:document.images[i] , i étant la ième image comptée depuis i=0document.images[‘nomImage’] , où ‘nomImage’ est la valeur de l ’attribut name de la balise <img name="nomImage" src="adresse.jpg" id="idImg">. On peut aussi écrire:document.nomImage document.all['idImg']ou document.getElementById('idImg')en xhtml! Pour chaque image, des propriétés sont lues ou écrites, des méthodes sont appliquées, (des événements sont détectés (certains que sous MIE et Netscape 6!): document.nomImage.propriété document.images['nomImage'].méthod() Attention: Ces propriétés ne peuvent être que lues sous Netscape 4.7 (sauf src), mais lues et écrites sous Netscape 6 et MIE! Non conseillé!

  43. de l'objet Image nommée uneImage La propriété src document.images['imageHTML'].src=uneImage.src; du document HTML de la collection des images de l'image nommée imageHTML La propriété src L'Objet Image, exemples pratiques Le constructeur d'image permet de réserver de l'emplacement en mémoire pour les images, même si elles ne sont pas affichées de suite: uneImage=new Image(); // déclaration d'une image autreImg=new Image(largeur, hauteur); // pour cette image, les dimensions sont spécifiées uneImg=new Image(200,300); // dimensions en pixels La propriété src (identique à l'attribut SRC de la balise IMG) permet de télécharger une image à partir d'une URL, dans l'objet Image: uneImage.src="images/soleil.jpg"; Par ailleurs, une image peut avoir été déclarée dans le document HTML par la balise IMG: <img name="imageHTML" src="images/lune.jpg" width="200" height="200"> Le code javascript ci-dessous permet d'échanger l'image de la balise HTMLimg nommée imageHTML, d'URL actuelle images/lune.jpg, par le contenu de l'objetuneImage, d'URL images/soleil.jpg: par ce remplacement, les dimensions de l'image initialement spécifiées par les attributs width et height de la balise img sont inchangées! Attention: les images créées par le constructeur ne sont pas accessibles depuis la collection images[]!

  44. Ainsi, soit l'image résulte de la balise img du document HTML (collection des images), soit elle résulte de la création d'un objet de type Image dans le code javascript. Dans les 2 cas, ces objets de type Image possèdent les propriétés et méthodes (et dans certains cas des événements) vues précédemment, avec les accès par javascript: document.images['imageHTML').propriété document.images['imageHTML').méthodes() lObjetImage.propriété lObjetImage.méthodes() Lecture des dimensions d'une image, dans le cas d'une image du document HTML, ou de la création d'un objet Image: limage=document. images['imageHTML'); // récupération de l'image du document HTML limage=lObjetImage; // ou récupération de l'image créée par le constructeur Image en javascript laLargeur=limage.width; // lecture des dimensions de l'image laHauteur=limage.height; Modification de la taille de l'image (sous MIE et Netscape 6): limage.width=laLargeur/2; limage.height=laHauteur/2; On souhaite remplacer une image affichée dans le document HTML, par une autre lorsque la souris pointe sur celle-ci, soit le code HTML et la détection d'événement (sous MIE et Netscape 6): <img src="image1.jpg" name="img" onmouseover="this.src='image2.jpg' " onmouseout="this.src='image1.jpg' "> En fait, par compatibilité entre navigateurs (problème sous N4), un lien sera associé à l'image, lien qui réagit à l'événement onmouseover, quelque soit le navigateur. Ici, l'objet this retourne l'objet courant sur lequel l'événement survient. En d'autres termes, cela revient à référencer l'objet par document.images['img']

More Related