Ce cours est visible gratuitement en ligne.

Got it!
Tout sur le Javascript !
Last updated on Monday, January 7, 2013

Votre premier script

Une bonne nouvelle au programme : on va vraiment commencer à coder en JS !

Vous allez créer votre premier script : à la fin de ce chapitre, vous serez capable d'afficher des boîtes de dialogue (contenant un message).
Rien d'impressionnant, certes, mais ces boîtes de dialogue vous seront fort utiles pour la suite...

Logiciels nécessaires

Comme j'ai pu vous le dire dans le premier chapitre, le JavaScript est un langage facile à mettre en oeuvre.
De même que pour créer une page (x)HTML, il vous suffit :

  • d'un éditeur de texte : Bloc-notes est suffisant, mais d'autres logiciels offrent plus d'options, comme la coloration syntaxique, qui est très appréciable.
    Notepad++ (que vous possédez peut-être déjà... ) en est un bon exemple.

  • d'un navigateur : FireFox, avec le plugin Web Developer, est parfaitement approprié pour cela.
    Cependant, pour vérifier la compatibilité de vos scripts, il peut être utile de les tester sur plusieurs des navigateurs les plus courants (Internet Explorer 6, Opera et Firefox étant les références pour les PC).

Liens vers les sites de Notepad++, FireFox et Web Developer.

Vos débuts en JavaScript

Les commentaires

Si vous êtes un bon utilisateur du (x)HTML et du CSS (et je suis sûr que c'est le cas ^^ ), vous devriez savoir vous servir des commentaires.

Je vous rappelle que les commentaires sont des phrases qu'on utilise justement... pour commenter le code ! Elles n'ont aucune conséquence sur celui-ci.
Cela permet d'avoir un code clair et compréhensible par toute personne qui le lirait :) .
Ils seront très utilisés dans la suite de ce cours.

En (x)HTML

Les commentaires, en (x)HTML, s'écrivent de cette manière :

<!-- je suis un commentaire -->

Vous pouvez donc y écrire plus ou moins ce que vous voulez, évitez cependant les caractères spéciaux (particulièrement les crochets < et >, le dernier pouvant être interprété par le navigateur comme la fin du commentaire).

Voici un exemple d'utilisation d'un commentaire (au milieu d'une page (x)HTML) :

<!-- lien vers le site du zéro -->
<a href="http://www.siteduzero.com">Le site du Zér0 !</a>
En JavaScript

En JS, c'est tout à fait différent.
Il y a deux manières d'écrire un commentaire.

  • Les commentaires sur une seule ligne : ils se placent sur la fin de la ligne, après // (deux slashs).
    Évitez cependant d'écrire trop de choses de cette manière. Fixez-vous une limite (généralement, on prend 80 caractères maximum par ligne, code compris, mais il n'y a aucune obligation).

  • Les commentaires sur plusieurs lignes : exactement comme en CSS :) ,
    ils se placent entre /* et */ : il n'y a ici aucune limitation sur la longueur du commentaire. Vous pouvez donc en écrire autant que vous voulez.
    Notez que vous pouvez parfaitement utiliser cette notation pour les commentaires courts (certaines personnes n'utilisent que celle-ci).

Un petit exemple pour vous montrer :

duCode;        // commentaire court
codeBis;       /* autre commentaire court */
suiteDuCode;
encoreDuCode;  /* ici, je vais mettre un commentaire long
     je peux écrire autant que je veux,
     sur plusieurs lignes si j'ai envie */

Afficher une boîte de dialogue

C'est quoi, une boîte de dialogue ? o_O

C'est une petite fenêtre (une boîte) qui sert à communiquer (dialoguer) avec l'utilisateur (lui afficher ou lui demander quelque chose).
Celle que nous allons créer sert à afficher un message.

Image utilisateur

Notre boîte de dialogue

Voici le code qui permet de créer un tel message :

alert('Hello world');

Vous pouvez remplacer le classique "Hello world" par le texte de votre choix, en laissant les apostrophes de part et d'autre de votre message (qui doit lui-même ne pas contenir d'apostrophe).

Où se place le code JavaScript ?

Insérer du JavaScript dans une page xHTML

On écrit le JS dans notre page HTML, et c'est le navigateur qui lit et exécute ce code.
Mais comment fait-il pour différencier les deux ?

