1 le langage javascript pour le web 1 ière partie: syntaxe du langage javascript et objets du noyau...

1

Le langage Javascript pour le web

1ière partie: Syntaxe du langage Javascript et Objets du noyau

Plan:

Structure et syntaxe

Fonctions function()

Objets du Noyau

E. ChristoffelMCF, ULP

Déclaration, VariablesOpérateurs Boucle forTest conditionnel if … else

Objet DateObjet String (chaîne de caractères)Objet Array (les tableaux)

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

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 textetexte1=texte2+" "+texte3; // concaténation de chaînestexte1+=" la suite du message"; // " la suite du message" est rajoutée au contenu de texte1var suiteTexte="la suite du texte"; // déclaration d'une variable contenant du texteTexte3="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 satisfaitesif ( (a>b) || (a=1) ) {instructions;} // opérateur OR (OU), l'une ou l'autre comparaison doit être satisfaiteif (!a) {instructions;} // opérateur NOT (non), équivalent au contraire, cas des valeurs booléenne, retourne true si a=false par ex.

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<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);}

Boucle for, exemples pratiques

for (valeur initiale; condition ; incrément ) {instructions;}S

ynta

xe

Les instructions sont exécutées tant que la condition est vérifiée.

5

On souhaite recherché le caractère @ constituant une adresse e-mail.var chaineTexte="[email protected]";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 @");}}

Test conditionnel if…else, exemples pratiques

if (condition) {instructions;}else {instructions;}

Synta

xe Si le test conditionnel est vérifié,

alors ces instructions sont exécutées.

Sinon, ces autres instructions sont exécutées.

if (condition) {instructions;}else if {instructions;}

Syntaxe réduite : (condition) ? expression1 : expression2si la condition est vérifiée, l'expression1 est exécutée, sinon l'expression2

6



Plan:



Objets du Noyau


Déclaration, VariablesOpérateurs Boucles for, do … while, whileTest conditionnel if … else, switch


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; instructions; return variable;}

Synta

xe

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



Plan:



Objets du Noyau


Déclaration, VariablesOpérateurs Boucles for, do … while, whileTest conditionnel if … else, switch


9

Propriétés

Retourne le nom de la fonction qui a créée l'objet, ici la fonction native Date.

Permet d'ajouter de nouvelles propriétés à l'objet Date, et d'assigner une valeur par défaut.

MéthodesRetourne ou fixe le numéro du jour du mois (à partir de 0 et non 1!)Retourne ou fixe le numéro du jour de la semaine (0 pour dimanche)

Retourne ou fixe l'année

Retourne ou fixe l'heureRetourne ou fixe la fraction de millisecondes de l'heure couranteRetourne ou fixe les minutes de l'heure couranteRetourne ou fixe le numéro du mois (0 pour janvier)Retourne ou fixe les secondes de l'heure couranteRetourne ou fixe une valeur numérique correspondant à la date et heure.Retourne le nombre de millisecondes écoulées depuis le 1er janvier 1970

Evénements

leJ our=laDate.getDate() getDate() setDate()

laDate=new Date() var quiConstruit quiConstruit=laDate.constructor

constructor

Date.prototype.nomPropriete=valeur quiConstruit.prototype.estElleVide="oui"

prototype

code J

S

getTime() setTime()

lesMilli=Date.parse(laDate) parse()

getMonth() setMonth()getSeconds() setSeconds()

getMilliseconds() setMilliseconds()getMinutes() setMinutes()

getDay() setDay()

getHours() setHours()

laDate.setDay(5)

lAnnee=laDate.getFullYear()

laDate.setHours(12)lesMilli=laDate.getMilliseconds()laDate.setMinutes(59)leMois=laDate.getMonth()laDate.setSeconds(59)laDate.getTime()

getFullYear() SetFullYear getYear() SetYear()

L'Objet Date, propriétés et méthodesL'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

En pratique, les propriétés lues seront stockées dans une variable:laDate=new Date(); // retourne la date et heure du momentvar leJour; // variable contenant le jour du moisleJour=laDate.getDate(); // retourne le jour du mois compté depuis 0laDate.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 2001laDate2=new Date(2000,10,18); // date du 18 novembre 2000s1=Date.parse(laDate1); // la méthode parse() est appliqué au constructeur/objets2=Date.parse(laDate2); // Date avec laDate1 ou laDate2 en arguments3=s1-s2; // calcul de la différence en millisecondes entre ces 2 datess4=s3/1000/60/60/24; // conversions des millisecondes en joursalert(s4); // affichage du nombre de jours écoulés

