Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > Javascript > Voir tout le tutoriel

Tout sur le Javascript !

Auteur : JoSé2
Créé : le 06/08/2006 02:38:52
Modifié : le 26/03/2008 09:26:34
Avancement : 30%
Imprimer tout le tutoriel
JavaQuoi ?! :o

Ne me dites pas que vous n'avez jamais entendu parler du JavaScript ! o_O (Ou JS, pour les intimes.)

Ce langage de programmation Web véritablement magique qui rend n'importe quelle page morose en une vraie machine dynamique ! :magicien:

Il permet de faire interagir le visiteur avec la page, en réagissant différemment selon les actions de celui-ci. Un langage merveilleux qui, comme vous l'aviez sûrement compris, sera notre sujet d'étude tout au long de ce tutoriel...


Alors, envie de créer un site interactif et attrayant ?
Ne vous inquiétez pas, ce n'est pas difficile... Après tout, nous sommes sur le Site du Zér0 !

Il est primordial d'avoir des connaissances solides en (x)HTML pour comprendre ce tutoriel ! Si ce n'est pas le cas, direction le tuto de M@teo sur les sites Web.
Le JavaScript est en effet un langage qui dépend du (x)HTML.

Posséder quelques connaissances dans un autre langage de programmation (C / C++, PHP, Pascal, Maurice :p ...) peut vous être très utile, puisque beaucoup de langages (dont le JavaScript) sont dérivés du C...

(Nous allons partir du principe que la seule chose que vous ayez appris est l'XHTML et le CSS, d'après le cours de M@teo. Si ce n'est pas le cas, vous allez devoir réapprendre des choses que vous savez déjà, mais sous une autre forme... ).


Bon, assez bavardé, en avant !
Ce cours est composé des parties suivantes :

Partie 1 : Faire connaissance avec le JavaScript

Bienvenue dans la toute première partie de ce tutoriel !

Dans cette partie, vous vous familiariserez avec le JS et découvrirez la syntaxe de ce langage.
Ce sont des notions qui se retrouvent, pour la plupart, dans beaucoup de langages de programmation.

Présentation

Avant de nous lancer dans des lignes de code, je vous ai préparé un petit avant-propos qui ne vous fera aucun mal ;) . Vous en apprendrez un peu plus sur le JS (JavaScript), et nous ferons par la même occasion un peu d'histoire.
Ce chapitre n'est pas placé en annexe car il apporte des éléments importants : prenez donc le temps de le lire.

Au risque de me répéter, le JS s'insère dans une page Web et nécessite donc de bonnes bases en (x)HTML.

Le JavaScript : c'est quoi ?

Qu'est-ce que c'est ?




Définition



Le JavaScript est un langage de programmation.
Pour être plus précis, c'est un langage orienté objet : quand on code en JavaScript, on se base sur des objets. Je n'en dis volontairement pas plus pour l'instant, car ce sujet sera abordé un peu plus loin, lorsque vous aurez déjà acquis les connaissances requises.

Pour une définition plus complète, voici un "remix" de ce que nous propose notre ami Google :

Citation : Google, define: JavaScript
Le JavaScript est un langage de script basé sur la norme ECMAScript.
Il s'insère dans le code (x)HTML d'une page web, et permet d'en augmenter le spectre des possibilités.
Ce langage de POO [Programmation Orientée Objet], faiblement typé, est exécuté côté client.

Je l'avoue, c'est très compliqué... Mais pas de panique, nous allons aborder les différents points de cette définition au fil du tuto.

Utilisation