Vous le savez sûrement déjà, un ordinateur, c'est bête : il faut lui dire tout ce qu'il doit faire.
Eh bien c'est ce que nous allons devoir faire : si on ne précise pas à notre navigateur que notre code est du JS, il ne le devinera pas tout seul.
Voyons donc comment le lui dire...

Revenons à notre JavaScript :
Il y a deux méthodes différentes pour insérer du JavaScript dans une page Web.

Directement dans les balises

La première méthode consiste à écrire le code directement à l'intérieur de la balise qui va être concernée par le script.

Comment ça marche ?

Pour insérer le code dans une balise, une nouvelle propriété est nécessaire. Il s'agit du gestionnaire d'événements (en anglais : event handler).

  • Cette propriété est caractéristique du JS : elle suffit à dire au navigateur : "attention, ce qui suit est du JS".

  • Elle porte le nom de l'événement qui doit déclencher le script (c'est pour cela qu'on parle de "gestionnaire d'événements").

  • Elle contient comme valeur le script à exécuter lors de cet événement.

Pour résumer, la balise en question aura cette forme-là (ici il s'agit d'une balise seule, c'est le même principe pour les balises fonctionnant par paires) :

<nom eventHandler="script" />

Examinons tout de suite un exemple.

  • Nous allons utiliser un lien.
    On ne veut pas qu'il nous envoie sur une autre page : c'est pourquoi nous utiliserons le symbole # en guise d'adresse.
    On part donc de ceci :

    <a href="#">lien</a>
  • L'événement déclenchant le script sera un clic de souris sur ce lien.
    Le nom de cet événement est : onclick.

  • Le script à exécuter sera l'ouverture d'une boîte de dialogue. Le code sera donc :

    alert('Bonjour !'); // (j'ai change le texte au passage)

Ça nous donne ceci :

<a href="#" onclick="alert('Bonjour !');">lien</a>

Vous pouvez tester ce code (c'est même conseillé : réécrivez-le, vous le retiendrez beaucoup mieux qu'en faisant un copier-coller).

Résultat : notre boîte de dialogue devrait apparaître lorsque vous cliquez sur le lien :magicien: !

Vous venez de créer votre premier script ! :soleil:

Maintenant, un petit exercice :
essayez de faire la même chose, mais avec une image, cette fois...

Solution :

<img src="monImage.png" alt="Mon Image" onclick="alert('Pourquoi cliques-tu sur cette image ?');" />

Cas d'un lien :
Il est possible d'écrire du JavaScript directement à la place de l'adresse d'un lien, en le faisant précéder de javascript:, comme dans cet exemple :

<a href="javascript:alert('Coucou');"> Cliquez ici </a>

Cette méthode a l'avantage de ne pas faire remonter le visiteur en haut de la page, comme l'aurait fait un lien portant le petit dièse (#) ; c'est ce que vous avez sûrement dû voir si vous avez testé le code.

Autres gestionnaires d'événements

Il existe d'autres événements que le clic de souris, rassurez-vous ^^ .
Leur syntaxe est la même : onevent, event étant le nom de l'événement (en minuscule dans le tuto, pour respecter la validité du SdZ).
Les événements s'appliquent à la plupart des balises (sauf événements particuliers, relatifs à des balises précises).

En voici quelques-uns :

  • onclick : au clic (gauche) de la souris

  • ondblclick : lors d'un double clic

  • onmouseover : au passage de la souris

  • onmouseout : lorsque la souris "sort" de cet élément (en quelque sorte, le contraire de onmouseover).

Gestionnaires d'événements de la balise <body> :

  • onload : au chargement de la page

  • onunload : lorsqu'on quitte la page (ou qu'on change de page).

Le mieux est de les essayer, vous verrez par vous-mêmes à quoi correspond chaque événement.
Voici une image contenant plusieurs gestionnaires d'événements :

<img src="monImage.png" alt="Mon Image" ondblclick="alert('Double clic');" onmouseout="alert('La souris sort');" />

Et voici la balise <body> pour créer une page disant "Bonjour" et "Au revoir" :

<body onload="alert('Bonjour !');" onunload="alert('Au revoir !');">
  <!-- corps de la page -->
</body>

Entre les balises <script> et </script>

Une nouvelle paire de balises

Et si notre script est très long, on ne va quand même pas tout mettre dans notre gestionnaire d'événements ? :waw:

Rassurez-vous, s'il existe plusieurs manières différentes d'insérer du JavaScript, ce n'est pas pour rien.
La seconde solution consiste à écrire le script entre deux balises spécifiques, <script> et </script>.

Il faut commencer par préciser au navigateur que notre script est... du JavaScript.
Pour cela, on rajoute la propriété type="text/javascript", ce qui nous donne ceci :

<script type="text/javascript">

   /* votre code javascript se trouve ici
   c'est deja plus pratique pour un script de plusieurs lignes */

</script>

Pour faire ignorer ce texte à ce vieux navigateur, on lui fait tout simplement croire qu'il s'agit d'un commentaire en (x)HTML.

Pour un navigateur qui connaît le JavaScript, il saura qu'il n'a plus affaire à du (x)HTML, et passera donc la balise du commentaire (<!--) sans en tenir compte.
Mais pour éviter qu'il soit déboussolé en rencontrant la balise de fin de commentaire (-->), nous allons lui dire, en JS, qu'il s'agit d'un commentaire, grâce à //.

Pour résumer, voici comment placer du JS dans une page en utilisant la balise <script> :

<script type="text/javascript">
<!--

   /* et vous pouvez placer votre code JS ici
   sans etre inquiete par les vieux navigateurs */

//-->
</script>
Dans l'en-tête ou dans le corps de la page (x)HTML

Ces balises, elles sont à mettre dans l'en-tête, ou dans le corps de la page ?

On peut les placer soit dans l'en-tête (<head> ... </head>), soit dans le corps (<body> ... </body>) de la page (x)HTML :

  • dans le corps de la page, sont à placer les scripts à exécuter au chargement de cette dernière (lorsque le navigateur "lira" le code, il l'exécutera en même temps).
    C'est ce que nous allons utiliser pour cet exemple, il suffit d'écrire le code à exécuter entre les balises ;

  • en revanche, sont à placer dans l'en-tête les éléments qui doivent être exécutés plus tard (lors d'un événement particulier, par exemple).
    Dans ce cas, le code n'est pas écrit "en vrac", nous apprendrons plus loin comment l'organiser.

Ce qui nous fait donc deux manières d'insérer le code grâce à ces balises.

Exemple d'application

Essayez de réaliser cet exemple : dans notre page web, on veut :

  • une boîte de dialogue indiquant le début du chargement de la page (donc, le code est à placer au début du corps de la page),

  • une autre indiquant la fin du chargement de celle-ci (donc, à la fin du corps).

Voici le code complet de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<!-- en-tete du document -->

  <title>Un exemple</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

  <!-- script pour le debut du chargement -->
  <script type="text/javascript">
  <!--
    alert('Debut du chargement de la page');
  //-->
  </script>
  
  <!-- ici se trouve le contenu de la page web -->
  <p>
    Vous testez un script...<br />
    Enjoy ;)
  </p>
   
  <!-- script pour la fin du chargement -->
  <script type="text/javascript">
  <!--
    alert('Fin du chargement de la page');
  //-->
  </script>