L'Objet Date, exemples pratiques

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

Propriétés

Lecture de la longueur de la chaîne de texte, soit du nombre de caractères

Retourne le nom de la fonction qui a créée l'objet, ici la fonction native String.

Permet d'ajouter de nouvelles propriétés à l'objet String, et d'assigner une valeur par défaut.

MéthodesRetourne le caractère situé à la position spécifiée par index , valeur comprise entre 0 et la (longueur de la chaîne - 1)Retourne le code ASCII du caractère situé à la position spécifiée par index , valeur comprise entre 0 et la (longueur de la chaîne - 1)Concaténation des chaîne1, chaîne2, etc à la chaîne de texte à laquelle la méthode est appliquée.Construit une chaîne de caractère à partir des codes ASCII. S'applique à la fonction native String.Retourne la position de la chaîne de texte spécifiée (qui peut être un caractère unique, ex. @), depuis la position spécifiée par depuisIndex , en scrutant vers la fin de la chaîne. Retourne -1 si la chaîne n'est pas trouvée.idem que ci-dessus, mais en commencant depuis la fin de la chaîne (depuisIndex ) en scrutant vers le début de la chaîne.Extrait la portion d'une chaîne de texte comprise entre les index debutIndex et finIndex. Si finIndex est omis, le reste de la chaîne de texte est extrait.Décompose une chaîne de texte en sous chaîne à partir d'un caractère de séparation. Les sous chaînes sont stockées dans un tableau.Retourne les caractères contenus dans une chaîne de texte depuis une position début (indexDébut ) et sur une longueur donnée (longueur ).Retourne les caractères contenus entre les positions indexDébut et indexFin d'une chaîne de texte. Attention: le caratère en position indexFin est exclu!Retourne une nouvelle chaîne de caractère en minuscule. N'affecte pas la chaîne de texte à laquelle la méthode est appliquée.Retourne une nouvelle chaîne de caractère en majuscule. N'affecte pas la chaîne de texte à laquelle la méthode est appliquée.Recherche une portion de la chaîne de texte, spécifiée par l'expression régulière regexp, et retourne la position du début de cette portion. Retourne -1 pour une recherche infructueuse.Recherche une portion de la chaîne de texte, spécifiée par l'expression régulière regexp, et la remplace par la nouvelle chaîne.

Evénements

code

JS

length

constructor

prototype

substring(indexDebut,indexFin)

toLowerCase()

concat(chaîne1,chaîne2,...)

resultat=laChaineTexte.toLowerCase()

String.prototype.nomPropriete=valeur quiConstruit.prototype.estElleVide="oui"

fromCharCode(num1,num2,…)

resultat=laChaineTexte.concat(laChaineSuite,laChaineFin) resultat=laChaineTexte+laChaineSuite+laChaineFin

search(regexp)laPosition=laChaineTexte.search(regexp)

laChaineTexte.charAt(4) charAt(index)

charCodeAt(index)

indexOf(chaineText,depuisIndex)

lastIndexOf(chaineText,depuisIndex)

replace(regexp,nouvelleChaine)

slice(debutIndex,finIndex)

split(caractère)leTableau=laChaineTexte.split("@")

resultat=laChaineTexte.slice(3,8)

resultat=laChaineTexte.substring(2,5)

resultat=laChaineTexte.toUpperCase() toUpperCase()

resultat=laChaineTexte.substr(2,5) substr(indexDebut,longueur)

var laChaineTexte="javascript" laChaineTexte.length

var quiConstruit quiConstruit=laChaineTexte.constructor

laChaineTexte.charCodeAt(4)

laChaineTexte=String.fromCharCode(67)

laChaineTexte.indexOf('@') laChaineTexte.indexOf('@',5)

laChaineTexte.lastIndexOf('@') laChaineTexte.lastIndexOf('@',5)