Tout d'abord, plantons le décor : de quelle manière s'utilise-t-il ?
Sa principale utilisation est, comme je vous l'ai dit, à l'intérieur des pages web : on dit alors que le JavaScript est une extension du (x)HTML. Il permet de rendre celles-ci interactives.
Voici quelques exemples (on pourrait en citer beaucoup d'autres) de ce que l'on peut en faire dans une page Web :
Vous voyez que les possibilités sont donc nombreuses (le JavaScript sert en effet beaucoup sur ce site).
Il ne faut cependant pas "polluer" son site avec trop de scripts inutiles... Les pop-up ou les images qui suivent la souris partout peuvent agacer le visiteur, et "charger" un site, si bien qu'il est difficile d'accéder clairement aux informations qu'il propose...

L'utilisation du JavaScript ne se limite toutefois pas aux pages web : étant un langage pratique à mettre en oeuvre (il suffit d'un navigateur et d'un éditeur de texte tel que Bloc-notes), il s'est répandu et se répand ailleurs.
Un exemple : vous pouvez créez vos propres plugins pour Messenger Plus! Live en JScript (c'est JavaScript à quelques différences près).
Il est également possible de faire facilement de petites "applications" en DHTML !

Attend, c'est quoi le DHTML ? o_O

Le DHTML (Dynamic HyperText Markup Language) désigne des pages dont le contenu (ou la mise en forme) est modifié sans avoir à recharger la page. (Ce terme n'a pas de définition officielle du W3C.)
C'est bien le cas des exemples cités ci-dessus : on modifie une image, on la déplace, on fait défiler du texte, ...


Un peu d'histoire ...



Le JavaScript, inventé par un certain Brendan Eich et développé par Netscape, fait son apparition en 1995, sous le nom de LiveScript, dans le but de dynamiser les pages web.
Son utilisation s'est largement répandue, et il se fait rapidement accepter par d'autres navigateurs.
Il est aujourd'hui très présent sur les sites web : de plus en plus de webmasters s'y intéressent, et il est de mieux en mieux accepté, à la fois par les navigateurs et par les visiteurs ; ce qui lui réserve sans doute un bel avenir...


Les caractéristiques du JavaScript



Voici un petit résumé de ce que l'on a déjà pu dire à propos des caractéristiques du JS. Ceci est à retenir.

Comment ça marche ?

Primo : un script



Un script ? :o


Oui, script, comme dans JavaScript...

Comme beaucoup de mots d'utilisation usuelle (ici dans le milieu de l'informatique), script a deux sens : l'un, qu'on pourrait qualifier de "global", l'autre de strict.

La définition la plus simple est la définition globale, celle qu'on utilise tout le temps et qui pourtant ne veut rien dire :
un script, c'est tout simplement un bout de code JavaScript qui a une tâche précise.
Dès que l'on parlera de script, ce sera pour désigner le code que l'on aura inséré à notre page Web.

Mais, si ça n'a pas vraiment de sens, c'est parce que la véritable signification du mot script en informatique est bien plus rigoureuse.

Grosso modo, pour faire simple, un script est, par opposition à un langage compilé, un langage qui s'interprète. Ici, l'interprète du JavaScript, c'est le navigateur du visiteur (le client).

Cette dernière définition, nous ne l'utiliserons sûrement presque pas : dès qu'on a compris, ça ne sert plus vraiment à grand-chose de le savoir.

L'intérêt des scripts est sans doute leur manière d'être utilisés : en effet, ils ne sont pas obligatoirement exécutés au chargement de la page. Ils sont lancés lorsqu'un événement spécifique se produit.
Pour illustrer ceci, voici quelques exemples d'événements qui peuvent se dérouler lors de la visite d'une page Web :

Et vous vous retrouvez avec un site très interactif : vous ne pouvez plus bouger la souris sans déclencher un script ;) .
Ceci étant, ce n'est pas un très bon exemple. Je l'ai peut-être déjà dit, mais les pop-up qui s'ouvrent tout le temps, et les scripts à n'en plus finir, c'est chiant très agaçant ( :-° ).


Secundo, un client



Un client ? :o

Oui, un client (ou encore visiteur, enfin celui qui visite la page web en question).
Vous avez peut-être déjà rencontré ce mot (dans le sous-chapitre précédent), mais quelques explications s'imposent tout de même...

Si vous avez suivi les cours sur le PHP, vous devriez savoir que celui-ci est exécuté côté serveur.
Autrement dit, vous demandez au serveur de vous donner une page (par exemple la page d'accueil du SdZ) : il va lire cette page, exécuter le code PHP et vous donner la page ainsi générée.

Eh bien en JavaScript, ce n'est pas comme ça.
Vous demandez la page au serveur : il vous la donne (après avoir exécuté les éventuels scripts PHP), et c'est votre navigateur qui exécute le script (soit immédiatement, soit lorsqu'un événement précis se produit).

Schématiquement, pour ceux qui justement n'y connaissent rien en PHP, voici comment ça marche :

Schéma du processus d'interprétation d'un script

  1. votre ordinateur récupère le code source de la page en question.
  2. Votre navigateur interprète la page et les scripts qu'elle contient.
  3. La page formatée s'affiche sur votre écran. Les scripts, quant à eux, sont mis en mémoire et seront lancés dès que l'événement attendu se produira.

Et ça change tout !
Comme c'est votre navigateur qui exécute le script, il a donc accès au code de celui-ci (sinon comment ferait-il pour l'exécuter ? :-° ). Et si votre navigateur y a accès... vous pouvez vous aussi y avoir accès (pour les curieux, c'est dans la source de la page, entre les balises (x)HTML, comme nous l'apprendrons rapidement).

