JavaScript
- Introduction au JavaScript
- Les événements
- Les opérateurs
- Les instructions de test
- Les boîtes de dialogue
- Les objets
- L'objet window
- L'objet document
- L'objet navigator
JavaScript est un langage de script permettant d'accéder aux différents niveaux d'une page en HTML en fonction d'un événement. Javascript permet par exemple d'ouvrir des fenêtres préformatées, de contrôler des saisies de formulaire, d'ouvrir une petite fenêtre de publicité ou d'afficher un message d'alerte. Les différents événements auxquels réagit le script sont les clics ou mouvements de souris, les chargements ou déchargements de page, les pertes de focus de champs de formulaire, etc.
L'objectif de ce tutoriel est de vous aider à comprendre comment fonctionne le Javascript afin de vous permettre de créer vos propres scripts selon vos besoins. Il vous est bien sûr possible de copier les scripts proposés par de nombreux sites (moteur de recherche de Scripts). Ce tutoriel peut alors vous aider à comprendre ces scripts et à les personnaliser pour vos propres pages Web. Le JavaScript est sensible à la casse, il est donc important de faire attention aux majuscules et minuscules.
Le code JavaScript est soit inséré dans l'en-tête de la page HTML entre <HEAD> et </HEAD>, soit sur une page externe portant l'extension .js, appelée également dans l'en-tête par une ligne du genre <SCRIPT language="Javascript" src="monscript.js"></SCRIPT>. Dans le cas d'un script externe, le code peut être fait avec n'importe quel éditeur de texte du type Bloc-note, Wordpad, Word... Voici un exemple, dans le cas d'un code interne à la page :
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function MaFonction( )
{
alert('Ceci est un message d\'alerte');
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="MaFonction( )">
Page HTML
</BODY>
</HTML>
Dans cet exemple, MaFonction est le nom que j'ai donné à la fonction Javascript. Au chargement (événement onLoad) du corps (BODY) de la page, cette fonction est appelée. Elle a pour effet d'afficher automatiquement un message d'alerte (alert) dont on peut personnaliser le texte. La fonction est donc définie en en-tête et appelée dans le corps de la page.
Les éléments <!-- et --> sont utilisés par les navigateurs ne reconnaissant pas le JavaScript. Pour ceux-ci le code Javascript est alors considéré comme un commentaire : sans ces balises, le code s'afficherait à l'écran...
Note : dans le message d'alerte, la présence de caractères réservés tel que l'apostrophe (') nécessite l'emploi d'un anti-slash (\) qui doit précéder le caractère afin que celui-ci soit considéré comme faisant partie de la chaîne à afficher.
| Pour faire | Écrivez |
|---|---|
| un saut de ligne | \n |
| une tabulation | \t |
| une apostrophe | \' |
| un guillemet | \" |
| un slash | \\ |
Pour mettre une ligne de commentaire dans le code JavaScript, on emploie le double slash (//). Pour mettre plusieurs lignes de commentaire, on place le texte entre /* et */. Ces lignes de commentaire sont ignorées par le navigateur.
Les fonctions JavaScript s'exécutent généralement sur des événements, et plus particulièrement sur des clics ou des mouvements de souris. Le Javascript peut donc réagir aux actions de la souris sur des liens, aux chargements et déchargements de page et aux actions sur les formulaires.
| onClick : | un clic de l'utilisateur sur l'élément (lien, formulaire). | Test |
| onLoad : | le chargement de la page. | Test |
| onUnload : | la fermeture de la page. | Test |
| onMouseOver : | le curseur de la souris sur l'élément (lien). | Test |
| onMouseOut : | le curseur de la souris quitte l'élément (lien). | Test |
| onFocus : | un élément de formulaire prend le focus (formulaire). | |
| onBlur : | un élément de formulaire perd le focus (formulaire). | |
| onChange : | le contenu d'un élément de formulaire est modifié (formulaire). | |
| onSelect : | la séléction du contenu d'un champ de texte (formulaire). | |
| onSubmit : | un clic sur le bouton de soumission de formulaire (formulaire). |
Pour manipuler les variables, on utilise des opérateurs dont voici la liste :
| Type | Opérateur | Fonction |
|---|---|---|
| Calcul | + | addition |
| Calcul | - | soustraction |
| Calcul | * | multiplication |
| Calcul | / | division |
| Calcul | = | affectation d'une valeur |
| Assignation | += | addition et stockage (à gauche) |
| Assignation | -= | soustraction et stockage (à gauche) |
| Assignation | *= | multiplication et stockage (à gauche) |
| Assignation | /= | division et stockage (à gauche) |
| Incrémentation | ++ | incrémentation |
| Incrémentation | -- | décrémentation |
| Comparaison | == | vérifie l'égalité |
| Comparaison | < | vérifie la stricte infériorité |
| Comparaison | <= | vérifie l'infériorité ou l'égalité |
| Comparaison | > | vérifie la stricte supériorité |
| Comparaison | >= | vérifie la supériorité ou l'égalité |
| Booléens | != | vérifie la différence |
| Booléens | || | OU logique |
| Booléens | && | ET logique | Booléens | ! | NON logique (inversion) |
On peut noter que x=x+1 peut s'écrire x+=1 ou même x++. x=x*7 est équivalent à x*=7.
Les instructions de test permettent de construire des structures conditionnelles.
| Test | Syntaxe | Fonction |
|---|---|---|
| Condition | if (condition) {instruction} | si la condition est remplie, exécution de l'instruction |
| Condition | if ((condition)&&(condition)) {instruction} | si les conditions sont remplies, exécution de l'instruction |
| Condition | if ((condition)||(condition)) {instruction} | si l'une des conditions est remplie, exécution de l'instruction |
| Condition | else {instruction} | sinon exécution de l'instruction |
| Condition | (condition) ? instruction si vrai : instruction si faux. | si la condition est remplie, exécution de l'instruction "si vrai", sinon exécution de l'instruction "si faux" |
| Boucle | for (compteur;condition;modification du compteur) {instruction} | exemple : for (i=1;i<6;i++) {alert(i)} |
| Boucle | while (condition) {instruction} | tant que la condition est remplie, continuer la boucle |
| Saut conditionnel dans une boucle | continue; | permet à une boucle de sauter une valeur |
| Arrêt conditionnel dans une boucle | break; | permet d'arrêter une boucle selon une condition |
La boîte de dialogue est une petite fenêtre pouvant servir à informer l'utilisateur par un message d'alerte, lui soumettre un choix (OK - Annuler) ou lui demander de saisir une information (mot de passe). Les boîtes de dialogues sont une méthode de l'objet window et existe sous trois formes :
La méthode alert( )
Un message d'alerte affiche le texte qui se trouve entre les paranthèses de la méthode. Un bouton OK permet de fermer cette fenêtre. Le texte qui s'affiche peut être une chaîne de caractères entre guillemets, une variable, ou un assemblage des deux par un "+".
<a href="#a" onClick="alert('Ces images sont protégées par copyright')">test</a>
test (la cible #a sert à ne donner aucune destination au lien).
La méthode confirm( )
Cette boîte de dialogue propose à l'utilisateur le choix entre OK et Annuler. Elle comporte les mêmes options pour le texte affiché. Si l'utilisateur clique sur OK, la méthode renvoie la valeur true, s'il clique sur Annuler, la méthode renvoie la valeur false.
test (si voulez cliquez sur OK, la page sera redirigée).
La méthode prompt( )
Cette méthode prend deux arguments : un texte (question, invite, demande de mot de passe) et un champ de saisie avec une chaîne de caractères. Si la méthode est utilisée en tant que variable, elle retourne la valeur de la chaîne de caractères saisie par l'utilisateur. Si l'utilisateur annule, la valeur null est retournée.
test (essayez avec un nom, en laissant blanc ou en annulant).
Attention, le texte affiché par la boîte de dialogue ne doit pas comporter de caractères réservés. Les boîtes sont à utiliser avec modération car elles peuvent vite énerver l'utilisateur.
En JavaScript, il faut donner de chemin d'accès à un objet pour en modifier les propriétés ou lui appliquer une méthode. Par exemple, la méthode open( ) pour ouvrir une nouvelle fenêtre s'applique à l'objet window : on écrira donc window.open( ) afin de signifier que l'on veut utiliser la méthode open( ) et que l'on veut l'appliquer à la fenêtre courante. Si l'on écrit opener.focus( ), on demande de donner le focus à la fenêtre qui a permis l'ouverture de la fenêtre courante (celle sur laquelle le Script se trouve). Le chemin frames["menu"].forms[0].elements[5].focus( ) permet de donner le focus au sixième élément (puisque le premier porte le numéro zéro), du premier formulaire contenu dans le cadre portant le nom de menu.
test (pour changer le titre de cette page).
En en-tête :
<SCRIPT language="Javascript">
<!--
function Titre()
{
parent.document.title="Javascript permet de changer le titre";
}
-->
</SCRIPT>
Sur le lien
<a href="#a" onClick="Titre( )">test</a>
test (pour changer l'image de l'arbre). 
En en-tête :
<SCRIPT language="Javascript">
<!--
function Image()
{
change.src="images/pinpin.jpg";
}
-->
</SCRIPT>
Sur le lien
<a href="#a" onClick="Image( )">test</a>
Sur l'image
<img name="change" src="images/arbre.gif">
Il est important de bien connaître l'emboîtement des objets entre eux, les propriétés de chaque objet et les méthodes que l'on peut appliquer à chacun d'eux.
Voici un petit guide des principaux objets, de leurs propriétés et de leurs méthodes. Cette liste n'est pas exhaustive mais devrait donner un aperçu des possibilités de Javascript.
L'objet window correspond à la fenêtre du navigateur. Sont inclus dans cet objet :
- document : la page en elle-même :
- les propriétés et méthodes de document.
- location : l'adresse complète de la page :
- href : propriété donnant la destination de la page.
- search : propriété donnant la partie de l'adresse après un "?".
- history : l'historique des pages vues précédemment :
- length : propriété donnant le nombre de pages consultées.
- back( ) : méthode de retour à la page précédente.
- forward( ) : méthode de retour à la page suivante.
- go(indice) : méthode de retour à la page de l'indice (4, -2, etc).
- opener : l'adresse de la page qui a ouvert la page courante.
- frames : les cadres présents dans la fenêtre.
- self : la fenêtre courante.
- parent : la fenêtre contenant le cadre actuel.
- top : la fenêtre de plus haut niveau dans la hiérarchie des cadres.
- screen : les informations sur l'affichage utilisé par le visiteur :
- availHeight : nombre de pixels de résolutions de la hauteur de la page.
- availWidth : nombre de pixels de résolutions de la largeur de la page.
- height : hauteur de la fenêtre du navigateur.
- width : largeur de la fenêtre du navigateur.
frames[1] fait référence au deuxième frame, le premier étant frames[0].
Les propriétés (parties auxquelles on peut accéder) de window sont :
- defaultStatus : message par défaut de la barre d'état du navigateur.
- status : message temporaire de la barre d'état du navigateur.
- length : nombre de cadres dans la fenêtre.
- name : nom du cadre dans la fenêtre.
- screenLeft : l'abscisse du coin supérieur gauche.
- screenTop : l'ordonnée du coin supérieur gauche.
Les méthodes de window sont :
- les boîtes de dialogue (alert, confirm et prompt).
- print( ) : imprime la page courante.
- focus( ) : donne le focus à la page.
- blur( ) : enlève le focus à la page courante.
- moveBy(x,y) : déplace la fenêtre par rapport à sa position.
- moveTo(x,y) : déplace la fenêtre par rapport au coin de l'écran.
- resizeBy(x,y) : redimensionne la fenêtre par rapport à sa taille.
- resizeTo(x,y) : redimensionne la fenêtre en taille fixe.
- setTimeout(fonction,delai) : déclenche un timer.
- stopTimeout(timer) : arrêt d'un timer.
- close( ) : prend comme argument le nom de la fenêtre à fermer.
- open ('url','nom','arguments') : voir le tableau ci-après pour les arguments.
| Arguments | Fonction |
|---|---|
| menubar= yes/no | Affiche ou non la barre de menu (fichier, édition...) |
| toolbar= yes/no | Affiche ou non la barre d'outils |
| location= yes/no | Affiche ou non la barre d'adresse |
| directory= yes/no | Affiche ou non les boutons de navigation |
| status= yes/no | Affiche ou non la barre d'état |
| scrollbars= yes/no | Affiche ou non les ascenseurs |
| resizable= yes/no | Permet ou non de redimensionner la fenêtre |
| width= (en pixels) | Largeur de la fenêtre |
| height= (en pixels) | Hauteur de la fenêtre |
| top= (en pixels) | Position de la fenêtre par rapport au haut de l'écran |
| left= (en pixels) | Position de la fenêtre par rapport à la gauche de l'écran |
test (cliquez sur ce test pour voir les codes d'ouverture et de fermeture)
L'objet document est un objet de window. Les propriétés de document sont :
- linkColor : couleur du lien non actif et non visité.
- alinkColor : couleur du lien actif.
- vlinkColor : couleur du lien visité.
- bgColor : couleur du fond.
- fgColor : couleur de police.
- lastmodified : date de dernière modification de la source.
- cookie : cookie...
- referrer : adresse de la page d'origine.
- title : titre du document (entre <TITLE> et </TITLE>).
Les méthodes de document sont :
- write(texte) : affiche du texte.
- close( ) : ferme la fenêtre.
- open( ) : ouvre une fenêtre.
- getSelection( ) : retourne le texte sélectionné dans la page.
- handleEvents( ) : crée un gestionnaire d'événement.
- captureEvents( ) : détecte un événement.
- eval(chaine) : évalue une chaîne et retourne le résultat.
L'objet document contient plusieurs autres objets :
- L'objet forms est un tableau (de 0 à n) contenant tous les formulaires de la page en cours. L'objet forms contient lui-même des objets elements qui sont la liste de 0 à n de chaque élément du formulaire en cours.
- L'objet frames est un tableau (de 0 à n) contenant tous les frames de la page en cours.
- L'objet images est un tableau (de 0 à n) contenant toutes les images de la page en cours. La propriété src permet d'accéder à l'URL de l'image.
- L'objet anchors est un tableau (de 0 à n) contenant toutes les ancres de la page en cours.
document.forms[2].elements[0] fait référence au premier élément du troisième formulaire de la page courante.
document.forms["identification"].elements["nom"] fait référence à l'élément nom du formulaire identification.
document.image[0] fait référence à la première image déclarée dans la page.
L'objet navigator permet de connaître les principales caractéristiques du navigateur du visiteur. Cela peut aider à adapter un script en fonction du navigateur : certains scripts ne fonctionnant que sous un navigateur précis, il peut être utile de ne le déclencher qu'après un test du navigateur.
Les propriétés (parties auxquelles on peut accéder) de navigator sont :
- appCodename : le nom de code du navigateur.
- appName : le nom complet du navigateur.
- appVersion : le numéro de version du navigateur et autres informations.
- userAgent : correspond à appCodeName + appVersion.
test (pour connaître les caractéristiques de votre navigateur).
En en-tête :
<SCRIPT language="JavaScript">
<!--
function Navig()
{
alert('appCodename : ' + navigator.appCodeName + '\nappName : ' + navigator.appName + '\nappVersion : ' + navigator.appVersion + '\nuserAgent : ' + navigator.userAgent);
}
-->
</SCRIPT>
Pour le lien :
<a href="#a" onClick="Navig()">test</a>
Le JavaScript sert à dynamiser vos pages. Malheureusement, beaucoup de sites en abusent (tous les Pop-up de publicités...) et, en conséquence, beaucoup d'utilisateurs désactivent la fonctionnalité JavaScript de leur navigateur. Aussi, il est bon de prévoir que vos pages puissent toujours fonctionner même si JavaScript est désactivé. Un bon exemple se trouve sur le site d'Alsa Créations. Le menu de mon site est inspiré de leur code et de leurs conseils : si le JavaScript est désactivé, les sous-menus sont développés par défaut et restent donc accessibles.