resultat=laChaineTexte.replace(regexp,nouvelleChaine)

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 textevar laChaineTexte="[email protected]"; // déclaration et initialisation d'une variablelongueur=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înefor (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 iif (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.

L'Objet String, exemples pratiques

14

L'Objet Array, propriétés et méthodesL'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 tableauleTableau[0]="le 1er élément d'indice 0!"; // affectation des éléments individuels du tableauleTableau[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

15

PropriétésLecture de la dimension (ou longueur) du tableau, soit le nombre cellules (ou d'éléments).

Retourne le nom de la fonction qui a créée l'objet, ici la fonction native Array.

Permet d'ajouter de nouvelles propriétés à l'objet Array, et d'assigner une valeur par défaut.

MéthodesConcaténation de tableaux les uns à la suite des autres, en un nouveau tableau.Construit une chaîne de caractère à partir du contenu de toutes les cellules du tableau. Les contenus sont liés les uns aux autres par un caractère séparateur .Retourne le dernier élément d'un tableau (contenu de la dernière cellule), le supprime du tableau et réduit sa dimension d'une unité.Ajoute un ou plusieurs éléments au tableau, et retourne la nouvelle dimension de celui-ci.Inversion de l'ordre des éléments du tableau.Retourne le premier élément d'un tableau (contenu de la 1ière cellule), le supprime du tableau et réduit sa dimension d'une unité.Ajoute des éléments au début d'un tableau, et retourne la nouvelle dimension de celui-ci.Extrait la partie du tableau comprise entre les cellules d'index debutIndex et finIndex , dans un nouveau tableau. Si finIndex est omis, le reste du tableau est extrait. Attention: l'élément en position finIndex est exclu!Classement alphabétique des éléments du tableau.Change le contenu d'un tableau, ajoutant de nouveaux éléments (élément1, élément2,…), et en retirant les anciens éléments depuis l'élément d'indice index , au nombre de combien. Les éléments retirés sont retournés dans un tableau.

Evénements

Array.prototype.nomPropriete=valeur quiConstruit.prototype.estIlVide="oui"

prototype

leTableau=new Array("cellule1","cellule2",…) dimension=leTableau.length

length

var quiConstruit quiConstruit=leTableau.constructor

constructor

push(élément1,élément2,…)

leTableau=leTableau1.concat(leTableau2,leTableau3) concat(tableau2,tableau3,...)

laChaineTexte=leTableau.join("$") join(séparateur)

code J

S

elementRetire=leTableau.splice(2,3,"1 nouveau","et 1 autre"))

leTableau.sort() sort()

leTableau.reverse() reverse()

shift()

leDernier=leTableau.pop() pop()

nouvelleDimension=leTableau.push("1 de plus","2 de plus")

lePremier=leTableau.shift()

nouveauTableaut=leTableau.slice(3,8) slice(debutIndex,finIndex)

splice(index, combien, élément1,élément2,…)

nouvelleDimensionr=leTableau.unshift("un 1er","un 2ième")

unshift(élément1,élément2,…)

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 e-mail:var lEmail="[email protected]"; // déclaration et initialisation d'une variablelaDecomposition=lEmail.split("@"); // méthode de décomposition appliquée à lEmailleNom=laDecomposition[0]; // le tableau laDecomposition est constitué de 2 cellulesleDomaine=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 2ième employé.

17


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.Mpropriétés, méthodes et événements Création d'une nouvelle fenêtre

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


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.Mpropriétés, méthodes et événements Création d'une nouvelle fenêtre

20

Textarea

Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model

Hié

rarc

hie

Hié

rarc

hie

Objet Window

Parent de tous les autres objets HTML

L'Objet Window, hiérarchie d ’après le DOM

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

Permet d'accéder à l'objet document, l'ensembles de ses propriétés et méthodes.

Renvoi le nombre de frame dans la fenêtre.

La collection d'objets HTML Frames. Tableau frames[ ].

Contient des informations sur les URL visitées, c'est l'objet History. Tableau history[ ].

Contient des informations sur l'URL en cours, c'est l'objet Location.

Lecture/ Ecriture du nom de la fenêtre window

Ecriture d'un message dans la barre de Status au bas de la fenêtre window.

Ouverture d'une fenêtre d'alerte, avec possibilité d'y inscrire un message.