</body>

</html>

Placer le code dans un fichier séparé

Importer un fichier externe

Comme pour le CSS, on peut très bien placer notre code dans un fichier indépendant. On dit que le code est importé depuis un fichier externe. En CSS, l'extension de ce fichier (les deux à quatre lettres précédées d'un point à la fin d'un fichier) était .css.
Vous l'avez peut être deviné, l'extension du fichier externe contenant du code JavaScript est .js.

On va indiquer aux balises le nom et l'emplacement du fichier contenant notre (ou nos) script(s), grâce à la propriété src (comme pour les images).

Et voici ce que cela nous donne :

<script type="text/javascript" src="script.js"></script>

Ce même fichier qui contiendra par exemple ceci :

alert('Bonjour');
Créer le fichier

Si vous ne savez pas créer un fichier ayant l'extension .js, voici comment faire.

Avec Notepad++

  • Créez un nouveau fichier avec le menu Fichier, puis Nouveau.

  • Dans le menu Langage, sélectionnez... Javascript ! ^^

  • Enregistrez votre fichier, en lui donnant le nom que vous voulez, suivi de .js.

  • Pour ouvrir à nouveau ce fichier, clic droit, puis Open in Notepad++.

Avec Bloc-notes

  • Ouvrez Bloc-notes.

  • Dans le menu Fichier, choisissez Enregistrer sous...

  • Dans le menu déroulant Type de la nouvelle fenêtre, choisissez Tous les fichiers (ou All types en anglais).

  • Entrez le nom que vous voulez, suivi de .js.

  • Pour rouvrir ce fichier, faites un clic droit dessus, Ouvrir avec... puis choisissez Bloc-notes.

