Introduction au
JavaScriptAu commencement... était Netscape, dans une version dorénavant perdue dans les oubliettes du Web : la 2.0, sortie en 1996. Cette version intègre pour la première fois le support JavaScript.
Face à une telle réussite, les octets de Microsoft ne font qu'un tour et, quelques mois plus tard, la firme de Redmond propose un support sensiblement équivalent : JScript. Or, sur le Web, qui dit équivalent ne dit pas forcément compatible...
A vrai dire, une sacrée galère pour tout Webmestre qui se respecte. Car le but du jeu, quand on développe un site, c'est de le rendre accessible à tous. Pour mettre tout le monde d'accord, l'ECMA, un organisme de standardisation suisse, pond l'ECMAScript en 1997.
Bon, inutile de rentrer dans les détails. Mais sachez que nos deux loustics doivent désormais se référer à ce modèle pour développer de nouvelles fonctionnalités dans leur langage : le JavaScript 1.3 et son équivalent Microsoft, le JScript 5.0.
Quant à nous, on se débrouillera toujours pour vous offrir un code compatible. C'est promis !
JavaScript, c'est du texte... Nul besoin de compilateurs ou d'autres outils d'initiés. Un simple éditeur de texte (NotePad, par exemple) permet de modifier une page HTML et d'y glisser des instructions JavaScript. Tout simplement.
Sachez cependant qu'il existe des éditeurs WYSIWYG capables de générer ce code automatiquement. Citons, en toute subjectivité, WebExpert et JavaScript Editor. Mais il en existe encore bien d'autres à découvrir dans la banque d'outils que nous vous proposons en téléchargement. A vous de voir...
Quoi qu'il en soit, mode WYSIWYG ou pas, l'intégration du code JavaScript dans une page Web exige, de votre part, une bonne maîtrise du langage HTML. N'hésitez pas à (re)lire nos cahiers HTML si nécessaire.
Si vous connaissez déjà un langage de programmation (Basic, Visual Basic, Java...), la syntaxe de JavaScript vous paraîtra probablement enfantine. Mais si des bases générales de programmation constituent un atout supplémentaire, elles ne sont pas indispensables. Vous pourrez les acquérir tout au long de nos ateliers, au travers d'exemples concrets commentés.
Et si le coeur vous en dit, allez faire un tour sur les sites de mbolo et de dliard qui proposent des cours JavaScript complets et bien conçus.
Les scripts JavaScript s'intègrent en toute simplicité dans le code HTML. Concrètement, Il suffit de placer ce nouveau dialecte entre les balises <SCRIPT> et </SCRIPT> que l'on positionnera entre les balises HEAD de la page. Le squelette de votre page HTML ressemblera alors à ceci :
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript1.3"> // Script JavaScript </SCRIPT> </HEAD> <BODY> </HTML>
Info : Notez que l'attribut LANGUAGE de la balise SCRIPT est facultatif, puisque
JavaScript est le langage de script par défaut des navigateurs.
Autre possibilité : certaines commandes JavaScript s'inscriront, sous forme d'attributs, à l'intérieur même d'une balise HTML.
Enfin, sachez qu'un programme JavaScript peut également être stocké dans un fichier texte à part reconnaissable par son extension : .js. Il suffit alors de faire référence à son intitulé à partir d'une page Web pour exécuter le script. Nous aurons l'occasion d'y revenir...
Pour une compatibilité maximale, préférez la version 1.1 de JavaScript, supportée par les versions 3 de Netscape et Internet Explorer. Pour vous faire une idée plus précises, consultez consultez les statistiques de BrowserWatch sur l'utilisation des navigateurs.
A présent, utilisons la méthode write pour générer le texte directement à l'intérieur de la page plutôt que dans une boîte de dialogue :
<SCRIPT>
document.write('Bonsoir');
</SCRIPT>
JavaScript permet d'afficher toutes sortes de boîtes de dialogue. L'instruction confirm permet de générer une boîte de confirmation proposant un message et deux boutons (OK et Annuler). La commande prompt , quant à elle, fait apparaître une boîte de dialogue avec un message et une zone de saisie texte. A découvrir dans de futurs cahiers...
Introduction au
JavaScript| Qu'est-ce que le Javascript ? |
Le Javascript est une extension du langage HTML qui est incluse dans le code. Ce langage est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes.
Les navigateurs et le Javascript:
|
Il ne faut pas confondre le JavaScript et le Java. En effet contrairement au langage Java,
le code est directement écrit dans la page HTML, c'est un langage peu évolué
qui ne permet aucune confidentialité au niveau des codes (ceux-ci sont effectivement visibles).
D'autre part l'applet Java (le programme) doit être compilé à chaque chargement
de la page, d'où un important ralentissement pour les applets Java contrairement au JavaScript.
|
| A quoi ressemble un script? |
Un script est une portion de code qui vient s'insérer dans une page HTML. Le code du script
n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises
(ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage
JavaScript.
Les balises annonçant un code Javascript sont les suivantes:
<SCRIPT language="Javascript">
Placez ici le code de votre script
</SCRIPT>
| Masquage du script pour les anciens browsers |
Ce code est ainsi invisible du point de vue du navigateur c'est-à-dire que ce dernier n'affiche
pas dans sa fenêtre le code Javascript.
Toutefois, d'anciens navigateurs, créés avant l'arrivée
du Javascript, ne connaissent pas ces balises et donc les ignorent...
Le code de votre Javascript risque donc de s'afficher sur votre belle page web et venir
gâcher votre travail. L'astuce consiste donc à ajouter des balises de commentaires
à l'intérieur même des balises de script. Ainsi les anciens navigateurs
ignoreront tout simplement l'intégralité du script, tandis que les navigateurs
récents l'interprèteront (comme il se le doit) comme du Javascript!
Voici ce que donne le script une fois "masqué" pour les anciens navigateurs:
<SCRIPT language="Javascript">
<!--
Placez ici le code de votre script
// -->
</SCRIPT>
| Ajouter des commentaires dans votre code |
Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans un de ses scripts
 |
Il ne faut pas confondre les balises de commentaires du langage HTML (destinées à masquer le script pour certains browsers) et les caractères de commentaires Javascript (permettant de documenter son script)! |
Pour écrire des commentaires, Javascript utilise les conventions utilisées en lange C/C++
| |
Il faut veiller à ne pas embriquer des commentaires, au risque de provoquer une erreur lors de l'exécution du code! |
| Un exemple de Javascript |
Comme généralement dans les tutoriels de Javascript on va faire afficher un boite
de dialogue suite au chargement d'une page HTML. Dans ce cas le script est totalement inutile voire
ennuyeux pour vos visiteurs... Cet exemple montre ce que l'abus de Javascript peut donner... Il faudra
apprendre à se servir du Javascript avec modération!
Voici la page HTML correspondante:
<HTML>
<HEAD>
<TITLE> Voici une page contenant du Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
alert("Voici un message d alerte!");
// -->
</SCRIPT>
</BODY>
</HTML>
Cliquez ici pour voir le résultat d'un tel script lors du chargement de la page ci-dessus:
Insérer un
script dans une page HTML| A quel emplacement insérer le Javascript dans votre page HTML |
Il y a plusieurs façon d'inclure du JavaScript dans une page HTML:
| Dans la balise script |
Le code Javascript peut être inséré où vous le désirez dans votre page Web, vous devez toutefois veiller à ce que le navigateur est entièrement chargé votre script avant d'exécuter une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent impatients) peuvent très bien interrompre le chargement d'une page, auquel cas si l'appel d'une fonction se situe avant la fonction dans votre page il est probable que cela génèrera une erreur si cette fonction n'a pas été chargée.
Ainsi, on place généralement le maximum d'éléments du script dans la balise d'en-tête (ce sont les éléments située entre les balises <HEAD> et </HEAD>). Les évènements Javascript seront quant à eux placés dans le corps de la page (entre les balises <BODY> et </BODY>) comme attribut d'une commande HTML...
<SCRIPT language="Javascript">
<!--
Placez ici le code de votre script
// -->
</SCRIPT>
L'argument de la balise <SCRIPT> décrit le langage utilisé.
Il peut être "JavaScript" "JavaScript1.1" "JavaScript1.2".
On peut ainsi (en passant un argument différent de "JavaScript") utiliser d'autres langages de programmation que celui-ci (par exemple le VbScript).
Pour utiliser différentes versions de JavaScript tout en conservant une certaine compatibilité, il suffit de déclarer plusieurs balises SCRIPT ayant chacune comme paramètre la version du JavaScript correspondante.
| Dans un fichier externe |
Il est possible de mettre les codes de
JavaScript en annexe dans un fichier (à partir de Netscape 3.0 uniquement).
Le code à insérer est le suivant:
<SCRIPT LANGUAGE=Javascript SRC="url/fichier.js"> </SCRIPT>
Oû url/fichier.js correspond au chemin d'accès au fichier contenant le code en JavaScript, sachant que si celui-ci n'existe pas le navigateur exécutera le code inséré entre les 2 balises.
| Grâce aux évènements |
On appelle évènement une action de l'utilisateur, comme le clic d'un des boutons de la souris. Le code dans le cas du résultat d'un événement s'écrit:
<balise eventHandler="code Javascript à insérer">
eventHandler représente
le nom de l'événement.
La notion d'objet
en JavaScript| Pourquoi parle-t'on d'objets? |
Le but de cette section n'a pas pour ambition de vous faire connaître la programmation orientée objet (POO) mais de vous donner une idée de ce qu'est un objet, concept nécessaire à la création de scripts Javascript.
Le Javascript traite les éléments qui s'affichent dans votre navigateur comme des objets, c'est-à-dire des éléments
Imaginez maintenant que l'on veuille changer
la couleur du nid (dans l'arbre) pour le peindre en vert, il suffirait de taper
une commande du genre:
jardin.arbre.branche.nid.couleur= vert;
C'est donc ainsi que l'on représente les objets en Javascript, à la seule différence que ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre navigateur...
| Les objets du navigateur |
Javascript divise la page du navigateur en objets, afin de vous permettre d'accèder à n'importe lequel d'entre-eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés.
On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu!
Le bouton checkbox a entre autre une propriété checked, qui retourne la valeur 1 si le bouton est coché, 0 dans le cas contraire. Cliquez sur le bouton checkbox pour comprendre ce qu'il est possible de faire grâce à ces propriétés.
Le champ de texte a par exemple comme propriétés:
Les variables
| Le concept de variable |
Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme.
En Javascript, les noms de variables peuvent être aussi long que l'on désire, mais doivent répondre à certains critères:
|
| |
Les noms de variables sont sensibles
à la casse (le Javascript fait la différence entre un nom
en majuscule et un nom en minuscules), il faut donc veiller à utiliser
des noms comportant la même casse! |
| La déclaration de variables |
Le Javascript étant très souple au niveau de l'écriture (à double-tranchant car il laisse passer des erreurs...), la déclaration des variables peut se faire de deux façons:
| Portée (visibilité) des variables |
Selon l'endroit où on déclare une variable, celle-ci pourra être accessible (visible) de partout dans le script ou bien que dans une portion confinée du code, on parle de "portée" d'une variable.
Lorsqu'une variable est déclarée sans le mot clé var, c'est-à-dire de façon implicite, elle est accessible de partout dans le script (n'importe quelle fonction du script peut faire appel à cette variable). On parle alors de variable globale
Lorsque l'on déclare de façon explicite une variable en javascript (en précédant sa déclaration avec le mot var), sa portée dépend de l'endroit où elle est déclarée.
| Les types de données dans les variables |
En Javascript il n'y a pas besoin de déclarer le type de variables que l'on utilise, contrairement à des langages évolués tels que le langage C ou le Java pour lesquels il faut préciser s'il s'agit d'entier (int), de nombre à virgule flottante (float), de caractères (char), ...
En fait le Javascript n'autorise la manipulation que de 4 types de données:
| Nombre entier |
Un nombre entier est un nombre sans virgule qui peut être exprimé dans différentes bases:
| Nombre à virgule (float) |
Un nombre à virgule flottante est un nombre à virgule, il peut toutefois être représenté de différentes façons:
| Chaîne de caractères (string) |
Une chaîne de caractère est, comme son nom l'indique, une suite de caractères. On la représente par la suite de caractères encadrée par des guillemets simples (') ou doubles ("), sachant que les deux types de guillemets ne peuvent être mélangés pour une même chaîne de caractères, ce qui signifie que les guillemets dans une chaîne de caractères existent par paire.
Il existe des caractères spéciaux à utiliser dans les chaînes pour simuler d'une part des caractères non visuels ou pour éviter au navigateur de confondre les caractères d'une chaîne avec ceux du script, ces caractères sont précédés d'un antislash (\):
Il faudra écrire dans le code Javascript:
Titre = "Qu'y a-t'il dans \"c:\\windows\\\"";
ou
Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"';
| Booléens (booleans) |
Un booléen est une variable spécial servant à évaluer une condition, il peut donc avoir deux valeurs:
Les chaines de
caractères| Les particularités de l'objet String |
string est un mot anglais qui signifie "chaîne", il s'agit en fait de chaîne de caractères. C'est donc une suite de caractères, on la représente généralement par un ensemble de caractères encadré par des guillemets. La longueur maximale d'une telle chaîne est à priori comprise entre 50 et 80 caractères.
L'objet String est un objet qui contient un certain nombre de propriétés et de méthodes permettant la manipulation de chaînes de caractères.
| Les propriétés de l'objet String |
L'objet string a une seule propriété
: la propriété length qui permet de retourner la longueur
d'une chaîne de caractères. Cette propriété est très
utile car lorsque l'on traite une chaîne de caractères on aime
généralement savoir à quel moment s'arrêter.
La syntaxe de la propriété length est la suivante:
x = nom_de_la_chaine.length;
x = ('chaine de caracteres').length;
On peut donc directement passer la chaîne
de caractères comme objet, en délimitant la chaîne par des
apostrophes et en plaçant le tout entre parenthèses.
La méthode traditionnelle consistant à appliquer une propriété
à une variable de type string fonctionne bien évidemment
aussi.
| Les méthodes de l'objet String |
Les méthodes de l'objet string permettent de récupérer une portion d'une chaîne de caractère, ou bien de la modifier.
Pour comprendre les méthodes suivantes,
il est tout d'abord nécessaire de comprendre comment est stockée
une chaîne de caractères:
Il s'agit en fait d'une sorte de tableau constitué de n caractères
(n est donc le nombre de caractères), on note 0 la position du
premier caractère (celui à l'extrême gauche), puis on les
compte de gauche à droite en incrémentant ce nombre:
|
Comme on peut le voir, une chaîne ayant n caractère aura son dernier caractère en position n-1 (ici, pour une chaîne de 18 caractère le dernier élément est à la position 17...).
Le tableau suivant décrit les méthodes de l'objet string.
|
| D'autres methodes |
|
| Exemples d'utilisation des méthodes de l'objet String |
| Méthode charAt() |
Il existe deux syntaxe pour la méthode charAt()
Voici quelques exemples:
Chaine = 'Comment ça marche?'
| Méthode indexOf() |
La méthode indexOf() permet de rechercher (de gauche à droite) la position d'une sous-chaîne dans une chaîne de caractères.
Chaine = "chaine
de caractères";
Sous-Chaine = "sous-chaîne de caractères";
Resultat = x.indexOf(position);
La position indiquée en argument
permet de déterminer la position du caractère à partir
duquel la recherche est effectué. L'argument position doit être
compris entre 0 et n-1. Si cet argument est omis la recherche débutera
à la position 0.
Lorsque la recherche est infructueuse, la méthode indexOf() renvoie
la valeur -1.
Voici quelques exemples:
Chaine = 'Comment ça marche?'
Sous_Chaine = 'mar'
| Méthode lastIndexOf() |
La méthode lastIndexOf() permet de rechercher (de droite à gauche) la position d'une sous-chaîne dans une chaîne de caractères.
Chaine = "chaine
de caractères";
Sous-Chaine = "sous-chaîne de caractères";
Resultat = x.lastIndexOf(position);
La position indiquée en argument
permet de déterminer la position du caractère à partir
duquel la recherche est effectué (vers la gauche pour cette méthode).
L'argument position doit être compris entre 0 et n-1. Si
cet argument est omis la recherche débutera à partir de la fin
de la chaîne.
Lorsque la recherche est infructueuse, la méthode lastIndexOf()
renvoie la valeur -1.
Voici quelques exemples:
Chaine = 'Comment ça marche?'
Sous_Chaine = 'mar'
| Méthode substring() |
La méthode substring() permet de récupérer une sous-chaîne dans une chaîne de caractères en précisant en paramètres les positions des caractères entre lesquels la sous-chaîne doit être récupérée.
Chaine = "chaine
de caractères";
Resultat = x.substring(position1, position2);
Les positions indiquées en argument permettent de déterminer les position des caractère entre lesquels la sous-chaîne doit être récupérée. Les arguments position1 et position2 doivent être compris entre 0 et n-1.
Voici quelques exemples:
Chaine = 'Comment ça marche?'
| Méthodes toLowerCase() et toUpperCase() |
La méthode toLowerCase() permet de convertir toutes les lettres d'une chaîne en minuscule, les autres caractères sont laissés tels quels.
Voici quelques exemples:
Chaine = 'Comment ça Marche?'
Voici quelques exemples:
Chaine = 'Comment ça Marche?'
Les événementsLes évènements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est possible d'associer des fonctions, des méthodes à des événements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur, ...
Ce sont les gestionnaires d'événements
qui permettent d'associer une action à un événement. La
syntaxe d'un gestionnaire d'événement est la suivante:
onEvenement="Action_Javascript_ou_Fonction();"
Les gestionnaires d'événements sont associés à des objets, et leur code s'insèrent dans la balise de ceux-ci...
| Liste des événements |
|
| Objets auxquels on peut associer des événements |
Chaque événement ne peut pas être associé à n'importe quel objet... il est évident qu'un événement OnChange ne peut pas s'appliquer à un lien hypertexte...
|
| Quelques exemples d'événements |
Le mieux pour apprendre à se servir
des événements est de s'entraîner à écrire
de petits codes...
Pour vous inspirer, pensez à regarder les fichiers sources de certaines
pages web, mais pensez toujours à respecter les auteurs des codes en
ne faisant pas un copier-coller de leurs scripts sans leur accord (il est généralement
de bon ton de citer la source du javascript que l'on récupère...).
| Ouverture d'une boite de dialogue lors d'un click |
Le code correspondant à une boîte
de dialogue est très simple:
window.alert("Votre Texte");
Il s'agit donc de le mettre dans la balise d'un lien hypertexte:
Script:
<html>
<head>
<title>Ouverture d'une boite de dialogue lors d'un click</head>
</head>
<body>
<a href="javascript:;" onClick="window.alert('Message d\'alerte a utiliser
avec moderation');">Cliquez ici!</a>
</body>
</html>
Analyse du script:
Aperçu de l'effet du script:
Cliquez
ici!
| Modification d'une image lors du survol d'un lien par le pointeur de la souris |
Il peut être agréable de jouer avec le gestionnaire OnMouseOver pour créer un menu interactif qui se modifie au passage de la souris. On peut même ajouter le gestionnaire OnMouseOut pour rétablir l'image originale lorsque le curseur quitte l'image (Rappel: Son utilisation est limitée aux navigateurs supportant javascript 1.1 et supérieur!).
Script:
<html>
<head>
<title>Modification d'une image lors du passage de la souris</head>
</head>
<body>
<a href="javascript:;" onMouseOver="document.Img_1.src='image2.gif';" onMouseOut="document.Img_1.src='image1.gif';">
<img name="img_1" src="image1.gif"> </a>
</body>
</html>
Analyse du script:
Aperçu de l'effet du script:
Les opérateursLes opérateurs sont des symboles
qui permettent de manipuler des variables, c'est-à-dire effectuer des
opérations, les évaluer, ...
On distingue plusieurs types d'opérateurs:
| Les opérateurs de calcul |
Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable
|
| Les opérateurs d'assignation |
Ces opérateurs permettent de simplifier
des opérations telles que ajouter une valeur dans une variable et
stocker le résultat dans la variable. Une telle opérations
s'écrirait habituellement de la façon suivante par exemple: x=x+2
Avec les opérateurs d'assignation il est possible d'écrire cette
opération sous la forme suivante: x+=2
Ainsi, si la valeur de x était 7 avant opération, elle sera de
9 après...
Les autres opérateurs du même type sont les suivants:
|
| Les opérateurs d'incrémentation |
Ce type d'opérateur permet de facilement augmenter ou diminuer d'une unité une variable. Ces opérateurs sont très utiles pour des structures telles que des boucles, qui ont besoin d'un compteur (variable qui augmente de un en un).
Un opérateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou bien x+=1
|
| Les opérateurs de comparaison |
|
| Les opérateurs logiques (booléens) |
Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies:
|
| Les priorités |
Lorsque l'on associe plusieurs opérateurs, il faut que le navigateur sache dans quel ordre les traiter, voici donc dans l'ordre décroissant les priorités de tous les opérateurs:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Les structures
conditionnellesOn appelle structure conditonnelle les instructions qui permettent de tester si une condition est vraie ou non, ce qui permet de donner de l'interactivité à vos scripts par exemple.
| L'instruction if |
L'instruction if est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe différente...). Elle permet d'exécuter une série d'instruction si jamais une condition est réalisée.
La syntaxe de cette expression est la
suivante:
if (condition réalisé) {
liste d'instructions
}
Remarques:
| L'instruction if ... else |
L'instruction if dans sa forme
basique ne permet de tester qu'une condition, or la plupart du temps on aimerait
pouvoir choisir les instructions à exécuter en cas de non réalisation
de la condition...
L'expression if ... else permet d'exécuter une autre série
d'instruction en cas de non-réalisation de la condition.
La syntaxe de cette expression est la
suivante:
if (condition réalisé) {
liste d'instructions
}
else {
autre série d'instructions
}
| une façon plus courte de faire un test |
Il est possible de faire un test avec
une structure beaucoup moins lourde grâce à la structure suivante:
(condition) ? instruction si vrai : instruction si faux
Remarques:
| Les boucles |
Les boucles sont des structures qui permettent
d'exécuter plusieurs fois la même série d'instructions jusqu'à
ce qu'une condition ne soit plus réalisée...
La façon la plus commune de faire une boucle, est de créer un
compteur (une variable qui s'incrémente, c'est-à-dire qui augmente
de 1 à chaque tour de boucle) et de faire arrêter la boucle lorsque
le compteur dépasse une certaine valeur.
| La boucle for |
L'instruction for permet d'exécuter plusieurs fois la même série d'instructions: c'est une boucle!
Dans sa syntaxe, il suffit de préciser le nom de la variable qui sert de compteur (et éventuellement sa valeur de départ, la condition sur la variable pour laquelle la boucle s'arrête (basiquement une condition qui teste si la valeur du compteur dépasse une limite) et enfin une instruction qui incrémente (ou décrémente) le compteur.
La syntaxe de cette expression est la
suivante:
for (compteur; condition; modification du compteur) {
liste d'instructions
}
Par exemple:
for (i=1; i<6; i++) {
Alert(i)
}
Cette boucle affiche 5 fois la valeur de i, c'est-à-dire 1,2,3,4,5
Elle commence à i=1, vérifie que i est bien inférieur à
6, etc... jusqu'à atteindre la valeur i=6, pour laquelle la condition
ne sera plus réalisée, la boucle s'interrompra et le programme
continuera son cours.
| |
|
| L'instruction while |
L'instruction while représente un autre moyen d'exécuter plusieurs fois la même série d'instructions.
La syntaxe de cette expression est la
suivante:
while (condition réalisée) {
liste d'instructions
}
Cette instruction exécute la liste d'instructions tant que (while est un mot anglais qui signifie tant que) la condition est réalisée.
| |
La condition de sortie pouvant être n'importe quelle structure conditionnelle, les risques de boucle infinie (boucle dont la condition est toujours vraie) sont grands, c'est-à-dire qu'elle risque de provoquer un plantage du navigateur! |
| Saut inconditionnel |
Il peut être nécessaire de faire sauter à la boucle une ou plusieurs valeurs sans pour autant mettre fin à celle-ci.
La syntaxe de cette expression est "continue;" (cette instruction se place dans une boucle!), on l'associe généralement à une structure conditionnelle, sinon les lignes situées entre cette instruction et la fin de la boucle seraient obsolètes.
Exemple: Imaginons que l'on veuille imprimer
pour x allant de 1 à 10 la valeur de 1/(x-7) ... il est évident
que pour x=7 il y aura une erreur. Heureusement, grâce à l'instruction
continue il est possible de traiter cette valeur à part puis de
continuer la boucle!
x=1
while (x<=10) {
if (x == 7) {
Alert('division par 0');
continue;
}
a = 1/(x-7);
Alert(x);
x++
}
Il y avait une erreur dans ce script...
peut-être ne l'avez-vous pas vue:
Lorsque x est égal à 7, le compteur ne s'incrémente plus,
il reste constamment à la valeur 7, il aurait fallu écrire:
x=1
while (x<=10) {
if (x == 7) {
Alert('division par 0');
x++;
continue;
}
a = 1/(x-7);
Alert(x);
x++
}
| Arrêt inconditionnel |
A l'inverse, il peut être voulu d'arrêter prématurément la boucle, pour une autre conditon que celle précisé dans l'en-tète de la boucle. L'instruction break permet d'arrêter une boucle (for ou bien while). Il s'agit, tout comme continue, de l'associer à une structure conditionnelle, sans laquelle la boucle ne ferait jamais plus d'un tour!
Dans l'exemple de tout à l'heure,
par exemple si l'on ne savait pas à quel moment le dénominateur
(x-7) s'annule (bon...OK...pour des équations plus compliquées
par exemple) il serait possible de faire arrêter la boucle en cas d'annulation
du dénominateur, pour éviter une division par zéro!
for (x=1; x<=10; x++) {
a = x-7;
if (a == 0) {
Alert('division par 0');
break;
}
Alert(1/a);
}
Les fonctions On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instruction par simple appel de la fonction dans le corps du programme principal. Cette notion de sous-programme est généralement appelée fonction dans les langages autres que le Javascript (touefois leur syntaxe est généralement différente...). Les fonctions et les permettent d'exécuter dans plusieurs parties du programme une série d'instruction, cela permet une simplicité du code et donc une taille de programme minimale. D'autre part, une fonction peut faire appel à elle-même, on parle alors de fonction récursive (il ne faut pas oublier de mettre une condition de sortie au risque sinon de ne pas pouvoir arrêter le programme...).
Javascript contient des fonctions prédéfinies qui peuvent s'appliquer pour un ou plusieurs types d'objets spécifiques, on appelle ces fonctions des méthodes.
| La déclaration d'une fonction |
Avant d'être utilisée, une fonction doit être définie car pour l'appeler dans le corps du programme il faut que le navigateur la connaisse, c'est-à-dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient. La définition d'une fonction s'appelle "déclaration". La déclaration d'une fonction se fait grâce au mot clé function selon la syntaxe suivante:
function Nom_De_La_Fonction(argument1,
argument2, ...) {
liste d'instructions
}
Remarques:
| |
|
| Appel de fonction |
Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom (une fois de plus en respectant la casse) suivie d'une parenthèse ouverte (éventuellement des arguments) puis d'une parenthèse fermée:
Nom_De_La_Fonction();
Remarques:
| |
Veillez toujours à ce qu'une fonction soit déclarée avant d'étre appelée, sachant que le navigateur traite la page de haut en bas (Pour éviter des erreurs de ce type on déclare généralement les fonctions dans des balises SCRIPT situées dans l'en-tête de la page, c'est-à-dire entre les balises <SCRIPT> et </SCRIPT>) |
Grâce au gestionnaire d'évènement
onLoad (à placer dans la balise BODY) il est possible d'exécuter
une fonction au chargement de la page, comme par exemple l'initialisation des
variables pour votre script, et/ou le test du navigateur pour savoir si celui-ci
est apte à faire fonctionner le script.
Il s'utilise de la manière suivante:
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--
function Chargement() {
alert('Bienvenue sur le site');
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Chargement();" >
Javascript qui ne sert absolument à rien si ce n'est déranger
vos visiteurs...
</BODY>
</HTML>
| Les paramètres d'une fonction |
Il est possible de passer des paramètres
à une fonction, c'est-à-dire lui fournir une valeur ou le nom
d'une variable afin que la fonction puisse effectuer des opérations sur
ces paramètres ou bien grâce à ces paramètres.
Lorsque vous passez plusieurs paramètres à une fonction il faut
les séparer par des virgules, aussi bien dans la déclaration que
dans l'appel et il faudra veiller à bien passer le bon nombre de paramètres
lors de l'appel au risque sinon de créer une erreur dans votre Javascript...
Imaginons que l'on veuille créer
une page Web qui affiche une boîte de dialogue (les boîtes de dialogues
sont à éviter dans vos pages car elles sont énervantes,
mais c'est toutefois une manière simple d'apprendre le Javascript) qui
affiche un texte différent selon le lien sur lequel on appuie.
La méthode de base consiste à faire une fonction pour chaque texte
à afficher:
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--
function Affiche1() {
alert('Texte 1');
}
function Affiche2() {
alert('Texte2');
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Chargement();" >
<A href="javascript:;" onClick="Affiche1();">Texte1</A>
<A href="javascript:;" onClick="Affiche2();">Texte2</A>
</BODY>
</HTML>
Ce qui donne ceci:
Texte1
Texte2
Il existe toutefois une methode plus "classe" qui consiste à créer une fonction qui a comme paramètre le texte à afficher:
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--
function Affiche(Texte) {
alert(Texte);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Chargement();" >
<A href="javascript:;" onClick="Affiche('Texte1');">Texte1</A>
<A href="javascript:;" onClick="Affiche('Texte2');">Texte2</A>
</BODY>
</HTML>
Ce qui donne ceci:
Texte1
Texte2
Résultat: Aucune différence visuellement mais vous n'avez plus qu'une seule fonction qui peut vous afficher n'importe quel texte...
| Travailler sur des variables dans les fonctions |
Lorsque vous manipulerez des variables dans des fonctions, il vous arrivera de constater que vous avez beau modifier la variable dans la fonction celle-ci retrouve sa valeur d'origine dès que l'on sort de la fonction...
Cela est du à la portée des variables, c'est-à-dire si elles ont été définies comme variables globales ou locales.
| Le mot-clé this |
Lorsque vous faîtes appel à une fonction à partir d'un objet, par exemple un formulaire, le mot clé this fait référence à l'objet en cours et vous évite d'avoir à définir l'objet en tapant window.objet1.objet2... ainsi lorsque l'on passe l'objet en cours en paramètre d'une fonction, il suffit de taper nom_de_la_fonction(this) pour pouvoir manipuler cet objet à partir de la fonction.
Pour manipuler les propriétés de l'objet il suffira de taper this.propriete (où propriete représente bien sûr le nom de la propriété).
| Définir des objets avec les fonctions |
Les navigateurs ont leurs propres objets
avec leur propriétés respectives. Il est toutefois possible de
créer ses propres objets avec les propriétés qu'on leur
définit.
Imaginons que l'on veuille par exemple créer un objet arbre avec ses
propriétés:
Il est possible de créer l'objet Arbre en créant une fonction dont le nom est Arbre et qui définit les propriétés de l'objet en cours grâce au mot-clé this, en passant en paramètre chacune des propriétés:
function Arbre(Type,
Taille, Age) {
Arbre.Type = Type;
Arbre.Taille = Taille;
Arbre.Age = Age;
}
Grâce au mot-clé new,
il va être possible de créer des instances de l'objet Arbre
(c'est-à-dire des objets possédant les propriétés
de l'objet Arbre):
Arbre1 = new Arbre("peuplier", 14, 20)
On peut ainsi créer autant d'instances que l'on désire...
Il est de plus possible d'ajouter un objet existant en tant que propriété d'un autre objet. Imaginons que vous créiez un objet proprietaire:
function Proprietaire(Nom,
Prenom) {
Proprietaire.Nom = Nom;
Proprietaire.Prenom = Prenom;
}
Définissons maintenant l'objet Arbre comme suit:
function Arbre(Type,
Taille, Age, Proprietaire) {
Arbre.Type = Type;
Arbre.Taille = Taille;
Arbre.Age = Age;
Arbre.Proprietaire = Proprietaire;
}
Il est alors possible de trouver le nom
du propriétaire d'un arbre:
Arbre.Proprietaire.Nom
Ainsi que de le modifier si jamais le propriétaire change:
Arbre1.Proprietaire.Nom = 'Dupont';
Arbre1.Proprietaire.Prenom = 'René';
Les méthodesUne méthode est une fonction associée à un objet, c'est-à-dire une action que l'on peut faire exécuter à un objet. Les méthodes des objets du navigateur sont des fonctions définies à l'avance par les normes HTML, on ne peut donc pas les modifier, il est toutefois possible de créer une méthode personnelle pour un objet que l'on a créé soi-même. Prenons par exemple une page HTML, elle est composée d'un objet appelé document. L'objet document a par exemple la méthode write() qui lui est associée et qui permet de modifier le contenu de la page HTML en affichant du texte. Une méthode s'appelle un peu comme une propriété, c'est-à-dire de la manière suivante:
window.objet1.objet2.methode()
Dans le cas de la méthode write(), l'appel se fait comme suit:
window.document.write()
| La méthode write |
La méthode write() de l'objet document permet de modifier de façon dynamique le contenu d'une page HTML, on peut l'utiliser de différentes façons:
| La méthode writeIn |
La méthode writeIn fonctionne exactement comme la méthode write à la seule différence qu'elle ajoute un retour chariot à la fin de la chaîne. Or un retour chariot (en HTML) est ignoré par le navigateur (Rappel: un retour à la ligne se fait avec la balise <BR>). Cette méthode n'a donc un avantage que lorsqu'elle est utilisée entre les balises <PRE> et </PRE> qui formattent le texte comme dans un fichier texte (et donc qui prend en compte le caractère de retour à la ligne).
| Définir une méthode pour un objet |
Il est possible de définir une méthode pour un type d'objet que l'on a créé en incluant une fonction en tant que propriété d'un objet. Reprenons l'exemple de l'arbre:
On définit tout d'abord un propriétaire:
function Proprietaire(Nom, Prenom) {
Proprietaire.Nom = Nom;
Proprietaire.Prenom = Prenom;
}
Puis on crée une fonction qui affiche
le nom du propriétaire d'un arbre ainsi que quelques caractéristiques
de celui-ci:
function AfficheInfos() {
alert(this.Proprietaire.Prenom + this.Proprietaire.Nom + 'possede un' + this.Type);
}
Il suffit maintenant de définir l'objet Arbre comme suit:
function Arbre(Type,
Taille, Age, Proprietaire, AfficheInfos) {
Arbre.Type = Type;
Arbre.Taille = Taille;
Arbre.Age = Age;
Arbre.Proprietaire = Proprietaire;
Arbre.AfficheInfos = AfficheInfos;
}
Le fait de taper
Arbre1.AfficheInfos aura pour effet de produire
un message d'alerte du type:
René Dupont possède un tilleul
Car la méthode AfficheInfos() est appliquée à l'objet
Arbre1
Les objets du
navigateurLorsque vous ouvrez une page Web, le navigateur crée des objets prédéfinis correspondant à la page Web, à l'état du navigateur, et peuvent donner beaucoup d'informations qui vous seront utiles.
Les objets de base du navigateur sont les suivants:
Ces objets sont largement dépendant du contenu de la page. En effet, mis à part des objets tels que navigator qui sont figés pour un utilisateur donné, le contenu des autres objets variera suivant le contenu de la page, car suivant la page les objets présents dans celles-ci (sous-objets des objets décrits précédemment) sont différents. voyons voir comment ceux-ci sont organisés
| Les objets du navigateur sont classés hiérarchiquement |
Les objets du navigateur sont classés dans une hiérarchie qui décrit la page affichée à l'écran, et qui permet d'accéder à n'importe quel objet grâce à une désignation dépendant de la hiérarchie (on part du sommet puis on descend l'arborescence).
Dans cette hiérarchie, les descendants
d'un objet sont des propriétés de ces objets mais peuvent aussi
être des objets qui contiennent eux même des propriétés...
Voyons voir à quoi ressemble cette hérarchie:
| Niveau1 | Niveau2 | Niveau3 | Commentaire |
| navigator | Informations sur le browser utilisé | ||
| window | Gestion de la fenêtre d'affichage | ||
| parent, frames, self, top | Désignation de la sous-fenêtre | ||
| location | Informations sur l'emplacement de la page | ||
| history | Accès à l'historique (sites précédemment visités) | ||
| document | Informations sur le contenu de la fenêtre (éléments qui composent la page) | ||
| images | Référence des images présentes dans la page | ||
| forms | Référence des formulaires présents dans la page | ||
| links | Référence des liens présents dans la page | ||
| anchors | Référence des ancrages présents dans la page |
| Comment accéder à un objet? |
Pour accéder à un objet du navigateur, il faut parcourir la hiérarchie du navigateur, en partant du sommet (l'objet window), puis en parcourant tous les maillons jusqu'à atteindre l'objet désiré. La syntaxe est window.objet1.objet2.objet3.objet_vise (ici il y a trois objets intermédiaire objet1 objet2 objet3 mais ce nombre peut varier de 0 à un très grand nombre d'objets, suivant l'embrication de vos objets dans la page...).
Pour accéder modifier une propriété de l'objet visé il suffit de rajouter un point, puis le nom de la propriété. Certaines propriétés sont modifiables, c'est-à-dire que dynamiquement on va pouvoir modifier un élément (du texte, une image, ...). Certaines propriétés sont par contre en lecture seule, c'est-à-dire qu'elles permettent uniquement de récupérer des informations mais qu'on ne peut pas les modifier...
L'objet window
L'objet window est l'objet par exellence dans Javascript, car il est le parent
de chaque obet qui compose la page web, il contient donc:
| Les propriétés de l'objet window |
| propriété | description | lecture seule |
| defaultstatus | Il s'agit du message qui s'affiche par défaut dans la barre d'état du navigateur | non, modifiable à tout moment |
| frames | Il s'agit d'un tableau qui contient les cadres présents dans la fenêtre | Tous les éléments de frames sont en lecture seule |
| length | nombre de cadres (nombre d'éléments du tableau frames | Lecture seule |
| name | nom de la fenêtre dans laquelle on se trouve | Lecture seule |
| parent | Il s'agit de la fenêtre qui englobe celle dans laquelle on se trouve (si il y en a une..) | Lecture seule, contient des propriétés |
| self | Synonyme de la fenêtre actuelle (redondance ou précision?) | Lecture seule, contient des propriétés |
| status | Il s'agit d'un message temporaire qui s'affiche dans la barre d'état du navigateur suite à un événement | non, modifiable à tout moment, vous devez retournez la valeur true pour l'utiliser avec onMouseOver |
| top | Il s'agit de la fenêtre de plus haut niveau, celle qui contient tous les cadres (frames) | Lecture seule, contient des propriétés |
| window | Il s'agit de la fenêtre actuelle... | Lecture seule, contient des propriétés |
Les propriétés window, self, frames, top et parent permettent de naviguer dans le système de sous-fenêtres, appelées frames.
| Les méthodes de l'objet window |
L'objet window possède des méthodes relatives à l'ouverture et à la fermeture des fenêtres.
| Les méthodes alert(), confirm() et prompt() |
Les méthodes alert(), confirm() et prompt() sont des méthodes qui font apparaître une boîte de dialogue, elles sont expliquées en détail dans le chapitre Boîte de dialogue.
| Les méthodes open(), et close() |
Les méthodes open() et close() sont bien évidemment destinées à permettre l'ouverture et la fermeture de fenêtres. Toutefois la syntaxe de la méthode open() est longue car elle admet un nombre important de paramètres:
La méthode open() permet d'ouvrir une fenêtre, voici sa syntaxe:
window.open("URL","nom_de_la_fenetre","options_de_la_fenetre");
URL désigne l'url de la page qui sera affichée dans la nouvelle fenêtre, c'est-à-dire l'emplacement physique de celle-ci.
Les options de la fenêtre sont les suivantes:
| option | description |
| directory = yes/no | Affiche ou non les boutons de navigation |
| location = yes/no | Affiche ou non la barre d'adresse |
| menubar = yes/no | Affiche ou non la barre de menu (fichier, edition, ...) |
| resizable = yes/no | Définit si la taille de la fenêtre est modifiable ou non |
| scrollbars = yes/no | Affiche ou non les ascenceurs (barres de défilement) |
| status = yes/no | Affiche ou non la barre d'état |
| toolbar = yes/no | Affiche ou non la barre d'outils |
| width = largeur (en pixels) | Définit la largeur |
| height = hauteur (en pixels) | Définit la hauteur |
Ainsi, il est possible d'utiliser cette méthode avec n'importe quel gestionnaire d'événement, directement dans le code à exécuter ou bien dans une fonction.
|
|
|
Chacune des fenêtres doit cependant être fermée, il faut donc se servir de la méthode close() qui permet de fermer une fenêtre.
La méthode close() requiert le nom de la fenêtre comme argument, il suffit donc de créer un bouton (image, hypertexte, ou bouton de formulaire) qui permettra de fermer cette fenêtre.
Pour un lien hypertexte, le code sera:
<A href="javascript:self.close('nom_de_la_fenetre_');">Cliquez
ici pour fermer la fenêtre</A>
Pour un bouton (image), le code sera:
<A href="javascript:self.close('nom_de_la_fenetre_');"><img
src="nom_de_l_image"></A>
Il est bien évidemment possible
d'utiliser cette procédure avec tous les gestionnaires
d'événement, en utilisant par exemple une syntaxe proche de
celle-ci:
<A href="javascript:;" onMouseOver="self.close('nom_de_la_fenetre_');"
><img src="nom_de_l_image"></A>
Les boites de
dialogueUne boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et qui permet
Ce type de boîte est à utiliser avec parcimonie car elle oblige une action de la part de l'utilisateur, et est à terme très énervante... Les boîtes de dialogues sont toutefois un moyen simple de débugger (repérer les erreurs), en affichant à un point donné une fenêtre contenant la valeur d'une variable.
Javascript en propose trois différentes
dont l'utilisation se rapporte pour chacune à une de celles décrites
ci-dessus. Ce sont des méthodes de l'objet window.
Ces boites de dialogue ont une mention Javascript, par exemple "Javascript
user prompt" pour permettre de savoir à l'utilisateur qu'il
s'agit d'une boite d'invite de la page en cours. En effet certains webmasters
peu scrupuleux pourraient faire croire qu'il s'agit d'une boite windows et récupérer
le mot de passe (Suite à une erreur du fournisseur d'accès
veuillez entrer votre login et votre mot de passe)...
| La méthode alert() |
La méthode alert() permet
d'afficher dans une boîte toute simple composée d'une fenêtre
et d'un bouton OK le texte qu'on lui fournit en paramètre. Dès
que cette boîte est affichée, l'utilisateur n'a d'autre alternative
que de cliquer sur le bouton OK.
Son unique paramètre est une chaîne de caractère, on peut
donc lui fournir directement cette chaîne de caractères entre guillemets,
lui fournir une variable dont il affichera le contenu, ou bien mêler les
deux en concaténant les chaines grâce à l'opérateur
+.
Voici sa syntaxe:
alert(nom_de_la_variable);
alert('Chaîne de caractères');
alert('Chaîne de caractères' + nom_de_la_variable);
La chaîne de caractère peut
(et doit dans certains cas) contenir des caractères marqués d'un
antislash (\). Par exemple, si vous voulez écrire:
Message d'alerte:
Au feu!!
Il faudra écrire le script suivant:
alert('Message d\'alerte \nAu feu!!');
| La méthode confirm() |
La méthode confirm() est similaire à la méthode alert(), si ce n'est qu'elle permet un choix entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la valeur true. Elle renvoie false dans le cas contraire...
Elle admet comme alert() un seul paramètre:
une chaîne de caractères...
Sa syntaxe est:
confirm('Chaîne de caractères');
confirm() est souvent utilisé dans une structure conditionnelle :
if(confirm('Voulez-vous voir Mickey ?'))
document.location.href='http://www.disney.fr'
| La méthode prompt() |
La méthode prompt est un peu plus évoluée que les deux précédentes puisqu'elle fournit un moyen simple de récupérer une information provenant de l'utilisateur, on parle alors de boîte d'invite. La méthode prompt() requiert deux arguments:
Sa syntaxe est donc la suivante:
Sa syntaxe est:
var reponse = prompt('Posez ici votre question','chaîne par défaut');
Cette boîte d'invite retourne la valeur de la chaîne saisie par l'utilisateur, elle retourne la valeur null si jamais aucun texte n'est saisi...
L' objet navigator| Les particularités de l'objet navigator |
L'objet navigator est un objet qui permet de récupérer des informations sur le navigateur qu'utilise le visiteur. Cela paraît totalement inutile à première vue, touefois, comme vous le savez sûrement, il existe de grandes différences entre différentes versions d'un même navigateur (intègration de nouvelles technologies), ainsi qu'entre des navigateurs de types différents (les deux antagonistes sont généralement Netscape Navigator © et Microsoft Internet Explorer qui d'une part n'interprètent pas toutes les balises HTML et les instructions Javascript de la même manière, et qui, d'autre part, possède parfois des balises HTML propriètaires, c'est-à-dire qui leur sont propres...).
Toutes les propriétés de l'objet navigator sont en lecture seule, elles servent uniquement à récupérer des informations et non à les modifier (il serait idiot de vouloir modifier les informations d'un navigateur...).
| Les propriétés de l'objet navigator |
Les propriétés de l'objet navigator sont peu nombreuses, elles permettent en fait de retourner des portions de l'information sur votre navigateur qui est en fait une chaîne de caractères.
| Propriété | Description | Pour votre navigateur |
| navigator.appCodeName | retourne le code du navigateur. Un navigateur a pour nom de code Mozilla (je ne sais pas pourquoi), cette information semble donc inutile | |
| navigator.appName | retourne le nom du navigateur (la plupart du temps la marque). Cette propriété est utile pour différencier les navigateurs de Netscape et de Microsoft) | |
| navigator.appVersion | retourne la version du navigateur.
Cette propriété prend la forme suivante: Numéro de version( plateforme (système d'exploitation), nationalité) Elle est utile pour connaître le système d'exploitation de l'utilisateur, mais surtout, associée avec la propriété navigator.appName elle permet de connaître les fonctionnlités que supporte le navigateur de votre visiteur. |
|
| navigator.userAgent | retourne la chaîne de caractère qui comprend toutes les informations. Les propriétés ci-dessus offrent un moyen pratique de récupérer une partie de cette information (cette chaîne étant de longueur variable, il ne serait pas évident d'en récupérer une portion sans les autres propriétés...) |
| Utiliser efficacement ces propriétés |
Les navigateurs ne supportent pas tous le Javascript de la même façon, ainsi, suivant les instructions Javascript que l'on utilisera (suivant qu'il s'agit de Javascript 1.0, 1.1, ou 1.2) il faudra exécuter des instructions différentes. Par respect pour vos visiteurs il est généralement bon de mettre en début de script une fonction qui permet de déterminer la version du navigateur (et/ou sa marque) et exécuter les instructions appropriées en fonction du résultat.
Voici une grille avec les navigateurs, les valeurs de propriétés et quelques fonctionalités associées à ceux-ci:
| Navigateur | Version | navigator.appName | navigator.appVersion | Javascript |
| Netscape Navigator | 2 | Netscape | 2.0 (Win95; I) | 1.0 |
| Netscape Navigator | 3 | Netscape | 3.xx (Win95; I) | 1.1 |
| Netscape Communicator | 4 | Netscape | 4.xx (Win95; I) | 1.1 |
| Microsoft Internet Explorer | 3 | Microsoft Internet Explorer | 2.0 (compatible; MSIE 3.0x; Windows 95) | 1.0 |
| Microsoft Internet Explorer | 4 | Microsoft Internet Explorer | 4.0x (compatible; MSIE 4.0x; Windows 95) | 1.2 |
| Microsoft Internet Explorer | 5 | Microsoft Internet Explorer | 5.xx (compatible; MSIE 5.0x; Windows 95) | 1.2 |
| Exemple de script |
Il est parfois bon de pouvoir exécuter un ensemble d'instructions différent selon que le navigateur utilisé est Netscape Navigator ou Microsoft Internet Explorer, voici un exemple de petit script permettant la distinction:
Nom = navigator.appName;
if (Nom == 'Netscape') {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou
supérieur
}
if (Nom == 'Microsoft Internet Explorer') {
placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer
4 ou supérieur
}
Une méthode améliorée si jamais on a souvent besoin de faire le test de navigateur, car l'accès à l'objet navigator n'est effectué qu'une seule fois. Ensuite deux variables booléenne sont utilisées, et le test consiste uniquement à regarder si la variable contient 1 au 0 et le navigateur n'a pas besoin de comparer la chaine nom à chaque test de navigateur...
Nom = navigator.appName;
ns = (Nom == 'Netscape') ? 1:0
ie = (Nom == 'Microsoft Internet Explorer') ? 1:0
if (ns) {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou
supérieur
}
if (ie) {
placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer
4 ou supérieur
}
Imaginons que l'on veuille maintenant afficher du DHTML (HTML dynamique, c'est-à-dire dont les objets peuvent bouger et être modifiés à loisir...), il faut alors vérifier que les versions des navigateurs sont supérieures à 4 (seuls Netscape Navigator 4 (ou supérieur) et Microsoft Internet Explorer 4 (ou supérieur) le supportent.
Voici le script permettant de vérifier que les versions sont supérieures à 4:
Nom = navigator.appName;
Version = navigator.appVer;
ns4 = (Nom == 'Netscape' && Version >= 4 ) ? 1:0
ie4 = (Nom == 'Microsoft Internet Explorer' && Version >= 4 ) ? 1:0
if (ns4) {
placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou
supérieur
}
if (ie4) {
placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer
4 ou supérieur
}
L'objet history
| Les particularités de l'objet history |
L'objet history est une popriété de l'objet document. Il contient l'historique du navigateur, c'est-à-dire l'ensemble des URL (adresses des pages) visitées par l'utilisateur. Ces adresses sont accessibles par le navigateur en cliquant sur les boutons suivants et précédent. L'objet history offre des objets et des méthodes qui permettent de naviguer dans cette liste d'adresse directement à partir de la page en cours.
| Les propriétés et les méthodes de l'objet history |
Les propriétés et les méthodes de l'objet history sont peu nombreuses, elles peuvent néanmoins être très utile pour aider à la navigation.
L'objet date
| Les particularités de l'objet Date |
L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser.
La syntaxe pour créer un objet-date peut être une des suivantes:
Les dates en Javascript sont stockées de la même manière que dans le langage Java, c'est-à-dire qu'il s'agit du nombre de secondes depuis le 1er janvier 1970. Ainsi, toute date antérieure au 1er janvier 1970 fournira une valeur erronée. Si jamais on veut manipuler des dates antérieures il s'agit de créer vous-même un objet date spécifique...
| Les méthodes de l'objet Date |
La date est stockée dans une variable
sous la forme d'une chaîne qui contient le jour, le mois, l'année,
l'heure, les minutes, et les secondes. Il est donc difficile d'accéder
à un seul élément d'un objet date, étant
donné que chacun des éléments peut avoir une taille variable.
Heureusement, les méthodes de l'objet Date fournissent un moyen
simple d'accéder à un seul élément, ou bien de le
modifier.
Leur syntaxe est la suivante:
Objet_Date.Methode()
| Connaître la date |
Les méthodes dont le nom commence par le radical get (mot anglais qui signifie récupérer) permettent de récupérer une valeur:
| Méthode | Description | Type de valeurs retournée |
| getDate() | Permet de récupérer la valeur du jour du mois | L'objet retourné est un entier (entre 1 et 31) qui correspond au jour du mois: |
| getDay() | Permet de récupérer la valeur du jour de la semaine pour la date spécifiée | L'objet retourné
est un entier qui correspond au jour de la semaine:
|
| getHour() | Permet de récupérer la valeur de l'heure | L'objet retourné est un entier (entre 0 et 23) qui correspond à l'heure |
| getMinutes() | Permet de récupérer la valeur des minutes | L'objet retourné est un entier (entre 0 et 59) qui correspond aux minutes |
| getMonth() | Permet de récupérer le numéro du mois | L'objet retourné
est un entier (entre 0 et 11) qui correspond au mois:
|
| getTime() | Permet de récupérer le nombre de secondes depuis le 1er janvier 1970 | L'objet retourné est un entier. Cette méthode est très utile pour passer d'une date à une autre, soustraire ou ajouter deux dates, ... |
| getTimezoneOffset() | Retourne la différence entre l'heure locale et l'heure GMT (Greenwich Mean Time) | L'objet retourné est un entier, il représente le nombre de minutes de décalage |
| Modifier le format de la date |
Les deux méthodes suivantes ne permettent de travailler que sur l'heure actuelle (objet Date()) leur syntaxe est donc figée:
| Méthode | Description | Type de valeurs retournée |
| toGMTString() | Permet de convertir une date en une chaîne de caractères au format GMT | L'objet retourné
est une chaîne de caractère du type: Wed, 28 Jul 1999 15:15:20 GMT |
| toLocaleString() | Permet de convertir une date en une chaîne de carctères au format local | L'objet retourné
est une chaîne de caractère dont la syntaxe dépend du
système, par exemple: 28/07/99 15:15:20 |
| Modifier la date |
Les méthodes dont le nom commence par le radical set (mot anglais qui signifie règler) permettent de modifier une valeur:
| Méthode | Description | Type de valeur en paramètre |
| setDate(X) | Permet de fixer la valeur du jour du mois | Le paramètre est un entier (entre 1 et 31) qui correspond au jour du mois |
| setDay(X) | Permet de fixer la valeur du jour de la semaine | Le paramètre
est un entier qui correspond au jour de la semaine:
|
| setHour(X) | Permet de fixer la valeur de l'heure | Le paramètre est un entier (entre 0 et 23) qui correspond à l'heure |
| setMinutes(X) | Permet de fixer la valeur des minutes | Le paramètre est un entier (entre 0 et 59) qui correspond aux minutes |
| setMonth(X) | Permet de fixer le numéro du mois | Le paramètre
est un entier (entre 0 et 11) qui correspond au mois:
|
| setTime(X) | Permet d'assigner la date | Le paramètre est un entier représentant le nombre de secondes depuis le 1er janvier 1970 |
L'objet math
| Les particularités de l'objet Math |
L'objet Math est, comme vous l'imaginez, un objet qui a de nombreuses méthodes et propriétés permettant de manipuler des nombres et qui contient des fonctions mathématiques courantes
| Les méthodes et propriétés standards de l'objet Math |
Le tableau suivant décrit les méthodes de l'objet Math.
| Méthode | description | Exemple |
| abs() | Retourne la valeur absolue d'un nombre, il renvoie donc le nombre s'il est positif, son opposé (positif) s'il est négatif |
|
| ceil() | Retourne l'entier supérieur ou égal à la valeur donnée en paramètre |
|
| floor() | Retourne l'entier inférieur ou égal à la valeur donnée en paramètre |
|
| round() | Arrondit à l'entier le plus proche la valeur donnée en paramètre |
|
| max(Nombre1, Nombre2) | Retourne le plus grand des deux entiers donnés en paramètre |
|
| min(Nombre1, Nombre2) | Retourne le plus petit des deux entiers donnés en paramètre |
|
| min(Nombre1, Nombre2) | Retourne le plus petit des deux entiers donnés en paramètre |
|
| pow(Valeur1, Valeur2) | Retourne le nombre Valeur1 à la puissance Valeur2 |
|
| random() | Retourne un nombre aléatoire compris entre 0 et 1 |
|
| sqrt(Valeur) | Retourne la racine carrée du nombre passé en paramètre |
|
| Logarithmes et exponentielle |
| Méthode | description |
| Math.E | Propriété qui retourne le nombre d'Euler (environ 2.718) |
| Math.exp(valeur) | Retourne l'exponentielle de la valeur entrée en paramètre |
| Math.LN2 | Retourne le logarithme népérien de 2 |
| Math.LN10 | Retourne le logarithme népérien de 10 |
| Math.log(valeur) | Retourne le logarithme de la valeur entrée en paramètre |
| Math.LOG2E | Propriété qui retourne la valeur du logarithme du nombre d'Euler en base 2 |
| Math.SQRT1_2 | Propriété qui retourne la valeur de 1 sur racine de 2 (0.707) |
| Math.SQRT2 | Racine de 2 (1.414) |
| Trigonométrie |
| Méthode | description |
| Math.PI | Retourne la valeur du nombre PI, soit environ 3.1415927 |
| Math.sin(valeur) | Retourne le sinus de la valeur entrée en paramètre (doit être donnée en radians) |
| Math.asin(valeur) | Retourne l'arcsinus de la valeur entrée en paramètre (doit être donnée en radians) |
| Math.cos(valeur) | Retourne le cosinus de la valeur entrée en paramètre (doit être donnée en radians) |
| Math.acos(valeur) | Retourne l'arccosinus de la valeur entrée en paramètre (doit être donnée en radians) |
| Math.tan(valeur) | Retourne la tangente de la valeur entrée en paramètre (doit être donnée en radians) |
| Math.atan(valeur) | Retourne l'arctangente de la valeur entrée en paramètre (doit être donnée en radians) |