Ouverture d'une fenêtre de confirmation, avec possibilité d'y inscrire un message, et presence de boutons OK et Cancel. Retourne True ou False, respectivement.

Ouverture d'une fenêtre avec possibilité d'y inscrire un message, et de saisir un champ de texte. Le texte saisie est retourné.

Rappel la page visitée précédemment dans l'historique des pages visitées.

Rappel la page suivante dans l'historique des pages visitées.

Charge la page de démarrage.

Ouvre une URL dans une nouvelle fenêtre window.

Imprime le contenu de la fenêtre ou du frame.

Fermeture de la fenêtre

Execution d'un code javascript ou d'une fonction lorsque le document HTML ou l'ensemble des frames sont chargés.

Execution d'un code javascript ou d'une fonction lorsque l'on quitte l'URL.

Propriétés

Méthodes

Evénements

code

JS leChoix=confirm("Continuer?") confirm("message")

print()

window.forward() forward()

window.home()

onload<BODY attributs="valeur" onload="alert('Bonjour')">

<BODY attributs="valeur" onload="alert('Bonjour')" onunload="alert('Au revoir!')">

onunload

window.back() back()

window.close() close()

window.print()

home()

laFenêtre=window.open("","leNom";" ")open(URL, nomFenetre,

caractéristiques)

alert("Bienvenu") alert("message")

laSaisie=prompt("Veuillez saisir","votre nom")prompt("message", "valeurParDéfaut")

window.name name

window.status="Bienvenu" status

window.frames.length frames

history

window.location.propriété location

window.history.propriété

window.document.propriété window.document.method()

document

window.length length

Netscape 4!Netscape 4!window.history.back()window.history.forward()window.history.back()window.history.forward()

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êtrenbFrame=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 leMessagewindow.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(), ...

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

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).

Paramètre Description Exemplewidth largeur de la fenêtre en pixel width=300height hauteur de la fenêtre en pixel height=400top positon par rapport au haut de l'écran top=200left positon par rapport à gauche de l'écran left=300menubar présence de la barre de menu menubar=notoolbar présence de la barre d'outils toolbar=1scrollbars présence des barres d'ascenseur scrollbars=0resizable redimensionnement de la fenêtre resizable=yesfullscreen passage en mode plein écran fullscreen=no

laFen=window.open("","laFenetre","width=300,height=300,menubar=yes,toolbar=0,location=yes,scrollbars=0,resizable=yes,fullscreen=0,top=400,left=300");

Vale

ur e

n

pix

el

Eta

t yes/n

o

ou 0

/1

Ici, aucune page HTML n'est chargée, la fenêtre sera donc vide!

24


3ième partie: Les balises HTML et les Objets javascript correspondants

Plan:

Objet document

Collection d'objets all

Les formulaires

Les images


25

Textarea


Hié

rarc

hie

Hié

rarc

hie

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

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:documentAinsi, 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()

Attribut HTMLPropriétés balise BODY

linkColor link Lecture/ Ecriture de l'attribut correspondant de la balise BODY

alinkColor alink Lecture/ Ecriture de l'attribut correspondant de la balise BODYvlinkColor vlink Lecture/ Ecriture de l'attribut correspondant de la balise BODYbgColor bgcolor Lecture/ Ecriture de l'attribut correspondant de la balise BODYfgColor text Lecture/ Ecriture de l'attribut correspondant de la balise BODY

title title Lecture de l'intitulé de la balise <TITLE>

URL Retourne l'URL courante du document

lastModified Retourne la date de dernièr enregistrement du document

forms

images

plugins

Ouverture d'un 'flux d'écriture', méthode obligatoire avant d'utiliser la méthode write().

Ecriture (à la volée) dans un document HTML. Argument de la fonction write contient le code HTML à écrire.

Fermeture du 'flux d'écriture'.

Détection de l'événement click de souris

Détection de l'événement double-click de souris

Détection de l'événement enfoncement d'une touche clavier

Détection de l'événement touche appuyée

Détection de l'événement touche relachée

Détection de l'événement enfoncement de la touche de souris

Détection de l'événement de la touche de souris relachée

document.fgColor="#000000"leTitre=document.title

laCouleur=document.linkColor

document.alinkColor="#800080"