Ce n'est donc pas sécurisé du tout !
N'importe qui peut voir le script de votre page !

Les scripts d'une page ne vous plaisent pas ? Qu'à cela ne tienne : il suffit par exemple de désactiver le JavaScript (parmi les options du navigateur web)...

JavaScript et Java

JavaScript n'est pas Java !



Je termine avec un point important (comme diraient nos confrères anglais, "Last, but not least" ^^ ) :

Ne pas confondre JavaScript et Java !!!


J'insiste sur ce point. C'est une confusion courante, mais ces langages sont totalement différents. Le Java a été développé par Sun Microsystems au début des années 90.
Pour vous donner une idée, le langage Java serait plus proche du C++ que du JavaScript.


Si "LiveScript" (en rappel, c'est la tout première appellation du JavaScript) a pris le nom qu'on lui connaît aujourd'hui, c'est parce que Java et JavaScript ont un seul point commun : ce sont des langages orientés objet (comme le C++ si vous connaissez, c'est pour cela qu'ils sont proches). A part cela, je le dis et je le répète, ces deux langages sont strictement opposés !

Alors, s'il y en a un qui confond ces deux langages, ça va chi mal se passer :pirate: !!!
Maintenant que vous savez ce qu'est le JS, direction le chapitre suivant.
Au programme : la création de votre premier script :) !

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 :

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.

Les commentaires, c'est comme tout, il ne faut pas en abuser : il n'est pas nécessaire de commenter chaque ligne, ça rendrait votre code lourd.
Mieux faut commenter le code par portion, en ne mettant des commentaires que lorsque vous les jugez utiles.


En (x)HTML



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

Code : HTML
1
<!-- 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) :

Code : HTML
1
2
<!-- 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.


Un petit exemple pour vous montrer :

Code : JavaScript
1
2
3
4
5
6
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 :

Code : JavaScript
1
alert('Hello world');

Ceci est du code JavaScript.
Si vous l'écrivez tel quel dans votre page HTML, il ne marchera pas.
Nous allons voir quelques lignes plus bas comment exécuter ce code ; lisez donc la suite avant de vous précipiter sur Notepad++ ;) .

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

Nous étudierons plus en détail ce code, une fois que vous saurez insérer du JS sur une page Web, autrement dit un peu plus bas sur cette page.

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

Avant de continuer, je vous rappelle juste quelques informations essentielles concernant le xHTML :

Structure de la page (code minimal) :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!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>
  <title>Titre de la page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!-- en-tete du document -->
</head>
<body>
  <!-- corps du document -->
</body>
</html>

Formation des balises et vocabulaire :
Code : HTML
1
2
3
4
5
<!-- paire de balises -->
<nom propriété="valeur">texte</nom>

<!-- balise seule -->
<nom propriété="valeur" />

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

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

Code : HTML
1
<nom eventHandler="script" />

Examinons tout de suite un exemple.
Ça nous donne ceci :

Code : HTML
1
<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: !

Après le on, le C de click doit être en minuscule ! Ceci est valable pour tous les gestionnaires d'événements.
S'ils sont écrits avec une majuscule, la page est invalide !

Si, même après le changement de la majuscule, rien ne se passe, votre navigateur a peut-être empêché le JS de s'exécuter.
Dans ce cas, référez-vous à l'aide de celui-ci.

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 :

Secret (cliquez pour afficher)
Code : HTML
1
<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 :

Code : HTML
1
<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 :
Gestionnaires d'événements de la balise <body> :

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 :

Code : HTML
1
<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" :

Code : HTML
1
2
3
<body onload="alert('Bonjour !');" onunload="alert('Au revoir !');">
  <!-- corps de la page -->
</body>

Ce dernier exemple est typique de ce qu'il ne faut pas faire !
Une page contenant trop de JavaScript devient vite énervante, surtout dans ce type d'utilisation.


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 :

Code : HTML
1
2
3
4
5
6
<script type="text/javascript">

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

</script>

