Premiers pas en JavaScript

Comme indiqué précédemment, le JavaScript est un langage essentiellement utilisé avec le HTML, vous allez donc apprendre dans ce chapitre comment intégrer ce langage à vos pages Web, découvrir sa syntaxe de base et afficher un message sur l'écran de l'utilisateur.

Afin de ne pas vous laisser dans le vague, vous découvrirez aussi à la fin de ce chapitre quelques liens qui pourront probablement vous être utiles durant la lecture de ce cours.

Concernant l'éditeur de texte à utiliser (dans lequel vous allez écrire vos codes JavaScript), celui que vous avez l'habitude d'utiliser avec le HTML supporte très probablement le JavaScript aussi. Dans le cas contraire, voici 4 éditeurs que nous vous conseillons :

Sublime Text qui a su faire ses preuves ;
Atom ou Brackets qui sont deux éditeurs relativement récents écrits, en HTML et JavaScript (reposant sur Node.js) ;
WebStorm , ou la version supportant également le PHP, si vous en avez besoin : PhpStorm .

Afficher une boîte de dialogue

Le Hello World!

Ne dérogeons pas à la règle traditionnelle qui veut que tous les tutoriels de programmation commencent par afficher le texte « Hello World! » (« Bonjour le monde ! » en français) à l'utilisateur. Voici un code HTML simple contenant une instruction (nous allons y revenir) JavaScript, placée au sein d'un élément<script>:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>

<body>

    <script>
        alert('Hello world!');
    </script>

</body>
</html>

Essayer le code

Écrivez ce code dans un fichier HTML, et ouvrez ce dernier avec votre navigateur habituel :

Une boîte de dialogue s'ouvre, vous présentant le texte Hello world!

Les nouveautés

Dans le code HTML donné précédemment, on remarque quelques nouveautés.

Tout d'abord, un élément<script>est présent : c'est lui qui contient le code JavaScript que voici :

alert('Hello world!');

Il s'agit d'une instruction, c'est-à-dire une commande, un ordre, ou plutôt une action que l'ordinateur va devoir réaliser. Les langages de programmation sont constitués d'une suite d'instructions qui, mises bout à bout, permettent d'obtenir un programme ou un script complet.

Dans cet exemple, il n'y a qu'une instruction : l'appel de la fonctionalert().

La boîte de dialogue`alert()`

alert()est une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue contenant un message. Ce message est placé entre apostrophes, elles-mêmes placées entre les parenthèses de la fonctionalert().

La syntaxe du JavaScript

Les instructions

La syntaxe du JavaScript n'est pas compliquée. De manière générale, les instructions doivent être séparées par un point-virgule que l'on place à la fin de chaque instruction :

instruction_1;
instruction_2;
instruction_3;

En réalité le point-virgule n'est pas obligatoire si l'instruction qui suit se trouve sur la ligne suivante, comme dans notre exemple. En revanche, si vous écrivez plusieurs instructions sur une même ligne, comme dans l'exemple suivant, le point-virgule est fortement recommandé. Si le point-virgule n'est pas mis, l'interpréteur risque de ne pas comprendre qu'il s'agit d'une autre instruction et retournera une erreur.

Instruction_1;Instruction_2
Instruction_3

Les espaces

Le JavaScript n'est pas sensible aux espaces. Cela veut dire que vous pouvez aligner des instructions comme vous le voulez, sans que cela ne gêne en rien l'exécution du script. Par exemple, ceci est correct :

instruction_1;
    instruction_1_1;
    instruction_1_2;
instruction_2;     instruction_3;

Indentation et présentation

L'indentation, en informatique, est une façon de structurer du code pour le rendre plus lisible. Les instructions sont hiérarchisées en plusieurs niveaux et on utilise des espaces ou des tabulations pour les décaler vers la droite et ainsi créer une hiérarchie. Voici un exemple de code indenté :

function toggle(elemID) {
    var elem = document.getElementById(elemID);
    
    if (elem.style.display === 'block') {
        elem.style.display = 'none';    
    } else {
        elem.style.display = 'block';   
    }
}