document.vlinkColor="#0000ff"document.bgColor="#ff00ff"

document.plugins[i]

document.close() close()

onClick

Evénements

document.write(codeHTML) write()

Méthodes

lURL=document.URL

laDate=document.lastModification

document.forms[i]

document.images[i]

code

JS

onMouseDown

onMouseUp

onDblClick

Ces événements seront étudiés par la suite

onKeyUp

document.open() open()

onKeyDown

onKeyPress

27

En pratique, les propriétés lues seront stockées dans une variable:var couleur; // variable contenant une couleur lue de l'objet documentcouleur=document.linkColor; // lecture de la couleur des liens hypertextescouleur="#ff00ff"; // code de la couleur magenta affecté à la variable couleurdocument.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 formulairedocument.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 laFenlaFen.document.open(); // ouverture du flux d'écriture pour l'objet laFen, la nouvelle fenêtrelaFen.document.write(codeHTML); // la variable codeHTML est écrite dans la nouvelle fenêtrelaFen.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


Plan:

Objet document


Les objets personnalisés

Les formulaires

Les images


collection all[ ], propriétés et méthodesméthode getElementById( ), accès aux objetsméthode getElementById( ) sous Netscape 6


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:Propriétés

Retourne la dimension du tableau all[ ], à savoir le nombre d'objets du document (ou de balises HTML du fichier html)

Retourne le nom de la balise HTML d'un objet de la collection all[ ].

MéthodesRetourne dans un tableau, une collection d'objets ayant la balise HTML spécifiée.

Evénements

code J

S

document.all.length length

document.all[2].tagName tagName

laListe=document.all.tags('DIV') tags('baliseHTML')

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.

<html><head><title>Titre du document</title></head><body></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);}

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:<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'].propAttCette 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;

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

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

34


Plan:

Objet document


Les formulaires

Les images


Introductionla collection forms[ ] des formulairesévénement onsubmitla collection elements[ ]: text…


35

Textarea


Hié

rarc

hie

Hié

rarc

hie

Objet Window

Objet document

Objet Formulaire

L'Objet Formulaire, hiérarchie d ’après le DOM

La collection d’objets ‘ Formulaire ’ est contenu dans un tableau forms[ ]

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 iième formulaire compté depuis i=0 document.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:idFormulaireSous 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

ATTRIBUTS< FORM > </ FORM > NAME "nom" Nom du formulaire pour traitement par J ava Script

ACTION "url" URL du CGI-BIN pour traitement des réponseMETHOD "post, get" envoie des donnéesTARGET "nom" Cible pour le retour du formulaire( nom, _self; _parent, _top, _blank)

Propriétésname Lecture/ Ecriture du nom du iième formulaireaction Lecture/ Ecriture de l'url du CGI traitant le formulairemethod Lecture/ Ecriture de l'attribut METHOD (get ou post)target Lecture/ Ecriture de la cible pour le retour du formulairelength Lecture du nombre d'éléments composant le formulaire (checkbox, radio, textarea, etc…)

elements Un tableau des éléments du formulaire, i=0 à length-1

Méthodesreset Simule le bouton RESET d'un formulaire. Tous les champs sont réinitialisés.

submit Soumission du formulaire, comme le bouton SUBMIT (<INPUT TYPE="submit"…>)

Evénements

onSubmitreturn true return false

La fonction nomFonction() permet de traiter le formulaire lorsque le bouton SUBMIT est activé. 'return false' empêche l'envoi du formulaire.

onReset Exécution d'un code javascript lorsque le bouton RESET est activé.

document.forms['nomForm'].length

<FORM NAME="nom" ACTION="url/executable.cgi" METHOD="post" TARGET="nomFrameCible"> … </FORM>

<BALISE>

document.forms[i].name

code H

TM

L

<FORM onReset="alert(remise à zéro)"…>

code J

S document.forms['nomForm'].elements[i]

document.forms['nomForm'].reset()document.forms['nomForm'].submit()

<FORM onSubmit="return nomFonction()"…>

document.form['nomForm'].actiondocument.forms['nomForm'].methoddocument.forms['nomForm'].target

38