Mais il y a un problème !
Imaginez un vieux navigateur qui ne connaît pas le JS : s'il tombe sur cette balise, il va tout simplement l'ignorer, car elle lui sera inconnue. Mais tout le code qui suit sera considéré comme du texte, il va donc l'afficher sur votre page !
Pas très élégant :( .
Il existe heureusement une solution...

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> :

Code : HTML
1
2
3
4
5
6
7
8
<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 :
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 :
Voici le code complet de la page :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>

Vous remarquez que tant que la première boîte de dialogue est ouverte, la page n'est pas chargée.
En effet, le navigateur exécute le JS au fur et à mesure du chargement de la page : il attend donc que le script soit terminé avant de charger la suite.


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

Comme il n'y a plus de code entre les balises, la technique pour masquer le code aux anciens navigateurs n'a plus lieu d'être.

Et voici ce que cela nous donne :

Code : HTML
1
<script type="text/javascript" src="script.js"></script>


Comme vous l'avez peut-être remarqué, il n'y a rien à écrire entre les balises <script> et </script>... On peut donc faire de ces balises jumelles une seule et même balise, qui sera <script/>.

Voici donc comment importer le fichier script.js :

Code : HTML
1
<script type="text/javascript" src="script.js" />


Ce même fichier qui contiendra par exemple ceci :

Code : JavaScript
1
alert('Bonjour');


Créer le fichier



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

Avec Notepad++
Avec Bloc-notes
Image utilisateur
Enregistrer sous... avec Bloc-notes

De quoi se compose le "code" ?

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

Code : JavaScript
1
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 :
Dans de nombreux langages de programmation (le JavaScript étant une exception), le point-virgule est obligatoire à la fin d'une instruction.
Je vous recommande donc fortement de prendre l'habitude d'en mettre un après chaque instruction.


Les fonctions




Explication



Une fonction est une suite d'instructions ayant un rôle précis. ( o_O )
Un exemple :
Code : JavaScript
1
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).

Normalement, le nom de la fonction est alert, ou f pour la fonction mathématique citée plus haut.
Employer le nom alert() est un abus de langage, mais cela permet de repérer facilement qu'on parle d'une fonction.



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 !

Le chapitre qui va suivre est capital !
Lisez-le avec attention car il introduit des notions assez complexes.

Les variables

Un ordinateur sait bien faire des calculs et des opérations en tout genre.
Mais il possède également une mémoire "infaillible" pour retenir un tas d'informations (les résultats des calculs, par exemple ;) ) : vous allez voir dans ce chapitre qu'en Javascript, savoir utiliser cette mémoire est indispensable, ou presque...

Profiter de la mémoire de son ordinateur

En javascript, vous aurez rapidement besoin de demander à votre ordinateur de retenir des données.
Qu'est-ce que j'entends par données ? Aussi bien des nombres que des mots, ou des phrases (et même plus). C'est ce que nous verrons un peu plus bas.

Je vous rappelle que le JS est exécuté côté client.
Un exemple : vous pouvez enregistrer l'âge d'un visiteur pour lui souhaiter un bon anniversaire le jour J (sur son PC, en enregistrant sa date de naissance).
En revanche, impossible de créer un livre d'or : on ne peut pas enregistrer les messages sur le serveur pour les rendre accessible à tous les visiteurs.



De quelle manière sont enregistrées les données ?



Peut-être vous demandez-vous comment votre ordinateur range toutes ces informations ?
Vous vous doutez bien qu'on ne fait pas un "gros tas" de données, en vrac : imaginez la galère pour retrouver ce qui nous intéresse :waw: .
Comme vous vous en doutez, tout cela est organisé.


Illustrons un peu le fonctionnement ...



Imaginez plein de boîtes vides : c'est la mémoire de l'ordinateur.
On veut par exemple retenir le nombre 2006, mais on ne peut pas le mettre comme ça dans une boîte vide, car on ne pourra pas le retrouver !
On va donc coller une étiquette sur une boîte, pour la nommer "annee" : on pourra donc la retrouver plus tard.
On va maintenant pouvoir y ranger le nombre 2006 à l'intérieur.

Illustration
Image utilisateur


Eh bien en JS, c'est un peu ce principe :

Que faire avec ces données ?