Ce code est indenté de quatre espaces, c'est-à-dire que le décalage est chaque fois un multiple de quatre. Un décalage de quatre espaces est courant, tout comme un décalage de deux. Il est possible d'utiliser des tabulations pour indenter du code. Les tabulations présentent l'avantage d'être affichées différemment suivant l'éditeur utilisé, et de cette façon, si vous donnez votre code à quelqu'un, l'indentation qu'il verra dépendra de son éditeur et il ne sera pas perturbé par une indentation qu'il n'apprécie pas (par exemple, nous n'aimons pas les indentations de deux, nous préférons celles de quatre). Cependant, d'une manière générale, les espaces sont utilisés.

Voici le même code, mais non indenté, pour vous montrer que l'indentation est une aide à la lecture :

function toggle(elemID) {
var elem = document.getElementById(elemID);

if (elem.style.display === 'block') {
elem.style.display = 'none';    
} else {
elem.style.display = 'block';   
}
}

La présentation des codes est importante aussi, un peu comme si vous rédigiez une lettre : ça ne se fait pas n'importe comment. Il n'y a pas de règles prédéfinies comme pour l'écriture des lettres, donc il faudra vous arranger pour organiser votre code de façon claire. Dans le code indenté donné précédemment, vous pouvez voir qu'il y a des espaces un peu partout pour aérer le code et qu'il y a une seule instruction par ligne (à l'exception desif else, mais nous verrons cela plus tard). Certains développeurs écrivent leur code comme ça :

function toggle(elemID){
    var elem=document.getElementById(elemID);   
    if(elem.style.display==='block'){
        elem.style.display='none';  
    }else{elem.style.display='block';}
}

Vous conviendrez, comme nous, que c'est tout de suite moins lisible non ? Gardez à l'esprit que votre code doit être propre, même si vous êtes le seul à y toucher : vous pouvez laisser le code de côté quelques temps et le reprendre par la suite, et là, bonne chance pour vous y retrouver.

Les commentaires

Les commentaires sont des annotations faites par le développeur pour expliquer le fonctionnement d'un script, d'une instruction ou même d'un groupe d'instructions. Les commentaires ne gênent pas l'exécution d'un script.

Il existe deux types de commentaires : les commentaires de fin de ligne, et les commentaires multilignes.

Commentaires de fin de ligne

Ils servent à commenter une instruction. Un tel commentaire commence par deux slashs :

instruction_1; // Ceci est ma première instruction
instruction_2;
// La troisième instruction ci-dessous :
instruction_3;

Le texte placé dans un commentaire est ignoré lors de l'exécution du script, ce qui veut dire que vous pouvez mettre ce que bon vous semble en commentaire, même une instruction (qui ne sera évidemment pas exécutée) :

instruction_1; // Ceci est ma première instruction
instruction_2;
// La troisième instruction ci-dessous pose problème, je l'annule temporairement
// instruction_3;

Commentaires multilignes

Ce type de commentaires permet les retours à la ligne. Un commentaire multiligne commence par /* et se termine par */ :

/* Ce script comporte 3 instructions :
      - Instruction 1 qui fait telle chose
      - Instruction 2 qui fait autre chose
      - Instruction 3 qui termine le script
*/ 
instruction_1;
instruction_2;
instruction_3; // Fin du script

Remarquez qu'un commentaire multiligne peut aussi être affiché sur une seule ligne :

instruction_1; /* Ceci est ma première instruction */
instruction_2;

Les fonctions

Dans l'exemple duHello world!, nous avons utilisé la fonctionalert(). Nous reviendrons en détail sur le fonctionnement des fonctions, mais pour les chapitres suivants, il sera nécessaire de connaître sommairement leur syntaxe.

Une fonction se compose de deux choses : son nom, suivi d'un couple de parenthèses (une ouvrante et une fermante) :

myFunction(); // « function » veut dire « fonction » en anglais

Entre les parenthèses se trouvent les arguments, que l'on appelle aussi paramètres. Ceux-ci contiennent des valeurs qui sont transmises à la fonction. Dans le cas duHello world!, ce sont les mots « Hello world! » qui sont passés en paramètre :

alert('Hello world!');

Où placer le code dans la page

Les codes JavaScript sont insérés au moyen de l'élément<script>. Cet élément possède un attributtypequi sert à indiquer le type de langage que l'on va utiliser. Dans notre cas, il s'agit de JavaScript, mais ça pourrait être autre chose, comme du VBScript , bien que ce soit extrêmement rare.

Si vous n'utilisez pas le HTML5, sachez que l'attributtypeprend comme valeurtext/javascript, qui est en fait le type MIME d'un code JavaScript.

Le JavaScript « dans la page »

Pour placer du code JavaScript directement dans votre page Web, rien de plus simple, on fait comme dans l'exemple duHello world!: on place le code au sein de l'élément<script>:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>

<body>

    <script>
        alert('Hello world!');
    </script>

</body>
</html>

L'encadrement des caractères réservés

Si vous utilisez les normes HTML 4.01 et XHTML 1.x, il est souvent nécessaire d'utiliser des commentaires d'encadrement pour que votre page soit conforme à ces normes. Si par contre, comme dans ce cours, vous utilisez la norme HTML5, les commentaires d'encadrement sont inutiles.