En pratique, les propriétés lues seront stockées dans une variable:var nbForm; // variable contenant le nombre de formulaire du documentnbForm=document.forms.length; // lecture de la dimension du tableau forms[ ]var nomForm; // variable contenant le nom d ’un formulaire particuliernomForm=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 formulairedocument.forms[‘leForm’].reset(); // où le nom du formulaire a été déclaré dans la balise <form name="leForm"…>document.leForm.reset(); // idem que ci-dessusdocument.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 soumiselse {return true;} //en l absence d ’erreur, le formulaire est soumis}

L'Objet Formulaire, exemples pratiquesim

port

an

t

39

Textarea


Hié

rarc

hie

Hié

rarc

hie

Objet Window

Objet document

Objet Formulaire

Collectiond’objets (d’éléments)

du Formulaire

L'Objet input, hiérarchie d ’après le DOM

La collection d’objets ‘ Input ’ est contenu dans un tableau elements[ ]

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 jième élément du iiè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()

TextPasswordHidden

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

ATTRIBUTS< INPUT >

TYPE

"text, password,

hidden"type du champ INPUT: saisie de texte, password, ou champ caché.

NAME "nom" nom du champ pour traitement J avascriptVALUE "… …" valeur par défaut, valeur retournée, retour formulaire: "name=value&…"SIZE "nombre" dimension en n colonne du champ 'text'

MAXLENGHT "nombre" dimension maximale du champ 'text'DISABLED champ inactif

READONLY champ non modifiableACCESSKEY "lettre_clavier"raccourcis ALT+lettre_clavier pour atteindre le lienTABINDEX "numéro" numéro d'ordre d'acces du champ par la touche Tab

Propriétéstype Lecture du type du j ième élément du iième formulairename Lecture du nom du j ième élément du iième formulaire

valueLecture/ Ecriture de la valeur saisie (ex. l'élément s'appelle "leText" <INPUT TYPE="text" NAME="leText")

defaultValue Lecture/ Ecriture de la valeur par défaut, affectée lors d'un RESET du formulaire

maxLength Lecture/ Ecriture de l'attribut MAXLENGTHdisabled Lecture/ Ecriture de l'état actif/ inactif du champ (valeur booléenne true/false)readOnly Valeur booléenne de l'état READONLY du champ (true/false) en Lecture/ EcrituretabIndex Lecture du numéro d'ordre d'acces du champ par la touche Tab

formRetrouve l'objet Formulaire Parent du champ INPUT TYPE="text". Accès aux propriétés et méthodes du formulaire par ex. document.nomForm.leText.form.reset()

Méthodesfocus Force le champ à être la zone d'entrée active, de saisie (focus en anglais)blur Libère le champ de la zone d'entrée active, de saisie (inverse de focus)

selectForce le champ à être la zone d'entrée active, et sélectionne le texte (combiner les methodes focus(), puis select())

Evénements

onFocusLorsque le champ devient la zone d'entrée active, la fonction nomFonction( ) est exécutée

onBlur Idem que ci-dessus, mais lorsque le champ perd le focus

onChangeIdem que ci-dessus, mais lorsque le champ perd le focus et uniquement si il a été modifié. Utile pour tester la validité du champ dès la saisie de celui-ci.

onSelect Idem que ci-dessus, dès que l'internaite sélectionne du texte dans le champ

document.nomForm.leText.focus()

<INPUT TYPE="text" onFocus="nomFonction()"…>

<INPUT TYPE="text" onChange="nomFonction()"…>

code

HTM

L

document.forms[i].elements[j].namedocument.forms['nomForm'].elements['leText'].value document.nomForm.leText.value

document.nomForm.leText.defaultValue

<BALISE>

<INPUT TYPE="text" NAME="nom" SIZE="20" MAXLENGTH="40" VALUE="texte par défaut" ACCESSKEY="n" TABINDEX="3">

document.forms[i].elements[j].type

<INPUT TYPE="text" onSelect="nomFonction()"…>

code

JS

document.nomForm.leText.form

document.nomForm.leText.blur()

document.nomForm.leText.select()

<INPUT TYPE="text" onBlur="nomFonction()"…>

document.nomForm.leText.maxLengthdocument.nomForm.leText.disableddocument.nomForm.leText.readOnlydocument.nomForm.leText.tabIndex

42

