principe du navigateur - Exercices corriges
Ces exercices sont corrigés dans le dossier Solutions. Ce cours est ......
document.form1.chrono.value = h + ":" + m + ":" + s;. seconds .... window.top.
méthode() ;.
part of the document
LE Javascript
- Cours complet -
Par Michaël MURAZ
NOTE DE LAUTEUR
Ce cours ne possède pas de copyright, mais lauteur souhaite réguler son utilisation. Celle-ci est illimitée dans le cadre privé tant que le document conserve son état dorigine. Lauteur autorise la reproduction et la présentation publique à 3 conditions :
Le document ne doit subir aucune modification.
Le document doit être présenté sous le nom de son auteur.
Lauteur doit être averti de toute utilisation ou publication collective.
LAUTEUR
Lauteur est un lycéen de 19 ans, en première année décole dingénieur INSA. Ses loisirs sont en partie occupés par la programmation. Les langages quil connaît sont le Javascript, le HTML, le PHP/SQL, le C/C++ et le Pascal. A ses heures perdues, il aime aussi écrire, ce qui lui a donné lidée de réaliser des cours de programmation.
Pour le contacter, utiliser ladresse e-mail suivante : michael.muraz@insa-lyon.fr. Il est aussi disponible sur MSN Messenger : banzaichico@hotmail.com.
TABLE DES MATIERES
TOC \o "1-2" \h \z
HYPERLINK \l "_Toc132950548" 1 AVANT-PROPOS PAGEREF _Toc132950548 \h 5
HYPERLINK \l "_Toc132950549" 2 GENERALITES PAGEREF _Toc132950549 \h 6
HYPERLINK \l "_Toc132950551" 3 LE LANGAGE PAGEREF _Toc132950551 \h 7
HYPERLINK \l "_Toc132950552" 4 LES STRUCTURES DE DONNEES PAGEREF _Toc132950552 \h 9
HYPERLINK \l "_Toc132950553" 5 OPERATEURS PAGEREF _Toc132950553 \h 13
HYPERLINK \l "_Toc132950556" 6 FONCTIONS PAGEREF _Toc132950556 \h 16
HYPERLINK \l "_Toc132950557" 7 STRUCTURES DE CONTROLE PAGEREF _Toc132950557 \h 20
HYPERLINK \l "_Toc132950558" 8 BOITES DE MESSAGE PAGEREF _Toc132950558 \h 25
HYPERLINK \l "_Toc132950559" 9 NOTION OBJET PAGEREF _Toc132950559 \h 27
HYPERLINK \l "_Toc132950560" 10 FORMULAIRES PAGEREF _Toc132950560 \h 29
HYPERLINK \l "_Toc132950561" 11 EVENEMENTS PAGEREF _Toc132950561 \h 42
HYPERLINK \l "_Toc132950562" 12 OBJET ARRAY PAGEREF _Toc132950562 \h 50
HYPERLINK \l "_Toc132950563" 13 OBJETS DU NAVIGATEUR PAGEREF _Toc132950563 \h 55
HYPERLINK \l "_Toc132950564" 14 OBJET NAVIGATOR PAGEREF _Toc132950564 \h 56
HYPERLINK \l "_Toc132950565" 15 OBJET WINDOW PAGEREF _Toc132950565 \h 59
HYPERLINK \l "_Toc132950566" 16 OBJET DOCUMENT PAGEREF _Toc132950566 \h 68
HYPERLINK \l "_Toc132950567" 17 OBJETS DU NOYAU JAVASCRIPT PAGEREF _Toc132950567 \h 74
HYPERLINK \l "_Toc132950568" 18 OBJET MATH PAGEREF _Toc132950568 \h 75
HYPERLINK \l "_Toc132950569" 19 OBJET STRING PAGEREF _Toc132950569 \h 77
HYPERLINK \l "_Toc132950570" 20 OBJET DATE PAGEREF _Toc132950570 \h 88
HYPERLINK \l "_Toc132950571" 21 OBJET IMAGE PAGEREF _Toc132950571 \h 92
HYPERLINK \l "_Toc132950572" 22 PROGRAMMATION MULTI-CADRES PAGEREF _Toc132950572 \h 98
HYPERLINK \l "_Toc132950573" 23 COOKIES PAGEREF _Toc132950573 \h 103
HYPERLINK \l "_Toc132950574" 24 PROGRAMMATION OBJET PAGEREF _Toc132950574 \h 107
HYPERLINK \l "_Toc132950575" 25 EXPRESSIONS REGULIERES PAGEREF _Toc132950575 \h 110
HYPERLINK \l "_Toc132950577" 26 FONCTIONS ET METHODES PAGEREF _Toc132950577 \h 118
HYPERLINK \l "_Toc132950579" 27 LISTE DES EXEMPLES PAGEREF _Toc132950579 \h 123
HYPERLINK \l "_Toc132950580" 28 LISTE DES TABLEAUX PAGEREF _Toc132950580 \h 127
HYPERLINK \l "_Toc132950581" 29 INDEX PAGEREF _Toc132950581 \h 128
HYPERLINK \l "_Toc132950582" 30 LIENS PAGEREF _Toc132950582 \h 132
HYPERLINK \l "_Toc132950583" 31 HISTORIQUE PAGEREF _Toc132950583 \h 133
AVANT-PROPOS
Ce cours sadresse à tout programmeur, du débutant ayant soif dapprendre à lexpert ayant besoin de se remémorer quelque détail, en passant par le programmeur qui souhaite découvrir un langage ou se perfectionner... Son but nest pas de former quelquun au Javascript, car ce serait se vanter. Non, son but est de donner des bases, que le programmeur averti saura compléter par dautres lectures.
Il le cours - na pas vocation à être exhaustif. Il est plutôt évolutif, cest-à-dire quil nexiste que pour être amélioré. Lauteur nattend que les remarques, critiques, suggestions
des lecteurs pour améliorer ce document et lenrichir.
Lauteur ne sengage pas à fournir un cours parfait. Il peut et il doit y avoir des erreurs. Il ne prétend pas posséder le cours sans fautes. Les remarques à ce sujet sont aussi les bienvenues.
Enfin, si un lecteur rencontre un problème, sil ne comprend pas un point, quil nhésite pas à piocher dans la liste des liens qui sont fournis, et même, si un passage ne semble vraiment pas clair, écrire à lauteur. Ses coordonnées figurent au début du document, avant la table des matières. Cependant, ne pas abuser de ce service, lauteur nest pas une aide en ligne, il a aussi une vie professionnelle ne peut passer son temps à répondre à des questions. Si la réponse se fait attendre, patienter encore. Peut-être na-t-il pas le temps ou peut-être na-t-il pas encore trouvé la solution
Merci davoir lu cet avant-propos. Bonne lecture et bienvenue dans lunivers de Javascript !
GENERALITES
Le langage Javascript
Le langage XE "Langage" Javascript XE "Javascript" a été mis au point par Netscape en 1995. Microsoft ayant sorti son propre langage quelques temps après, un standard a été créé, le Javascript. Actuellement, la version du langage est le Javascript 1.5. Ce langage est interprété, cest-à-dire quil nest pas compilé en langage machine avant exécution, comme le Java XE "Java" ou le C++ XE "C++" . Le Javascript est intégré au code HTML, il vous faudra donc des bases assez solides en HTML. Si ce nest pas le cas, il est conseillé de consulter un cours HTML de toute urgence. Il sagit, a priori, du premier langage de script créé pour le web. Il permet dexécuter des commandes du côté utilisateur, donc au niveau du navigateur XE "Navigateur" et non du serveur - comme le PHP XE "PHP" . Son principal inconvénient XE "Inconvénient" est le fait quil ne dispose pas de débogueur, la détection des erreurs en devient fastidieuse. Ensuite, le code est accessible, puisque contenu dans la page envoyée au navigateur. Cela peut être gênant et lauteur ne veut pas forcément dévoiler ses sources.
Contraintes XE "Contraintes" logicielles
Pour programmer en Javascript, il faut un navigateur web assez récent et un éditeur XE "Editeur" de texte, le bloc-notes de Windows est suffisant. Une connexion Internet XE "Internet" est souhaitable. Au niveau de léditeur de texte, il est conseillé dutiliser un éditeur un peu plus évolué. Le mieux serait bien entendu Dreamweaver MX, pour ceux qui ont les moyens, bien que ce soit surtout utile lors de la création un site web. Du côté des éditeurs gratuits, Editplus2 est performant. Cest un éditeur tous langages qui propose une coloration syntaxique. Bien entendu, il est possible dutiliser un autre éditeur.
Détails techniques
Par convention, labréviation JS, utilisée souvent tout au long de ce cours, désigne Javascript. Chaque section concerne un point du langage qui peut être pris comme une leçon. A chaque fin de section, un exemple concret est présenté quand cest possible et un ou plusieurs exercice(s). Ces exercices sont corrigés dans le dossier Solutions. Ce cours est agrémenté de nombreux exemples. Lorsque ces derniers ont un résultat graphique, ils sont dans le dossier Exemples.
LE LANGAGE
Incorporation XE "Incorporation" du code
Comme son nom lindique, il sagit dun langage de script XE "Script" . Le code sintègre donc dans la page HTML avec les balises XE "" . Il existe deux façons dintégrer votre code. La première consiste à le placer entre les balises, tout simplement :
code
Exemple STYLEREF 1 \s 3. SEQ Exemple \* ARABIC \s 1 1 Balise
var mavariable = 12 ;
document.write (typeof(mavariable)) ;
Il est aussi possible de placer le code dans un fichier XE "Fichier" Javascript, comportant lextension « .js ». Ensuite, il faut linsérer dans la page HTML avec la balise . Ne pas oublier quil est préférable de placer le fichier JS dans le même dossier que la page.
Exemple STYLEREF 1 \s 3. SEQ Exemple \* ARABIC \s 1 2 Inclusion de fichier « .js »
Spécificités du langage
La première chose quil faut noter en Javascript, comme dans le C, est que chaque instruction se termine par un point-virgule ;. Il est possible de mettre plusieurs instructions sur la même ligne, puisque linterpréteur ignore les sauts de lignes. Vous pouvez aussi insérer des blancs où vous voulez excepté dans des noms de variables ou dans des expressions cela ne change pas le code.
Exemple STYLEREF 1 \s 3. SEQ Exemple \* ARABIC \s 1 3 - Spécificités
var mavariable = 12 ;
document.write ( typeof(mavariable)) ;
Il est utile de commenter son code. Les commentaires XE "Commentaires" se font à laide de //, tout le texte suivant le double slash jusquà la fin de la ligne est ignoré par linterpréteur.
Exemple STYLEREF 1 \s 3. SEQ Exemple \* ARABIC \s 1 4 Commentaires //
var mavariable = 12 ; //commentaire
document.write ( typeof(mavariable) ) ;
Il est aussi possible de mettre des commentaires au milieu dun ligne, ou sur plusieurs ligne, en les encadrant avec « /* » et « */ ». Ces commentaires sont très utiles et peuvent très bien être utilisés comme les commentaires de fin de ligne.
Exemple STYLEREF 1 \s 3. SEQ Exemple \* ARABIC \s 1 5 Commentaires /* */
var mavariable = 12 ; /*commentaire sur
plusieurs lignes*/
document.write ( typeof(mavariable) ) ;
LES STRUCTURES DE DONNEES
Les données constantes
Le JS fournit quatre types de constantes XE "Constantes" déjà définies : les constantes numériques, en notation décimale (75.2) ou flottante, cest-à-dire scientifique (7.52E-1) ; les constantes booléennes : true XE "True" et false XE "False" ; les chaînes de caractères, encadrées de guillemets ou dapostrophes () ; la constante null XE "Null" qui signifie « rien », « sans valeur », et qui est attribuée au variables non définies.
Les variables XE "Variables"
Types de variables
Un nom de variable doit commencer par une lettre (alphabet ASCII XE "ASCII" ) ou le signe « _ » et se composer de lettres, de chiffres et des caractères « _ » et « $ » (à l'exclusion du blanc). Le nombre de caractères n'est pas précisé. Javascript est sensible à la casse XE "Casse" (majuscules et minuscules). Cela signifie que « MaVariable » nest pas équivalent à « mavariable ».
Il existe 5 types de variables XE "Types de variables" en Javascript. Elles seront toutes décrites au cours de ce document. En voici la liste :
Les nombres : number XE "Types de variables:Number"
Les chaînes de caractères : string XE "Types de variables:String"
Les booléens : boolean XE "Types de variables:Boolean" XE "Boolean"
Les objets : object XE "Types de variables:Object"
Les fonctions : function XE "Types de variables:Function"
Les fonctions seront abordés un peu plus loin, mais il est utile de connaître la fonction suivante : typeof() XE "Typeof()" . Elle retourne le type dune variable. Voici un exemple dutilisation :
Exemple STYLEREF 1 \s 4. SEQ Exemple \* ARABIC \s 1 1 Fonction typeof()
var mavariable = 12 ;
document.write (typeof(mavariable)) ;
Si la variable nest pas affectée dune valeur, elle recevra alors le type undefined XE "Undefined" , comme le montre lexemple ci-dessous.
Exemple STYLEREF 1 \s 4. SEQ Exemple \* ARABIC \s 1 2 Type dune variable sans valeur
document.write (typeof(mavariable)) ;
Déclaration et affectation
On distinguera ici la déclaration XE "Variables:Déclaration" et laffectation XE "Variables:Affectation" . La première consiste à donner un nom à la variable alors que la seconde consiste à donner une valeur à la variable. La différence est quune variable peut-être affectée dune valeur plusieurs fois alors quelle ne peut être définie quune seule fois. Lexemple suivant illustre une définition sans affectation.
Exemple STYLEREF 1 \s 4. SEQ Exemple \* ARABIC \s 1 3 Définition de variable
var Numero;
Dans les exemples qui suivent, par facilité, sont regroupées laffectation et la déclaration. Les variables peuvent être déclarées de deux façons. La première est la façon explicite XE "Variables:Affectation:Explicite" , avec le mot-clé « var ».
Exemple STYLEREF 1 \s 4. SEQ Exemple \* ARABIC \s 1 4 Affectation explicite de variable
var Numero = 1 ;
Il est aussi possible de la faire de façon implicite XE "Variables:Affectation:Implicite" . On écrit directement le nom de la variable suivi de la valeur que l'on lui attribue.
Exemple STYLEREF 1 \s 4. SEQ Exemple \* ARABIC \s 1 5 Affectation implicite de variable
Numero = 1 ;
Manipulations sur les chaînes de caractères XE "String:Manipulations"
Javascript convertit automatiquement les entiers en chaîne de caractères. Pour les puristes, il sagit du transtypage automatique XE "Transtypage automatique" . Il est ainsi possible de concaténer des entiers avec des chaînes de caractères.
Dans la fonction décriture dans le document courant document.write() XE "Document:Write()" , les données peuvent être séparés par des , ou des +.
Certains caractères spéciaux XE "Caractères spéciaux" peuvent être insérés dans les chaînes de caractères : le retour arrière (\b), le saut de page (\f), le saut de ligne (\n), lentrée (\r), la tabulation (&) et lapostrophe (\).
On peut insérer du code HTML XE "HTML" dans les chaînes de caractères. Ces dernières seront interprétées comme de vraies balises XE "Balises" .
Tout ceci sera expliqué plus en détails dans un chapitre réservé à lobjet String.
Mots réservés XE "Mots réservés"
Les mots de la liste ci-après ne peuvent être utilisés pour des noms de fonctions et de variables. Certains de ces mots sont des mots clés Javascript, d'autres ont été réservés par Netscape pour un futur usage éventuel. Voici la liste de ces mots :
LettreMots réservésAabstractBboolean / break / byteCcase / catch / char / class / const / continueDdefault / do / doubleEelse / extendsFfalse / final / finally / float / for / functionGgotoIif / implements / import / in / instanceof / int / interfaceLlongNnative / new / nullPpackage / private / protected / publicRreturnSshort / static / super / switch / synchronizedTthis / throw / throws / transient / true / tryVvar / voidWwhile / withTAB. SEQ Tableau \* ARABIC 1 Mots réservés
Portée XE "Variables:Portée" des variables
Les variables déclarées tout au début du script, en dehors et avant toutes fonctions (voir plus loin), seront toujours globales, qu'elles soient déclarées avec var ou de façon contextuelle. On pourra donc les exploiter partout dans le script.
Dans une fonction, une variable déclarée par le mot clé var aura une portée limitée à cette seule fonction. On ne pourra donc pas l'exploiter ailleurs dans le script. D'où son nom de locale. Par contre, toujours dans une fonction, si la variable est déclarée contextuellement (sans utiliser le mot var), sa portée sera globale.
OPERATEURS
Comme tout langage informatique, JS possède des opérateurs XE "Opérateurs" pour effectuer les calculs. Leur présentation est rapide, surtout pour les plus simples. Dans les exemples, la valeur initiale de x sera toujours égale à 11, et celle de y sera égale à 5.
Opérateurs arithmétiques XE "Opérateurs:Arithmétiques"
SigneNomSignificationExempleRésultat+plusadditionx + 314-moinssoustractionx - 38*multiplié parmultiplicationx * 222/divisé pardivisionx / 25.5%moduloreste de la division parx % 51=affectationa la valeurx = 55TAB. SEQ Tableau \* ARABIC 2 Opérateurs arithmétiques
Opérateurs de comparaison XE "Opérateurs:De comparaison"
Signe NomExempleRésultat==Egalx == 11true=Supérieur ou égalx >= 11true!=Différentx != 11falseTAB. SEQ Tableau \* ARABIC 3 Opérateurs de comparaison
Ces opérateurs seront utilisés dans les boucles conditionnelles. Le résultat sexprime alors en valeur booléenne XE "Boolean" .
Opérateurs associatifs XE "Opérateurs:Associatifs"
SigneDescriptionExempleSignificationRésultat+=plus égalx += yx = x + y16-=moins égalx -= yx = x - y6*=multiplié égalx *= yx = x * y55/=divisé égalx /= yx = x / y2.2TAB. SEQ Tableau \* ARABIC 4 Opérateurs associatifs
Ces opérateurs permettent un raccourci décriture, sans pour autant changer le résultat. Certains permettent par exemple une incrémentation XE "Incrémentation" ou une décrémentation XE "Décrémentation" autre que 1.
Opérateurs logiques XE "Opérateurs:Logiques"
SigneNomExempleSignification&&Et(condition1) && (condition2)condition1 et condition2 ||Ou(condition1) || (condition2)condition1 ou condition2TAB. SEQ Tableau \* ARABIC 5 Opérateurs logiques
On utilisera ces opérateurs dans les boucles conditionnelles principalement. Chaque condition correspondant à une expression avec un opérateur de comparaison. Ces opérateurs fonctionnent comme un ET logique et un OU logique.
Opérateurs dincrémentation XE "Opérateurs:Dincrémentation"
SigneDescriptionExempleSignificationRésultatx++incrémentation y = x++y = x + 16x--décrémentationy= x--y = x - 14TAB. SEQ Tableau \* ARABIC 6 Opérateurs dincrémentation
FONCTIONS XE "Fonctions"
Définition XE "Fonctions:Définition"
Cest un groupe dinstruction prédéfini et exécuté lorsquil est appelé et que lon peut appeler plusieurs fois. En Javascript, il existe deux types de fonctions : les fonctions propres à Javascript, appelées méthodes XE "Méthodes" . Elles sont associées à un objet en particulier. En suite, il y a les fonctions définies par le programmeur. Ce sont celles qui seront détaillées ci-après.
Déclaration XE "Fonctions:Déclaration"
Pour déclarer ou définir une fonction, on utilise le mot-clé function. La syntaxe d'une déclaration de fonction est la suivante :
function nom_de_la_fonction (arguments) { code des instructions }
Le nom dune fonction suit les mêmes règles que celui dune variable. Chaque nom de fonction doit être unique dans un même script. Les parenthèses sont obligatoires même si il ny a pas darguments, puisque Javascript reconnaît une fonction grâce à elles, par rapport aux variables dites « normales ».
Fonctions dans len-tête XE "Fonctions:En-tête"
Il est plus prudent de placer les déclarations de fonctions dans len-tête XE ""
pour qu elles soient prises en compte par linterpréteur avant leur exécution dans le corps de la page XE ""
.
Appel de fonction XE "Fonctions:Appel"
Une fonction doit être appelée pour être exécutée, cest-à-dire quil faut écrire son nom pour que linterpréteur exécute les instructions contenues dans le corps de la fonction. Un appel seffectue de la manière suivante :
nom_de_la_fonction();
Il faut que la fonction ait été définie avant lappel, étant donné que linterpréteur lit le script de haut en bas.
Manipulation de valeurs à laide de fonctions
Passage de paramètre XE "Fonctions:Paramètres"
Il est possible passer des valeurs à une fonction. On parle alors de paramètres. Pour passer un paramètre à une fonction, on fournit un nom d'une variable dans la déclaration de la fonction. Il faut avoir auparavant préciser un nom de paramètre dans la déclaration de la fonction. Dans lexemple suivant, il sagit dune fonction affichant le texte dans la page à laquelle on fournit le texte à afficher.
Exemple 6. SEQ Exemple \* ARABIC \s 1 1 Paramètre de fonction
function Exemple(texte) { /*définition avec un paramètre*/ document.write(texte); }
Exemple("Salut à tous"); /* appel avec un paramètre*/
Il est possible de passer plusieurs paramètres à une fonction, en séparant les paramètres par des virgules. Cela sindique ainsi :
function nom_de_la_fonction(arg1, arg2, arg3) { instructions
}
Lexemple suivant montre une fonction prenant un nombre en paramètre et retournant son carré. Elle est appelée via une variable.
Exemple 6. SEQ Exemple \* ARABIC \s 1 2 Paramètres multiples
function cube(nombre) {
y = nombre*nombre*nombre;
return y; //retour de valeur
}
x = cube(5); //appel avec paramètre
document.write(x); //résultat
Retour de valeur XE "Fonctions:Retour de valeur"
Une fonction peut retourner une valeur. Il suffit alors de placer le mot-clé return XE "Return" suivi de la valeur ou de la variable à retourner. Par exemple :
Exemple 6. SEQ Exemple \* ARABIC \s 1 3 Retour de valeur
function cube(nombre) { //Définition de la fonction var c = nombre*nombre*nombre ; return c; //Retour du cube du paramètre }
var x = cube(5) ; // appel avec paramètre
document.write (x) ; //affichage
Portée XE "Variables:Portée" des variables
Une variable déclarée dans une fonction par le mot-clé var aura une portée limitée à cette seule fonction. On l'appelle donc variable locale et ne pourra être utilisé dans le reste du script. Voici un exemple :
Exemple 6. SEQ Exemple \* ARABIC \s 1 4 Variable locale déclarée dans une fonction
function cube(nombre) { var c = nombre*nombre*nombre ; }
Si la variable est déclarée sans utiliser le mot var, sa portée alors sera globale.
Exemple 6. SEQ Exemple \* ARABIC \s 1 5 Variable globale déclarée dans une fonction
function cube(nombre) { cube = nombre*nombre*nombre ; }
Les variables déclarées tout au début du script, en dehors et avant toutes fonctions, seront toujours globales, qu'elles soient déclarées avec var ou de façon contextuelle.
Exemple 6. SEQ Exemple \* ARABIC \s 1 6 - Variable globale déclarée hors dune fonction
var cube=1 function cube(nombre) { var cube = nombre*nombre*nombre ; }
STRUCTURES DE CONTROLE
Structures algorithmiques XE "Structures algorithmiques"
Quelque soit le langage informatique utilisé, un programme informatique utilise 3 catégories principales dinstructions. Il y a les instructions séquentielles, les instructions alternatives - ou conditionnelles et les instructions itératives - ou répétitives -. Chacune de ces structures possède une forme sous JS et cette dernière sera indiquée ci-après.
Structure séquentielle XE "Structures algorithmiques:Structure séquentielle"
Cest une suite dinstructions exécutées dans lordre où elles sont écrites, lune après lautre. Lexemple le plus fréquent est la fonction.
AlgorithmeCode JSDEBUT
Instruction1
Instruction2
FIN{
Instruction1 ;
Instruction2 ;
}TAB. SEQ Tableau \* ARABIC 7 Structure séquentielle
Structures conditionnelles XE "Structures algorithmiques:Structures conditionnelles"
Expression if ... else XE "Structures algorithmiques:Structures conditionnelles:Expression if
else"
Il sagit de tester une condition et deffectuer une série dinstructions si la condition est vraie et si elle est fausse, effectuer une autre série dinstructions.
AlgorithmeCode JSSI condition
ALORS Instructions1
SINON Instructions2
FINSIif (condition) {
Instruction1
}
else {
Instruction2
}TAB. SEQ Tableau \* ARABIC 8 Expression if ... else
Lexemple suivant demande lâge de linternaute à laide de la méthode prompt() et affiche une boite de message à laide de la méthode alert().
Exemple STYLEREF 1 \s 7. SEQ Exemple \* ARABIC \s 1 1 Expression if ... else
x = prompt ("votre age?","age");
if ( x < 40) {
alert ('vous êtes jeune') ;
}
else {
alert ('vous êtes vieux') ;
}
Expression ? : XE "Structures algorithmiques:Structures conditionnelles:Expression ? :"
Il sagit dun moyen rapide de tester une condition et de dexécuter une instruction selon son résultat. Dans cette expression, si la condition est vérifiée, linstruction 1 est effectuée, sinon, linstruction 2 est effectuée. Il est utile de préciser que toute lexpression doit se trouver sur la même ligne.
AlgorithmeCode JSSI condition
ALORS Instructions1
SINON Instructions2
FINSI(condition) ? instruction 1 : instruction 2TAB. SEQ Tableau \* ARABIC 9 Expression ? :
Lexemple qui suit utilise cette expression pour faire le même programme que le précédent. Le code sen trouve alors largement raccourci. Cependant, il nest pas possible dexécuter plusieurs instructions avec cette expression, ce qui la rend peu utile.
Exemple STYLEREF 1 \s 7. SEQ Exemple \* ARABIC \s 1 2 Expression ? :
x = prompt ("votre age?","age");
age = (x < 40)? jeune : vieux;
alert ('vous êtes ' + age) ;
Structures itératives XE "Structures algorithmiques:Structures itératives"
Expression for XE "Structures algorithmiques:Structures itératives:Expression for"
Elle permet de répéter des instructions en sarrêtant à un certain nombre ditérations (boucles). Lincrémentation indiquée ci-dessous peut être remplacée par une décrémentation.
AlgorithmeCode JSPOUR i = valeur initiale A i = valeur finale
REPETER instructions
FIN POURFor (val initiale ; condition ; incrémentation) {
Instructions
}TAB. SEQ Tableau \* ARABIC 10 Expression for
Un exemple de lutilisation des boucles est lécriture dune suite de nombres. Il faudra alors réutiliser la variable de la boucle, comme ceci :
Exemple STYLEREF 1 \s 7. SEQ Exemple \* ARABIC \s 1 3 Expression for
for (i = 0; i < 10; i++) {
document.write(i + " ");
}
Expression while XE "Structures algorithmiques:Structures itératives:Expression while"
Elle permet de répéter des instructions tant quune condition est vraie. Celle-ci est indiquée au début de la boucle, puis est testée à chaque autre boucle. Dès quelle devient fausse, lexécution des boucles sarrête.
AlgorithmeCode JSTANT QUE (condition vraie)
REPETER instructions
FIN TANT QUEwhile (condition) {
instructions
}TAB. SEQ Tableau \* ARABIC 11 Expression while
Laffichage dune suite de nombres peut se coder aussi avec cette expression. Cela donne lexemple suivant :
Exemple STYLEREF 1 \s 7. SEQ Exemple \* ARABIC \s 1 4 Expression while
i = 0;
while (i < 10) {
document.write(i + " ");
i++;
}
Interruption de boucle XE "Structures algorithmiques:Interruption de boucle"
Instruction break XE "Structures algorithmiques:Interruption de boucle:Instruction break"
Elle permet de mettre fin prématurément à une instruction itérative while ou for. Linterpréteur passe aux instructions suivant la boucle. Voici un exemple :
Exemple STYLEREF 1 \s 7. SEQ Exemple \* ARABIC \s 1 5 Instruction break
for (i = 0; i < 10; i++) {
if (i == 5) {
break;
}
document.write(i + );
}
Instruction continue XE "Structures algorithmiques:Interruption de boucle:Instruction continue"
Elle permet de mettre fin à une itération et de passer à la boucle suivante. Les instructions qui suivent à lintérieur de la boucle ne sont pas exécutées, pour cette itération seulement. Par exemple :
Exemple STYLEREF 1 \s 7. SEQ Exemple \* ARABIC \s 1 6 Instruction continue
for (i = 0; i < 10; i++) {
if (i == 5) {
continue;
}
document.write(i + );
}
Exercice
Dans cet exercice, il faut afficher tous les nombres pairs compris entre 0 et 20 inclus, dans lordre décroissant. Il ne faudra pas afficher 10 mais 100, et il ne faudra pas non plus afficher 14.
BOITES DE MESSAGE XE "Boîte de message"
Généralités
Voici les boîtes de dialogue, qui sont des méthodes de lobjet window XE "Window" , qui sera abordé plus tard, dans la partie objet du langage. Bien que la programmation objet naie pas encore été expliquée, il semble important dévoquer ces boites de dialogue, qui savèrent utile en JS. Il en existe 3, qui seront détaillées lune après lautre.
Alert XE "Boîte de message:Alert"
Cette méthode a été utilisée dans certains exemples précédemment. La boîte qui saffiche ne comporte quun texte informatif et un bouton « OK ». La syntaxe est la suivante :
alert (paramètres) ;
Les paramètres de cette méthode peuvent être plusieurs objets : une chaîne de caractère entre guillemets, une variable ou un enchaînement des deux, séparés par lopérateur « + » ou « , ». Par exemple :
Exemple STYLEREF 1 \s 8. SEQ Exemple \* ARABIC \s 1 1 La méthode alert()
x = 5 ;
alert ('Le nombre est ' + x) ;
Prompt XE "Boîte de message:Prompt"
Il sagit dune boite dinvite, composée dun texte, dune zone de texte, dun bouton « OK » et dun bouton « Annuler ». Elle permet de récupérer des valeurs entrées par linternaute. Elle sutilise ainsi :
variable = prompt ("texte", "valeur");
La méthode retourne la valeur du champ si le bouton « OK » est choisi dans le cas inverse (bouton « Annuler »), la variable reçoit la valeur « NULL ». Les paramètres sont le texte à afficher dans la boite de message et la valeur par défaut à afficher dans la boite dinvite.
Exemple STYLEREF 1 \s 8. SEQ Exemple \* ARABIC \s 1 2 La méthode prompt()
x = prompt ('Votre prénom ?','prénom') ;
alert (x) ;
Confirm XE "Boîte de message:Confirm"
Il sagit dune boite de confirmation, composée dun texte, dun bouton « OK » et dun bouton « Annuler ». Comme son nom lindique, elle permet de demander confirmation à lutilisateur. En voici la syntaxe :
variable = confirm ("texte");
La méthode retourne true si on clique sur « OK », et false si on clique sur « Annuler ». Il faut entrer en paramètre le texte à afficher dans la boite de message ; qui indique à lutilisateur ce quil doit confirmer.
Exemple STYLEREF 1 \s 8. SEQ Exemple \* ARABIC \s 1 3 La méthode confirm()
x = prompt ('Votre prénom ?','prénom') ;
y = confirm ('Votre prénom est bien ' + x + ?) ;
Exercice
Le but est de récupérer et afficher 3 informations de lutilisateur à lécran. Il faut demander à lutilisateur son login. Sil choisit annuler, on affiche la page blanche. Ensuite, on compare le login entré avec celui attendu : sil est différent, on redemande le login, sinon, on continue le traitement. On demande ensuite le password. On vérifie quil est correct et on continue. Sil ne lest pas, on redemande 2 fois ce password. Sil est toujours incorrect au 3ème essai, on affiche un message derreur à lécran, et le traitement est fini.
Enfin, on demande le prénom de lutilisateur, puis on demande vérification à linternaute. Si le prénom est correct, on laffiche à lécran. Pour afficher à lécran, utiliser la méthode document.write(), en passant la chaîne à afficher en paramètre.
Cet exercice utilisera les connaissances au niveau des fonctions, des variables, des structures algorithmiques, et bien entendu des boites de dialogue. Dans la solution, le login est « prof » et le password est « abcd ».
NOTION OBJET XE "Notion objet"
Bien que ce ne soit pas le but de cette section, il semble important de rappeler le concept objet, notamment pour ceux qui ne le connaissent pas. Il ne sagit pas dun cours magistral, mais juste dun résumé à des fins dutilisation en JS.
Concept objet XE "Concept objet"
Pour linstant nont été abordées que des variables, avec une valeur, indépendantes les unes des autres. Maintenant, on parlera dobjet. Un objet en général - possède des caractéristiques et des compétences. On peut voir ces caractéristiques et utiliser les compétences. En informatique, un objet possède des variables et des fonctions, qui permettent de décrire son comportement. Ces variables sont appelées propriétés XE "Concept objet:Propriétés" et ces fonctions sont appelées méthodes XE "Méthodes" XE "Concept objet:Méthodes" . De cette façon, il est possible de voir les propriétés et dutiliser les méthodes.
Les méthodes et les variables dun même type dobjet sont regroupés dans une classe XE "Classe" , cest-à-dire une fonction appelée constructeur. Celle-ci portera le nom du type dobjet. Il sera alors possible de créer des objets de ce type, ce qui est le sujet de la section suivante.
Création dun objet XE "Création dun objet"
Un objet est créé en utilisant une fonction spéciale, précédée du mot new. Cette fonction est appelée constructeur XE "Création dun objet:Constructeur" , et porte le nom de la classe. Un objet est appelé instance de la classe. Voici la syntaxe :
var objet = new classe ();
Lexemple suivant montre la création dun objet Array, dont la classe est implémentée dans le JS.
Exemple 9. SEQ Exemple \* ARABIC \s 1 1 Création dune instance de classe
var montableau = new Array ();
Accès aux propriétés et méthodes XE "Accès au propriétés et méthodes"
On accède aux propriétés et aux méthodes dun objet en accolant lobjet et sa propriété par lopérateur « . ». Cela montre que la variable ou la fonction « appartient » à lobjet. Cela sécrit de la façon suivante :
objet.propriété
objet.méthode()
Lexemple qui suit nest quune extrapolation du concept objet en lappliquant à la vie courante. Cependant, il est tout à fait possible de créer un objet et une classe sur ce modèle.
Exemple 9. SEQ Exemple \* ARABIC \s 1 2 Exemple de propriétés
Rémi = new Homme () ;
Rémi.yeux = "bleus" ;
Rémi.cheveux = "bruns" ;
Lexemple ci-dessous est lutilisation dune méthode de lobjet document XE "Document" . Ce dernier est intégré au langage et il sera décrit dans une section ultérieure. La méthode présentée ici permet décrire dans la page en cours.
Exemple 9. SEQ Exemple \* ARABIC \s 1 3 Une méthode de lobjet document
document.write ("Hello world !");
Objet this XE "This"
Il existe un objet très utile en JS objet : this. Même sil sera plus utile en programmation objet, lors de la création de classes, il peut servir de le connaître. Il sagit dun objet qui représente lobjet en cours, souvent lobjet passé en paramètre. Il possède alors les propriétés et les méthodes de lobjet. Etant donné son utilité minime avant la programmation objet, cette section ne comportera pas dexemple à ce sujet.
FORMULAIRES XE "Formulaires"
Généralités
Présentation
Voici la partie importante du JS. Sans les formulaires, les pages HTML XE "HTML" ne proposent aucune interactivité avec lutilisateur. En effet, la page appelée est envoyée par le serveur et le browser XE "Browser" ne fait que lafficher, il ne peut rien faire avec le serveur. Les champs de formulaire (form) permettent à lutilisateur dentrer des informations auxquelles la page pourra réagir. Ces réactions seront programmées à lavance par le programmeur. Cela reste assez limité, puisque linteraction ne quitte pas la machine du client, mais on peut effectuer quelques traitements.
Cette section et par extension, ce cours na pas vocation a apprendre le HTML. Le fonctionnement de ce langage ne sera donc pas évoqué ici. De plus, les propriétés JS de chaque contrôle seront décrites dans cette section. Il nest pas utile de les comprendre ou de les utiliser maintenant, mais il semblait plus logique de les répertorier ici.
Balise form XE "Formulaires:Form"
Chaque formulaire doit être encadré par les balises XE ""
. Toutes les balises du formulaire seront comprises entre ces deux-là. Il est à noter quil nest pas possible dimbriquer plusieurs formulaires.
Dans le cas de lutilisation de PHP ou dASP, il sera certainement utile denvoyer les informations à un serveur. Dans ce cas, il faut indiquer dans la balise la méthode XE "Formulaires:Method" (post ou get) et lURL du script qui traitera linformation, comme dans lexemple suivant :
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 1 Envoi dinformations à un script
Les informations peuvent aussi être envoyées par mail. Il faudra alors préciser mailto:
dans laction.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 2 Envoi dinformations par mail
Dans chaque cas, il ne faut surtout pas oublier dinsérer un bouton submit dans le formulaire.
Champ de texte
Ligne de texte XE "Formulaires:Ligne de texte"
Il sagit de lélément dentrée/sortie le plus courant en JS. Une simple ligne où lutilisateur peut écrire quelques mots. Il est possible dy afficher un texte. Voici la syntaxe à utiliser :
Cette balise possède 4 attributs HTML. Seul le nom est obligatoire mais les autres sont facultatifs. Voici la liste de ces attributs :
name : le nom du champ (servira lors de la programmation)
value : la valeur que vous voulez afficher dans la ligne de texte (facultatif).
size : la longueur de la ligne de texte. Si le texte est trop long, la ligne défilera (facultatif).
maxlength : le nombre de caractères maximum contenus dans la ligne de texte (facultatif).
Il est possible de rattacher 3 propriétés à ce contrôle. Elles sont assez basiques. Ce sont les suivantes :
name : indique le nom du contrôle.
defaultvalue : indique la valeur par défaut affichée dans la ligne de texte.
value : indique la valeur actuellement dans la zone de texte.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 3 Ligne de texte
Zone de texte XE "Formulaires:Zone de texte"
Il sagit en résumé - de plusieurs lignes de texte. Des barres de déroulements saffichent Lorsque le texte est trop long. Cest utile quand linformation demandée est conséquente. On utilise alors la balise XE "Formulaires:Textarea" :
texte par défaut
Les 3 attributs de la balise sont facultatifs, mais il est conseillé de les déclarer tous les 3 quand même.
name : le nom du champ (servira lors de la programmation)
rows : le nombre de lignes affichés à lécran. Si le texte est trop long, la zone de texte défilera.
cols : le nombre de colonnes affichées à lécran.
La balise possède les mêmes propriétés JS que la ligne de texte, à cela près que la value ne correspond pas à lattribut de la balise, qui nexiste pas. Voici la liste de ces propriétés :
name : indique le nom du contrôle.
defaultvalue : indique la valeur par défaut affichée dans la ligne de texte.
value : indique la valeur actuellement dans la zone de texte.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 4 Zone de texte
zone de texte
Champ password XE "Formulaires:Password"
Il sagit dune ligne de texte dont les caractères sont cachés. Elle sert comme son nom lindique à faire entrer un mot de passe à lutilisateur. On utilise pour cela la balise , déjà utilisée pour la ligne de texte :
Les attributs de la balise sont ceux vu précédemment. Se reporter à la description de la ligne de texte.
name : le nom du champ (servira lors de la programmation)
value : la valeur que vous voulez afficher dans le champ (facultatif).
size : la longueur de la ligne de texte. Si le texte est trop long, la ligne défilera.
maxlength : le nombre de caractères maximum contenus dans la ligne de texte (facultatif mais conseillé).
Les propriétés du champ password sont celles dune ligne de texte. Il y en a aussi 3 et elle sont identiques :
name : indique le nom du contrôle.
defaultvalue : indique la valeur par défaut affichée dans la ligne de texte.
value : indique la valeur actuellement dans le champ password.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 5 Champ password
Cases à sélectionner
Boutons radios XE "Formulaires:Radios"
Il sagit de cases à cocher à choix unique, cest-à-dire que lon ne peut en sélectionner quune si le code est bien construit -. Dune forme ronde, elles sont liées entre elles au niveau du code JS. On retrouve encore ici la balise , précédemment utilisée. Il est nécessaire de préciser le label après le contrôle (texte), comme ceci :
texte
Les attributs de la balise des boutons radios sont différents de ceux de la balise habituelle. Il ny a plus de valeur par défaut, mais la possibilité de pré cocher une case.
name : le nom du champ (servira lors de la programmation). Il doit être identique pour chaque choix.
value : la valeur que vous voulez afficher dans le champ (facultatif).
checked : à mettre sur un seul bouton, qui sera sélectionné par défaut.
Le nombre de propriétés JS est plus important ici. On retrouve les propriétés liées à la sélection dune case ainsi quun index.
name : indique le nom du contrôle.
checked : indique si le bouton radio est coché, actuellement.
defaultchecked : indique si le bouton radio est coché ou non par défaut.
value : indique la valeur du bouton radio.
index : indique le rang du bouton radio, à partir de 0.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 6 Boutons radios
choix 1
choix 2
choix 3
Checkbox XE "Formulaires:Checkbox"
Il sagit de cases à cocher à choix multiple, cest-à-dire que lon peut en sélectionner plusieurs. Cest toujours la balise qui est utilisée. Il est aussi nécessaire de préciser le label après le contrôle (texte) :
texte
On retrouve les paramètres HTML de la balise des boutons radio, puisque ici aussi, la sélection des cases entre en jeu.
name : le nom du champ (servira lors de la programmation). Il doit être différent pour chaque choix.
value : la valeur que vous voulez afficher dans le champ (facultatif).
checked : à mettre sur un (ou plusieurs) bouton, qui sera sélectionné par défaut.
Les propriétés JS sont exactement les mêmes, au détail près que plusieurs contrôles peuvent avoir la propriété checked ayant la valeur « true ».
name : indique le nom du contrôle.
checked : indique si la case est cochée, actuellement.
defaultchecked : indique si la case est cochée ou non par défaut.
value : indique la valeur de la case à cocher.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 7 - Checkbox
choix 1
choix 2
choix 3
Liste déroulante XE "Formulaires:Liste déroulante"
Il sagit dune liste déroulante dans laquelle on peut sélectionner une option, derrière laquelle on doit préciser le label au niveau du code - sans quoi la liste sera vide. Cette fois-ci, on utilisera la balise XE "Formulaires:Select" couplée à . Chaque option de la liste déroulante correspond à une balise . Il est nécessaire de préciser le label après chaque option contrôle (texte).
texte
Les attributs HTML sont plus nombreux. On retrouve les 3 paramètres classiques auxquels on ajoute la sélection par défaut sous un autre nom et la sélection multiple.
name : le nom du champ (servira lors de la programmation).
size : le nombre doptions que vous voulez afficher à lécran. Sil nest pas précisé, la liste naffiche quune seule ligne.
value : la valeur que vous voulez afficher dans le champ (facultatif).
selected : à mettre dans une balise . Cette option sera sélectionnée par défaut.
multiple : à mettre dans une balise . Autorise la sélection de plusieurs options dans la liste déroulante.
Les propriétés JS sont semblables à celles de la balise de checkbox. La longueur de la liste apparaît cependant.
name : indique le nom du contrôle.
selected : indique si le bouton radio est sélectionné
defaultselected : indique si le bouton radio est coché ou non par défaut.
length : indique le nombre déléments de la liste.
Les exemples suivants montrent la différence entre une liste sans lattribut size et une liste où celui-ci est précis, avec une valeur supérieure à 1.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 8 Liste déroulante avec lattribut size
choix 1
choix 2
choix 3
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 9 Liste déroulante sans lattribut size
choix 1
choix 2
choix 3
Boutons
Bouton simple XE "Formulaires:Button"
Il sagit du bouton tout simple, que lon utilise pour appeler une fonction dans la plupart des cas. Il faut alors utiliser de nouveau la balise :
Les attributs HTML sont au nombre de 2. Ce sont ceux du contrôle de ligne de texte à une exception près.
name : le nom du champ (servira lors de la programmation).
value : la valeur que vous voulez afficher sur le bouton.
Les propriétés JS restent les mêmes que celles de plusieurs autres contrôles. Ce sont :
name : indique le nom du contrôle.
value : indique la valeur actuelle du bouton.
defaultvalue : indique la valeur par défaut du bouton.
Il est à préciser que le bouton de lexemple ci-dessous na alors aucune utilité. Il faudra lui attribuer une action à laide des évènements, ce qui est lobjet de la section suivante.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 10 Bouton simple
Bouton reset XE "Formulaires:Reset"
Il permet de remettre la valeur par défaut de tous les champs du formulaire. Cela offre une interaction supplémentaire à votre formulaire. On utilisera encore la balise :
On retrouve les mêmes attributs que pour le bouton simple.
name : le nom du champ (servira lors de la programmation).
value : la valeur que vous voulez afficher sur le bouton.
Les propriétés JS sont aussi identiques.
name : indique le nom du contrôle.
value : indique la valeur actuelle du bouton.
defaultvalue : indique la valeur par défaut du bouton.
Lexemple ci-dessous possède un bouton reset, qui permet de re-sélectionner par défaut loption 3 :
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 11 Bouton reset
choix 1
choix 2
choix 3
Bouton submit XE "Formulaires:Submit"
Il permet dexécuter laction prévue dans la balise , comme indiqué dans la section traitant de cette balise. En règle générale, il permet denvoyer les données saisies dans le formulaire. On retrouve une nouvelle fois la balise :
On retrouve les mêmes attributs que pour le bouton simple.
name : le nom du champ (servira lors de la programmation).
value : la valeur que vous voulez afficher sur le bouton.
Les propriétés JS sont aussi identiques.
name : indique le nom du contrôle.
value : indique la valeur actuelle du bouton.
defaultvalue : indique la valeur par défaut du bouton.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 12 Bouton submit
choix 1
choix 2
choix 3
Contrôle caché XE "Formulaires:Hidden"
Il permet de mettre dans le script des éléments (souvent des données) qui ne seront pas affichées par le navigateur, mais qui pourront être envoyées par mail ou à un serveur. Il faut toujours utiliser la balise :
On retrouve les mêmes attributs que pour le bouton simple.
name : le nom du champ (servira lors de la programmation).
value : la valeur qui sera contenue dans le contrôle.
Les propriétés JS sont aussi identiques.
name : indique le nom du contrôle.
value : indique la valeur actuelle du contrôle.
defaultvalue : indique la valeur par défaut du contrôle.
Lors de lenvoi du formulaire ci-dessous, la valeur du contrôle caché sera aussi envoyée. Cela permet par exemple de donner la date ou le nom du formulaire.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 13 Contrôle caché
Formulaire complet
Voilà un formulaire complet, utilisant la plupart des contrôles cités ci-dessus. Il pourrait sagir dun formulaire réel, mais il est inventé de toutes pièces. De nombreux sites proposent des formulaires, rien nempêche denregistrer la page et daller fouiner pour voir leurs astuces
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 14 Formulaire complet
Inscription au stage
Identité
Activité
Collégien
Lycéen
Etudiant
Salarié
Fonctionnaire
Patron
Qualification(s):
BAFA
BAFD
rien
Semaine choisie:
1ère
2ème
3ème
Vos motivations :
Objet des formulaires XE "Formulaires:Objet"
La notion dobjet XE "Notion objet" a été évoquée précédemment. Maintenant que tous les composants dun formulaire sont connus, il va être possible dutiliser le concept objet appliqué aux formulaires.
Même si les objets du navigateur nont pas été abordés, lobjet document XE "Document" sera introduit ici. Il renvoie à la page en cours. Il contient en propriétés tous les éléments de la page. Les attributs des balises deviennent les propriétés de lélément objet. On y a accès de la façon suivante :
document.formulaire.élément.propriété
Un exemple éclairera le propos. Lexemple suivant montre comment attribuer une valeur à une ligne de texte.
Exemple STYLEREF 1 \s 10. SEQ Exemple \* ARABIC \s 1 15 Attribuer une valeur à une ligne de texte
function f() {
document.form1.texte.value="voici du texte";
}
Dans lexemple ci-dessus, la fonction est appelée à la fin du chargement grâce au gestionnaire dévénement placé dans la balise XE "" .
De cette façon, on peut accéder à chaque élément de chaque formulaire de la page. Il est important de donner un nom, à la fois au formulaire et au contrôle. Ce nom doit de préférence être explicite, même si celui du formulaire peut rester classique, étant donné quil y en a rarement plusieurs sur une seule et même page. Lors de lutilisation des frames, en revanche, ce nom sera important.
Cette manière de pouvoir accéder aux objets est très pratique, même si pour le moment, elle ne semble pas très utile. Cette utilité sera mise en valeur dans la section suivante.
Exercice
Le but de cet exercice est darriver à un formulaire complet et assez ergonomique. Il faudra faire attention aux choix des contrôles et à la disposition. La solution proposée nest pas parfaite loin de là mais elle illustre à peu près ce quest un formulaire de qualité correcte.
Le formulaire à créer est un formulaire dadhésion à une association, pour lactivité échecs. Les informations demandées sont les suivantes : nom, prénom, date de naissance, numéro de téléphone, adresse, mail, profession (choix, dont « autres : préciser »), centres dintérêt (choix), niveau de jeu, motivations. Il faudra présenter ce formulaire de façon assez esthétique, mais la police et la taille de caractères ne sont pas importantes, cela dépend plutôt dun cours HTML. Bien entendu, il faut envoyer le tout à traitement.php, par la méthode post en cliquant sur un bouton.
EVENEMENTS XE "Evènements"
Généralités
Présentation
Les événements sont lintérêt du JS en matière de programmation Web. Ils donnent une interactivité à la page que linternaute consulte, ce qui nexiste pas avec le HTML XE "HTML" , si on excepte bien entendu le lien hypertexte. Le JS permet de réagir à certaines actions de lutilisateur. On nomme évènement le mot Event, et gestionnaire XE "Evènements:Gestionnaire" dévénement le mot-clé onEvent.
Fonctionnement
Les évènements sont indiqués dans la balise, dun formulaire, le plus souvent. Ils apparaissent comme un paramètre supplémentaire et suivent une syntaxe particulière :
Cet évènement est supporté par les balises suivantes : , , , , , .
Chargement
Load XE "Evènements:OnLoad"
Il se produit lorsque la page appelée ou consultée - finit de se charger. Son gestionnaire dévénement est onLoad.
Exemple STYLEREF 1 \s 11. SEQ Exemple \* ARABIC \s 1 3 - onLoad
Ce gestionnaire dévènement est supporté uniquement par les balises et .
Error XE "Evènements:OnError"
Lorsque le chargement dune page ou dun image sinterrompt en erreur, cela produit un événement JS. Le gestionnaire dévénement associé est onError.
Exemple STYLEREF 1 \s 11. SEQ Exemple \* ARABIC \s 1 5 - onError
Il est supporté uniquement par les images, cest-à-dire par la balise suivante : .
Passage de la souris
MouseOver XE "Evènements:OnMouseOver"
Cela se produit lors du survol dun lien ou dune zone dimage activable. Une zone dimage activable est une partie dimage qui a été transformée en lien. Le gestionnaire associé à cet évènement est onMouseOver.
Exemple STYLEREF 1 \s 11. SEQ Exemple \* ARABIC \s 1 7 - onMouseOver
http://www.google.fr
Il est supporté par mêmes balises que onMouseOver : et .
Focus des contrôles
Focus XE "Evènements:OnFocus"
Il se produit lors de lactivation dun contrôle texte ou dune sélection. Son gestionnaire dévénement est onFocus.
Exemple STYLEREF 1 \s 11. SEQ Exemple \* ARABIC \s 1 9 - onFocus
Ce gestionnaire est supporté par les balises , , et .
Changement XE "Evènements:OnChange"
Lorsque la valeur dun texte ou dune option change dans un formulaire, cela produit aussi un événement en JS. Si lutilisateur clique dans la zone de texte mais que vous ne touchez pas au texte, rien ne se produit. Son gestionnaire dévénement est le suivant onChange.
Exemple STYLEREF 1 \s 11. SEQ Exemple \* ARABIC \s 1 11 - onChange
Il est supporté par les 2 balises de texte, cest-à-dire et y.
Envoi XE "Evènements:OnSubmit"
Lorsque linternaute clique sur un bouton submit dun formulaire de type « post » ou « get ». Le gestionnaire dévénement est alors onSubmit.
Exemple STYLEREF 1 \s 11. SEQ Exemple \* ARABIC \s 1 13 - onSubmit
Il est supporté uniquement par la balise .
Objet document XE "Document"
Avant de voir les évènements, lintérêt de laccès aux éléments à travers lobjet document XE "Document" était discutable. Maintenant, on voit quil est possible de changer des valeurs selon des évènements, ce qui est très intéressant. Il est aussi possible de demander confirmation, de demander si on veut vraiment changer la valeur
Tout est permis. Cette partie ne comporte pas dexemple, car la section suivante en présente un assez complet.
Exemple concret
Voici un exemple parmi tant dautres de ce que pourrait être un formulaire interactif, avec tous les évènements auxquels on peut penser.
Exemple STYLEREF 1 \s 11. SEQ Exemple \* ARABIC \s 1 15 Exemple de formulaire évènementiel
New Document
var TestLog = 0; //test pour le login
function ChangeLog() {
TestLog++; //incrémente le test
if (TestLog > 1) { //si le login a été changé plus d'une fois
alert("Vous changez de login?\n Décidez-vous!");
}
}
function VerifPass () { // si les deux password sont différents
if (document.form1.pass1.value != document.form1.pass2.value) {
alert("Vous avez entré deux passwords différents !\nVérifiez les.");
}
}
function VerifMail () { //confirmation du mail
var test = confirm ("Votre mail est bien : " + document.form1.mail.value + " ?");
if (test == false) { //si l'internaute ne confirme pas
alert("N'oubliez pas de changer votre mail!");
}
}
Formulaire d'inscription sur notre site
Login :
Password :
Password (vérification) :
Adresse e-mail :
Vous voulez recevoir la newsletter? Oui Non
Exercice
Bouton
Lexercice consiste à faire un bouton dont la valeur sincrémente à chaque clic.
Phrase
Lexercice consiste à demander 3 informations à un utilisateur, puis de les afficher dans une zone de texte en faisant une phrase. Il faudra demander le nom à laide dune boite de message, ainsi que lâge et la ville avec des lignes de texte. Ensuite, en cliquant sur un bouton, on affiche une phrase contenant les 3 informations dans une zone de texte.
OBJET ARRAY XE "Array"
Généralités
Lobjet Array nest rien dautre quun tableau XE "Tableau" . Un tableau est en quelque sorte une liste déléments indexés que lon pourra lire chercher les données - ou écrire entrer les données à volonté.
Création et affectation
Création XE "Array:Création"
Un tableau se crée comme nimporte quel objet de classe. On invoque le constructeur de classe. Il faut indiquer en paramètre du constructeur le nombre maximum déléments (x) que lon souhaite entrer dans le tableau. Ce nombre est cependant facultatif, car JS prend en compte le numéro du dernier élément entré comme taille du tableau si le ce nombre nest pas indiqué. Voici la syntaxe à suivre :
variable = new Array(x) ;
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 1 Création de tableau
var MonTableau = new Array (10) ;
Affectation XE "Array:Affectation"
On affecte un tableau très simplement. Il suffit daffecter une valeur (y) à la variable avec le numéro de lélément (i) entre crochets. Ces derniers ne sont pas présents lors de la création mais sont indispensables lors de laffectation. Le numéro commence à 0 et finit au nombre maximum moins 1. Voici donc la syntaxe à suivre :
variable = new Array(x) ;
variable [i] = y;
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 2 Affectation simple de tableau
var MonTableau = new Array (2) ;
MonTableau [0] = 7 ;
MonTableau [1] = 4 ;
Evidemment, à ce rythme-là, laffectation est longue, surtout si le tableau compte plus que quelques éléments. Cest pourquoi il est nécessaire dutiliser la boucle itérative for XE "Structures algorithmiques:Structures itératives:Expression for" . Lexemple suivant entre une série de nombre en ajoutant 1 à chaque fois. Il sagit dun exemple rapide et simple, mais on peut imaginer faire un calcul ou demander une valeur à lutilisateur à chaque boucle.
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 3 Affectation itérative de tableau
var MonTableau = new Array (5) ;
for ( var i = 0 ; i < 5 ; i++) {
MonTableau [i] = i;
document.write (MonTableau[i]);
}
Accès aux éléments XE "Array:Accès aux éléments"
On accède aux données dun tableau en indiquant le numéro de lélément entre crochets. On affecte cette valeur à une variable, par exemple. On peut aussi lentrer comme paramètre dune fonction.
variable1 = new Array(x) ;
variable1 [i] = y ;
variable2 = variable1 [i] ;
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 4 Accès aux éléments dun tableau
var MonTableau = new Array (2) ;
MonTableau [0] = 7 ;
var element = MonTableau [0] ;
document.write (MonTableau [0]) ;
Tableau à deux dimensions XE "Array:2 dimensions"
Pour créer un tableau à 2 dimensions, il faut utilise lastuce suivante : déclarer chaque élément comme un nouveau tableau.
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 5 Tableau à deux dimensions
var MonTableau = new Array (2) ;
MonTableau [0] = new Array (7) ;
Il est bien entendu plus rapide dutiliser une instruction itérative pour créer ce tableau à 2 dimensions.
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 6 Tableau à deux dimensions
var MonTableau = new Array (5) ;
for ( var i = 0 ; i < 5 ; i++) {
MonTableau [i] = new Array (3);
}
Avec ce système, il est possible de créer un tableau à 3, 4, 5 dimensions ou plus, bien que lutilité en soit quelque peu douteuse
Propriétés et méthodes
Comme tout objet, lobjet Array possède une propriété et des méthodes qui savèrent assez utiles.
Propriété XE "Array:Propriété"
Lobjet Array ne possède quune propriété length XE "Array:Length" qui désigne le nombre déléments du tableau. Elle sutilise selon la syntaxe suivante :
variable = new Array (x) ;
y = variable.length ;
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 7 Propriété length
var MonTableau = new Array (2) ;
document.write (MonTableau.length) ;
Méthodes XE "Array:Méthodes"
Lobjet Array possède plusieurs méthodes qui permettent de manier les éléments du tableau. La syntaxe est la suivante :
tableau.méthode() ;
La liste de ces méthodes est longue, elles permettent de manier les éléments dun tableau avec facilité. Certaines ne sont pas utiles, mais il faut connaître les autres. En voici la liste avec leur syntaxe :
join (séparateur) XE "Array:Join()" : regroupe tous les éléments du tableau en une seule chaîne. Chaque élément est séparé par un séparateur. Ci celui-ci nest pas précisé, ce sera une virgule.
reverse () XE "Array:Reverse()" : inverse lordre des éléments sans les trier.
sort () : Renvoie les éléments par ordre alphabétique, sils sont de même nature.
concat(tableau) XE "Array:Concat()" : concatène le tableau passé en paramètre avec celui de la méthode.
pop() XE "Array:Pop()" : supprime le dernier élément du tableau.
push(élément1,
) XE "Array:Push()" : ajoute l(es) élément(s) passé(s) en paramètre à la fin du tableau.
shift() XE "Array:Shift()" : supprime le premier élément du tableau.
slice(début,fin) XE "Array:Slice()" : renvoie les éléments contenus entre la position supérieure ou égale à début et inférieure à fin.
splice(début, nombre, éléments) XE "Array:Splice()" : supprime les éléments à partir de la position début et sur nombre de position. Les éléments sont remplacés par ceux fournis en paramètre (facultatif).
unshift(élément1,
) XE "Array:Unshift()" : ajoute l(es) élément(s) passé(s) en paramètre au début du tableau.
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 8 Méthodes de lobjet Array
var MonTableau = new Array (4) ;
MonTableau [0] = Moi ;
MonTableau [1] = Toi ;
MonTableau [2] = Lui ;
MonTableau [3] = Elle ;
MonTableau.reverse() ;
document.write (MonTableau.join( )) ;
MonTableau.sort() ;
document.write ("" + MonTableau.join( )) ;
Exemple concret
Le but de cet exemple est de remplir et afficher les valeurs à 0.1 près comprises entre 0 et 10 exclu. Pour cela, on utilise un tableau à deux dimensions, dont la première indique la partie entière du nombre, et la deuxième dimension indique la partie décimale. On va dabord créer le tableau, puis le remplir et enfin lafficher.
Exemple STYLEREF 1 \s 12. SEQ Exemple \* ARABIC \s 1 9 Exemple de manipulation de tableau
var Tableau = new Array (10) ; // objet tableau
for (i = 0; i < 10; i++) { // pour chaque élément...
Tableau[i] = new Array(10); // on redéfinit un tableau
}
// remplissage du tableau
for (i = 0; i < 10; i++) { /* pour chaque élément de la première dimension*/
for (j = 0; j < 10; j++) { /* pour chaque élément de la seconde dimension*/
Tableau[i][j] = i + "." + j; //on remplit l'élément
}
}
// affichage du tableau
for (i = 0; i < 10; i++) { /* pour chaque élément de la première dimension */
for (j = 0; j < 10; j++) { /* pour chaque élément de la seconde dimension */
document.write( Tableau[i][j] + " ; " ); /*on affiche l'élément, avec un point virgule */
}
document.write (""); /* a chaque unité, on revient à la ligne. */
}
Exercice
Le but de lexercice est dafficher les entiers compris entre 1 et 10 inclus dans lordre décroissant. Il faudra utiliser pour cela un tableau de 10 éléments.
OBJETS DU NAVIGATEUR XE "Objets du navigateur"
Généralités
Les classes prédéfinies en JS ont été abordées précédemment. Il existe aussi plusieurs objets en JS rattachés à la fenêtre, à la page et au navigateur XE "Navigateur" . Ils sont appelés window XE "Window" , document XE "Document" et navigator XE "Navigator" . Ce sont 3 classes distinctes - sans lien entre elle puisque lhéritage nexiste pas en JS. Chaque classe sera décrite lune après lautre.
Arborescence
Voici larborescence des objets de JS. Elle comprend les 3 objets principaux ainsi que tous les « sous-objets » contenus dans chaque objet principal.
OBJET NAVIGATOR
Il sagit comme son nom lindique du navigateur - ou browser XE "Browser" -. Les deux principaux étant sûrement Microsoft Internet Explorer et Netscape Navigator. Lobjet navigator XE "Navigator" possède toutes les caractéristiques du navigateur XE "Navigateur" ainsi que certaines de lordinateur de lutilisateur. Cela peut savérer utile pour tester la compatibilité de certains codes avec un browser.
Lobjet navigator étant intégré dans le langage, il nest pas nécessaire de créer une instance de cette classe.
Propriétés
Toutes ces propriétés ne font que donner des informations sur le type de navigateur de lutilisateur. Pour y accéder, il faut suivre la syntaxe habituelle dun objet :
variable = navigator.propriété ;
Les propriétés qui suivent fonctionnent sous tous les navigateurs. Elles concernent principalement les caractéristiques du navigateur qui affiche la page en cours. Certaines propriétés ne fonctionnent que sous Netscape ou Internet Explorer, elles seront évoquées ensuite.
appCodeName XE "Navigator:AppCodeName" : nom de code du navigateur.
appName XE "Navigator:AppName" : nom complet du navigateur.
appVersion XE "Navigator:AppVersion" : numéro de version du navigateur ainsi que dautres informations de plate-forme.
userAgent XE "Navigator:UserAgent" : informations de appCodeName et de appVersion réunies.
Certaines propriétés ne fonctionnent quavec Microsoft Internet Explorer. Il est dimportant de veiller à tester le type de browser avant dexécuter le script !
appMinorVersion XE "Navigator:AppMinorVersion" : numéro de version mineure.
browserLanguage XE "Navigator:BrowserLanguage" : code langue du browser.
userLanguage XE "Navigator:UserLanguage" : code langue de lutilisateur.
systemLanguage XE "Navigator:SystemLanguage" : code langue du système dexploitation.
cpuClass XE "Navigator:CpuClass" : classe du processeur.
platform XE "Navigator:Platform" : code type de plate-forme (pc, mac, linux
).
cookieEnabled XE "Navigator:CookieEnabled" : booléen qui indique si lutilisateur accepte les cookies.
onLine XE "Navigator:OnLine" : booléen qui indique si le poste est connecté à Internet.
Une propriété existe sous Netscape pour remplacer la propriété browserLanguage dInternet Explorer. Il sagit de language XE "Navigator:Language" qui indique le code langue du browser.
Méthodes
Dans cette section sont présentées les méthodes de navigator, mais malheureusement, leur utilité est encore inconnue à lauteur de ce document, qui saurait gré à un lecteur au courant de len avertir. Voici la syntaxe à utiliser :
variable = navigator.méthode() ;
Ces deux méthodes semblent tester lactivation du Java et du « taint » (infection ?). Voici leur nom : javaEnabled() XE "Navigator:JavaEnabled()" et taintEnabled() XE "Navigator:TaintEnabled()" .
Objets de navigator XE "Navigator:Objets"
Lobjet navigator contient un autre objet, qui nhérite pas de lui. Il sagit du tableau plugins XE "Plugins" , qui nest reconnu que par Netscape. Il sagit de la liste de tous les plugins installés. Voici sa syntaxe :
variable = navigator.plugin.propriété ;
Cet objet possède 7 propriétés dont 6 qui sont appliquées à ses éléments. Elles permettent de connaître diverses caractéristiques des plugins installés. En voici la liste :
plugins.length XE "Plugins:Length" : nombre de plugins
plugins[i].name XE "Plugins:Name" : nom du plugin n° i.
plugins[i].filename XE "Plugins:Filename" : nom de lexécutable du plugin n° i.
plugins[i].description XE "Plugins:Description" : description du plugin n° i.
plugins[i].length XE "Plugins:Length" : nombre de types de fichiers supportés par le plugin n° i.
plugins[i][j].type XE "Plugins:Type" : type n° j du plugin n° i.
plugins[i][j].suffixes XE "Plugins:Suffixes" : Extensions des fichiers du type n° j du plugin n° i.
Exemple
Le but de lexemple 13.1 est dafficher les informations du navigateur, en fonction de celui-ci. On commencera donc par tester le type de navigateur. Lexemple 13.1 nest pas commenté car il na rien de nouveau excepté les propriétés vues ci-dessus.
Exemple 14. SEQ Exemple \* ARABIC \s 1 1 Objet navigator
document.write (navigator.appCodeName + "");
document.write (navigator.appName + "");
document.write (navigator.appVersion + "");
document.write (navigator.userAgent + "");
if (navigator.appName == "Microsoft Internet Explorer") {
document.write (navigator.appMinorVersion + "");
document.write (navigator.browserLanguage + "");
document.write (navigator.userLanguage + "");
document.write (navigator.systemLanguage + "");
document.write (navigator.cpuClass + "");
document.write (navigator.platform + "");
document.write (navigator.cookieEnabled + "");
document.write (navigator.onLine + "");
}
else {
document.write (navigator.language + "");
}
OBJET WINDOW XE "Evènements"
Il sagit comme son nom lindique de la fenêtre du browser XE "Browser" en cours dexécution. Tous les éléments de la fenêtre sont des propriétés ou des méthodes de window XE "Window" .
Lobjet window étant intégré dans le langage, il nest pas nécessaire de créer une instance de cette classe.
Propriétés XE "Window:Propriétés"
Toutes ces propriétés correspondent à des éléments de la fenêtre ouverte. Elles permettent de changer quelques détails sympathiques dans le visuel dune page web. Pour y accéder, on suit la syntaxe habituelle dun objet :
window.propriété;
Il existe 6 propriétés qui correspondent chacune à des éléments ou des caractéristiques de la fenêtre. Voici leur liste :
defaultStatus XE "Window:DefaultStatus" : le texte par défaut affiché dans la barre détat.
status XE "Window:Status" : le texte à afficher dans la barre détat, prioritaire par rapport à defaultStatus.
name XE "Window:Name" : le nom de la fenêtre
screenTop XE "Window:ScreenTop" : ordonnée du point supérieur gauche de la fenêtre.
screenLeft XE "Window:ScreenLeft" : abscisse du point supérieur gauche de la fenêtre.
closed XE "Window:Closed" : booléen indiquant si la fenêtre est fermée.
Méthodes XE "Window:Méthodes"
Généralités
Lobjet window possède de nombreuses méthodes, dont certaines qui ont déjà été vues précédemment les boîtes de dialogue -, et qui peuvent offrir quelques atouts à une page web. La plupart renvoient une valeur à la variable qui appelle la fonction. Voici leur syntaxe :
variable = window.méthode();
Certaines propriétés ne nécessitent pas de préciser le suffixe « window.» pour fonctionner. Cest notamment le cas des boites de dialogue.
Liste des méthodes
Le nombre des méthodes étant élevé, elles sont présentées sous forme dune liste que voici :
alert(texte) XE "Window:Alert()" : boite de message avec un bouton unique.
prompt(texte, valeur_défaut) XE "Window:Prompt()" : boite dinvite avec un texte informatif et une zone de texte avec une valeur par défaut facultative.
confirm(texte) XE "Window:Confirm()" : boite de confirmation avec un texte informatif et deux boutons OK et Annuler.
print(texte) XE "Window:Print()" : afficher le texte dans la page.
open(URL, nom, options) XE "Window:Open()" : ouvre une page pop-up avec les caractéristiques données en paramètres.
close() XE "Window:Close()" : ferme la fenêtre.
focus() XE "Window:Focus()" : donne le focus à la page.
blur() XE "Window:Blur()" : enlève le focus à la page.
moveBy(x,y) XE "Window:MoveBy()" : déplacement relatif du coin supérieur gauche de la fenêtre.
moveTo(x,y) XE "Window:MoveTo()" : déplacement absolu du coin supérieur gauche de la fenêtre.
resizeBy(x,y) XE "Window:ResizeBy()" : redimensionnement relatif de la fenêtre.
resizeTo(x,y) XE "Window:ResizeTo()" : redimensionnement absolu de la fenêtre.
scrollBy(x,y) XE "Window:ScrollBy()" : scroll relatif.
scrollTo(x,y) XE "Window:ScrollTo()" : scroll absolu.
setTimeOut(fonction, temps) XE "Window:SetTimeout()" : déclenche une minuterie en millisecondes.
clearTimeout(timer) XE "Window:ClearTimeout()" : suspend la minuterie.
stopTimeOut(timer) XE "Window:StopTimeout()" : arrête une minuterie.
setInterval(code, délai) XE "Window:SetInterval()" : exécute le code sous forme de String - passé en paramètre à chaque fois que le délai est écoulé.
clearInterval(timer) XE "Window:ClearInterval()" : arrête la minuterie définie avec setInterval().
stop() XE "Window:Stop()" : arrête le chargement de la page.
home() XE "Window:Home()" : ouvre la page de démarrage de linternaute.
Exemples
Voici, pour illustrer la liste proposée ci-dessus, deux façons de faire un chronomètre. La première utilise la méthode setInterval() moins connue - , ce qui économise un ligne de code. La seconde utilise la méthode setTimeout() plus connue - qui doit être rappelée à chaque boucle. Le reste du code est identique. Il sert à incrémenter à chaque fois les secondes, et permet de rendre laffichage un peu plus agréable.
Exemple STYLEREF 1 \s 15. SEQ Exemple \* ARABIC \s 1 1 La méthode setInterval()
New Document
var seconds = 0;
var minutes = 0;
var hours = 0;
function chrono () {
if (seconds == 60) {
seconds = 0;
minutes++;
}
if (minutes == 60) {
minutes = 0;
hours++;
}
h = hours;
m = minutes;
s = seconds;
if (s < 10) s = "0" + s;
if (m < 10) m = "0" + m;
if (h < 10) h = "0" + h;
document.form1.chrono.value = h + ":" + m + ":" + s;
seconds++;
}
Exemple STYLEREF 1 \s 15. SEQ Exemple \* ARABIC \s 1 2 La méthode setTimeOut()
New Document
var seconds = 0;
var minutes = 0;
var hours = 0;
function chrono () {
if (seconds == 60) {
seconds = 0;
minutes++;
}
if (minutes == 60) {
minutes = 0;
hours++;
}
h = hours;
m = minutes;
s = seconds;
if (s < 10) s = "0" + s;
if (m < 10) m = "0" + m;
if (h < 10) h = "0" + h;
document.form1.chrono.value = h + ":" + m + ":" + s;
seconds++;
window.setTimeout('chrono()',1000);
}
Evènements XE "Window:Evènements"
On peut rattacher certains évènements à lobjet window. Ils seront placés dans la balise , XE "" grâce au gestionnaire dévénement onEvent. On utilise pour cela la syntaxe des gestionnaires dévènements :
5 évènements sont rattachés à lobjet window. Ils concernent logiquement les actions effectuées sur la fenêtre. Voici leur liste :
load : fin de chargement de la page.
unLoad : déchargement de la page.
focus : prise de focus de la fenêtre ou dun de ses éléments.
blur : perte de focus de la fenêtre ou dun de ses éléments.
resize : redimensionnement de la fenêtre.
Objets XE "Window:Objets"
Lobjet window contient plusieurs autres objets assez réduits qui sont donc présentés dans cette section. La syntaxe est la suivante :
variable = window.objet.propriété ;
variable = window.objet.méthode() ;
Frames XE "Frames"
Il sagit dun tableau contenant toutes les frames déclarées dans la page. Il ne possède ni propriétés ni méthodes. Chaque élément de ce tableau possède les propriétés et méthodes dune frame XE "Frame" . Voici la syntaxe pour accéder à une frame de la page :
window.frames[i].propriété ;
Parent XE "Parent"
Il sagit de la page principale, qui contient la déclaration de toutes les frames. Il possède les mêmes attributs que lobjet window. On accède aux propriétés et méthodes ainsi :
window.parent.méthode() ;
window.parent.propriété ;
Top XE "Top"
Il sagit de la page de plus haut niveau du document affiché à lécran. Cet objet possède un intérêt uniquement lorsquil y a des frames dans le document affiché. Il possède les mêmes attributs que lobjet window. Voici la syntaxe à suivre :
window.top.méthode() ;
window.top.propriété ;
Opener XE "Opener"
Il sagit de la page responsable de louverture de la page courante, cest-à-dire qui possède un lien hypertexte vers la page ouverte. Il possède les mêmes attributs que lobjet window. Voici la syntaxe :
window.opener.méthode() ;
window.opener.propriété ;
History XE "History"
Il sagit de lhistorique XE "Historique" des pages consultées. On utilise la syntaxe objet habituelle :
window.history.méthode() ;
window.history.propriété ;
Il possède une propriété et 3 méthodes. Qui permettent de naviguer dans lhistorique comme les boutons de la barre doutils. En voici la liste :
length XE "History:Length" : le nombre dentrées de lhistorique.
back () XE "History:Back()" : permet de retourner à la page précédente.
forward () XE "History:Forward()" : permet daller à la page suivante.
go (numéro) XE "History:Go()" : permet daller à la page du numéro passé en paramètre.
Location XE "Location"
Il sagit de toutes les informations contenues dans lURL XE "URL" de la page en cours. Voici la propriété et les méthodes de cet objet, qui se déclarent selon la syntaxe objet. Lobjet window.location renvoie lURL complète de la page en cours. On utilise la syntaxe suivante :
variable = window.location.méthode() ;
variable = window.location.propriété ;
Les propriétés suivantes renvoient des informations plus précises concernant lURL. Voici leur liste :
hash XE "Location:Hash"
host XE "Location:Host"
hostName XE "Location:HostName"
pathName XE "Location:PathName"
href XE "Location:Href"
port XE "Location:Port"
protocol XE "Location:Protocol"
search XE "Location:Search" : renvoie la partie de lURL située après le « ? ».
Il existe deux méthodes de lobjet window.location, qui concernent toutes deux le rechargement de la page. Ce sont les suivantes :
reload () XE "Location:Reload()" : recharge la page. Ne fonctionne pas sous tous les navigateurs.
replace (page) XE "Location:Replace()" : recharge la page en cours sans modifier lhistorique.
Screen XE "Screen"
Il sagit de toutes les informations du système daffichage de lutilisateur. Il y a 4 propriétés rattachées à cet objet. Voici la syntaxe à utiliser :
variable = window.screen.propriété ;
Il y a 5 propriétés qui concernent lécran et laffichage. Elles peuvent être utiles quant à laffichage de votre page. Les voici :
availHeight XE "Screen:AvailHeight" : hauteur en pixels de la zone utilisable pour laffichage.
availWidth XE "Screen:AvailWidth" : largeur en pixels de la zone utilisable pour laffichage.
height XE "Screen:Height" : hauteur de la fenêtre en pixels - contient barres de menus, détat, de titre et de scrolling.
width XE "Screen:Width" : largeur de la fenêtre en pixels - contient barres de menus, détat, de titre et de scrolling.
colorDepth XE "Screen:ColorDepth" : Contient la profondeur de couleur en nombre de bits.
Event XE "Event"
Il sagit dun objet propre à Microsoft Internet Explorer. Il renvoie le type dévénement qui a eu lieu. Sa syntaxe est la suivante :
variable = window.event.propriété ;
Les deux propriétés de cet objet concernent bien entendu les évènements qui ont lieu sur la page. Ce sont les suivantes :
altKey XE "Event:AltKey" : renvoie le code du caractère frappé au clavier.
button XE "Event:Button" : renvoie le type de clic de souris effectué.
External XE "External"
Il sagit aussi dun objet propre à Microsoft Internet Explorer. Il permet daccéder aux propriétés du navigateur. On utilise la syntaxe habituelle :
variable = window.external.propriété ;
Il possède une seule propriété qui savère utile pour inciter le visiteur à revenir. Il sagit de :
AddFavorite(URL,titre) XE "External:AddFavorite()" : Ajoute une ligne à la liste des favoris. Demande confirmation à linternaute.
Exemple concret
Dans lexemple suivant, le but est dafficher les attributs de la fenêtre (hauteur/largeur, place affichable) ainsi que lURL en cours. Il ny a pas de commentaires car les instructions utilisées sont détaillées ci-dessus.
Exemple STYLEREF 1 \s 15. SEQ Exemple \* ARABIC \s 1 3 Les objets de window
document.write (window.location + "");
document.write (window.screen.availHeight + "");
document.write (window.screen.availWidth + "");
document.write (window.screen.height + "");
document.write (window.screen.width + "");
Exercice
Le but de lexercice est de donner à lutilisateur la possibilité de modifier la fenêtre à laide de boutons. Il pourra redimensionner et revenir à la taille initiale, la déplacer et la remettre en position initiale, lui enlever le focus, et la fermer. Lors de la fermeture, lutilisateur sera averti par une boite de message.
OBJET DOCUMENT XE "Evènements"
Il sagit comme son nom lindique de la page en cours dexécution. Tous les éléments de la page sont des propriétés ou des méthodes de document XE "Document" . Lobjet document étant intégré dans le langage, il nest pas nécessaire de créer une instance de cette classe.
Lobjet document fait partie de lobjet window XE "Window" , mais il nest pas nécessaire de préciser le suffixe "window."
Propriétés XE "Document:Propriétés"
Toutes ces propriétés correspondent à des éléments de la page ouverte. Cela permet duniformiser et de changer quelques détails de la page. On les utilise grâce à la syntaxe habituelle :
document.propriété;
La liste des propriétés est longue ; elle comprend tout ce qui concerne la page en cours. Voici leur liste :
bgColor XE "Document:BgColor" : couleur du fond.
fgColor XE "Document:FgColor" : couleur du texte.
linkColor XE "Document:LinkColor" : couleur des liens ni actifs ni visités.
alinkColor XE "Document:AlinkColor" : couleurs des liens actifs.
vlinkColor XE "Document:VlinkColor" : couleurs des liens visités.
cookie XE "Document:Cookie" : chaîne de caractères contenant les cookie.
lastModified XE "Document:LastModified" : date de dernière modification du fichier source
referrer XE "Document:Referrer" : adresse de la page par laquelle la page en cours a été appelée.
title XE "Document:Title" : titre du document, indiqué par les balises
. Nest modifiable quavec Microsoft Internet Explorer.
fileSize XE "Document: FileSize" : taille de la page en octets.
defaultCharset XE "Document:DefaultCharset" : jeu de caractère du document chargé.
mimeType XE "Document:MimeType" : type du document chargé.
URLUnencoded XE "Document:URLUnencoded" : URL complète de la page, avec les caractères spéciaux encodés.
URL XE "Document:URL" : URL de la page.
protocol XE "Document:Protocol" : protocole de chargement de la page.
domain XE "Document:Domain" : domaine de lURL XE "URL" complète de la page.
Lexemple qui suit permet dafficher à lécran toutes les informations sur la page courante. Cet affichage a une utilité faible, mais ces propriétés peuvent être utiles dans un script de test.
Exemple STYLEREF 1 \s 16. SEQ Exemple \* ARABIC \s 1 1 Propriétés de lobjet Document
document.write ("Taille du fichier : " + document.fileSize + "");
document.write ("Type mime : " + document.mimeType + "");
document.write ("Jeu de caractères : " + document.defaultCharset + "");
document.write ("URL décodée : " + document.URLUnencoded + "");
document.write ("URL : " + document.URL + "");
document.write ("Protocole : " + document.protocol + "");
document.write ("Dernière modification : " + document.lastModified + "");
Méthodes XE "Document:Méthodes"
Lobjet document possède de plusieurs méthodes, dont certaines qui ont été évoquées déjà vu précédemment. Voici la syntaxe à suivre :
variable = document.méthode();
Elles permettent dagir sur la page affichée et de savoir ce qui est affiché. Voici la liste de ces méthodes :
write (texte) XE "Document:Write()" : affiche le texte et le code HTML dans la page courante.
getSelection () XE "Document:GetSelection()" : renvoie le texte qui a été sélectionné dans la page.
handleEvents() XE "Document:HandleEvents()" : créé un gestionnaire dévènement.
captureEvents() XE "Document:CaptureEvents()" : détecte un évènement.
open () XE "Document:Open()" : ouvre une nouvelle fenêtre de votre browser.
close () XE "Document:Close()" : ferme le flux daffichage externe.
getElementById(ID) XE "Document:GetElementById()" : renvoie un objet HTML en fonction de son ID. A ne pas confondre avec le Name.
getElementsByName(nom) XE "Document:GetElementsByName()" : renvoie un objet HTML en fonction de son name.
getElementsByTagName(type) XE "Document:GetElementsByTagName()" : renvoie un tableau de toutes les balises HTML du type passé en paramètre.
Lexemple suivant réécrit dans une zone de texte les valeurs des lignes de textes au-dessus, séparées par des espaces.
Exemple STYLEREF 1 \s 16. SEQ Exemple \* ARABIC \s 1 2 Méthodes de lobjet Document
New Document
function f() {
var tab = document.getElementsByTagName ("input");
var result = '';
for (i = 0; i < tab.length-1; i++) {
result = result + (tab[i].value) + " ";
}
document.form1.result.value = result;
}
Evènements XE "Document:Evènements"
On peut rattacher certains évènements à lobjet document. Ils concernent les actions de la souris et du clavier :
onClick : clic de souris sur un élément de la page.
onDblClick : le double clic de souris.
onKeyPress : la frappe dune touche de clavier.
Objets XE "Document:Objets"
Lobjet document contient plusieurs autres objets assez réduits qui sont présentés dans cette partie. On les utilise à laide de cette syntaxe :
document.objet.propriété ;
document.objet.méthode() ;
Il est utile de préciser que tout élément de la page est en soit un objet de document. On y accède selon la syntaxe ci-dessus. Il serait trop lourd de donner la liste des éléments, qui sont répertoriés dans tout cours HTML digne de ce nom.
Dautres objets existent et permettent de « naviguer » dans la page et ses éléments.
All XE "All"
Il sagit dun tableau contenant tous les calques déclarés dans la page dans les balises XE ""
. Il sagit dune particularité de Microsoft Internet Explorer. Il possède les propriétés de la balise . Voici la syntaxe à suivre :
document.all[calque].style.propriété = x ;
Layers XE "Layers"
Cest l équivalent de lobjet all pour Netscape, pour les calques des balises ou XE "" . Il possède les propriétés de la balise . La syntaxe est la suivante :
document.layers[calque].style.propriété = x ;
Forms XE "Forms"
Il sagit dun tableau contenant tous les formulaires du document. Il possède une propriété elements[] XE "Forms:Elements[]" qui est un tableau de tous les éléments du formulaire.
document.forms[i].elements[j] ;
Anchors XE "Anchors"
Il sagit dun tableau contenant toutes les ancres les balises - de la page courante. Il ne possède ni propriétés ni méthodes. Chaque élément du tableau possède les propriétés dune balise XE "" .
document.anchors[i] ;
Images XE "Images"
Il sagit dun tableau contenant toutes les images les balises - de la page courante. Il ne possède ni propriétés ni méthodes. Cela permet de faire des effets, par exemple des rollovers, sur les images. Chaque élément possède les propriétés et méthodes de la balise XE "" .
document.images[i] ;
Applets XE "Applets"
Il sagit dun tableau contenant toutes les applets java déclarées dans la page courante. Il ne possède ni propriétés ni méthodes.
document.applets[i] ;
Plugins XE "Plugins"
Il sagit du tableau plugins, qui nest reconnu que par Netscape. Il sagit de la liste de tous les plugins installés. Il est aussi rattaché à lobjet navigator. Pour ses propriétés, voir la section concernant les objets de navigator.
Frames XE "External"
Il sagit dun tableau contenant toutes les frames déclarées dans la page courante. Il ne possède ni propriétés ni méthodes. Chaque élément est un objet window et a les mêmes méthodes et propriétés.
document.frames[i] ;
Exercice
Le but est de créer un formulaire avec un texte, dans lequel on pourra entrer une couleur dans une zone de texte et avec un click, on change soit la couleur du texte, soit la couleur du fond.
OBJETS DU NOYAU JAVASCRIPT XE "Objets du noyau Javascript"
Généralités
Le langage JS nest pas un langage orienté objet, mais il possède une partie des concepts dun langage objet comme le C++. Ce concept a été abordé précédemment. Certains de ces objets ne sont pas inconnus, notamment lobjet boolean XE "Boolean" , et lobjet Array XE "Array" . Ci-après les 4 autres objets intégrés au JS seront décrits. Il sagit de lobjet Math XE "Math" , de lobjet String XE "String" , de lobjet Date XE "Date" et de lobjet Image XE "Image" .
Quelques précisions
Certains de ces objets seront déjà définis, comme lobjet Math. Il ne sera alors pas nécessaire de les déclarer. Lobjet String est défini par une variable il sagit des chaînes de caractères et na pas besoin de constructeur. Les objets Date et Image nécessitent un constructeur, intégré au langage, quil faut appeler selon la syntaxe habituelle. Certains objets Image existent déjà dans une page, il sagit des balises . Ces dernières nont donc pas besoin de faire appel au constructeur.
OBJET MATH
Propriétés
Ces propriétés ne sont rien dautre que des constantes mathématiques, qui sutilisent selon la syntaxe objet habituelle. Voici leur liste :
Math.PI
Math.LN2 XE "Math:LN2"
Math.LN10 XE "Math:LN10"
Math.E
Math.LOG2E XE "Math:LOG2E"
Math.LOG10E XE "Math:LOG10E"
Méthodes XE "Math:Méthodes"
Les fonctions mathématiques usuelles ont été transcrites en langage JS à travers les méthodes de lobjet Math. La plupart des fonctions sutilisent selon la même syntaxe :
var1 = math.fonction(paramètres) ;
Fonctions diverses XE "Math:Fonctions diverses"
Ces fonctions permettent deffectuer des calculs classiques. Ces fonctions étant simples, aucun exemple ne sera fourni.
abs(x) XE "Math:Abs()" : renvoie la valeur absolue de x.
ceil(x) XE "Math:Ceil()" : renvoie lentier supérieur à x.
floor(x) XE "Math:Floor()" : renvoie lentier inférieur à x.
round(x) XE "Math:Round()" : renvoie lentier le plus proche de x.
max(x,y) XE "Math:Max()" : renvoie le plus grand nombre entre x et y.
min(x,y) XE "Math:Min()" : renvoie le plus petit nombre entre x et y.
pow(x,y) XE "Math:Pow()" : renvoie le nombre x à la puissance y.
random(x,y) XE "Math:Random()" : renvoie un nombre aléatoire entre 0 et 1.
sqrt(y) XE "Math:Sqrt()" : renvoie la racine carrée de x.
Fonctions trigonométriques XE "Math:Fonctions trigonométriques"
sin(x) XE "Math:Sin()"
asin(x) XE "Math:Asin()"
cos(x) XE "Math:Cos()"
acos(x) XE "Math:Acos()"
tan(x) XE "Math:Tan()"
atan(x) XE "Math:Atan()"
Fonctions logarithmiques
exp(x) XE "Math:Exp()"
log(x) XE "Math:Log()"
Simplification XE "Simplification objet"
Lorsque lobjet Math est beaucoup utilisé dans une portion de code, lécriture deviendra vite pénible. Il est possible de ne pas avoir à écrire le mot math à chaque fois. Il suffit dencadrer la zone de code par des accolades et lexpression with(math) comme ceci :
with (math) {
code...
}
Exemple STYLEREF 1 \s 18. SEQ Exemple \* ARABIC \s 1 1 Simplification objet
with (Math) {
x = sqrt (238) ;
y = sin (x) ;
document.write(y) ;
}
Exercice
Lexercice est relativement simple. Il consiste à afficher la racine carrée de tous les x entiers, compris dans [0 ; 20]. Le résultat doit être arrondi à lentier.
OBJET STRING
Généralités
Un objet string XE "String" est une chaîne de caractères. Il possède une propriété et 7 méthodes. Cette classe permet la manipulation des caractères qui savère très utile en JS. Il est à préciser que lobjet string ne se construit pas comme les autres objets. Une chaîne de caractère est en soi un objet string. Il suffit donc de déclarer une variable et de lui affecter une valeur chaîne de caractères.
Propriété XE "String:Propriété"
Il sagit de la longueur de la chaîne, length XE "String:Length" . Elle sutilise de deux façons différentes :
variable1 = variable2.length ;
variable = (chaine).length ;
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 1 Propriété length
x = "Mon château" ;
y = x.length ;
document.write(y) ;
Méthodes XE "String:Méthodes"
CharAt() XE "String:CharAt()"
Cette méthode renvoie le caractère situé à la position x fournie en paramètre. Le numéro de la position est compris entre 0 et la longueur de la chaîne 1. Voici la syntaxe de cette méthode :
chaine1 = chaine2.charAt(x) ;
chaine1 = (chaine).charAt(x) ;
chaine1 = charAt(chaine2,x) ;
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 2 String.charAt()
x = "Mon Château" ;
y = x.charAt(4) ;
document.write(y) ;
FromCharCode() XE "String:FromCharCode()"
Cette méthode renvoie les nombres ASCII XE "ASCII" passés en paramètres sous forme de chaîne de caractère. En voici la syntaxe :
chaine.fromCharCode(i1,i2,i3)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 3 String.FromCharCode()
document.write(y.formCharCode(12,105,123,104)) ;
CharCodeAt() XE "String:CharCodeAt()"
Cette méthode renvoie le code ASCII XE "ASCII" du caractère présent à la position indiquée en paramètre.
variable = chaine1.charCodeAt(position) ;
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 4 String.charCodeAt()
y = "lepape@le-vatican.com";
document.write(y.charCodeAt(6)) ;
IndexOf() XE "String:IndexOf()"
Cette méthode renvoie la première position dune chaîne partielle dans une autre chaîne en partant de gauche, à partir de la position x indiquée en paramètre. Si elle nest pas présente, la méthode renvoie 1. Le numéro de la position est compris entre 0 et la longueur de la chaîne 1. La syntaxe à suivre est :
variable=chaine.indexOf (chaine_partielle, x)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 5 String.indexOf()
x = "maman" ;
y = x.indexOf("ma",0) ;
document.write(y) ;
LastIndexOf() XE "String:LastIndexOf()"
Cette méthode renvoie la première position dune chaîne partielle dans une autre chaîne en partant de gauche, à partir de la position x indiquée en paramètre. Si elle nest pas présente, la méthode renvoie 1. Le numéro de la position est compris entre 0 et la longueur de la chaîne 1. La syntaxe est :
variable = chaine.lastIndexOf (chaine_partielle, x)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 6 String.lastIndexOf()
x = "maman" ;
y = x.lastIndexOf("ma",4) ;
document.write(y) ;
Substring() XE "String:Substring()"
Cette méthode renvoie la sous-chaîne comprise entre les positions x et y indiquées en paramètres, dans la chaîne principale. Il faut utiliser :
variable = chaine.substring (x,y)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 7 String.substring()
x = "maman" ;
y = x.substring(1,3) ;
document.write(y) ;
Substr XE "String:Substr()" ()
Cette méthode renvoie le texte une sous-chaîne de la chaîne de la méthode, à partir du début et sur n caractères. Voici la syntaxe :
variable = chaine1.substr(début, n)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 8 String.substr()
y = "lepape@le-vatican.com";
document.write(y.substr(5,2)) ;
Slice() XE "String:Slice()"
Elle est équivalente à substring(). Le paramètre qui indique la fin de la sous-chaîne est facultatif. Sil nest pas précisé, la sous-chaîne se termine à la fin de la chaîne. En voici la syntaxe :
variable = chaine.slice(début, fin)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 9 String.slice()
y = "lepape@le-vatican.com";
document.write(y.slice(7)) ;
Split() XE "String:Split()"
Cette méthode renvoie un tableau de sous-chaînes découpées selon le séparateur passé en paramètres.
variable = chaine.split(séparateur)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 10 String.split()
x = "lepape@le-vatican.com" ;
y = x.split("@") ;
document.write(y[0] + "" + y[1]) ;
Concat() XE "String:Concat()"
Cette méthode renvoie la concaténation XE "String:Concaténation" de la chaîne passée en paramètre avec celle de la méthode.
variable = chaine1.concat(chaine2)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 11 String.concat()
x = "Ecrivez-moi à " ;
y = "lepape@le-vatican.com";
z = x.concat(y) ;
document.write(z) ;
ToLowerCase() XE "String:ToLowerCase()"
Cette méthode renvoie la chaîne avec tous les caractères en minuscules. Voici comment elle sutilise :
variable = chaine.toLowerCase()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 12 String.toLowerCase()
x = "MAMAN" ;
y = x.toLowerCase() ;
document.write(y) ;
ToUpperCase() XE "String:ToUpperCase()"
Cette méthode renvoie la chaîne avec tous les caractères en majuscules. La syntaxe est la suivante :
variable = chaine.toUpperCase()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 13 String.toUpperCase()
x = "Maman" ;
y = x.toUpperCase() ;
document.write(y) ;
FontColor() XE "String:FontColor()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
. Elle sutilise ainsi :
variable = chaine1.fontColor(couleur) ;
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 14 String.fontColor()
y = "lepape@le-vatican.com";
document.write(y.fontColor("blue")) ;
document.write(y.fontColor("red")) ;
FontSize() XE "String:FontSize()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
.
variable = chaine1.fontSize(taille)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 15 String.fontSize()
y = "lepape@le-vatican.com";
document.write(y.fontSize("16")) ;
document.write(y.fontSize("8")) ;
Fixed() XE "String:Fixed()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
. La syntaxe est :
variable = chaine1.fixed()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 16 String.fixed()
y = "lepape@le-vatican.com";
document.write(y.fixed()) ;
Bold() XE "String:Bold()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
.Voici la syntaxe :
variable = chaine1.bold()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 17 String.bold()
y = "lepape@le-vatican.com";
document.write(y.bold()) ;
Strike() XE "String:Strike()"
Cette méthode renvoie le texte de lobjet barré. A utiliser avec précautions. Sa syntaxe est la suivante :
variable = chaine1.strike()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 18 String.strike()
y = "lepape@le-vatican.com";
document.write(y.strike()) ;
Sub() XE "String:Sub()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
.
variable = chaine1.sub()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 19 String.sub()
y = "lepape@le-vatican.com";
document.write(y.sub()) ;
Big() XE "String:Big()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
.
variable = chaine1.big()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 20 String.big()
y = "lepape@le-vatican.com";
document.write(y.big()) ;
Sup() XE "String:Sup()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
.
variable = chaine1.sup()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 21 String.sup()
y = "lepape@le-vatican.com";
document.write(y.sup()) ;
Blink() XE "String:Blink()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
. Ne fonctionne que sous Netscape Navigator.
variable = chaine.blink()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 22 String.blink()
y = "lepape@le-vatican.com";
document.write(y.blink()) ;
Small() XE "String:Small()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
.
variable = chaine.small()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 23 String.small()
y = "lepape@le-vatican.com";
document.write(y.small()) ;
Italics() XE "String:Italics()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
. Sa syntaxe est :
variable = chaine.italics()
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 24 String.italics()
y = "lepape@le-vatican.com";
document.write(y.italics()) ;
Link() XE "String:Link()"
Cette méthode renvoie le texte de lobjet en y ajoutant les balises XE ""
.
variable = chaine1.link(URL)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 25 String.link()
y = "lepape@le-vatican.com";
document.write(y.link("http://www.google.fr"));
Anchor() XE "String:Anchors()"
Cette méthode crée un ancre, et renvoie le texte de lobjet en y ajoutant les balises XE ""
.
variable = chaine1.anchor(ancre)
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 26 String.anchor()
y = "lepape@le-vatican.com"
document.write(y.anchor("ancre")) ;
Manipulations sur les chaînes de caractères XE "String:Manipulations"
La manipulation des chaînes demande certaines connaissances syntaxiques. Ces dernières ont déjà été précisées dans la section concernant les structures de données, mais elles doivent être détaillées. Elles concernent laffectation, la concaténation, et les caractères spéciaux.
Affectation XE "String:Affectation"
Les chaînes de caractères se présentent sous deux formes. Elles sont soient encadrées de quotes , soient encadrées de guillemets " ". On affecte les chaînes à leur variable comme toute variable.
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 27 Affectation
x = "Maman" ;
y = Maman ;
Dans lexemple ci-dessus, les chaînes x et y sont équivalentes. Elles contiennent la même donnée.
Concaténation XE "String:Concaténation"
Il est possible dajouter des chaînes de les mettre à la suite lune de lautre grâce à lopérateur « + ».
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 28 Concaténation
x = "Maman" ;
y = Papa ;
z = x + " " + y ;
document.write (z);
Dans les fonctions, comme la méthode document.write() XE "Document:Write()" , il est possible dajouter ces chaînes à laide de lopérateur « + » ou « , ».
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 29 Concaténation
x = "Maman" ;
y = Papa ;
document.write (x + " " + y);
document.write (x , " " , y);
Caractères spéciaux XE "Caractères spéciaux" XE "String:Caractères spéciaux"
Certains caractères permettent de faire un effet dans laffichage, dautres doivent être précédés du caractère « \ ». Ils sont répertoriés dans le tableau suivant.
CaractèreAffichage\btouche de suppression\fformulaire plein\nretour à la ligne\rappui sur la touche ENTREE\ttabulation\"guillemets\'apostrophes\\caractère antislashTAB. SEQ Tableau \* ARABIC 12 Caractères spéciaux
Les autres caractères spéciaux si on peut les appeler ainsi sont les balises XE "Balises" HTML XE "HTML" . En effet, celles-ci peuvent être insérées dans les chaînes de caractère, et seront interprétées comme des balises par le navigateur lors de lécriture avec la méthode document.write(). XE "Document:Write()"
Exemple STYLEREF 1 \s 19. SEQ Exemple \* ARABIC \s 1 30 Caractères spéciaux
x = "Maman" ;
y = Papa ;
document.write (x + "" + y);
Exercice
Dans cet exercice, il faut créer un formulaire avec un bouton et une zone de texte. Linternaute entre une série de mots séparés par des espaces. Ensuite, on récupère ces mots, et on les sépare par des virgules. Enfin, on les affiche à lécran dans différents formats avec document.write().
OBJET DATE
Généralités
La date et lheure sont regroupées en JS dans la classe Date XE "Date" . On créé alors une variable Date grâce au constructeur, comme ceci :
variable = new Date()
La date et lheure en JS ne commencent quà partir du 1er janvier 1970, 0h 0min 0s. Toute référence à une date antérieure donnera un résultat aléatoire.
Méthodes XE "Date:Méthodes"
Type Get
Une fois une variable Date créée, elle possède les informations de la date courante. Il faut cependant récupérer ces informations pour pouvoir les exploiter. Les fonctions suivantes remplissent ce rôle en récupérant certaines informations de la variable Date. La syntaxe générale à suivre est la suivante :
variable1 =new Date()
variable2 = variable1.getInfo();
Les méthodes permettent chacune daccéder à une information particulière de la date. Voici leur liste :
getYear() XE "Date:GetYear()" : Retourne les 2 derniers chiffres de lannée. Il faudra donc rajouter le préfixe "20".
getFullYear() XE "Date:GetFullYear()" : Retourne la date sur 4 chiffres.
getMonth() XE "Date:GetMonth()" : Retourne le mois sous la forme dun entier compris entre 0 et 11.
getDate() XE "Date:GetDate()" : Retourne le jour du mois sous forme dun entier compris entre 1 et 31.
getDay() XE "Date:GetDay()" : Retourne le jour de la semaine sous forme dun entier compris entre 0 et 6.
getHours() XE "Date:GetHours()" : Retourne lheure sous forme dun entier compris entre 0 et 23.
getMinutes() XE "Date:GetMinutes()" : Retourne les minutes sous forme dun entier compris entre 0 et 59.
getSeconds() XE "Date:GetSeconds" : Retourne les secondes sous forme dun entier compris entre 0 et 59.
getMilliseconds() XE "Date:GetMilliseconds()" : retourne les millisecondes de la date. A ne pas confondre avec getTime().
Type Set
Il est aussi possible de remplir la variable Date avec des données personnelles. Les fonctions suivantes remplissent la variable qui est une chaîne Date avec les données désirées. Elles sutilisent toutes de la même façon :
variable1 = new Date()
variable1.setInfo(paramètre);
Chacune des méthodes prend en paramètre linformation qui sera introduite dans la variable Date. La liste de ces méthodes est ci-dessous :
setYear() XE "Date:SetYear()" : Assigne les 2 derniers chiffres de lannée, sous forme dun entier supérieur à 1900.
setFullYear() XE "Date:SetFullYear()" : Assigne lannée sur 4 chiffres.
setMonth() XE "Date:SetMonth()" : Assigne le mois sous la forme dun entier compris entre 0 et 11.
setDate() XE "Date:SetDate()" : Assigne le jour du mois sous forme dun entier compris entre 1 et 31.
setDay() XE "Date:SetDay()" : Assigne le jour de la semaine sous forme dun entier compris entre 0 et 6.
setHours() XE "Date:SetHours()" : Assigne lheure sous forme dun entier compris entre 0 et 23.
setMinutes() XE "Date:SetMinutes()" : Assigne les minutes sous forme dun entier compris entre 0 et 59.
setSeconds() XE "Date:SetSeconds()" : Assigne les secondes sous forme dun entier compris entre 0 et 59.
setMilliseconds() XE "Date:SetMilliseconds()" : assigne les millisecondes de la date. A ne pas confondre avec setTime().
Lheure
Lheure est très utile en JS, elle possède donc plusieurs méthodes. La syntaxe est la suivante :
variable1 =new Date();
variable1.méthode();
Ces méthodes permettent de manipuler toutes sortes de données concernant lheure. En voici la liste :
getTime() XE "Date:GetTime()" : Renvoie lheure courante sous forme dun entier représentant le nombre de millisecondes depuis le 1er janvier 1970 00h 00min 00s.
getTimezoneOffset() XE "Date:GetTimezoneOffset()" : Renvoie la différence entre lheure locale et lheure GMT sous forme dun entier en minutes.
setTime() XE "Date:SetTime()" : Assigne lheure courante sous forme dun entier représentant le nombre de millisecondes depuis le 1er janvier 1970 00h 00min 00s.
toGMTString() XE "Date:ToGMTString()" : Renvoie la valeur actuelle de la variable Date en heure GMT.
toLocaleString() XE "Date:ToLocaleString()" : Renvoie la valeur actuelle de lheure de la variable Date. Cest plus rapide que de combiner getHours(), getMinutes(), et getSeconds().
Exemple
Le but de cet exemple est dafficher une horloge dans une ligne de texte. Pour cela, on utilise la méthode window.setTimeout(), qui rappelle la fonction daffichage toute les secondes.
Exemple 2 STYLEREF 1 \s 0. SEQ Exemple \* ARABIC \s 1 1 Date
//la fonction que lon doit appeler
function GetTime () {
var time = new Date (); // objet Date()
var hours = time.getHours();//on récupère les heures
var min = time.getMinutes(); //on récupère les minutes
var sec = time.getSeconds();//on récupère les secondes
/* on rajoute un 0 si le chiffre est inférieur à 10 */
if (hours < 10) hours = "0" + hours;
if (min < 10) min = "0" + min;
if (sec < 10) sec = "0" + sec;
/* affichage de lheure dans une zone de texte */
document.time.heure.value = hours + ":" + min + ":" + sec;
window.setTimeout('GetTime()',1000); /* le timer rappelle la fonction toutes les secondes */
}
Voici l'heure :
Exercice
Nombre de jours
Le but de lexercice est de calculer le nombre de jours écoulés depuis lan 2000.
Heure GMT
Cet exercice consiste à donner lheure GMT de deux façons différentes.
OBJET IMAGE XE "Image"
Rappel HTML XE "HTML"
Il semble utile de rappeler que la balise XE "" possède de nombreux attributs dont certains quil est conseillé de déclarer en Javascript. Ci-dessous, la liste de ces attributs :
src : URL, souvent relative, de limage.
name : nom de limage dans la page, très important en JS.
width : largeur de limage affichée.
height : hauteur de limage affichée.
align : alignement de limage par rapport au texte.
Il est important de rajouter quune image peut servir dancre pour un lien hypertexte, cest-à-dire être placée entre les balises XE ""
. Cela permet certaines astuces daffichage.
Lobjet
La classe Image correspond à la balise HTML . Son emploi est assez difficile et ce cours ne décrira pas en détail toutes ses facettes. Il permet de manipuler les images de façon dynamique, ce qui est impossible avec le HTML. On rappellera que les images sont stockées dans le tableau images[] XE "Images" de lobjet document XE "Document" .
Grâce à un objet Image, on peut pré charger une image et la stocker en cache, contrairement au HTML. Limage ne sera cependant pas affichée. Elle le sera à laide de la balise .
Un objet Image est appelé selon la syntaxe objet habituelle, avec le constructeur Image(). Lobjet possède alors les propriétés de la balise HTML , dont la liste figure dans la section suivante.
Propriétés XE "Image:Propriétés"
Syntaxe
Un objet Image possède plusieurs propriétés, que lon peut assimiler aux attributs de la balise . La syntaxe est la suivante :
variable = new Image();
variable.propriété = x ;
var2 = variable.propriété ;
Src XE "Image:Src"
Il sagit de lURL absolue ou relative le limage. Elle peut être modifiée. Cela permet de charger en cache limage lors du chargement de la page lorsquil sagit dun objet créé en JS. Lorsque cette propriété est appliquée à une balise , XE "" cela permet de changer limage affichée par la balise, comme dans lexemple ci-dessous :
Exemple 21. SEQ Exemple \* ARABIC \s 1 1 Image.src
Name XE "Image:Name"
Cest le nom défini par lattribut name="
" de la balise . A ne pas confondre avec lID. Permet de trouver limage dans le tableau document.images[]. XE "Images"
Exemple 21. SEQ Exemple \* ARABIC \s 1 2 Image.name
Id
Cest lID défini par lattribut id="
" de la balise . A ne pas confondre avec le nom. Permet de retrouver limage grâce à la méthode document.getElementById(). XE "Document:GetElementById()"
Exemple 21. SEQ Exemple \* ARABIC \s 1 3 Image.id
Width XE "Image:Width"
Il sagit de la largeur de limage. Elle contient la valeur de lattribut width de la balise . Si cet attribut nest pas précisé, elle contient la largeur réelle de limage. Ne peut être modifiée.
Exemple 21. SEQ Exemple \* ARABIC \s 1 4 Image.width
Height XE "Image:Height"
Il sagit de la hauteur de limage. Elle contient la valeur de lattribut height de la balise . XE "" Si cet attribut nest pas précisé, elle contient la hauteur réelle de limage. Ne peut être modifiée.
Exemple 21. SEQ Exemple \* ARABIC \s 1 5 Image.height
Complete XE "Image:Complete"
Cest un booléen qui indique si le chargement de limage est terminé. Renvoie true si le chargement est achevé et false dans le cas contraire.
Exemple 21. SEQ Exemple \* ARABIC \s 1 6 Image.complete
Alt XE "Image:Alt"
Elle contient le texte qui affiché avant le chargement de limage et en info bulle lorsquelle est survolée. Contient la valeur de lattribut alt="
" de la balise . Ne peut être modifiée.
Exemple 21. SEQ Exemple \* ARABIC \s 1 7 Image.alt
FileSize XE "Image:FileSize"
Elle contient la taille en octets de limage. Nest accessible que lorsque le chargement est terminé, doù lutilité de la propriété complete.
Exemple 21. SEQ Exemple \* ARABIC \s 1 8 Image.fileSize
Afficher une image
Il suffit de prendre lélément voulu dans la page et de changer sa propriété. Cet élément est assimilé à un objet Image, faisant partie de lobjet document.
Exemple 21. SEQ Exemple \* ARABIC \s 1 9 Afficher une image
document.image1.src = img2.jpg ;
Dans ce cas précis, limage change et img2.jpg est affiché dans le champ image1. Lintérêt de créer un objet Image reste donc discutable, puisquon ne lutilise pas
Lobjet image permet de stocker limage en cache au moment du chargement de la page. Il ne reste plus quà trouver le moyen de lafficher
De plus, on peut créer un tableau dobjets Image, ce qui nous facilitera les manipulations ensuite.
Exemple 21. SEQ Exemple \* ARABIC \s 1 10 Afficher une image à laide dun tableau
//tableau
var tab = new Array (4) ;
//remplissage dimages
for (i = 0; i < 4; i++) {
tab[i] = new Image();
tab[i].src = i + ".gif";
}
//fonction daffichage
function f() {
for (i = 0; i < 4; i++) {
document.images[i].src = tab[i].src ;
}
}
Lexemple ci-dessus permet de charger 5 images et des les afficher dans 5 balises XE "" différentes grâce au tableau images[]. XE "Images"
Exemple concret
Ici, le but est de créer une page avec une image et un bouton. Lorsque lon clique sur le bouton, limage change. On a au total 4 images différentes. On utilise un tableau dobjets Image, une balise , une balise , et une fonction. Lorsque les 4 images ont défilé, on recommence à la première. Pour cela, un compteur est utilisé. Voici cet exemple :
Exemple 21. SEQ Exemple \* ARABIC \s 1 11 Clic déclenchant un changement dimage
New Document
//création d'un tableau de 4 éléments
var tab_images = new Array(4);
// pour chaque élément
for (i = 0; i < tab_images.length; i++) {
tab_images[i] = new Image(); /*on crée un objet Image
et on lui donne un fichier à charger */
tab_images[i].src = i + ".gif";
}
//on initialise un compteur
var nb = 0;
// la fonction qui sera appelée.
function changer() {
//incrémenter le compteur
nb++;
//si on en est 4, on remet à 0 le compteur
if (nb == tab_images.length) {
nb = 0;
}
//affichage de l'image
window.document.image.src = tab_images[nb].src;
}
Exercice
Ici, le but est aussi de créer une page avec une image. Lorsque passe la souris sur limage, limage change. Quand on « ressort » de limage, limage de base revient. 4 images différentes safficheront en un cycle.
PROGRAMMATION MULTI-CADRES
Rappel HTML
Les frames XE "Frame" sont un élément du langage HTML. Il sagit du partage de la fenêtre en plusieurs cadres où lon pourra afficher différentes pages HTML. Les frames se déclarent dans le fichier principal avec la balise XE "" suivie de plusieurs balises . XE "" Il ny a alors pas de balise XE "" dans la page principale. Pour plus de précisions, consulter un cours HTML.
Frame
Les frames ne sont pas très utilisées en JS, mais il est important de savoir quelques détails en cas dutilisation de frames au niveau HTML. Il est important, lorsque le JS est utilisé, de préciser le nom de la frame dans la balise .
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 1 Attribut name des frames
Ce nom ne paraît pas très utile en HTML, mais il prend toute son importance en JS. Il sera utilisé dans deux cas : la cible des liens ainsi que pour accéder à un élément dune autre frame de la page.
Lien hypertexte
Lorsque de lutilisation des frames, il peut savérer utile dafficher une page dans une frame différente de celle où se trouve le lien. Cest là où intervient lattribut target de la balise . XE "" Il permet dindiquer la frame où lon veut que la page appelée saffiche. Voici la syntaxe :
texte
La référence indiquée dans lattribut target peut être de deux types. Dans un premier cas, il sagit du nom de la frame déclarée dans la page principale, cas où il faut savoir ce nom. Sinon, si on fait référence au cadre parent, on indiquera « _parent », et si on fait référence à la fenêtre complète, on indiquera « _top ».
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 2 Attribut target des liens
cliquez ici
ou ici
Accès aux éléments des frames
Lorsque de lutilisation des frames, il est souvent nécessaire en JS daccéder aux éléments des autres frames. Lobjet window XE "Window" qui a été décrit précédemment fournit de quoi le faire. Il contient lobjet parent XE "Parent" , qui possède les mêmes propriétés que lui.
Objet frames[]
La première façon daccéder aux éléments dune autre frame se fait bien sûr par le tableau frames XE "Frames" [] propriété de parent dont le numéro des frames est attribué dans lordre de déclaration de celles-ci. On accède ensuite à chaque élément de la frame ainsi quà ses propriétés et méthodes. La syntaxe est la suivante :
parent.frames[i].objet.propriété
parent.frames[i].objet.méthode()
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 3 Objet frames[]
parent.frames[1].form1.action = "get";
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 4 Objet frames[]
parent.frames[1].form1.button1.value = "Click";
Dans lexemple ci-dessus, on accède à la valeur du bouton appelé « Button1 » du formulaire nommé « form1 ».
Nom de frame
Lautre façon daccéder aux éléments dune frame est dutiliser son nom. Ce sera alors un objet de parent. Il faut donc prendre soin à donner un nom aux frames lors de leur déclaration. On accède ensuite à chaque élément de la frame ainsi quà ses propriétés et méthodes.
parent.nom.objet.propriété
parent.nom.objet.méthode()
Les exemples de la section précédente peuvent être écrits de la façon suivante, sans aucune différence au niveau du résultat.
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 5 Nom de frame
parent.frame1.form1.action = "get";
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 6 Nom de frame
parent.frame1.form1.button1.value = "Click";
Exemple concret
Lexemple 22.7 permet de faire un compteur dans lequel les secondes impaires sont affichées une frame et les secondes paires sur lautre frame.
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 7 Compteur sur deux frames
New Document
var sec = 0;
var min = 0;
var hrs = 0;
var test = 1;
function f() {
sec++;
if (sec == 60) {
sec = 0;
min++;
}
if (min == 60) {
min = 0;
hrs++;
}
h = hrs;
m = min;
s = sec;
if (h < 10) h = "0" + h;
if (m < 10) m = "0" + m;
if (s < 10) s = "0" + s;
if (test == 1) {
parent.frame1.form1.out1.value = h + ":" + m + ":" + s;
test = 2;
}
else if (test == 2) {
parent.frame2.form2.out2.value = h + ":" + m + ":" + s;
test = 1;
}
window.setTimeout('f();',1000);
}
Ci-dessous, les deux fichiers servant de frames dans lexemple ci-dessus. Elles sont nommées respectivement « 1.htm » et « 2.htm ».
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 8 Frame 1
/* 1.htm */
New Document
Exemple STYLEREF 1 \s 22. SEQ Exemple \* ARABIC \s 1 9 Frame 2
/* 2.htm */
New Document
Exercice
Lexercice comporte 2 frames, avec chacune un bouton. Chaque clic sur un bouton incrémente la valeur de lautre bouton.
COOKIES XE "Cookies"
Présentation
En JS, il est possible de travailler avec les cookies. Etant donné labsence de gestion décriture/lecture de fichier, les cookies sont le seul moyen de stocker des informations permanentes sur la machine de lutilisateur. Ces dernières pourront être récupérées plus tard et réutilisées.
Cela permet de compter le nombre de visites de linternaute, de créer une liste de préférence de navigation sur le site, de conserver le login et le password afin de se connecter directement à un compte
Les applications des cookies sont nombreuses.
Le seul risque de cette méthode est la suppression ou le refus des cookies par lutilisateur.
Le cookie en lui-même se présente sous la forme dune chaîne de caractère qui contient des informations concaténées : linformation que lon veut conserver, la date dexpiration, lauteur path le nom de domaine, la sécurisation.
Création de cookie XE "Cookies:Création"
On crée un cookie avec lobjet cookie de lobjet document XE "Document" . Il sagit dune chaîne de caractère dans laquelle on indique les informations voulues. Voici la syntaxe :
document.cookie = "informations"
Dans les informations, il y a tout dabord la chaîne que lon souhaite conserver. Ensuite, il faut mettre la date dexpiration, le path, le nome de domaine, et si besoin la fait que le cookie soit protégé. Seuls les deux premiers champs sont obligatoires. Voici la syntaxe complète :
document.cookie = "variable = contenu ; expires = date ; path = nom ; domain = domaine ; secure = true/false" ;
Il semble utile de décrire chaque champ indiqué ci-dessus. Si la chaîne est mal écrite, le cookie ne sera pas utilisable, et deviendra par conséquent inutile.
information : il sagit de ce qui doit être stocké dans le cookie. Il faut définir un nom à la variable et lui affecter une valeur, un contenu. Comme on peut le voir ci-dessus, les champs sont séparés par des points-virgules, il ne faut donc pas insérer des « ; » dans le contenu.
expires : contient la date dexpiration, à laquelle le cookie sera détruit. La valeur est en secondes. Le plus simple consiste à utiliser un objet Date.
path : le chemin de la page qui a créé le cookie.
domain : le domaine de la page qui a créé le cookie.
secure : booléen qui indique si le cookie doit utiliser le protocole HTTP XE "HTTP" (false) ou le protocole sécurisé HTTPS XE "HTTPS" (true).
Exemple 23. SEQ Exemple \* ARABIC \s 1 1 Création de cookie
document.cookie = "visite=1; expires=31/12/2004; path=le-vatican.com/index.php; secure=true";
Dans lexemple ci-dessus, il sagit dun cookie créé par « lepape », qui expire le 31/12/2004, auquel on peut accéder uniquement par un échange sécurisé, et qui compte le nombre de visites.
Récupération de cookie XE "Cookies:Récupération"
La récupération dun cookie est plus complexe, mais elle est essentielle, car sinon le cookie est inutile. Le but est de trouver le type dinformation que lon cherche, et ensuite de lire la valeur. La maîtrise de lobjet String XE "String" est obligatoire pour ce genre dexercice. Cette partie explique pas à pas la manière pour récupérer un cookie. On commence par mettre tous les cookies dans une variable, selon le modèle suivant :
variable = document.cookie ;
Ensuite, on cherche le nom de la « variable » dans la chaîne du cookie. On récupère ce qui est situé entre le signe « = » et le « ; ». Cela semble simple, mais il faut utiliser les méthodes des objets String et utiliser des instructions logiques. Ci-dessous, lexemple montre en détail comment récupérer un cookie.
Cet exemple nest quune manière parmi dautres. On peut imaginer quantités de façons, mais celle-ci est sûrement une des plus simples.
Exemple 23. SEQ Exemple \* ARABIC \s 1 2 Récupération de cookie
//création du cookie
document.cookie = "visite=1;expires=31/12/2004";
//variable à trouver
var variable_a_trouver = "visite" ;
//on rajoute le signe =
variable_a_trouver = variable_a_trouver + "=" ;
//on récupère le cookie
var chaine = document.cookie ; var longueur = variable_a_trouver.length ;
//on récupère la longueur à trouver
var resultat ;
/* si le cookie nest pas vide, on commence à chercher. */
if (chaine.lenght > 0) {
/* on cherche la position du début de la variable */
var debut = chaine.indexOf(chaine_a_trouver,0);
//si on a trouvé cette position, on continue
if (debut >=0) {
var fin ;
/* on rajoute la longueur de la variable, pour arriver au début du contenu */
debut = debut + longueur ;
/* on cherche la fin du contenu, cest-à-dire le premier « ; » */
fin = chaine.indexOf(";", debut) ;
//si on trouve la position du point-virgule
if (fin>=0) {
/* on récupère la chaine située entre le = et le ; */
resultat = unescape(chaine.substring(debut,fin) ;
}
/* si il ny a pas de ;, cest que cest la fin de la chaîne */
else {
/* on récupère la chaine située après le = la fin de la chaîne */
resultat = unescape(chaine.substring(debut,chaine.length) ;
}
}
}
Modification de cookie XE "Cookies:Modification"
Modifier un cookie est aussi simple que de le créer. En réalité, il suffit de le recréer avec un contenu différent et une date actualisée.
Suppression de cookie XE "Cookies:Suppression"
Pour supprimer un cookie, il faut tout simplement le recréer, avec la même valeur pour éviter de se compliquer les choses, et lui donner une date dexpiration passée. Sinon, il suffit dattendre sa date dexpiration, ce qui nest pas toujours satisfaisant.
PROGRAMMATION OBJET
Présentation
Bien que le Javascript ne soit pas un langage orienté objet, il donne la possibilité de créer ses propres objets. Cette section sadresse à des programmeurs possédant un niveau avancé car la programmation objet est un point assez difficile.
Les programmeurs C++ seront étonnés de voir que les classes JS sont très simplifiées comparées à celles du C++. Elles ne demandent pas une définition complète de la classe, mais il suffit de déclarer la fonction constructrice.
Déclaration de classe
Contrairement au C++ - qui demande une déclaration détaillée déclarer une classe en JS se fait simplement en déclarant la fonction constructeur de classe. On déclare à lintérieur les propriétés à laide de lobjet this. On retrouve lobjet this découvert précédemment. Comme cela a été expliqué, il désigne lobjet en cours. Voici la syntaxe :
function nom_classe ( paramètres ) {
this.propriété = paramètre1 ;
}
On déclare lobjet avec la syntaxe habituelle et le mot-clé new. Le nome de la classe est en général le type dobjet avec une majuscule.
Exemple 24. SEQ Exemple \* ARABIC \s 1 1 Déclaration dune classe
function Eleve (Age,Sexe,Ville) {
this.age = Age ;
this.sexe = Sexe ;
this.ville = Ville ;
}
var Laurent = new Eleve(17,M,Grenoble) ;
Utilisation de méthodes
Il est bien entendu possible de déclarer et utiliser des méthodes. Pour cela, il faut déclarer une fonction indépendante de la classe, avant la déclaration du constructeur. Ensuite, on déclare la fonction à lintérieur du constructeur, en laffectant à une méthode. Il faut faire attention lors de cette déclaration, car il ne faut pas mettre les parenthèses des fonctions ! Voici la syntaxe à suivre :
function nom_classe () {
this.méthode = fonction ;
}
Exemple 24. SEQ Exemple \* ARABIC \s 1 2 Méthode dun classe
function affich_infos () {
document.write (this.nom + " a " + this.age + " ans.");
}
function Eleve (Nom,Age) {
this.age = Age ;
this.nom = Nom ;
this.affich = affich_infos;
}
var Laurent = new Eleve(Laurent,17) ;
Laurent.affich() ;
Il est possible de simplifier lécriture lorsquil y a beaucoup de propriétés, grâce à lutilisation de with(objet){}. Cela ne fonctionne quà lintérieur des méthodes, et non dans le constructeur.
Exemple 24. SEQ Exemple \* ARABIC \s 1 3 Méthode dun classe
function Eleve (Nom,Age) {
age = Age ;
nom = Nom ;
affich = affich_infos;
}
function affich_infos () {
with (this) {
document.write (nom + " a " + age + " ans.");
}
}
var Laurent = new Eleve(17, Laurent) ;
Laurent.affich() ;
Exercice
Dans cet exercice, le but est de demander 3 informations à lutilisateur (nom, age, ville) à laide dune boite de dialogue. On regroupe ces informations à laide dun objet dune classe crée auparavant puis on utilise une méthode pour laffichage dans une zone de texte.
EXPRESSIONS REGULIERES XE "Expressions régulières"
Présentation
Ce chapitre sadresse à des programmeurs avertis, qui voudront bâtir un site dynamique dun aspect assez évolué. Les expressions régulières sont assez compliquées à comprendre, et leur utilisation demande une connaissance sans failles de lobjet String XE "String" .
Définition XE "Expressions régulières:Définition"
Les expressions régulières existent dans la plupart des langages de programmation, mais sont peu connues du fait de leur complexité. Elles permettent de réaliser des traitements sur les chaînes de caractères. Ces traitements sont de lordre de la recherche de caractères, de lextraction de sous-chaînes
beaucoup dautres traitements existent quil revient au programmeur dimaginer et de créer. En réalité, une expression régulière possède un motif XE "Expressions régulières:Motif" , qui est une suite de caractères ordonnés selon un ordre, un nombre dapparitions, une non apparition
Une expression régulière est avant tout un objet RegExp XE "RegExp" . Comme tout objet, il se déclare ainsi :
var reg = RegExp (pattern, option);
Pour la première fois, il faut fournir des paramètres au constructeur. Ces paramètres concernent lexpression régulière que vous utilisez. Le pattern XE "Expressions régulières:Pattern" est le motif de lexpression. Loption XE "Expressions régulières:Option" est une chaîne de caractères, qui comme son nom lindique contient les options de lexpression régulière. Nous allons voir leur constitution ci-après.
Il existe aussi une autre façon de déclarer une expression régulière. Elle est moins utilisée et moins élégante.
var reg = /pattern/option;
Les deux notations sont absolument équivalentes mais la première est plus explicite, donc conseillée.
Paramètres
Les exemples sont regroupés dans une section ultérieure car ils se doivent de contenir les deux paramètres, qui sont traités séparément ci-après.
Option XE "Expressions régulières:Option"
La chaîne option peut prendre 4 valeurs. La première est la chaîne vide "", qui signifie labsence doption. Les 3 autres valeurs sont détaillées ci-dessous.
"g" : la recherche est globale sur toute la chaîne -.
"i" : ne pas tenir compte de casse majuscules/minuscules- .
"gi" : les deux options réunies
Pattern XE "Expressions régulières:Pattern"
Cette partie est la plus délicate. Le pattern est assez complexe et sa compréhension peut être difficile. Il faut savoir que le pattern correspond aux caractères recherchés pour une raison ou une autre dans une chaîne.
La chaîne pattern est extensible à linfini. Le choix de ce quelle contient appartient du moins en grande partie au programmeur. Il sagit du motif de la chaîne, cest-à-dire des caractères qui inclus ou exclus de la recherche. Cette chaîne pattern contient des caractères spéciaux concaténés. Ces caractères spéciaux concernent le motif XE "Expressions régulières:Motif" lui-même, le caractère à rechercher, le nombre doccurrences, le groupe de caractères cherché
Leur liste se trouve dans le tableau ci-dessous :
MotifSignification^Début du pattern de la chaîne.$Fin du pattern. Interdit tout caractère après..Nimporte quel caractère.a | bCaractère a OU b.*Caractère précédent présent 0 à x fois.+Caractère précédent présent 1 à x fois.?Caractère précédent présent 0 à 1 fois.{x}Caractère précédent présent x fois.{x,}Caractère précédent présent au moins x fois.{x,y}Caractère précédent présent au entre x et y fois.[abc]Groupe de caractères : nimporte lequel contenu entre les crochets.[a-z]Nimporte quel caractère alphabétique.[^a-z]Aucun caractère alphabétique.\\Caractère « \ ».\dTous les chiffres équivalent de [0-9] .\DAucun chiffre équivalent de [^0-9].\bLimites des mots (espace, tab,
).\sTous les caractères despacements équivalent de [\v\r\n\t\f].\SAucun caractère despacements équivalent de [^\v\r\n\t\f].\wTous les caractères alphanumériques dont « _ » équivalent de [A-Za-z0-9_].\WAucun caractère alphanumérique équivalent de [^A-Za-z0-9_].TAB. SEQ Tableau \* ARABIC 13 Motifs du pattern
Les différents motifs ne sont pas séparés. On les met les uns à la suite des autres, sans espacements. Il est à préciser que lon peut très bien mettre une variable ou un mot entre guillemets - sans mise en forme avec ^ $ - comme argument pattern.
Exemple
Voici différents exemples de déclaration dobjet RegExp XE "RegExp" . Ces exemples ne sont pas très complexes, ils donnent simplement une idée de la construction des motifs. Le pattern est plus détaillé que les options qui ne sont pas très importantes. Chaque exemple est commenté, pour bien comprendre le but du motif.
Exemple 25. SEQ Exemple \* ARABIC \s 1 1 Notation objet
var exp = new RegExp("^[A-Za-z0-9]{4,}$","i") ;
Lexemple ci-dessus présente la recherche dune chaîne de au moins 4 caractères alphanumériques. [A-Za-z0-9] désigne les caractères alphanumériques, et {4,} désigne 4 fois ou plus. Les caractères sont au chois majuscules ou minuscules. Lexemple ci-après est équivalent, mais il utilise lautre notation.
Exemple 25. SEQ Exemple \* ARABIC \s 1 2 Notation simplifiée
var exp = /^[A-Za-z0-9]{4,}$/i ;
Exemple 25. SEQ Exemple \* ARABIC \s 1 3 Vérification de-mail
var exp = new RegExp (^[A-Za-z0-9]+[A-Za-z0-9\.\-_]*@[A-Za-z0-9\-_]+\.[A-Za-z0-9\.\-_]{1,}$,);
Lexemple ci-dessus présente la vérification dune adresse e-mail. Elle doit commencer par au moins un caractère alphanumérique : [A-Za-z0-9]+ . Ensuite elle peut comporter autant de caractères alphanumériques que lon veut, plus le point, le tiret et lunderscore : [A-Za-z0-9\.\-_]*. Tout cela doit être suivi dun @ : @. Ensuite, il peut y avoir nimporte quel nombre de caractères alphanumériques, plus le point, le tiret et lunderscore : [A-Za-z0-9\-_]+. Cela doit être suivi dun point : \. . Ce dernier doit être suivi dau moins deux caractères alphanumériques dont le point et le tiret : [A-Za-z0-9\.\-_]{1,}. Il ny a aucune option.
Ces exemples ne traitent que de la création de lobjet RegExp. Ce dernier est bien entendu inutile si on ne lutilise pas ensuite. Cest le sujet de la section suivante.
Utilisation XE "Expressions régulières:Utilisation"
Méthodes de lobjet RegExp XE "RegExp:Méthodes"
Il existe trois méthodes de lobjet RegExp : test() XE "RegExp:Test()" , exec() XE "RegExp:Exec()" et compile() XE "RegExp:Compile()" . Elles sutilisent selon la syntaxe objet habituelle. La première prend en paramètre la chaîne à tester selon le motif de lexpression régulière. Elle renvoie un booléen qui indique si la chaîne correspond au motif ou non. La deuxième méthode prend aussi la chaîne à tester en paramètre. Elle renvoie un tableau des occurrences du motif à tester. La dernière permet de modifier le motif de lexpression régulière, sans créer un nouvel objet.
Exemple 25. SEQ Exemple \* ARABIC \s 1 4 RegExp.test()
adresse = prompt ("Votre mail ?","mail@fai.com") ;
var exp = new RegExp (^[A-Za-z0-9]+[A-Za-z0-9\.\-_]*@[A-Za-z0-9\-_]+\.[A-Za-z0-9\.\-_]{1,}$,);
document.write ( exp.test(adresse) );
Lexemple précédent propose de tester la correction dun mail. On retrouve le motif déjà expliqué dans la section précédente. La méthode test() est appliquée à ladresse e-mail. Le reste est ou devrait être familier.
Méthodes de lobjet String XE "String"
Les méthodes de lobjet String vont aussi aider à la manipulation des expressions régulières. 3 nouvelles méthodes de lobjet String sont introduites ici. A ces trois méthodes, il est possible de rajouter la plupart des méthodes String. Ces méthodes nouvelles sont les suivantes :
search() XE "String:Search()" : trouver les occurrences répondant aux critères du motif.
replace () XE "String:Replace()" : trouver remplacer les occurrences répondant aux critères du motif.
match() XE "String:Match()" : trouver les occurrences répondant aux critères du motif.
Ces trois méthodes prennent en paramètre un objet RegExp. Voici la syntaxe correspondante :
var reg = RegExp (pattern, option);
chaîne.méthode(reg);
Il est à noter que la méthode split() possède une syntaxe similaire. Les méthodes split() XE "String:Split()" et match() XE "String:Match()" renvoient chacune un tableau de toutes les occurrences trouvées.
De plus, il est possible dindiquer simplement le motif, avec la notation peu utilisée des slash, comme paramètre, comme ceci :
chaîne.méthode(/pattern/option);
Exemple 25. SEQ Exemple \* ARABIC \s 1 5 String.replace()
var nom = prompt('Votre nom?\nMettez les accents
','nom') ;
nom = nom.replace (/[éèêë]/g,"e") ;
nom = nom.replace (/[àäâ]/g,"a") ;
nom = nom.replace (/[üûù]/g,"u") ;
nom = nom.replace (/[òöô]/g,"o") ;
nom = nom.replace (/[ìïî]/g,"i") ;
alert(nom) ;
Lexemple ci-dessus propose de supprimer les accents dune chaîne. On remplace tout simplement les lettres accentuées par la lettre sans accent.
Exemple concret
Ci-dessous est proposé un exemple dans lequel vous entrez une suite de mots séparés par des caractères de ponctuation. En cliquant sur un bouton, la liste de tous les noms est affichée. De plus, deux méthodes sont proposées. Cet exemple vous montre aussi comment intégrer le traitement au code avec une fonction.
Exemple 25. SEQ Exemple \* ARABIC \s 1 6 Exemple concret
New Document
function TraitBySplit() {
var chaine = document.form1.input.value; //récupération de la chaine
var exp = new RegExp ('[.,;:/!? ]',"g"); //motif avec la ponctuation
tab = chaine.split(exp); /*séparation de la chaine */
var result = "Voici les noms :"; //affichage
for (i = 0 ; i < tab.length ; i++) {
result = result + "\n" + tab[i] ;
}
document.form1.output.value = result;
}
function TraitByMatch() {
//récupération de la chaine
var chaine = document.form1.input.value;
var exp = new RegExp ('[A-Za-zìïîòöôüûùàäâéèêë]+',"g"); /* motif avec les lettres */
tab = chaine.match(exp); // séparation de la chaine
var result = "Voici les noms :"; //affichage
for (i = 0 ; i < tab.length ; i++) {
result = result + "\n" + tab[i] ;
}
document.form1.output.value = result;
}
Entrez une suite de noms séparés indifféremment par les signes de ponctuation .,;:/!? et espace
Résultat
Exercice
Faire un formulaire avec 3 lignes de texte et un bouton. Dans les lignes de texte, linternaute entre son adresse, code postal et ville. En cliquant sur le bouton, on teste leur validité.
FONCTIONS ET METHODES
Présentation
Ce chapitre présente un peu tardivement les fonctions intégrées au langage, et ne dépendant daucun objet. Seront aussi présentées aussi les méthodes et propriétés que lon peut associer à tous les objets.
Fonctions du langage XE "Fonctions du langage"
Escape() XE "Escape()"
Cette fonction encode les caractères spéciaux dune chaîne, selon le code %xx, et retourne cette chaîne encodée. Voici la syntaxe à utiliser :
chaine1 = escape (chaine2)
Exemple 26. SEQ Exemple \* ARABIC \s 1 1 Escape()
var chaine = "Voici des caractères spéciaux !" ;
document.write( escape(chaine) ) ;
Unescape() XE "Unescape()"
Cette fonction décode les caractères spéciaux codé par escape(), et retourne cette chaîne encodée.
chaine1 = escape (chaine2) ;
Exemple 26. SEQ Exemple \* ARABIC \s 1 2 Unescape()
var chaine = "Voici des caractères spéciaux !" ;
var chaine2 = escape(chaine) ;
document.write( unescape(chaine2) ) ;
ParseFloat() XE "ParseFloat()"
Cette fonction convertit une chaîne passée en paramètre en nombre décimal. Renvoie NaN si la conversion est impossible.
decimal = parseFloat (chaine) ;
Exemple 26. SEQ Exemple \* ARABIC \s 1 3 ParseFloat()
var chaine = "Voici des caractères spéciaux !" ;
var chaine2 = "35.7" ;
document.write( parseFloat(chaine) + "" ) ;
document.write( parseFloat(chaine2) ) ;
ParseInt() XE "ParseInt()"
Cette fonction convertit une chaîne passée en paramètre en nombre entier. Renvoie NaN si la conversion est impossible. Le paramètre facultatif base permet de faire une conversion en une autre base que décimale. Voici la syntaxe :
decimal = parseInt (chaine, base) ;
Exemple 26. SEQ Exemple \* ARABIC \s 1 4 ParseInt()
var chaine = "35.7" ;
document.write( parseInt(chaine) + "" ) ;
document.write( parseInt(chaine, 8) ) ;
IsFinite() XE "IsFinite()"
Cette fonction renvoie true si le nombre est fini, sinon, elle renvoie false. Voici la syntaxe à suivre :
booleen = isFinite (nombre) ;
Exemple 26. SEQ Exemple \* ARABIC \s 1 5 IsFinite()
var chaine = "35.7" ;
var chaine2 = "Math";
document.write( isFinite(chaine) + "") ;
document.write( isFinite(chaine2) ) ;
IsNaN() XE "IsNan()"
Cette fonction renvoie true si la chaîne nest pas un nombre, sinon, elle renvoie false.
booleen = isNaN (chaine);
Exemple 26. SEQ Exemple \* ARABIC \s 1 6 IsNaN()
var chaine = "35.7" ;
var chaine2 = "Math";
document.write( isNaN(chaine) + "") ;
document.write( isNaN(chaine2) ) ;
Méthodes et propriétés des objets XE "Object"
Les objets de Javascript ou créés par le programmeur possèdent deux propriétés et deux méthodes en commun. Elles permettent de manipuler ces objets et de connaître certaines de leurs caractéristiques.
Prototype XE "Object:Prototype"
Cette propriété permet de rajouter une propriété ou une méthode à un objet que créé ou qui existe dans JS. On lutilise selon la syntaxe suivante :
classe.prototype.nom = valeur ;
Lexemple suivant rajoute une propriété et une méthode à lobjet Array. Elle permettent de mettre un commentaire au tableau et de renvoyer le premier élément du tableau ce qui nest pas très utile en soit.
Exemple 26. SEQ Exemple \* ARABIC \s 1 7 Object.prototype
var tab = new Array(5);
for (i = 0; i < 5; i++) tab[i] = i+1;
//on rajoute un commentaire
Array.prototype.comment = null;
tab.comment = "Tableau de 5 chiffres";
//fonction retournant le premier élément
function FirstElement () {
return this[0];
}
Array.prototype.firstElement = FirstElement;
document.write (tab.comment + " : premier élément : " + tab.firstElement());
Constructor XE "Object:Constructor"
Cette propriété renvoie tout simplement le nom du constructeur de lobjet. Voici la syntaxe à suivre :
variable = objet.constructor ;
Exemple 26. SEQ Exemple \* ARABIC \s 1 8 Object.constructor
var tab = new Array(5);
var s = "string";
var d = new Date ()
var e = new RegExp();
document.write ("Constructeur Array : " + tab.constructor + "");
document.write ("Constructeur String : " + s.constructor + "");
document.write ("Constructeur Date : " + d.constructor + "");
document.write ("Constructeur RegExp : " + e.constructor + "");
ValueOf() XE "Object:ValueOf()"
Cette méthode renvoie tout simplement la valeur de lobjet. Il faut utiliser la syntaxe suivante :
variable = objet.valueOf ;
Exemple 26. SEQ Exemple \* ARABIC \s 1 9 Object.valueOf()
var tab = new Array(5);
for (i = 0; i < 5; i++) tab[i] = i + 1;
var s = "string";
document.write ("Valeur du Tableau : " + tab.valueOf() + "");
document.write ("Valeur de la Chaîne : " + s.valueOf() + "");
ToString() XE "Object:ToString()"
Cette méthode retourne la description de lobjet. Voici la syntaxe à suivre :
variable = objet.toString ;
Exemple 26. SEQ Exemple \* ARABIC \s 1 10 Object.toString()
var tab = new Array(5);
for (i = 0; i < 5; i++) tab[i] = i + 1;
var s = "string";
document.write ("Description du Tableau : " + tab.toString() + "");
document.write ("Description de la Chaîne : " + s.toString() + "");
Exercice
Dans cet exercice, il faut rajouter 3 méthodes à la classe String. La première renverra une chaîne avec la valeur et le constructeur. La seconde renverra la chaîne codée. Et la dernière renverra le dernier caractère de la chaîne.
LISTE DES EXEMPLES
TOC \h \z \c "Exemple" HYPERLINK \l "_Toc133043600" Exemple 3.1 Balise PAGEREF _Toc133043600 \h 7
HYPERLINK \l "_Toc133043601" Exemple 3.2 Inclusion de fichier « .js » PAGEREF _Toc133043601 \h 7
HYPERLINK \l "_Toc133043602" Exemple 3.3 - Spécificités PAGEREF _Toc133043602 \h 7
HYPERLINK \l "_Toc133043603" Exemple 3.4 Commentaires // PAGEREF _Toc133043603 \h 8
HYPERLINK \l "_Toc133043604" Exemple 3.5 Commentaires /* */ PAGEREF _Toc133043604 \h 8
HYPERLINK \l "_Toc133043605" Exemple 4.1 Fonction typeof() PAGEREF _Toc133043605 \h 9
HYPERLINK \l "_Toc133043606" Exemple 4.2 Type dune variable sans valeur PAGEREF _Toc133043606 \h 10
HYPERLINK \l "_Toc133043607" Exemple 4.3 Définition de variable PAGEREF _Toc133043607 \h 10
HYPERLINK \l "_Toc133043608" Exemple 4.4 Affectation explicite de variable PAGEREF _Toc133043608 \h 10
HYPERLINK \l "_Toc133043609" Exemple 4.5 Affectation implicite de variable PAGEREF _Toc133043609 \h 10
HYPERLINK \l "_Toc133043610" Exemple 6.1 Paramètre de fonction PAGEREF _Toc133043610 \h 17
HYPERLINK \l "_Toc133043611" Exemple 6.2 Paramètres multiples PAGEREF _Toc133043611 \h 18
HYPERLINK \l "_Toc133043612" Exemple 6.3 Retour de valeur PAGEREF _Toc133043612 \h 18
HYPERLINK \l "_Toc133043613" Exemple 6.4 Variable locale déclarée dans une fonction PAGEREF _Toc133043613 \h 18
HYPERLINK \l "_Toc133043614" Exemple 6.5 Variable globale déclarée dans une fonction PAGEREF _Toc133043614 \h 18
HYPERLINK \l "_Toc133043615" Exemple 6.6 - Variable globale déclarée hors dune fonction PAGEREF _Toc133043615 \h 19
HYPERLINK \l "_Toc133043616" Exemple 7.1 Expression if ... else PAGEREF _Toc133043616 \h 21
HYPERLINK \l "_Toc133043617" Exemple 7.2 Expression ? : PAGEREF _Toc133043617 \h 22
HYPERLINK \l "_Toc133043618" Exemple 7.3 Expression for PAGEREF _Toc133043618 \h 22
HYPERLINK \l "_Toc133043619" Exemple 7.4 Expression while PAGEREF _Toc133043619 \h 23
HYPERLINK \l "_Toc133043620" Exemple 7.5 Instruction break PAGEREF _Toc133043620 \h 23
HYPERLINK \l "_Toc133043621" Exemple 7.6 Instruction continue PAGEREF _Toc133043621 \h 24
HYPERLINK \l "_Toc133043622" Exemple 8.1 La méthode alert() PAGEREF _Toc133043622 \h 25
HYPERLINK \l "_Toc133043623" Exemple 8.2 La méthode prompt() PAGEREF _Toc133043623 \h 26
HYPERLINK \l "_Toc133043624" Exemple 8.3 La méthode confirm() PAGEREF _Toc133043624 \h 26
HYPERLINK \l "_Toc133043625" Exemple 9.1 Création dune instance de classe PAGEREF _Toc133043625 \h 27
HYPERLINK \l "_Toc133043626" Exemple 9.2 Exemple de propriétés PAGEREF _Toc133043626 \h 28
HYPERLINK \l "_Toc133043627" Exemple 9.3 Une méthode de lobjet document PAGEREF _Toc133043627 \h 28
HYPERLINK \l "_Toc133043628" Exemple 10.1 Envoi dinformations à un script PAGEREF _Toc133043628 \h 29
HYPERLINK \l "_Toc133043629" Exemple 10.2 Envoi dinformations par mail PAGEREF _Toc133043629 \h 30
HYPERLINK \l "_Toc133043630" Exemple 10.3 Ligne de texte PAGEREF _Toc133043630 \h 30
HYPERLINK \l "_Toc133043631" Exemple 10.4 Zone de texte PAGEREF _Toc133043631 \h 31
HYPERLINK \l "_Toc133043632" Exemple 10.5 Champ password PAGEREF _Toc133043632 \h 32
HYPERLINK \l "_Toc133043633" Exemple 10.6 Boutons radios PAGEREF _Toc133043633 \h 33
HYPERLINK \l "_Toc133043634" Exemple 10.7 - Checkbox PAGEREF _Toc133043634 \h 34
HYPERLINK \l "_Toc133043635" Exemple 10.8 Liste déroulante avec lattribut size PAGEREF _Toc133043635 \h 35
HYPERLINK \l "_Toc133043636" Exemple 10.9 Liste déroulante sans lattribut size PAGEREF _Toc133043636 \h 35
HYPERLINK \l "_Toc133043637" Exemple 10.10 Bouton simple PAGEREF _Toc133043637 \h 36
HYPERLINK \l "_Toc133043638" Exemple 10.11 Bouton reset PAGEREF _Toc133043638 \h 37
HYPERLINK \l "_Toc133043639" Exemple 10.12 Bouton submit PAGEREF _Toc133043639 \h 37
HYPERLINK \l "_Toc133043640" Exemple 10.13 Contrôle caché PAGEREF _Toc133043640 \h 38
HYPERLINK \l "_Toc133043641" Exemple 10.14 Formulaire complet PAGEREF _Toc133043641 \h 39
HYPERLINK \l "_Toc133043642" Exemple 10.15 Attribuer une valeur à une ligne de texte PAGEREF _Toc133043642 \h 40
HYPERLINK \l "_Toc133043643" Exemple 11.1 Balise avec plusieurs gestionnaires dévènement PAGEREF _Toc133043643 \h 42
HYPERLINK \l "_Toc133043644" Exemple 11.2 - onClick PAGEREF _Toc133043644 \h 43
HYPERLINK \l "_Toc133043645" Exemple 11.3 - onLoad PAGEREF _Toc133043645 \h 43
HYPERLINK \l "_Toc133043646" Exemple 11.4 - onUnLoad PAGEREF _Toc133043646 \h 43
HYPERLINK \l "_Toc133043647" Exemple 11.5 - onError PAGEREF _Toc133043647 \h 44
HYPERLINK \l "_Toc133043648" Exemple 11.6 - onAbort PAGEREF _Toc133043648 \h 44
HYPERLINK \l "_Toc133043649" Exemple 11.7 - onMouseOver PAGEREF _Toc133043649 \h 44
HYPERLINK \l "_Toc133043650" Exemple 11.8 - onMouseOut PAGEREF _Toc133043650 \h 45
HYPERLINK \l "_Toc133043651" Exemple 11.9 - onFocus PAGEREF _Toc133043651 \h 45
HYPERLINK \l "_Toc133043652" Exemple 11.10 - onBlur PAGEREF _Toc133043652 \h 45
HYPERLINK \l "_Toc133043653" Exemple 11.11 - onChange PAGEREF _Toc133043653 \h 46
HYPERLINK \l "_Toc133043654" Exemple 11.12 - onSelect PAGEREF _Toc133043654 \h 46
HYPERLINK \l "_Toc133043655" Exemple 11.13 - onSubmit PAGEREF _Toc133043655 \h 46
HYPERLINK \l "_Toc133043656" Exemple 11.14 - onReset PAGEREF _Toc133043656 \h 47
HYPERLINK \l "_Toc133043657" Exemple 11.15 Exemple de formulaire évènementiel PAGEREF _Toc133043657 \h 48
HYPERLINK \l "_Toc133043658" Exemple 12.1 Création de tableau PAGEREF _Toc133043658 \h 50
HYPERLINK \l "_Toc133043659" Exemple 12.2 Affectation simple de tableau PAGEREF _Toc133043659 \h 50
HYPERLINK \l "_Toc133043660" Exemple 12.3 Affectation itérative de tableau PAGEREF _Toc133043660 \h 51
HYPERLINK \l "_Toc133043661" Exemple 12.4 Accès aux éléments dun tableau PAGEREF _Toc133043661 \h 51
HYPERLINK \l "_Toc133043662" Exemple 12.5 Tableau à deux dimensions PAGEREF _Toc133043662 \h 51
HYPERLINK \l "_Toc133043663" Exemple 12.6 Tableau à deux dimensions PAGEREF _Toc133043663 \h 52
HYPERLINK \l "_Toc133043664" Exemple 12.7 Propriété length PAGEREF _Toc133043664 \h 52
HYPERLINK \l "_Toc133043665" Exemple 12.8 Méthodes de lobjet Array PAGEREF _Toc133043665 \h 53
HYPERLINK \l "_Toc133043666" Exemple 12.9 Exemple de manipulation de tableau PAGEREF _Toc133043666 \h 54
HYPERLINK \l "_Toc133043667" Exemple 14.1 Objet navigator PAGEREF _Toc133043667 \h 58
HYPERLINK \l "_Toc133043668" Exemple 15.1 La méthode setInterval() PAGEREF _Toc133043668 \h 61
HYPERLINK \l "_Toc133043669" Exemple 15.2 La méthode setTimeOut() PAGEREF _Toc133043669 \h 62
HYPERLINK \l "_Toc133043670" Exemple 15.3 Les objets de window PAGEREF _Toc133043670 \h 66
HYPERLINK \l "_Toc133043671" Exemple 16.1 Propriétés de lobjet Document PAGEREF _Toc133043671 \h 69
HYPERLINK \l "_Toc133043672" Exemple 16.2 Méthodes de lobjet Document PAGEREF _Toc133043672 \h 70
HYPERLINK \l "_Toc133043673" Exemple 18.1 Simplification objet PAGEREF _Toc133043673 \h 76
HYPERLINK \l "_Toc133043674" Exemple 19.1 Propriété length PAGEREF _Toc133043674 \h 77
HYPERLINK \l "_Toc133043675" Exemple 19.2 String.charAt() PAGEREF _Toc133043675 \h 77
HYPERLINK \l "_Toc133043676" Exemple 19.3 String.FromCharCode() PAGEREF _Toc133043676 \h 78
HYPERLINK \l "_Toc133043677" Exemple 19.4 String.charCodeAt() PAGEREF _Toc133043677 \h 78
HYPERLINK \l "_Toc133043678" Exemple 19.5 String.indexOf() PAGEREF _Toc133043678 \h 78
HYPERLINK \l "_Toc133043679" Exemple 19.6 String.lastIndexOf() PAGEREF _Toc133043679 \h 79
HYPERLINK \l "_Toc133043680" Exemple 19.7 String.substring() PAGEREF _Toc133043680 \h 79
HYPERLINK \l "_Toc133043681" Exemple 19.8 String.substr() PAGEREF _Toc133043681 \h 79
HYPERLINK \l "_Toc133043682" Exemple 19.9 String.slice() PAGEREF _Toc133043682 \h 80
HYPERLINK \l "_Toc133043683" Exemple 19.10 String.split() PAGEREF _Toc133043683 \h 80
HYPERLINK \l "_Toc133043684" Exemple 19.11 String.concat() PAGEREF _Toc133043684 \h 80
HYPERLINK \l "_Toc133043685" Exemple 19.12 String.toLowerCase() PAGEREF _Toc133043685 \h 81
HYPERLINK \l "_Toc133043686" Exemple 19.13 String.toUpperCase() PAGEREF _Toc133043686 \h 81
HYPERLINK \l "_Toc133043687" Exemple 19.14 String.fontColor() PAGEREF _Toc133043687 \h 81
HYPERLINK \l "_Toc133043688" Exemple 19.15 String.fontSize() PAGEREF _Toc133043688 \h 82
HYPERLINK \l "_Toc133043689" Exemple 19.16 String.fixed() PAGEREF _Toc133043689 \h 82
HYPERLINK \l "_Toc133043690" Exemple 19.17 String.bold() PAGEREF _Toc133043690 \h 82
HYPERLINK \l "_Toc133043691" Exemple 19.18 String.strike() PAGEREF _Toc133043691 \h 83
HYPERLINK \l "_Toc133043692" Exemple 19.19 String.sub() PAGEREF _Toc133043692 \h 83
HYPERLINK \l "_Toc133043693" Exemple 19.20 String.big() PAGEREF _Toc133043693 \h 83
HYPERLINK \l "_Toc133043694" Exemple 19.21 String.sup() PAGEREF _Toc133043694 \h 83
HYPERLINK \l "_Toc133043695" Exemple 19.22 String.blink() PAGEREF _Toc133043695 \h 84
HYPERLINK \l "_Toc133043696" Exemple 19.23 String.small() PAGEREF _Toc133043696 \h 84
HYPERLINK \l "_Toc133043697" Exemple 19.24 String.italics() PAGEREF _Toc133043697 \h 84
HYPERLINK \l "_Toc133043698" Exemple 19.25 String.link() PAGEREF _Toc133043698 \h 85
HYPERLINK \l "_Toc133043699" Exemple 19.26 String.anchor() PAGEREF _Toc133043699 \h 85
HYPERLINK \l "_Toc133043700" Exemple 19.27 Affectation PAGEREF _Toc133043700 \h 86
HYPERLINK \l "_Toc133043701" Exemple 19.28 Concaténation PAGEREF _Toc133043701 \h 86
HYPERLINK \l "_Toc133043702" Exemple 19.29 Concaténation PAGEREF _Toc133043702 \h 86
HYPERLINK \l "_Toc133043703" Exemple 19.30 Caractères spéciaux PAGEREF _Toc133043703 \h 87
HYPERLINK \l "_Toc133043704" Exemple 20.1 Date PAGEREF _Toc133043704 \h 90
HYPERLINK \l "_Toc133043705" Exemple 21.1 Image.src PAGEREF _Toc133043705 \h 93
HYPERLINK \l "_Toc133043706" Exemple 21.2 Image.name PAGEREF _Toc133043706 \h 93
HYPERLINK \l "_Toc133043707" Exemple 21.3 Image.id PAGEREF _Toc133043707 \h 93
HYPERLINK \l "_Toc133043708" Exemple 21.4 Image.width PAGEREF _Toc133043708 \h 94
HYPERLINK \l "_Toc133043709" Exemple 21.5 Image.height PAGEREF _Toc133043709 \h 94
HYPERLINK \l "_Toc133043710" Exemple 21.6 Image.complete PAGEREF _Toc133043710 \h 94
HYPERLINK \l "_Toc133043711" Exemple 21.7 Image.alt PAGEREF _Toc133043711 \h 95
HYPERLINK \l "_Toc133043712" Exemple 21.8 Image.fileSize PAGEREF _Toc133043712 \h 95
HYPERLINK \l "_Toc133043713" Exemple 21.9 Afficher une image PAGEREF _Toc133043713 \h 95
HYPERLINK \l "_Toc133043714" Exemple 21.10 Afficher une image à laide dun tableau PAGEREF _Toc133043714 \h 96
HYPERLINK \l "_Toc133043715" Exemple 21.11 Clic déclenchant un changement dimage PAGEREF _Toc133043715 \h 97
HYPERLINK \l "_Toc133043716" Exemple 22.1 Attribut name des frames PAGEREF _Toc133043716 \h 98
HYPERLINK \l "_Toc133043717" Exemple 22.2 Attribut target des liens PAGEREF _Toc133043717 \h 99
HYPERLINK \l "_Toc133043718" Exemple 22.3 Objet frames[] PAGEREF _Toc133043718 \h 99
HYPERLINK \l "_Toc133043719" Exemple 22.4 Objet frames[] PAGEREF _Toc133043719 \h 99
HYPERLINK \l "_Toc133043720" Exemple 22.5 Nom de frame PAGEREF _Toc133043720 \h 100
HYPERLINK \l "_Toc133043721" Exemple 22.6 Nom de frame PAGEREF _Toc133043721 \h 100
HYPERLINK \l "_Toc133043722" Exemple 22.7 Compteur sur deux frames PAGEREF _Toc133043722 \h 101
HYPERLINK \l "_Toc133043723" Exemple 22.8 Frame 1 PAGEREF _Toc133043723 \h 102
HYPERLINK \l "_Toc133043724" Exemple 22.9 Frame 2 PAGEREF _Toc133043724 \h 102
HYPERLINK \l "_Toc133043725" Exemple 23.1 Création de cookie PAGEREF _Toc133043725 \h 104
HYPERLINK \l "_Toc133043726" Exemple 23.2 Récupération de cookie PAGEREF _Toc133043726 \h 105
HYPERLINK \l "_Toc133043727" Exemple 24.1 Déclaration dune classe PAGEREF _Toc133043727 \h 107
HYPERLINK \l "_Toc133043728" Exemple 24.2 Méthode dun classe PAGEREF _Toc133043728 \h 108
HYPERLINK \l "_Toc133043729" Exemple 24.3 Méthode dun classe PAGEREF _Toc133043729 \h 108
HYPERLINK \l "_Toc133043730" Exemple 25.1 Notation objet PAGEREF _Toc133043730 \h 113
HYPERLINK \l "_Toc133043731" Exemple 25.2 Notation simplifiée PAGEREF _Toc133043731 \h 113
HYPERLINK \l "_Toc133043732" Exemple 25.3 Vérification de-mail PAGEREF _Toc133043732 \h 113
HYPERLINK \l "_Toc133043733" Exemple 25.4 RegExp.test() PAGEREF _Toc133043733 \h 114
HYPERLINK \l "_Toc133043734" Exemple 25.5 String.replace() PAGEREF _Toc133043734 \h 115
HYPERLINK \l "_Toc133043735" Exemple 25.6 Exemple concret PAGEREF _Toc133043735 \h 116
HYPERLINK \l "_Toc133043736" Exemple 26.1 Escape() PAGEREF _Toc133043736 \h 118
HYPERLINK \l "_Toc133043737" Exemple 26.2 Unescape() PAGEREF _Toc133043737 \h 118
HYPERLINK \l "_Toc133043738" Exemple 26.3 ParseFloat() PAGEREF _Toc133043738 \h 119
HYPERLINK \l "_Toc133043739" Exemple 26.4 ParseInt() PAGEREF _Toc133043739 \h 119
HYPERLINK \l "_Toc133043740" Exemple 26.5 IsFinite() PAGEREF _Toc133043740 \h 120
HYPERLINK \l "_Toc133043741" Exemple 26.6 IsNaN() PAGEREF _Toc133043741 \h 120
HYPERLINK \l "_Toc133043742" Exemple 26.7 Object.prototype PAGEREF _Toc133043742 \h 121
HYPERLINK \l "_Toc133043743" Exemple 26.8 Object.constructor PAGEREF _Toc133043743 \h 121
HYPERLINK \l "_Toc133043744" Exemple 26.9 Object.valueOf() PAGEREF _Toc133043744 \h 122
HYPERLINK \l "_Toc133043745" Exemple 26.10 Object.toString() PAGEREF _Toc133043745 \h 122
LISTE DES TABLEAUX
TOC \h \z \c "Tableau" HYPERLINK \l "_Toc132950533" TAB. 1 Mots réservés PAGEREF _Toc132950533 \h 12
HYPERLINK \l "_Toc132950534" TAB. 2 Opérateurs arithmétiques PAGEREF _Toc132950534 \h 13
HYPERLINK \l "_Toc132950535" TAB. 3 Opérateurs de comparaison PAGEREF _Toc132950535 \h 13
HYPERLINK \l "_Toc132950536" TAB. 4 Opérateurs associatifs PAGEREF _Toc132950536 \h 14
HYPERLINK \l "_Toc132950537" TAB. 5 Opérateurs logiques PAGEREF _Toc132950537 \h 14
HYPERLINK \l "_Toc132950538" TAB. 6 Opérateurs dincrémentation PAGEREF _Toc132950538 \h 15
HYPERLINK \l "_Toc132950539" TAB. 7 Structure séquentielle PAGEREF _Toc132950539 \h 20
HYPERLINK \l "_Toc132950540" TAB. 8 Expression if ... else PAGEREF _Toc132950540 \h 21
HYPERLINK \l "_Toc132950541" TAB. 9 Expression ? : PAGEREF _Toc132950541 \h 21
HYPERLINK \l "_Toc132950542" TAB. 10 Expression for PAGEREF _Toc132950542 \h 22
HYPERLINK \l "_Toc132950543" TAB. 11 Expression while PAGEREF _Toc132950543 \h 23
HYPERLINK \l "_Toc132950544" TAB. 12 Caractères spéciaux PAGEREF _Toc132950544 \h 87
HYPERLINK \l "_Toc132950545" TAB. 13 Motifs du pattern PAGEREF _Toc132950545 \h 112
INDEX
INDEX \e " " \c "2" \z "1036" 85, 92, 98
85
72
82
83
84
16, 40, 62, 98
71
81
82
29
98
98
16, 42
84
72, 92, 93, 94, 96
35
33
38
32
32
36
37
30
71
34
82
7
34
84
83
83
31
Accès au propriétés et méthodes 28
All 71
Anchors 72
Applets 72
Array 50, 74
2 dimensions 51
Accès aux éléments 51
Affectation 50
Concat() 53
Création 50
Join() 53
Length 52
Méthodes 52
Pop() 53
Propriété 52
Push() 53
Reverse() 53
Shift() 53
Slice() 53
Splice() 53
Unshift() 53
ASCII 9, 78
Balises 11, 87
Boîte de message 25
Alert 25
Confirm 26
Prompt 25
Boolean 9, 14, 74
Browser 29, 56, 59
C++ 6
Caractères spéciaux 11, 86
Casse 9
Classe 27
Commentaires 8
Concept objet 27
Méthodes 27
Propriétés 27
Constantes 9
Contraintes 6
Cookies 103
Création 103
Modification 105
Récupération 104
Suppression 106
Création dun objet 27
Constructeur 27
Date 74, 88
GetDate() 88
GetDay() 88
GetFullYear() 88
GetHours() 88
GetMilliseconds() 88
GetMinutes() 88
GetMonth() 88
GetSeconds 88
GetTime() 89
GetTimezoneOffset() 89
GetYear() 88
Méthodes 88
SetDate() 89
SetDay() 89
SetFullYear() 89
SetHours() 89
SetMilliseconds() 89
SetMinutes() 89
SetMonth() 89
SetSeconds() 89
SetTime() 89
SetYear() 89
ToGMTString() 90
ToLocaleString() 90
Décrémentation 14
Document 28, 40, 47, 55, 68, 92, 103
AlinkColor 68
BgColor 68
CaptureEvents() 69
Close() 69
Cookie 68
DefaultCharset 68
Domain 68
Evènements 70
FgColor 68
FileSize 68
GetElementById() 69, 93
GetElementsByName() 69
GetElementsByTagName() 69
GetSelection() 69
HandleEvents() 69
LastModified 68
LinkColor 68
Méthodes 69
MimeType 68
Objets 71
Open() 69
Propriétés 68
Protocol 68
Referrer 68
Title 68
URL 68
URLUnencoded 68
VlinkColor 68
Write() 11, 69, 86, 87
Editeur 6
Escape() 118
Evènements 42, 59, 68
Gestionnaire 42
OnAbort 44
OnBlur 45
OnChange 46
OnClick 42
OnError 43
OnFocus 45
OnLoad 43
OnMouseOut 44
OnMouseOver 44
OnReset 46
OnSelect 46
OnSubmit 46
OnUnLoad 43
Event 66
AltKey 66
Button 66
Expressions régulières 110
Définition 110
Motif 110, 111
Option 110, 111
Pattern 110, 111
Utilisation 114
External 66, 72
AddFavorite() 66
False 9
Fichier 7
Fonctions 16
Appel 16
Déclaration 16
Définition 16
En-tête 16
Paramètres 17
Retour de valeur 18
Fonctions du langage 118
Forms 71
Elements[] 71
Formulaires 29
Button 35
Checkbox 33
Form 29
Hidden 38
Ligne de texte 30
Liste déroulante 34
Method 29
Objet 39
Password 31
Radios 32
Reset 36
Select 34
Submit 37
Textarea 31
Zone de texte 31
Frame 63, 98
Frames 63, 99
Historique 64
History 64
Back() 64
Forward() 64
Go() 64
Length 64
HTML 11, 29, 42, 87, 92
HTTP 104
HTTPS 104
Image 74, 92
Alt 95
Complete 94
FileSize 95
Height 94
Name 93
Propriétés 92
Src 93
Width 94
Images 72, 92, 93, 96
Inconvénient 6
Incorporation 7
Incrémentation 14
Internet 6
IsFinite() 119
IsNan() 120
Java 6
Javascript 6
Langage 6
Layers 71
Location 64
Hash 65
Host 65
HostName 65
Href 65
PathName 65
Port 65
Protocol 65
Reload() 65
Replace() 65
Search 65
Math 74
Abs() 75
Acos() 76
Asin() 76
Atan() 76
Ceil() 75
Cos() 76
Exp() 76
Floor() 75
Fonctions diverses 75
Fonctions trigonométriques 76
LN10 75
LN2 75
Log() 76
LOG10E 75
LOG2E 75
Max() 75
Méthodes 75
Min() 75
Pow() 75
Random() 75
Round() 75
Sin() 76
Sqrt() 75
Tan() 76
Méthodes 16, 27
Mots réservés 11
Navigateur 6, 55, 56
Navigator 55, 56
AppCodeName 56
AppMinorVersion 56
AppName 56
AppVersion 56
BrowserLanguage 56
CookieEnabled 56
CpuClass 56
JavaEnabled() 57
Language 57
Objets 57
OnLine 56
Platform 56
SystemLanguage 56
TaintEnabled() 57
UserAgent 56
UserLanguage 56
Notion objet 27, 39
Null 9
Object 120
Constructor 121
Prototype 120
ToString() 122
ValueOf() 121
Objets du navigateur 55
Objets du noyau Javascript 74
Opener 64
Opérateurs 13
Arithmétiques 13
Associatifs 14
Dincrémentation 15
De comparaison 13
Logiques 14
Parent 63, 99
ParseFloat() 119
ParseInt() 119
PHP 6
Plugins 57, 72
Description 57
Filename 57
Length 57
Name 57
Suffixes 57
Type 57
RegExp 110, 113
Compile() 114
Exec() 114
Méthodes 114
Test() 114
Return 18
Screen 65
AvailHeight 65
AvailWidth 65
ColorDepth 65
Height 65
Width 65
Script 7
Simplification objet 76
String 74, 77, 104, 110, 114
Affectation 85
Anchors() 85
Big() 83
Blink() 84
Bold() 82
Caractères spéciaux 86
CharAt() 77
CharCodeAt() 78
Concat() 80
Concaténation 80, 86
Fixed() 82
FontColor() 81
FontSize() 82
FromCharCode() 78
IndexOf() 78
Italics() 84
LastIndexOf() 79
Length 77
Link() 85
Manipulations 10, 85
Match() 114, 115
Méthodes 77
Propriété 77
Replace() 114
Search() 114
Slice() 80
Small() 84
Split() 80, 115
Strike() 82
Sub() 83
Substr() 79
Substring() 79
Sup() 83
ToLowerCase() 81
ToUpperCase() 81
Structures algorithmiques 20
Interruption de boucle 23
Instruction break 23
Instruction continue 23
Structure séquentielle 20
Structures conditionnelles 20
Expression ? : 21
Expression if
else 20
Structures itératives 22
Expression for 22, 51
Expression while 22
Tableau 50
This 28
Top 64
Transtypage automatique 10
True 9
Typeof() 9
Types de variables 9
Boolean 9
Function 9
Number 9
Object 9
String 9
Undefined 10
Unescape() 118
URL 64, 68
Variables 9
Affectation 10
Explicite 10
Implicite 10
Déclaration 10
Portée 12, 18
Window 25, 55, 59, 68, 99
Alert() 60
Blur() 60
ClearInterval() 60
ClearTimeout() 60
Close() 60
Closed 59
Confirm() 60
DefaultStatus 59
Evènements 62
Focus() 60
Home() 60
Méthodes 59
MoveBy() 60
MoveTo() 60
Name 59
Objets 63
Open() 60
Print() 60
Prompt() 60
Propriétés 59
ResizeBy() 60
ResizeTo() 60
ScreenLeft 59
ScreenTop 59
ScrollBy() 60
ScrollTo() 60
SetInterval() 60
SetTimeout() 60
Status 59
Stop() 60
StopTimeout() 60
LIENS
Programmation web
HYPERLINK "http://www.moteurprog.com" www.moteurprog.com Site regroupant de nombreux tutoriaux ainsi quun annuaire de sites de programmation. HYPERLINK "http://www.developpez.com" www.developpez.com Site de programmation en général. De nombreux cours et tutoriaux sur les langages web. HYPERLINK "http://www.toutenligne.com" www.toutenligne.com Possède plusieurs tutoriaux sur la programmation Javascript, HTML, PHP, CSS
Javascript
HYPERLINK "http://www.toutjavascript.com" www.toutjavascript.comTrès bon site sur le Javascript, regroupant tutoriaux, scripts et forums. HYPERLINK "http://www.commentcamarche.net" www.commentcamarche.netEncyclopédie informatique libre. Possède un bon cours Javascript. HYPERLINK "http://www.javascriptfr.com" www.javascriptfr.com Site comprenant beaucoup de script et un forum.
REMERCIEMENTS XE "Historique"
Lauteur tient à remercier un certain nombre de personnes et organismes qui lont aidé dans sa tâche.
Je remercie tout particulièrement Philippe Jossa et M. Allardin qui mont donné cette passion de la programmation. Merci aussi à Arnaud Guillaume et Dimitri Masson pour mavoir aidé à progresser dans cette voie. Merci à Jérémie Garceries pour ses conseils avisés. Enfin, merci à tout le club informatique du Lycée du Grésivaudan de Meylan (Isère), tout particulièrement la 1°S9 et la TS7 pour leur aide précieuse.
Je remercie tout autant les divers sites que jai consultés, qui sont cités dans la section 29 BIBLIOGRAPHIE.
Merci aussi à Packard Bell, constructeur de mon PC, à Aiwa, constructeur de ma chaîne Hi-fi, à Wanadoo, pour ma connexion Internet, à EDF, pour leur électricité, à Microsoft, pour son Windows XP et pour le logiciel Word, à ES-Computing, pour le logiciel Editplus 2, à Adobe, pour le logiciel de création de fichier PDF et enfin à Nullsoft, pour le logiciel Winamp.
Merci à tous les artistes qui mont accompagné pendant la rédaction de ce document : Archive, Beach Boys, Cranberries, Hoobastank, Led Zeppelin, Limp Bizkit, Muse, Nickleback, Nirvana, Placebo, Police, Queen, The Rasmus, REM, Scorpions, Sublime, Supertramp, Téléphone, The White Stripes et tant dautres
HISTORIQUE
23/06/2004Version 1.0.0Première version du cours. 01/07/2004Version 1.1.0Ajout de la partie Historique, quelques corrections.10/07/2004Version 1.2.0Nouveau look du document et nombreux changement grammaticaux.12/07/2004Version 1.3.0Ajouts des sections Table des illustration, Tables des Exemples, et Index.13/07/2004Version 1.3.1Ajout de la section Liens et nouvelles corrections.15/04/2006Version 2.0.0Changements esthétiques. 16/04/2006Version 2.0.1Mises à jour sommaires, corrections orthographiques.17/04/2006Version 2.1.0Améliorations des exemples et exercices.
La version la plus récente de ce document peut être demandé à ladresse e-mail suivante : HYPERLINK "mailto:michael.muraz@insa-lyon.fr" michael.muraz@insa-lyon.fr
Pour plus de précisions, voir le site HYPERLINK "http://www.commentcamarche.net" http://www.commentcamarche.net.
Ne fonctionne quavec Nestcape Navigator6.X et Internet Explorer 6.X
Edité par Macromédia
Edité par ES-Computing, à télécharger sur HYPERLINK "http://www.telecharger.com" http://www.telecharger.com.
Variable ne pouvant avoir que deux valeur : true (1) et false (0).
Cest-à-dire quelle « donne » le type de la variable. Ce point sera abordé ultérieurement.
Voir pour cela la section concernant les structures de contrôle.
Il sagit là dun OU non exclusif.
Ces fonctions particulières seront lobjet dune sous partie de la section abordant la notion objet.
Voir la section concernant les structures de données.
Ce chapitre, excepté pour quelques expressions, est valable pour de nombreux langages, notamment le C++.
Langages de programmation semblables au HTML, mais permettant une interface serveur.
Pour les étourdis, il sagit du chapitre 8. NOTION OBJET
Cette option est disponible dans les menus de votre navigateur. Pour Internet Explorer, ce la se situe dans le menu Outils | Options Internet, onglet Sécurité, dans la rubrique Personnaliser le niveau.
Il convient de préciser que ce terme nest en aucun cas péjoratif. Il signifie simplement quil est nécessaire de bien maîtriser toutes les sections précédentes avant de se lancer dans la programmation objet.
Même si cela semble contradictoire, ceci est important. On ne peut faire des égalités de fonctions.
Elles nont pas été introduites précédemment du fait de leur inutilité en dehors des expressions régulières.
LE JAVASCRIPT Cours Complet - Version 2.0.0
© Michaël MURAZ PAGE 133/ NUMPAGES 134
top
frames[]
parent
window
plugins []
navigator
opener
history
location
external
screen
event
document
document
all / layers
frames[]
images[]
anchors[]
applets[]
plugins[]
links[]
forms []
elements []
