Post on 04-Apr-2015
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="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 @");}}
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
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 Boucles for, do … while, whileTest conditionnel if … else, switch
Objet DateObjet String (chaîne de caractères)Objet Array (les tableaux)
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
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 Boucles for, do … while, whileTest conditionnel if … else, switch
Objet DateObjet String (chaîne de caractères)Objet Array (les tableaux)
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="christof@mail.com"; // 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="christof@mail.com"; // 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
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
E. ChristoffelMCF, ULP
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
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
E. ChristoffelMCF, ULP
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
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. ChristoffelMCF, ULP
25
Textarea
Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model
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
Le langage Javascript pour le web
Plan:
Objet document
Collection d'objets all
Les objets personnalisés
Les formulaires
Les images
E. ChristoffelMCF, ULP
collection all[ ], propriétés et méthodesméthode getElementById( ), accès aux objetsméthode getElementById( ) sous Netscape 6
3ième partie: Les balises HTML et les Objets javascript correspondants
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><!-- 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);}
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
Le langage Javascript pour le web
Plan:
Objet document
Collection d'objets all
Les formulaires
Les images
E. ChristoffelMCF, ULP
Introductionla collection forms[ ] des formulairesévénement onsubmitla collection elements[ ]: text…
3ième partie: Les balises HTML et les Objets javascript correspondants
35
Textarea
Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model
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
Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model
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
Le langage Javascript pour le web
Plan:
Objet document
Collection d'objets all
Les objets personnalisés
Les formulaires
Les images
E. ChristoffelMCF, ULP
propriétés, méthodes et événementspré-chargement des images en mémoireimages réactives
3ième partie: Les balises HTML et les Objets javascript correspondants
45
Textarea
Collections d'objets et hiérarchie : le D.O.M. ou Document Object Model
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']