En pratique, les propriétés lues seront stockées dans une variable:var nbElem; // variable contenant le nombre d ’éléments du formulairenbElem=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 INPUTvaleurSaisie=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 majdocument.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é leFormPuis 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é laQuantiteqteNombre=parseInt(qteTexte); // est toujours du texte, le texte est alors converti en nombre

L'Objet input type=‘ ’ , exemples pratiquesTextPasswordd, Hidden

43

Notions d'objets sous javascript - Transformation du type de l'Objet

Nom de la Variable Syntaxe javascript Type de l'objet contenu dans la variablelObj lObj=document objet de type documentlObj lObj=document.leForm objet de type formulairelObj lObj=document.leForm.leNom objet de type element de formulairelObj lObj=document.leForm.leNom.value objet de type StringlObj lObj=document.leForm.leNom.value.length objet de type NumberlObj lObj=parseInt(document.leForm.leNom.value) objet de type Number (entier)lObj lObj=parseFloat(document.leForm.leNom.value) objet de type Number (réel)

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


Plan:

Objet document


Les objets personnalisés

Les formulaires

Les images


propriétés, méthodes et événementspré-chargement des images en mémoireimages réactives


45

Textarea


Hié

rarc

hie

Hié

rarc

hie

Objet Window

Objet document

Objet Image

L'Objet Image, hiérarchie d ’après le DOM

La collection d’objets ‘ Image ’ est contenu dans un tableau images[ ]

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 <img name="nomImage" src="adresse.jpg" id="idImg">. On peut aussi écrire:document.nomImagedocument.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é!

Propriétés balise IMGborder border Lecture/ Ecriture de l'attribut correspondant de la balise IMG

completeRetourne une valeur booléenne indiquant si l'image est chargée ou non (true/ false)

width width Lecture/ Ecriture de la hauteur de l'image (en pixel)height height Lecture/ Ecriture de la largeur de l'image (en pixel)hspace hspace Lecture/ Ecriture de l'attribut correspondant de la balise IMG (en pixel)vspace vspace Lecture/ Ecriture de l'attribut correspondant de la balise IMG (en pixel)name name Lecture/ Ecriture du nom de l'imagesrc src Lecture/ Ecriture de l'adresse (URL) de l'image

lowsrc lowsrc Lecture/ Ecriture de l'adresse (URL) de l'image basse résolutionalign align Lecture/ Ecriture de l'attribut correspondant de la balise IMGalt alt Lecture/ Ecriture de l'attribut correspondant de la balise IMG

MéthodesForce le focus sur l'imageRetire le focus sur l'image

EvénementsDétection de l'arrêt du chargement (icône STOP)Détection d'erreur de chargementDétection de la fin du chargement de l'imageDétection du passage de la souris sur l'imageDétection de l'éloignement de la souris de l'image

<IMG SRC="url.jpg" NAME="leNom" onMouseOver="fonction()"><IMG SRC="url.jpg" NAME="leNom" onMouseOut="fonction()">

onAbortonError

onMouseOveronMouseOut

<IMG SRC="url.jpg" NAME="leNom" onAbort="alert('Arrêt?')"><IMG SRC="url.jpg" NAME="leNom" onError="alert('Erreur!')">

laLargeur=document.images['leNom'].widthdocument.images['leNom'].height="200"

blur()

document.leNom.alt="description"document.leNom.align="top"

document.images['leNom'].focus() focus()document.images['leNom'].blur()

code J

S

document.leNom.src="lURL.jpg"

<IMG SRC="url.jpg" NAME="leNom" onLoad="fonction()"> onLoad

spaceH=document.images['leNom'].hspacedocument.images['leNom'].vspace="2"laNom=document.images[1].namedocument.leNom.lowsrc="lURL.jpg"

laBordure=document.images['leNom'].borderestElleCharge=document.images['leNom'].complete

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 imageautreImg=new Image(largeur, hauteur); // pour cette image, les dimensions sont spécifiéesuneImg=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 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é srcdu document

HTML

La propriété srcde l'objet Image nommée uneImage

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 javascriptlaLargeur=limage.width; // lecture des dimensions de l'imagelaHauteur=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']

1 le langage javascript pour le web 1 ière partie: syntaxe du langage javascript et objets du noyau...

Documents