JavaScript

  1. Introduction au JavaScript
  2. Les événements
  3. Les opérateurs
  4. Les instructions de test
  5. Les boîtes de dialogue
  6. Les objets
  7. L'objet window
  8. L'objet document
  9. L'objet navigator

INTRODUCTION

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.


ÉVÉNEMENTS

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).  


OPÉRATEURS

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.


INSTRUCTIONS DE TEST

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


LES BOÎTES DE DIALOGUE

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.


LES OBJETS

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

L'objet window correspond à la fenêtre du navigateur. Sont inclus dans cet objet :

L'élément frames est un tableau contenant le numéro ou le nom de chaque frame dans l'ordre d'apparition dans la fenêtre.

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 :

Les méthodes de window sont :

ArgumentsFonction
menubar= yes/noAffiche ou non la barre de menu (fichier, édition...)
toolbar= yes/noAffiche ou non la barre d'outils
location= yes/noAffiche ou non la barre d'adresse
directory= yes/noAffiche ou non les boutons de navigation
status= yes/noAffiche ou non la barre d'état
scrollbars= yes/noAffiche ou non les ascenseurs
resizable= yes/noPermet 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

L'objet document est un objet de window. Les propriétés de document sont :

Les méthodes de document sont :

L'objet document contient plusieurs autres objets :

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

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 :

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.

Haut de page

Dernière mise à jour
15 février 2010

Imprimer