Premièrement (c'est la raison pour laquelle vous les avez enregistrées :) ), vous allez pouvoir les lire quand vous en aurez besoin.
Cela consiste à ouvrir la boîte, prendre l'information, l'utiliser et la remettre dans sa boîte.
Par exemple, on fait un calcul, on enregistre le résultat dans une variable, et lorsque l'utilisateur clique sur un bouton spécial, on affiche le résultat.

Pouvoir lire ces données, c'est déjà pas mal.
Mais vous aurez vite besoin de les modifier.
Dans ce cas, on ouvre la boîte, et on remplace l'ancienne valeur par la nouvelle.
Une application (certes stupide :D ) : un bouton qui, à chaque clic, augmente de 1 la valeur d'une variable. Vous pouvez alors afficher le nombre de fois que le visiteur a cliqué sur ce bouton (ou "comment occuper son petit frère pendant quelques heures" :p ).


Créer, lire et modifier une variable



Maintenant que vous avez compris (du moins je l'espère ;) ) ce que c'était, voyons le fonctionnement en JavaScript.


Créer la variable



Pour créer une variable, rien de compliqué. Voici comment ça fonctionne :
Code : JavaScript
1
var nom;

C'est une instruction, vous remarquez donc le point-virgule en fin de ligne...


nom est le nom de la variable (si vous avez aimé mon illustration, c'est ce qui est écrit sur l'étiquette collée sur la boîte).
Le terme exact n'est pas "créer" , mais déclarer une variable.
Pour ceux qui aiment les maths, si on prend la phrase "soit x l'âge de Toto, en années", le var correspondrait au soit.

(Note : nous verrons un peu plus loin qu'il y a des cas pour lesquels on ne déclare pas une variable.
Mais retenez pour l'instant qu'il ne faut pas oublier la déclaration).
Faites attention à ne pas déclarer deux fois la même variable.


On peut donner le nom qu'on veut à nos variables ?

Eh non, ce serait trop beau :euh: .
Le nom peut contenir les 26 lettres de l'alphabet, en majuscules et en minuscules, les 10 chiffres ainsi que le underscore (le tiret du bas, touche 8 sur les claviers français).
Mais il ne doit pas commencer par un chiffre.

Il y a également des mots "interdits" : ils existent déjà en JS, mais pour autre chose. Si on les utilise comme nom de variable, l'ordinateur ne saura plus de quoi il s'agit.
Parmi cette liste de mots, les plus courants (pour un français) seraient "break", "case", "char", "continue", "delete", "double", "final", "long", "new", "public" et "super". Les autres sont des noms anglais moins courants (je ne pense pas que vous ayez l'idée d'appeler une variable "throws" :p ).
Vous pourrez retrouver la liste complète en annexe.

Heureusement, ça vous laisse quand même du choix dans le nom de vos variables :) .

Le JavaScript est sensible à la casse : autrement dit, il fait la différence entre lettres majuscules et minuscules.
Ainsi, nom, Nom et NOM sont trois variables différentes !


Préférez aussi un nom relativement court et explicite pour vos variables.
N'allez pas créer la variable taratata, hEUrE ou bien laDateDeNaissanceDuMonsieurQuiVisiteMonNouveauSiteWeb ;) .
Dans le premier cas, on ne sait pas ce que c'est, dans le second, vous risquez de vous tromper entre majuscules et minuscules, et le dernier... un peu lourd et pas très pratique à écrire !
Préférez les noms heure et dateDeNaissance (ou date_de_naissance (avec des tirets) : à vous de trouver la meilleure écriture).


Notez que nous utilisons une mémoire temporaire : les variables sont détruites lorsque le visiteur quitte la page (lorsqu'il change de page, entre autres).


Modifier la valeur d'une variable



Pour modifier la valeur d'une variable, rien de plus simple : on utilise pour cela le symbole d'affectation = de cette manière :
Code : JavaScript
1
2
3
4
5
var annee;
var message;

annee = 2006;
message = "Bonjour, visiteur";


Il n'est pas obligatoire de déclarer les variables au début du code, mais ça peut vous éviter de déclarer deux fois une même variable.


Il est possible, lorsque l'on crée une variable, de lui affecter immédiatement une valeur. On dit qu'on initialise cette variable.
Code : JavaScript
1
2
var annee = 2006;
var message = "Bonjour, visiteur";


Pourquoi met-on des guillemets dans la variable message ?

Car ils délimitent du texte. Je n'en dis pas plus, j'y reviendrai un peu plus bas.

On peut modifier une variable autant de fois qu'on veut :
Code : JavaScript
1
2
3
var annee = 2004; // on declare et initialise la variable
annee = 2005; // on modifie une premiere fois
annee = 2006; // puis une deuxieme fois



Lire une variable



Lorsque l'ordinateur trouve un nom de variable, il fait directement référence à son contenu.
Autrement dit, si j'ai une boîte nommée annee contenant la valeur 2006, si je parle à l'ordinateur de annee (sans guillemets), il ira chercher la valeur contenue par cette boîte.

Un exemple sera plus simple : reprenons nos alertes.
Code : JavaScript
1
2
var annee = 2006;
alert(annee);


ce qui affichera "2006"...
Remarquez l'absence de guillemets : en effet, on ne veut pas afficher le texte "annee", mais le contenu de cette variable.
Alors maintenant, on ne doit pas mettre de guillemets lors des alertes ?! o_O

Je n'ai jamais dit ça : voyons plutôt quand les utiliser.

Les chaînes de caractères

"Chaîne de caractères", un nom au premier abord un peu barbare ...
Ce n'est en fait pas bien méchant.

En anglais : string (je ne le dit pas pour le "jeu de mot" d'une finesse sans égale, mais parce que, tôt ou tard, vous en entendrez parler).
C'est une suite de caractères (un caractère est une lettre, un chiffre, un espace, un tiret...) qui a un ordre précis.
Dit autrement, ce sont des caractères mis bout-à-bout.
Cela forme donc... du texte ! (Dit comme ça, c'est tout de suite plus simple ^^ .)

C'est un type de donnée, au même titre qu'un nombre.


Une sous-partie entière pour nous parler du texte ? o_O

Eh oui, vous verrez qu'il y a des choses à dire...


Délimiter une chaîne de caractères



Vous vous dites peut-être : "c'est facile, il suffit d'écrire le texte après le signe = pour enregistrer du texte dans une variable".

Que nenni !
Et cela pour plusieurs raisons : tout d'abord, comment l'ordinateur saurait où se trouve le début et la fin de votre texte ? (Le point virgule en fait-il partie, ...)
Deuxièmement, l'ordinateur analysera le type de données : est-ce que ce sont des variables ? Des chiffres ?

Il va donc falloir dire à l'ordinateur : "ceci est une chaîne de caractères, n'essaie pas de comprendre".
Et pour cela, on utilise indifféremment les guillemets " (dits "double quotes") ou les apostrophes ' (dites "simple quotes") : ils délimitent la chaîne de caractères, un peu comme une citation.

Pourquoi deux types de guillemets ?

Car le JavaScript peut être placé directement dans une balise (x)HTML (rappelez-vous du onclick) : dans ce cas, on ne peut pas mettre de double quotes (ils sont déjà utilisés en (x)HTML pour délimiter le script). On utilise donc les simple quotes.

Un exemple :
Code : HTML
1
<img src="monImage.png" alt="" onclick="alert('Bonjour');" />


Code : JavaScript
1
alert('Bonjour');

Vous souvenez-vous du code que je vous ai donné auparavant ?
Eh bien vous pouvez maintenant comprendre qu'entre les parenthèses, on met... une chaîne de caractères !


Voyons quelques exemples (avec les variables) :
Code : JavaScript
1
2
3
4
5
6
7
// deux chaines de caracteres
var message1 = 'Une autre chaine de caracteres';
var message2 = "C'est une chaine de caracteres ...";

// maintenant, on les affiche
alert(message1);
alert(message2);



Caractères spéciaux et d'échappement



Et si je veux mettre des guillemets à l'intérieur de ma chaîne, qui est délimitée par des guillemets ?
Et comment je fait un saut de ligne ?



Tout d'abord, les guillemets.

Ceci ne marchera pas, car les guillemets servent à délimiter la chaîne :
Code : JavaScript
1
2
var message = "Ceci est un "petit" test";
alert(message);

Il faut dire à l'ordinateur que les guillemets du milieu sont des caractères normaux, et non pas les délimiteurs.
Pour cela, on utilise ce qu'on appelle un caractère d'échappement : on fait précéder le guillemet à afficher d'un \ (antislash, touches Alt Gr + 8 pour les claviers français, Alt Gr + < pour les belges).
Et pour afficher un antislash... on le fait précéder d'un antislash aussi ^^ .
Code : JavaScript
1
2
3
4
5
var message1 = "Ceci est un \"petit\" test. Mais pas besoin d'antislash \\ devant les apostrophes.";
var message2 = 'Un autre "petit" test. Cette fois, il faut penser à l\'antislash devant les apostrophes';

alert(message1);
alert(message2);



Les caractères spéciaux

On peut également insérer des retours à la ligne (qu'on ne peut pas insérer simplement en appuyant sur la touche Enter), ainsi que des tabulations ou autres.

Voici les caractères spéciaux les plus courants :

Un exemple (cela signifie "Bonjour ! - Comment vous appelez-vous ?" en allemand. Je l'ai pris pour le caractère spécial) :
Code : JavaScript
1
alert("Gutentag !\nWie hei\u00DFen Sie ?");



La concaténation



Concaquoi ?! o_O

Pas de panique, encore un mot compliqué pour quelque chose de simple.
Partons d'un "exercice" : on a une variable age qui contient ... l'âge du visiteur (si, si !).
On veut afficher un message annonçant : "Vous avez XX ans" (XX est l'âge).

Immédiatement, vous m'écrivez ceci :
Code : JavaScript
1
alert("Vous avez age ans");

Et, ô déception, vous voyez s'afficher "Vous avez age ans". :'(


Pour faire cela, on va en fait mettre bout-à-bout nos 3 morceaux de chaîne (le premier morceau est "Vous avez ", ensuite la variable age, et enfin " ans", sans oublier les espaces après "avez" et avant "ans").
Concaténer, c'est en fait "mettre bout-à-bout" plusieurs chaînes de caractères pour n'en former qu'une seule.

Comment faire ? On utilise simplement le symbole de concaténation + entre chaque morceau (pour ceux qui connaissent, en php, c'est le point qui est utilisé), comme ceci :
Code : JavaScript
1
2
var age = 18; // on cree la variable pour pouvoir tester
alert("Vous avez " + age + " ans"); // on affiche les chaines mises bout-à-bout

(On aurait aussi pu créer une variable message contenant la chaîne concaténée, et l'afficher ensuite.)


Demander une chaîne de caractère au visiteur



Vous avez peut-être envie de tester ce code, mais avec une variable age contenant l'âge qu'on aura demandé au visiteur ?
Voyons une première façon de le lui demander.

Vous vous souvenez sûrement de nos alert("message"); affichant un message dans une boîte de dialogue.
Eh bien il existe un moyen très proche (encore une boîte de dialogue) pour demander au visiteur de saisir son âge.

Une boîte de dialogue demandant au visiteur de saisir un texte
Image utilisateur


Code : JavaScript
1
var age = prompt("Texte d'invite");

Entre les parenthèses, on met une chaîne de caractères (comme pour alert) qui sera affichée au-dessus du champ pour saisir son texte.
On récupère la chaîne de caractères dans la variable age (notez que si elle a déjà été déclarée, on ne met pas le var devant).

Voici un exemple complet (que je vous conseille de réaliser) : on demande l'âge du visiteur pour le lui afficher ensuite (dans une phrase).
Ce qui nous donne ceci :
Code : JavaScript
1
2
var age = prompt("Quel âge avez-vous ? (en années)"); // on demande l'age
alert("Vous avez " + age + " ans");          // on affiche la phrase




Vous savez maintenant écrire... apprenons donc à compter ;) .
C'est vrai, après tout, un ordinateur n'est rien d'autre qu'une espèce de grosse machine à calculer.

Les nombres

Un autre type de variable



Les nombres, au même titre que les chaînes de caractères, sont un type de variable.
Comme ce sont des nombres (l'ordinateur sait compter), on ne met pas de guillemets : l'ordinateur va "comprendre" qu'il s'agit d'un nombre, et va l'enregistrer à sa manière (et non pas bêtement chiffre par chiffre, comme il l'aurait fait avec une chaîne de caractères).

Ils se classent en deux catégories :

Notez tout d'abord qu'on n'utilise pas la virgule, mais le point.
On écrira par exemple 3,14 3.14.


Un petit exemple :
Code : JavaScript
1
2
var nombre = 1.234;
alert(nombre);



Des nombres pour calculer



Comme vous le savez, avec des nombres... on peut faire des calculs. Eh oui, le JavaScript, c'est parfois aussi des maths ^^ .
L'ordinateur est particulièrement doué pour ces calculs...
Voici les opérateurs de base :

Allons faire quelques exercices d'application...
Un programme qui demande deux nombres et qui en affiche le quotient (qui effectue une division, si vous préférez).
A vos claviers ;) .

Correction...
Secret (cliquez pour afficher)
Code : JavaScript
1
2
3
4
5
6
7
// on demande les nombres
var nombre1 = prompt('Premier nombre ?');
var nombre2 = prompt('Deuxieme nombre ?');

// on calcule le quotient et on l'affiche
var resultat = nombre1 / nombre2;
alert("Le quotient de ces deux nombres est " + resultat);

Notez qu'on aurait pu afficher directement le résultat, sans créer une variable pour celui-ci. On aurait alors mis le calcul à la place du nom de la variable dans le message à afficher.



Cas particuliers



Peut-être avez-vous essayé de faire planter le truc (le genre de truc que j'adore m'amuser à faire :p ).
Voici les messages que vous avez pu obtenir :


Nombres et chaînes de caractères



Vous vous demandez comment convertir un nombre en chaîne de caractères, ou inversement ?


Chaîne --> nombre



Sachez que dans la plupart des cas, la conversion est faite au-to-ma-ti-que-ment.
Un exemple ? Dans votre script de division (quelques lignes plus haut), on demande en fait au visiteur non pas un nombre, mais une chaîne de caractères. Mais lorsque vous demandez à diviser, l'ordinateur sait qu'il ne peut pas les diviser. Il va donc essayer de les convertir en nombre (c'est là qu'il vous sort le fameux "NaN" s'il n'arrive pas à effectuer cette conversion).

Une preuve ? Essayez le même script, mais avec une addition...
L'ordinateur va croire qu'il doit concaténer ces deux chaînes.
Résultat : en tapant "8" et "12", on obtient... 812 !

Mais comment je fais pour mon script de calculatrice, alors ?!

Rassurez-vous, il est fort heureusement possible d'effectuer "manuellement" cette conversion, grâce à parseInt(chaine_a_convertir) (convertir en un nombre entier) et à parseFloat(chaine_a_convertir) (convertir en un nombre décimal).
Si la conversion échoue, on obtient un "NaN".


Quelques exemples vous montrant la souplesse de ces fonctions :

Voici le script de division transformé en script d'addition :
Code : JavaScript
1
2
3
4
5
6
var nombre1 = prompt('Premier nombre ?');
var nombre2 = prompt('Deuxieme nombre ?');

// on convertit en nombres decimaux et on calcule
var resultat = parseFloat(nombre1) + parseFloat(nombre2);
alert("La somme de ces deux nombres est " + resultat);



Nombre --> chaîne



Idem, cette conversion se fait automatiquement (lorsque l'on affiche un nombre au milieu de texte, il le convertit pour le concaténer ensuite).

Si vraiment vous avez besoin d'effectuer manuellement cette conversion (par exemple en voulant afficher deux nombres les uns derrière les autres), vous pouvez ajouter des '' (deux apostrophes).
En ajoutant une chaîne entre ces nombres, l'ordinateur sera forcé de les concaténer.
Exemple :
Code : JavaScript
1
2
3
var nombre1 = 8;
var nombre2 = 12;
alert(nombre1 + '' + nombre2);



Priorités de calcul



Ces opérateurs se rangent en deux catégories :

- Tout d'abord, les opérations de la première catégorie sont effectuées de gauche à droite.
- Ensuite (il ne reste donc que des additions et soustractions, les autres calculs sont déjà effectués), le calcul se fait de gauche à droite.

S'il y a des parenthèses, on effectue le calcul entre celles-ci en priorité, suivant ces règles.


Un exemple : calcul étape par étape (en bleu, le calcul à effectuer ; en gras, le résultat du calcul précédent) :


D'autres opérateurs pour simplifier l'écriture



Certains calculs reviennent régulièrement.
Parmi ceux-ci, on peut citer ceux du genre :
Code : JavaScript
1
resultat = resultat + X;     // on ajoute X à la variable resultat


Il existe l'opérateur += s'utilisant comme ceci :
Code : JavaScript
1
resultat += X;     // on augmente la valeur de resultat de X


Ces deux lignes sont strictement équivalentes.

Il existe, de la même manière, les opérateurs -= (on retranche la valeur de la deuxième variable à celle de la première), *= (on multiplie la valeur de la première variable par celle de la deuxième), /= (idem mais avec une division) et %=.


Incrémentation / décrémentation



Lorsque l'on veut augmenter de 1 la valeur d'une variable (on dit incrémenter), par exemple pour un compteur, on utilise la notation :
Code : JavaScript
1
variable++;

De même, pour décrémenter (diminuer la valeur de 1) une variable, le code est le suivant :
Code : JavaScript
1