Image utilisateur

Enregistrer sous... avec Bloc-notes

De quoi se compose le "code" ?

Reprenons le "code" affichant une boîte de dialogue :

alert('Hello world');

Voyons voir de quoi il se compose...

Des instructions

Qu'est-ce que c'est ?

Voici un mot important en programmation ; une petite explication s'impose donc...
Une instruction est un "ordre" que l'on donne à l'ordinateur, comme on pourrait taper "format C:" dans sa console (les joies de Win pour les adeptes du grand nettoyage de printemps :D ).
alert('Hello world'); est donc une instruction : on ordonne au script de créer une boîte de dialogue.
Un autre exemple : un calcul est une instruction.

Une grande partie de ce que vous écrirez en JS sont des instructions, mais pas tout.
Difficile de vous donner des exemples maintenant, je vous indiquerai au fur à mesure ce qui est ou n'est pas une instruction.

Séparer des instructions

Quand on donne une instruction à l'ordinateur, il faut également lui dire où est la fin de cette instruction...
Pour cela, en JS, il y a deux solutions :

  • revenir à la ligne (avec la touche Entrée ou Enter) : l'ordinateur comprendra qu'il aura ensuite affaire à une autre instruction.

  • utiliser un point-virgule (;) à la fin de l'instruction, comme je l'ai fait dans les exemples jusqu'ici.
    Il est bien sûr parfaitement possible d'utiliser un point-virgule et un (ou plusieurs) retour(s) à la ligne...

Les fonctions

Explication

Une fonction est une suite d'instructions ayant un rôle précis. ( o_O )
Un exemple :

alert('Hello world');

Cette fonction affiche, lorsqu'on l'appelle (terme à retenir), une boîte de dialogue contenant le texte entre les apostrophes (ici : 'Hello world').

Si vous êtes un peu matheux (ou si vous avez simplement suivi en cours au collège et au lycée :p ), le terme fonction ne doit pas vous être inconnu... On a dit tout à l'heure qu'un calcul est une instruction. La fonction f telle que f(x) = 15x - 4 est une suite de calculs, donc en quelque sorte une suite "d'instructions" (par analogie avec le JavaScript, car instruction est un terme purement informatique).

Eh bien en JS, on a, parmi beaucoup d'autres, la fonction alert().

Rôle des parenthèses

À quoi servent les parenthèses vides que tu mets en écrivant alert() ?

Excellente question !

Revenons à notre exemple mathématique : entre les parenthèses, on précise la valeur de l'argument x.
Avec x = 5, on aura f(5) = 15*5 - 4 = 71.

C'est le même principe en JavaScript : par exemple, avec alert(), l'argument est le texte à afficher. S'il y a plusieurs arguments, ils sont séparés par des virgules.
On doit obligatoirement mettre ces parenthèses, même s'il n'y a aucun argument (elles seront alors vides).

De nouvelles fonctions

Il y a des fonctions déjà définies en JavaScript.
On peut aussi créer nos propres fonctions ?

Bien sûr !

Il existe en effet des fonctions déjà définies (retenez également ce terme) en JS, qu'on va donc pouvoir utiliser directement, comme notre fonction alert(). Le navigateur va alors chercher la définition de cette fonction et l'exécuter, ce qui aura pour effet de faire apparaître notre message.

Mais il est également possible de créer nos propres fonctions (par exemple, une fonction qui convertit des euros en francs), ce sera l'objet d'un chapitre.

Vous savez désormais exécuter du code JavaScript ; attaquons donc sans plus tarder le chapitre suivant !

Example of certificate of achievement
Example of certificate of achievement