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:
| Navigateur | Version de Javascript supportée |
| Netscape 2 | JavaScript 1.0 |
| Netscape 3 | JavaScript 1.1 |
| Netscape 4 | Javascript 1.2 |
| MSIE 3.0 | Javascript 1.0 |
| MSIE 4.0 | Javascript 1.2 |
| MSIE 5.0 | Javascript 1.3 |
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.
| Javascript | Java |
| Langage interprété | Langage compilé |
| Code intégré au HTML | Code (applet) à part du document HTML, appelé à partir de la page |
| Langage peu typé | Langage fortement typé (déclaration du type de variable) |
| Liaisons dynamiques: les références des objets sont vérifiées au chargement | Liaisons statiques: Les objets doivent exister au chargement (compilation) |
| Accessibilité du code | Confidentialité du code |
| Sûr: ne peut pas écrire sur le disque dur | Sûr: ne peut pas écrire sur le disque dur |
Le Javascript est case sensitive (en français sensible à la casse), c'est-à-dire qu'il fait une différence entre un nom de variable contenant ou non des majuscules.
Ainsi la fonction bonjour(); n'est pas la même fonction que Bonjour();.
Enfin, comme en langage C, chaque instruction se termine par un point-virgule (;).
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>
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>
Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans un de ses scripts
• d'une part pour s'y retrouver lorsque, plusieurs mois après, l'on voudra revoir son script
• d'autre part par esprit d'échange pour permettre à vos visiteurs curieux de comprendre votre script (cela n'est pas toujours désiré )
(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++
• Pour mettre en commentaires tout une ligne on utilise le double slash:
// Tous les caractères derrière le // sont ignorés
• Pour mettre en commentaire une partie du texte (éventuellement sur plusieurs lignes) on utilise le /* et le */: /* Toutes les lignes comprises entre ces repères
Sont ignorées par l'interpréteur de code */
Il faut veiller à ne pas embriquer des commentaires, au risque deprovoquer une erreur lors de l'exécution du code!
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> |
Il y a plusieurs façon d'inclure du JavaScript dans une page HTML:
• Grâce à la balise <SCRIPT>
• En mettant le code dans un fichier
• Grâce aux événements
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.
<SCRIPT language="Javascript">
<!--
Placez ici le code de votre 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:
Oû 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.
On appelle évènementune 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.
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
• classés selon une hiérarchie pour pouvoir les désigner précisément auxquels on associe des propriétés
Cette notion semble floue pour l'instant mais voyons voir cela sur un exemple concret:
• jardin o arbre
§ branche
§ feuille § nid
§ largeur: 20
§ couleur: jaune
§ hauteur: 4
§ tronc
§ racine o salade o balançoire
§ trapèze
§ corde § nid
§ largeur: 15
§ couleur: marron
§ hauteur: 6
Le nid sur l'arbre est donc désigné comme suit:
Contrairement au nid situé sur la balançoire: balanç
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:
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
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!
• L'objet le plus grand est l'objet fenêtre (les objets en javascript ont leur dénomination en anglais, donc dans le cas présent window)
• Dans la fenêtre s'affiche une page, c'est l'objet document
• Cette page peut contenir plusieurs objets, comme des formulaires, des images,
Pour accéder à un objet il faut donc partir de l'objet le plus grand (l'objet window pour descendre à l'objet que l'on veut atteindre.
Prenez par exemple le bouton (appelé checkbox) et le champ de texte suivants:
Essai du javascript
• Le bouton checkbox (auquel on a donné le nom checkbox) est repéré par le code suivant:
Le champ de texte (auquel on a donné le nom champ_text) est repéré par le code suivant:
Le champ de texte a par exemple comme propriétés:
• name: le nom du champ de texte
• value: le texte contenu dans le champ
• size: la taille du champ de texte
Par exemple, l'appui sur les boutons suivants permet de modifier la propriété suivante: window.document.forms[0].text.value (c'est-à-dire le texte associé au champ de texte que l'on a nommé champ_text)
Essai du javascript
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:
• un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un "_"
• un nom de variables peut comporter des lettres, des chiffres et les caractères _ et & (les espaces ne sont pas autorisés!)
• Les noms de variables ne peuvent pas être les noms suivants (qui sont des noms réservés): o abstract o boolean break byte o case catch char class o default do double o else extends o false final finally float o goto o if, implements, import, in, instanceof, int, interface o long o native, new, null o package, private, protected, public o return o short, static, super, switch, synchronized o this, throw, throws, transient, true, try o var, void o while, with
| Nom de variable correct | Nom de variable incorrect | Raison | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Variable | Nom de Variable | comporte des espaces | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Nom_De_Variable | 123Nom_De_Variable | commence par un chiffre | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| nom_de_variable |
| caractère spécial @ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| nom_de_variable_123 | Nom-de-variable | signe - interdit | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| _707 | transient | nom réservé La déclaration de variablesLe 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: • soit de façon explicite, en faisant précéder la variable du mot clé var qui permet d'indiquer de façon rigoureuse qu'il s'agit d'une variable: var chaine= "bonjour" • soit de façon implicite, en écrivant directement le nom de la variable suivie du caractère = et de la valeur à affecter: chaine= "bonjour" Le navigateur détermine seul qu'il s'agit d'une déclaration de variable. Même si une déclaration implicite est tout à fair reconnue par le navigateur, il est tout de même plus rigoureux de déclarer les variables de façon explicite avec le mot var Portée (visibilité) des variablesSelon 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. • Une variable déclarée au début du script, c'est-à-dire avant toute fonction sera globale, on pourra alors les utiliser à partir de n'importe quel endroit dans le script • Une variable déclarée par le mot clé var dans une fonction aura une portée limitée à cette seule fonction, c'est-à-dire qu'elle est inutilisable ailleurs, on parle alors de variable locale En fait le Javascript n'autorise la manipulation que de 4 types de données: • des nombres: entiers ou à virgules • des chaînes de caractères (string): une suite de caractères • des booléens: des variables à deux états permettant de vérifier une condition o true: si le résultat est vrai o false: lors d'un résultat faux • des variables de type null: un mot caractèristique pour indiquer qu'il n'y a pas de données Nombre entierUn nombre entier est un nombre sans virgule qui peut être exprimé dans différentes bases: • : L'entier est représenté par une suite de chiffre unitaires (de 0 à 9) ne devant pas commencer par le chiffre 0 • : L'entier est représenté par une suite d'unités (de 0 à 9 ou de A à F (ou a à f)) devant commencer par 0x ou 0X • : L'entier est représenté par une suite d'unités (incluant uniquement des chiffres de 0 à 7) devant commencer par 0 Nombre à virgule (float)Un nombre à virgule flottante est un nombre à virgule, il peut toutefois être représenté de différentes façons: • un entier décimal: 895 • un nombre comportant un point (et non une virgule): 845.32 • une fraction: 27/11 • un nombre exponentiel, c'est-à-dire un nombre (éventuellement à virgule) suivi de la lettre e (ou E), puis d'un entier correspondant à la puissance de 10 (signé ou non, c'est-à-dire précédé d'un + ou d'un -) 2.75e-2 35.8E+10 .25e-2 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. • \b : touche de suppression • \f : formulaire plein • \n : retour à la ligne • \r : appui sur la touche ENTREE • \t : tabulation • \" : guillemets doubles • \' : guillemets simples • \\ : caractère antislash Ainsi, si on veut stocker la chaine suivante dans la variable Titre: Qu'y a-t'il dans "c:\windows\" 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: • vrai: représenté par 1 • faux: représenté par 0 Qu'appelle-t'on un événement? Les é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
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
Le mieux pour apprendre à se servir des événements est de s'entraîner à écrire de petits codes Ouverture d'une boite de dialogue lors d'un clickLe 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="#" onClick="window.alert('Message d\'alerte a utiliser avec moderation');return(false)">Cliquez ici!</a> </body> </html> Analyse du script: • le gestionnaire d'événement onClick a été inséré dans la balise de lien hypertexte <A href • le seul but du script est de faire apparaître une boîte de dialogue, ainsi on ne désire pas que le lien nous entraîne sur une autre page, il faut alors insérer "#" dans l'attribut href pour signaler au navigateur que l'on désire rester sur la page en cours. Il ne faut pas mettre un attribut vide au risque de révéler le contenu de votre répertoire à vos visiteurs ) • Remarquez l'emploi de \' dans la phrase "Message d'alerte a utiliser avec moderation" Le signe antislash (\) précédant le guillemet permet de signaler au navigateur qu'il ne faut pas l'interpréter comme un délimiteur de chaîne mais comme un simple caractère pour éviter qu'il génère une erreur! Aperçu de l'effet du script: Modification d'une image lors du survol d'un lien par le pointeur de la sourisIl 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> <body> <a href="#" onMouseOver="='';" onMouseOut="='';"> <img name="img_1" src="/"> </a> </body> </html> Analyse du script: • Pour pouvoir associer un événement à une image il faut que celle-ci soit considérée comme un lien, ainsi on place la balise <img > entre les balises <a > et </a> • L'événement onMouseOut est limitée aux navigateurs supportant javascript 1.1 et supérieur Aperçu de l'effet du script: Qu'est-ce qu'un opérateur? Les 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 d'assignation • les opérateurs d'incrémentation • les opérateurs de comparaison • les opérateurs logiques • (les opérateurs bit-à-dit) • (les opérateurs de rotation de bit) Les opérateurs de calculLes opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable
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 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:
/= divise deux valeurs et stocke le résultat dans la variable Les opérateurs d'incrémentationCe 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
Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies:
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:
> Qu'est-ce qu'une structure conditionnelle? On 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. La syntaxe de cette expression est la suivante: if (condition réalisé) { liste d'instructions } Remarques: • la condition doit être entre des parenthèses • il est possible de définir plusieurs conditions à remplir avec les opérateurs ET et OU (&& et ||) par exemple: if ((condition1)&&(condition2)) teste si les deux conditions sont vraies if ((condition1)||(condition2)) exécutera les instructions si l'une ou l'autre des deux conditions est vraie • s'il n'y a qu'une instruction, les accolades ne sont pas nécessaires L'instruction if elseL'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 testIl 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: • la condition doit être entre des parenthèses • Lorsque la condition est vraie, l'instruction de gauche est exécutée Lorsque la condition est fausse, l'instruction de droite est exécutée Les bouclesLes 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 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. • il faudra toujours vérifier que la boucle a bien une condition de sortie (i.e le compteur s'incrémente correctement) • une instruction Alert(i); dans votre boucle est un bon moyen pour vérifier la valeur du compteur pas à pas! • il faut bien compter le nombre de fois que l'on veut faire exécuter la boucle: o for(i=0;i<10;i++) exécute 10 fois la boucle (i de 0 à 9) o for(i=0;i<=10;i++) exécute 11 fois la boucle (i de 0 à 10) o for(i=1;i<10;i++) exécute 9 fois la boucle (i de 1 à 9) o for(i=1;i<=10;i++) exécute 10 fois la boucle (i de 1 à 10) 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 } 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 inconditionnelA 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 for (x=1; x<=10; x++) { a = x-7; if (a == 0) { Alert('division par 0'); break; } Alert(1/a); } 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 à ellemê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. 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: • le mot clé function est suivi du nom que l'on donne à la fonction • le nom de la fonction suit les mêmes règles que les noms de variables : o le nom doit commencer par une lettre o un nom de fonction peut comporter des lettres, des chiffres et les caractères _ et & (les espaces ne sont pas autorisés!) o le nom de la fonction, comme celui des variables est sensible à la casse • Les arguments sont facultatifs, mais s'il n'y a pas d'arguments, les parenthèses doivent rester présentes • Il ne faut pas oublier de refermer les accolades • Le nombre d'accolades ouvertes (fonction, boucles et autres structures) doit être égal au nombre de parenthèses fermées! La même chose s'applique pour les parenthèses, les crochets ou les guillemets! Une fois cette étape franchie, votre fonction ne s'exécutera pas tant que l'on ne fait pas appel à elle quelque part dans la page! Appel de fonctionPour 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: • le point virgule signifie la fin d'une instruction et permet au navigateur de distinguer les différents blocs d'instructions • si jamais vous avez défini des arguments dans la déclaration de la fonction, il faudra veiller à les inclure lors de l'appel de la fonction (le même nombre d'arguments séparés par des virgules!) 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> <!-- 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 fonctionIl 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="#" onClick="Affiche1();return(false)">Texte1</A> <A href="#" onClick="Affiche2();return(false)">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"> <!-- } //--> </SCRIPT> </HEAD> <BODY onLoad="Chargement();" > <A href="#" onClick="Affiche('Texte1');return(false)">Texte1</A> <A href="#" onClick="Affiche('Texte2');return(false)">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 fonctionsLorsque 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. • Une variable déclarée implicitement (non préc&eracute;dée du mot var) sera globale , c'est-à-dire accessible après exécution de la fonction • Une variable déclarée explicitement (préc&eracute;dée du mot var) sera locale , c'est-à-dire accessible uniquement dans la fonction, toute référence à cette variable hors de la fonction provoquera une erreur (variable inconnue) 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é). • taille • age 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) { = Type; Arbre.Taille = Taille; = 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) { = Nom; Proprietaire.Prenom = Prenom; } Définissons maintenant l'objet Arbre comme suit: function Arbre(Type, Taille, Age, Proprietaire) { = Type; Arbre.Taille = Taille; = Age; Arbre.Proprietaire = Proprietaire; } Il est alors possible de trouver le nom du propriétaire d'un arbre:
Ainsi que de le modifier si jamais le propriétaire change: = 'Dupont'; Arbre1.Proprietaire.Prenom = 'René'; > Les méthodes Une 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: Dans le cas de la méthode write(), l'appel se fait comme suit: window.document.write() La méthode writeLa 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: soit en passant directement le texte en paramètres: document.write("bonjour");qui aura pour effet de concaténer la chaîne 'bonjour' à l'endroit où est placé le script • soit en passant le texte par l'intermédiaire d'une variable: Chaine='bonjour'; document.write(Chaine); qui aura pour effet de concaténer la chaîne 'bonjour' (contenue dans la variable Chaine)à l'endroit où est placé le script • soit en utilisant les deux: Chaine='bonjour'; document.write('je vous passe le' + Chaine);qui aura pour effet de concaténer la chaîne 'bonjour' (contenue dans la variable Chaine) à la suite de la chaîne de caractère 'je vous passe le' dans la page HTML Il est ainsi possible d'utiliser des balises HTML à l'intérieur même de la méthode write: document.write('<font color="#FF0000">Bonjour</font>'); La méthode writeInLa 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 objetIl est possible de définir une méthode pour un type d'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) { = Nom; 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 + + 'possede un' + ); } Il suffit maintenant de définir l'objet Arbre comme suit: function Arbre(Type, Taille, Age, Proprietaire, AfficheInfos) { = Type; Arbre.Taille = Taille; = 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: • navigator: qui contient des informations sur le navigateur de celui qui visite la page • window: c'est l'objet où s'affiche la page, il contient donc des propriétés concernant la fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-ci • location: contient des informations relatives à l'adresse de la page à l'écran • history: c'est l'historique, c'est-à-dire la liste de liens qui ont été visités précédemment • document: il contient les propriétés sur le contenu du document (couleur d'arrière plan, titre, ) 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 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:
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: • l'objet document: la page en elle-même • l'objet location: le lieu de stockage de la page • l'objet history: les pages visitées précédemment • l'objet frames: les cadres (division de la fenêtre en sous-fenêtres) fenêtre nombre de cadres (nombre length Lecture seule d'éléments du tableau frames nom de la fenêtre dans laquelle on se trouve Il s'agit de la fenêtre qui englobe Lecture seule, contient des parent celle dans laquelle on se trouve (si propriétés il y en a une..) Synonyme de la fenêtre actuelle Lecture seule, contient des self (redondance ou précision?) propriétés Il s'agit d'un message temporaire non, modifiable à tout moment, qui s'affiche dans la barre d'état vous devez retournez la valeur status du navigateur suite à un true pour l'utiliser avec événement onMouseOver Il s'agit de la fenêtre de plus haut Lecture seule, contient des top niveau, celle qui contient tous les propriétés cadres (frames) Lecture seule, contient des window Il s'agit de la fenêtre actuelle 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 propriétés self et window sont les mêmes, elles permettent de désigner la page en cours, leur seul but est d'accentuer la précision de la hiérarchie pour une meilleure lecture du code. en effet, est plus explicite que name • la propriété frames est un tableau qui permet de cibler un cadre spécifique faisant partie de la fenêtre où on se trouve. Pour désigner un cadre on utilise soit la notation window.frames[i] où i représente le numéro du cadre, soit window.nom_du_cadre en désignant le cadre directement par le nom qu'on lui a assigné dans la balise frameset. Les méthodes de l'objet windowL'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 dedialogue. 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: ("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:
d'événement, directement dans le code à exécuter ou bien dans une fonction. • les options doivent être saisies les unes après les autres, séparées par des virgules, sans espace • l'ensemble des options doit être encadré par les guillemets 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 ermer cette fenêtre. Pour un lien hypertexte, le code sera: <A href="#" onClick="self.close('nom_de_la_fenetre_');return(false)">Cliquez ici pour fermer la fenêtre</A> Pour un bouton (image), le code sera: <A href="#" onClick="self.close('nom_de_la_fenetre_');return(false)"><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 celleci: <A href="#" onMouseOver="self.close('nom_de_la_fenetre_');" ><img src="/nom_de_l_image"></A> > L'objet navigator Les particularités de l'objet navigatorL'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 ). Les propriétés de l'objet navigatorLes 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. Pour votre Propriété Descriptionnavigateur retourne le code du navigateur. Un navigateur a pour nom de code navigator.appCodeNameMozilla (je ne sais pas pourquoi), Mozilla cette information semble donc inutile retourne le nom du navigateur (la plupart du temps la marque). Cette Microsoft Internet navigator.appName propriété est utile pour différencier Explorer les navigateurs de Netscape et de Microsoft) retourne la version du navigateur. Cette propriété prend la forme suivante: Numéro de version( plateforme 4.0 (compatible; (système d'exploitation), MSIE 7.0; Windows nationalité) NT 6.0; GTB6.3; Elle est utile pour connaître le SLCC1; .NET CLR navigator.appVersion système d'exploitation de 2.0.50727; .NET CLR l'utilisateur, mais surtout, associée 3.5.30729; .NET CLR avec la propriété 3.0.30618; navigator.appName elle permet de InfoPath.2) connaître les fonctionnlités que supporte le navigateur de votre visiteur. retourne la chaîne de caractère qui Mozilla/4.0 (compatible; MSIE Les propriétés ci-dessus offrent un 7.0; Windows NT 6.0; moyen pratique de récupérer une GTB6.3; SLCC1; .NET navigator.userAgent partie de cette information (cette CLR 2.0.50727; .NET chaîne étant de longueur variable, il CLR 3.5.30729; .NET ne serait pas évident d'en récupérer CLR 3.0.30618; une portion sans les autres InfoPath.2) propriétés ) Utiliser efficacement ces propriétésLes 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 Versionnavigator.appNamenavigator.appVersionJavascript Netscape 2 Netscape 2.0 (Win95; I) 1.0 Navigator Netscape 3 Netscape 3.xx (Win95; I) 1.1 Navigator Netscape 4 Netscape 4.xx (Win95; I) 1.1 Communicator Microsoft 3 Microsoft Internet 2.0 (compatible; MSIE 1.0 Exemple de scriptIl 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 } 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 } > Les boites de dialogue Qu'est-ce qu'une boîte de dialogue? Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et qui permet • Soit d'avertir l'utilisateur • Soit le confronter à un choix • Soit lui demander de compléter un champ pour récupérer une informations 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!!'); Test 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 if(confirm('Voulez-vous voir Mickey ?')) ='' 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: • le texte d'invite • la chaîne de caractères par défaut dans le champ de saisie 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 history Les particularités de l'objet historyL'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 historyLes 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. • la propriété length permet de connaître le nombre d'objets dans l'historique • la méthode back permet d'aller à l'URL précédent dans l'historique • la méthode forward permet d'aller à l'URL suivant dans l'historique Les particularités de l'objet DateL'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: 1. Nom_de_l_objet = new Date() cette syntaxe permet de stocker la date et l'heure actuelle 2. Nom_de_l_objet = new Date("mois jour, année heures:minutes:secondes") les paramètres sont une chaîne de caractère sous cette notation 3. Nom_de_l_objet = new Date(year, month, day) les paramètres sont trois entiers séparés par des virgules. Les paramètres omis sont mis à zéro par défaut 4. Nom_de_l_objet = new Date(year, month, day, hours, minutes, seconds) les paramètres sont six entiers séparés par des virgules. Les paramètres omis sont mis à zéro par défaut 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 DateLa 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 dateLes méthodes dont le nom commence par le radical get (mot anglais qui signifie récupérer) permettent de récupérer une valeur:
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 Permet de convertir une date en une L'objet retourné est une chaîne de caractère du toGMTString() chaîne de caractères au format GMT type:
TrigonométrieMéthode description Retourne la valeur du nombre PI, soit environ 3.1415927 (valeur) Retourne le sinus de la valeur entrée en paramètre (doit être donnée en radians) (valeur) Retourne l'arcsinus de la valeur entrée en paramètre (doit être donnée en radians) (valeur) Retourne le cosinus de la valeur entrée en paramètre (doit être donnée en radians) (valeur) Retourne l'arccosinus de la valeur entrée en paramètre (doit être donnée en radians) (valeur) Retourne la tangente de la valeur entrée en paramètre (doit être donnée en radians) (valeur) Retourne l'arctangente de la valeur entrée en paramètre (doit être donnée en radians) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