Les commentaires d’encadrement servent à isoler le code JavaScript pour que le validateur du W3C (World Wide Web Consortium) ne l'interprète pas. Si par exemple votre code JavaScript contient des chevrons < et >, le validateur va croire qu'il s'agit de balises HTML mal fermées, et donc va invalider la page. Ce n'est pas grave en soi, mais une page sans erreurs, c'est toujours mieux !

Les commentaires d'encadrement ressemblent à des commentaires HTML et se placent comme ceci :

<body>
    <script>
    <!--

        valeur_1 > valeur_2;

    //-->
    </script>
</body>

Le JavaScript externe

Il est possible, et même conseillé, d'écrire le code JavaScript dans un fichier externe, portant l'extension.js. Ce fichier est ensuite appelé depuis la page Web au moyen de l'élément<script>et de son attributsrcqui contient l'URL du fichier.js. Voici tout de suite un petit exemple :

alert('Hello world!');

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>

<body>

    <script src="hello.js"></script>

</body>
</html>

On suppose ici que le fichier hello.js se trouve dans le même répertoire que la page Web.

Positionner l'élément`<script>`

La plupart des cours de JavaScript, et des exemples donnés un peu partout, montrent qu'il faut placer l'élément<script>au sein de l'élément<head>quand on l'utilise pour charger un fichier JavaScript. C'est correct, oui, mais il y a mieux !

Une page Web est lue par le navigateur de façon linéaire, c'est-à-dire qu'il lit d'abord le<head>, puis les éléments de<body>les uns à la suite des autres. Si vous appelez un fichier JavaScript dès le début du chargement de la page, le navigateur va donc charger ce fichier, et si ce dernier est volumineux, le chargement de la page s'en trouvera ralenti. C'est normal puisque le navigateur va charger le fichier avant de commencer à afficher le contenu de la page.

Pour pallier ce problème, il est conseillé de placer les éléments<script>juste avant la fermeture de l’élément<body>, comme ceci :

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>

<body>

    <p>
    <!--

        Contenu de la page Web

        ...

    -->
    </p>

    <script>
        // Un peu de code JavaScript...
    </script>

    <script src="hello.js"></script>

</body>
</html>

Quelques aides

Les documentations

Pendant la lecture de ce cours, il se peut que vous ayez besoin de plus de renseignements sur diverses choses abordées ; normalement toutes les informations nécessaires sont fournies mais si vous le souhaitez vous pouvez consulter une documentation, voici celle que nous vous conseillons :

Mozilla Developer Network

Ce site Web est une documentation ; dans le jargon informatique il s'agit d'un espace de documents listant tout ce qui constitue un langage de programmation (instructions, fonctions, etc.). Généralement, tout est trié par catégorie et quelques exemples sont fournis, mais gardez bien à l'esprit que les documentations n'ont aucun but pédagogique, elles remplissent leur travail : lister tout ce qui fait un langage sans trop s'étendre sur les explications. Donc si vous recherchez comment utiliser une certaine fonction (commealert()) c'est très bien, mais ne vous attendez pas à apprendre les bases du JavaScript grâce à ce genre de sites, c'est possible mais suicidaire, surtout si vous débutez en programmation.

Tester rapidement certains codes

Au cours de votre lecture, vous trouverez de nombreux exemples de codes, certains d'entre eux sont mis en ligne sur OpenClassrooms mais pas tous (il n'est pas possible de tout mettre en ligne, il y a trop d'exemples). Généralement, les exemples mis en ligne sont ceux qui requièrent une action de la part de l'utilisateur, toutefois si vous souhaitez en tester d'autres nous vous conseillons alors l'utilisation du site suivant :

jsFiddle

Ce site est très utile car il vous permet de tester des codes en passant directement par votre navigateur web, ainsi vous n'avez pas besoin de créer de fichier sur votre PC pour tester un malheureux code de quelques lignes.

Pour l'utiliser, rien de plus simple : vous copiez le code que vous souhaitez tester puis vous le collez dans la sectionJavaScripten bas à gauche de la page. Une fois que vous avez copié le texte, il ne vous reste plus qu'à cliquer sur le boutonRunen haut à gauche et votre code sera exécuté immédiatement dans la sectionResulten bas à droite. Essayez donc avec ce code pour voir :

alert('Bien, vous savez maintenant utiliser le site jsFiddle !');

Voilà tout pour les liens, n'oubliez pas de vous en servir lorsque vous en avez besoin, ils peuvent vous être très utiles !

En résumé

Les instructions doivent êtres séparées par un point-virgule.
Un code JavaScript bien présenté est plus lisible et plus facilement modifiable.
Il est possible d'inclure des commentaires au moyen des caractères //, /* et */.
Les codes JavaScript se placent dans une balise <script>.
Il est possible d'inclure un fichier JavaScript grâce à l'attributsrcde la balise <script>.

Dynamisez vos sites web avec JavaScript !