, =, <= 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.">

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

1 Le langage Javascript pour le web 1 ière partie: Syntaxe du langage Javascript et Objets du noyau Plan: Structure et syntaxe Fonctions function() Objets.

Présentations similaires


Présentation au sujet: "1 Le langage Javascript pour le web 1 ière partie: Syntaxe du langage Javascript et Objets du noyau Plan: Structure et syntaxe Fonctions function() Objets."— Transcription de la présentation:

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

2 2 Structure du langage javascript et syntaxe de base Le code javascript est déclaré dans le document HTML par les balises HTML et : … Le code est en général déclaré dans l'entête du document, soit entre les balises …. 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: 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) 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 Une chaîne de texte est contenue entre des " Variable booléenne, 2 valeurs possibles true/false

3 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 4 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

5 5 On souhaite recherché le constituant une adresse . var var nbCar; nbCar=chaineTexte.length; L'instruction for suivante (1) initialise la variable i à 0 ;(2) effectue un test conditionnel, à savoir si i

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

7 7 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 fonctions function(), exemples pratiques function nom (argument1, argument2,...) { instructions; return variable; } Syntaxe Nom de la fonction 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 Ici le résultat du produit est retourné 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.

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

9 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 10 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/objet Date 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 L'Objet Date, exemples pratiques

11 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 12

13 13 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 // 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 si par ex. on souhaite tester la validité d'une adresse . 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

14 14 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 i iè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

15 15

16 16 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 var // déclaration et initialisation d'une variable // méthode de décomposition appliquée à l 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]); L'Objet Array, exemples pratiques Exemple pratique: réalisation d'une barre de navigation dynamique, contenant des informations telles que: libellé du lien, lien href,… 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 2 ième employé.

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

18 18 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

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

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

21 21 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() Netscape 4! window.history.back() window.history.forward() window.history.back() window.history.forward()

22 22 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: La fonction nommée maFonction() est alors exécutée, ou plus simplement tout code HTML tel que la méthode alert(),... L'Objet Window, exemples pratiques 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.

23 23 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: L'Objet Window, exemples pratiques 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). laFen=window.open("","laFenetre","width=300,height=300,menubar=yes,toolbar=0,location=yes,scrollbars=0,resizable=yes,fullscreen=0,top=400,left=300"); Valeur en pixel Etat yes/no ou 0/1 Ici, aucune page HTML n'est chargée, la fenêtre sera donc vide!

24 24 Le langage Javascript pour le web 3 iè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

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

26 26 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()

27 27 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 i ième formulaire document.images[i]; // pour la i iè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=' Test d\'écriture à la volée '; 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 L'Objet Document, exemples pratiques Noter le \ pour que le ' ne soit pas la terminaison de la chaîne de texte!

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

29 29 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:

30 30 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. Titre du document 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

31 31 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: 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: 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;

32 32 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: 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!

33 33 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: 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!

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

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

36 36 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 i ième formulaire compté depuis i=0 document.forms[nomFormulaire], où nomFormulaire est la valeur de l attribut NAME de la balise. 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. 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.

37 37

38 38 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 en HTML). Le formulaire peut être accédé de multiples façons: document.forms[i].reset(); // reset du i ième formulaire document.forms[leForm].reset(); // où le nom du formulaire a été déclaré dans la balise 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 ) sera détecté par l événement onsubmit déclaré dans la balise HTML. 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 à (le formulaire est envoyé) ou (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 } L'Objet Formulaire, exemples pratiques important

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

40 40 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 j ième élément du i ième formulaire compté depuis j=0, i=0 document.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() Text Password Hidden 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. 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)

41 41

42 42 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: 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é: 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 L'Objet input type=, exemples pratiques Text Passwordd, Hidden

43 43 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: lObj=document.leForm.leNom.value.length 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 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

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

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

46 46 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=0 document.images[nomImage], où nomImage est la valeur de l attribut name de la balise. 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é!

47 47 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: Le code javascript ci-dessous permet d'échanger l'image de la balise HTML img nommée imageHTML, d'URL actuelle images/lune.jpg, par le contenu de l'objet uneImage, 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[]! L'Objet Image, exemples pratiques document.images['imageHTML'].src=uneImage.src; de l'image nommée imageHTML de la collection des images La propriété src du document HTML La propriété src de l'objet Image nommée uneImage

48 48 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): 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']


Télécharger ppt "1 Le langage Javascript pour le web 1 ière partie: Syntaxe du langage Javascript et Objets du noyau Plan: Structure et syntaxe Fonctions function() Objets."

Présentations similaires


Annonces Google