• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

Syntaxe en JavaScript

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Pour débuter avec les annexes, partons du commencement : la syntaxe du JavaScript.

On va donc passer en revue toutes les bases enseignées dans la première partie de ce tutoriel. En quelque sorte, on va rappeler les règles de la "grammaire" du JavaScript.
Au début de chaque sous-partie sera indiqué le nom du chapitre du cours traitant de ce sujet : c'est à lui que vous devrez vous référer si vous désirez plus d'explications.

Accrochez-vous, le chemin sera court, mais très garni >_ .

Les boîtes de dialogues

Introduites dans différents chapitres

Comme leur nom l'indique, elles servent... à dialoguer avec l'utilisateur. Elles sont particulièrement pratiques pour tester ses propres scripts :) , et c'est d'ailleurs pour cette raison qu'on commence par elles.
Il en existe trois sortes.

Afficher du texte

La première, alert(message), affiche un message (une chaîne de caractères) à l'utilisateur.

Image utilisateur
alert('Bonjour');

Demander une chaîne de caractères

La boîte de dialogue prompt(message, valeur) demande à l'utilisateur d'entrer du texte.
Si l'utilisateur clique sur "Annuler", la fonction renvoie alors null.
Le message sera affiché au-dessus du champ pour saisir le texte, champ qui aura initialement la valeur précisée.

Image utilisateur
var commentaire = prompt("Dites-nous ce que vous voulez", "Votre message ici");

Demander "oui" ou "non"

La dernière, confirm(message), affiche le message, ainsi que deux boutons : Ok et Annuler.
La valeur renvoyée est true si l'utilisateur clique sur "Ok", false sinon.

Image utilisateur
var continuer = confirm("Voulez-vous continuer ?");

Où se place le JS ?

Chapitre "Votre premier script"

Le code JS peut se placer :

  • soit directement dans les balises HTML, à l'aide d'un gestionnaire d'événements

  • soit entre des balises propres au JS

  • soit dans un fichier externe, portant l'extension .js, qui sera importé au chargement de la page.

Gestionnaires d'événements

Un gestionnaire d'événements est un attribut (une propriété) qui se place dans une balise HTML, qui s'écrit sous la forme onEvenement.
Il a pour rôle de lancer le script lorsque l'événement spécifié se produit.

Exemple :

<a href="#" onclick="alert('Salut')">Cliquez</a>

Voici quelques événements :

  • click : un clic de la souris sur l'élément concerné

  • dblclick : un double-clic sur cet élément

  • mouseover : la souris passe sur cet élément

  • mouseout : la souris sort de cet élément (en quelque sorte le contraire de mouseover).

Balises propres au JS

Le code JS peut aussi se placer entre ces balises :

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

//-->
</script>

Ces balises peuvent se placer :

  • soit dans l'en-tête (head) de la page web : on y place du code qui doit être "mis en mémoire" pour être exécuté plus tard.
    Un exemple typique : les déclarations de fonctions.

  • Soit dans le corps (<body></body>) de la page, pour le code à exécuter au chargement de celle-ci.
    Par exemple, des fonctions pour initialiser ou lancer un script.

Importer un fichier externe

La dernière méthode (la plus "propre") consiste à écrire le code JS dans un fichier séparé, portant l'extension .js.
On importe ensuite ce fichier à l'aide des balises précédentes, utilisées comme ceci (fichier.js est le nom du fichier à importer) :

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

De même, cette ligne peut se placer soit dans l'en-tête, soit dans le corps de la page, selon les mêmes règles que pour le paragraphe précédent.

Lisibilité du code

Il est très important d'avoir un code lisible : ça permet de s'y retrouver, et donc d'éviter bon nombre d'erreurs.
De plus, si vous commettez une erreur (chose qui n'est pas rare), il est beaucoup plus facile de la localiser dans un code bien organisé que dans un code illisible :-° .
C'est donc un point à ne pas négliger...

Les commentaires

Chapitre "Votre premier script"

Il existe deux manières d'écrire des commentaires en JS :

  • en fin de ligne, après //

  • n'importe où (peut s'étendre sur plusieurs lignes), entre /* et */.

// ceci est un commentaire en fin de ligne
/* ceci est un commentaire qui peut prendre
   plusieurs lignes */

L'indentation

Chapitre "Créer ses propres fonctions"

L'indentation a elle aussi pour but de rendre le code plus lisible.
Elle consiste à "décaler" les instructions imbriquées.

Un exemple sera plus parlant :

instruction1;
{
   instruction2;
   instruction3;
   {
      instruction4;
   }
}
instruction5;

Les variables

Chapitre "Les variables" :waw:

Utilisation des variables

Les variables servent à stocker des données.

Déclaration

Pour créer (on dit déclarer) une variable, on utilise le mot-clé var, suivi du nom qu'on veut lui donner.

var age;

La déclaration se fait (sauf exception) en une seule fois.

Affectation

Pour affecter une valeur à une variable, on utilise le signe = comme ceci :

age = 18;
Initialisation

Il est possible d'affecter une valeur à une variable lors de sa déclaration.

var age = 18;
Variables locales

Chapitre "Créer ses propres fonctions"

Une variable déclarée à l'intérieur d'une fonction n'est accessible qu'à l'intérieur de cette même fonction.
On parle de variable locale.

Types de données

Une variable peut contenir différents types de données.
Présentation de deux types récurrents : les nombres et les chaînes de caractères.

Les nombres

Exemple : on veut créer une variable pi contenant le nombre 3.14

var pi = 3.14;

Il y a 5 opérations de bases : l'addition (+), la soustraction (-), la multiplication (*), la division (/) et le modulo (%).

Dans cet exemple, on verra s'afficher 3 (car 18 = 5 x 3 + 3) :

alert(18%5);

Il existe des opérateurs supplémentaires pour faciliter les calculs avec des variables :

  • += / -= / *= / /= pour : augmenter de / diminuer de / multiplier par / diviser par un nombre la valeur d'une variable.
    De même, il existe aussi %=.

  • ++ et -- pour incrémenter / décrémenter de 1 la valeur d'une variable.

Un petit exemple ne sera pas superflu :D .

// Les 3 dernières lignes sont équivalentes
// on augmente a chaque fois de 1 la valeur de n
var n = 0;
n = n+1;
n += 1;
n++;
Les chaînes de caractères

Une chaîne de caractère, c'est... du texte ^^ .
Elle est délimitée par des guillemets " ou bien par des apostrophes '.

var chaine = "Je suis une chaine de caracteres";
var msg = 'Eh bien moi aussi !';

On utilise un caractère d'échappement pour certains caractères spéciaux, comme :

  • pour un retour à la ligne

  • \' et \" pour une apostrophe / un guillemet

  • \\ pour afficher un antislash

  • \uXXXX pour insérer le caractère dont la valeur unicode est XXXX.

On utilise le signe + pour concaténer (mettre bout-à-bout) plusieurs chaînes de caractères.
Exemple :

var age = 18;
alert("Vous avez " + age + " ans");   // on concatene les bouts de phrases

(Notez que le nombre 18 est converti automatiquement en chaîne de caractères, pour pouvoir ensuite être concaténé.)

L'opérateur += sert à ajouter une chaîne de caractères à la fin d'une variable.
Dans cet exemple, on ajoute un retour à la ligne à la fin :

var msg = "Bonjour";
msg += "\n";

On peut utiliser les fonctions parseInt(chaine) et parseFloat(chaine) pour convertir une chaîne de caractères en nombre (int : entier ou float : décimal).
C'est utile pour additionner des nombres qui sont enregistrés sous forme de chaînes de caractères : le signe + les concatène si on l'utilise directement.

var a = "1";
var b = "8";
alert(a+b);   // affiche 18
alert(parseInt(a)+parseInt(b));   // affiche 9 :)

Conditions, tests et boucles

Chapitres "Les conditions" et "Les boucles"

Les booléens

Chapitre "Les conditions"

Nous avons déjà parlé de deux types de variables : les nombres et les chaînes de caractères.
Mais nous allons maintenant avoir besoin d'un troisième type de variables : les booléens. Ces variables ont deux valeurs possibles : vrai (true), ou faux (false).

Voyons comment ça marche et à quoi ça sert...

Comparer des nombres

On peut obtenir des booléens en comparant des valeurs.
En effet, on dispose d'opérateurs de comparaison, qui sont au nombre de 6 :

  • opérateur d'égalité, == (attention, il y a bien deux signes "égal") ...

  • ... son inverse, l'opérateur "est différent de", qui se note !=

  • l'opérateur "strictement plus grand que", > ...

  • ... de même, on a "strictement plus petit que", <

  • et pour terminer, "plus grand ou égal à", >= ...

  • ... ainsi que "plus petit ou égal à", <=.

Petit exemple : une variable est_majeur qui contient vrai uniquement si l'âge saisi par l'utilisateur est plus grand ou égal à 18.

var age = prompt("Quel age avez-vous ?");
var est_majeur = (age >= 18);

Notez que les parenthèses autour de la condition servent à bien la distinguer (elles ne sont pas obligatoires, libre à vous de les mettre ou non).

Opérations sur les booléens

Nous avons vu qu'on peut additionner ou multiplier des nombres et concaténer des chaînes de caractères.
Eh bien il existe aussi des opérations sur les booléens, au nombre de trois :

  • la négation, notée ! (si a est vrai, !a est faux, et inversement)

  • le ET logique, &&. On a a && b qui est vrai si et seulement si a et b sont vrais

  • le OU logique, || : a || b est vrai si et seulement si au moins l'une des deux valeurs est vraie.

Les conditions

Chapitre "Les conditions" (si si !!)

IF ... ELSE ...

On peut effectuer un test, pour exécuter des instructions différentes selon la valeur d'un booléen.
Voici la syntaxe :

if(booleen)
   // instruction a executer si le booleen est vrai
else
   // instruction a effectuer s'il est faux

Le else n'est d'ailleurs pas obligatoire, on peut n'écrire que :

if(booleen)
   // instruction a effectuer si le booleen est vrai

Comme d'habitude, un exemple :

var age = prompt("Quel age avez-vous ?");
if(age >= 18)
{
   alert("Vous êtes majeur.");
   alert("Mais il n'est jamais trop tard pour apprendre à programmer :D");
}
else
   alert("Tu es mineur");

On peut bien sûr effectuer des tests les uns à l'intérieur des autres (imbriqués).

IF avec autre chose qu'un booléen

Et si on met autre chose qu'un booléen dans le if ?

Dans ce cas, JS va essayer de "convertir" la chose en booléen.
Le résultat sera false uniquement dans les cas suivants :

  • 0 (zéro)

  • "" ou '' (chaîne de caractères vide)

  • undefined (variable déclarée mais non définie)

  • null (mot-clé utilisé pour des objets "vides")

  • S'il manque des cas, ce sont des cas similaires

SWITCH

Mais il arrive qu'on ait besoin de tester plusieurs valeurs pour une même variable.
Dans ce cas, il est possible d'utiliser plusieurs tests : if ... else if ... else if ... else ....

Mais il existe une syntaxe moins lourde.
Voyez plutôt : on va distinguer plusieurs cas concernant le nombre d'enfants de l'utilisateur.

var nb = prompt("Combien avez-vous d'enfants ?");
switch(nb)
{
   case 0:   // si le nombre est 0...
      alert("Au moins, vous êtes tranquilles :p");   // ... on affiche un message...
      break;   // ... et on arrete le "switch" ici
   case 1:   // si le nombre est 1
      alert("Oh il est tout seul...");
      break;
    case 2:
    case 3:
      // s'il y en a 2 ou 3
      alert("Il doit y avoir de l'ambiance chez vous ^^");
      break;
    case 4:
      alert("Jolie famille !");
      break;
    default:   // si c'est aucune des valeurs precedentes
      alert("Plus de 4 enfants ?! Waow...");
      break;
}

En rentrant dans le switch, l'ordinateur exécute le code à partir du case correspondant, et quitte le switch lorsqu'il rencontre break.

Les boucles

Chapitre "Les boucles"...

Les boucles permettent de répéter des instructions tant qu'une condition est vraie.
On distingue trois types de boucles, adaptées à des situations différentes.

WHILE

La première est très classique :

while(condition)
   // action

On répète l'action tant que la condition est vraie.
Notez que si la condition est fausse dès le début, l'action n'est jamais effectuée.

Exemple :

var i=0;
while(i<10)
{
   var j = i*i;
   alert("Le carré de " + i + " est " + j);
   i++;
}
FOR

La boucle for est une variante, plus complète, de la boucle while.
Elle s'utilise sous cette forme : for(initialisation ; condition ; incrémentation) :

  • l'initialisation se fait une seule fois, au début de la boucle

  • la boucle est exécutée tant que la condition est vraie

  • à la fin de chaque tour de boucle, l'incrémentation est effectuée.

Un exemple :

for(var i=0; i<10; i++)
   alert(i);

Ce qui est équivalent à :

var i=0;
while(i<10)
{
   alert(i);
   i++;
}
DO .. WHILE

Cette dernière boucle est un peu différente des précédentes.
En effet, la condition est évaluée à la fin de la boucle : les instructions seront toujours exécutées au moins une fois, même si la condition est fausse dès le départ.

Cette particularité fait qu'elle a une utilisation différente.

Sa syntaxe est la suivante :

do
   // instruction a repeter
while(condition);

Voici un exemple : on demande une chaîne de caractères à l'utilisateur tant qu'il ne clique pas sur "Annuler".

var msg;
do
   msg = prompt("Entrez ce que vous voulez, ou cliquez sur Annuler");
while(msg);
Réaliser une affectation dans une condition

Notez qu'on peut combiner une affectation et une condition.
Autrement dit, faire quelque chose comme ceci :

var msg;
while( (msg = prompt("Entrez du texte")) != null)
   alert(msg);

Pour comprendre cette condition, on peut la séparer en deux, comme ceci :

msg = prompt("Entrez du texte");   // c'est l'affectation, entre les parentheses
msg != null;   // c'est la condition

Et en effectuant le test directement avec une valeur qui n'est pas booléenne, on peut écrire ceci :

var msg;
while(msg = prompt("Entrez du texte"))
   alert(msg);

Les tableaux

Chapitre "Les tableaux" ^^

Les tableaux servent à avoir accès, de manière efficace, à un grand nombre de données.
Ils permettent en effet de les numéroter, d'où leur côté pratique.

Créer et modifier un tableau

Ce qu'il faut savoir...

On crée un tableau de cette manière :

var monTableau = new Array(valeur0, valeur1, valeur2);

Le tableau est initialisé avec les valeurs entre parenthèses (donc ici, les éléments d'indice 0, 1 et 2 auront ces valeurs respectives).

Maintenant qu'on a notre tableau, on peut :

  • accéder à l'élément d'indice i grâce à monTableau[i], monTableau étant le nom du tableau.
    On manipule les éléments comme des variables.

  • connaître sa longueur grâce à monTableau.length (c'est la longueurdemonTableau).

Parcourir le tableau

Pour parcourir tout le tableau, on va utiliser une boucle pour accéder à chacun des éléments.
Dans cet exemple, on va afficher un par un tous les éléments de monTableau, et les remettre à zéro :

for(var i=0; i<monTableau.length; i++)
{
   alert(monTableau[i]);   // on lit...
   monTableau[i] = 0;   // ... et on efface
}

Tableau à deux dimensions

On a parfois besoin de tableaux à deux dimensions : prenons l'exemple d'une grille de sudoku.

Pour créer une telle grille, on crée un "grand" tableau, qui va contenir les lignes de la grille.
Et chaque ligne sera... un "petit" tableau !

Voici comment créer un tel tableau et le remplir de 0 :

// on cree le "grand" tableau, contenant les lignes
var grille = new Array();

// on cree les lignes (les "petits" tableaux) les unes apres les autres
for(var i=0; i<9; i++)
   grille[i] = new Array();

// on parcourt les lignes...
for(var i=0; i<9; i++)
   // ... et dans chaque ligne, on parcourt les cellules
   for(var j=0; j<9; j++)
      grille[i][j] = 0;

Les fonctions

Chapitres "Créer ses propres fonctions" (pour la partie "Généralités")
et "Retour sur les fonctions" (pour les deux autres parties)

Généralités

Déclaration

Une fonction se déclare dans l'en-tête de la page.
Il y a deux manières différentes de déclarer une fonction.

La première utilise le mot-clé function :

function f(x,y)
{
   // code
   return valeur;
};

La seconde utilise directement une variable :

var f = function(x,y)
{
   // code
   return valeur;
};
Arguments

Dans cet exemple, x et y sont les deux arguments (ou paramètres) de cette fonction.

Ce sont en fait des variables locales à la fonction, dont la valeur est fixée par l'utilisateur au moment où il appelle la fonction.
Par exemple, si on fait :

f(1, "Toto");

La variable x sera initialisée à 1 et y avec la chaîne de caractères "Toto".

Valeur renvoyée

Une fonction peut renvoyer une valeur. Dans notre exemple, c'est la ligne return valeur (la valeur est par exemple contenue dans une variable).

C'est en quelque sorte la valeur que "prendra" la fonction lors de son appel.
On peut la récupérer de cette manière :

var x = f(1, "Toto");

Ici, la variable x prendra la valeur renvoyée par la fonction.

Exemple

Une fonction qui calcule la moyenne de deux nombres.

  • Elle prend donc deux arguments, qui sont les nombres dont on veut la moyenne.

  • Elle renvoie la moyenne de ces deux nombres.

function moyenne(x,y)
{
   var moy = (x+y) / 2;
   return moy;
};

Une autre façon d'écrire cette fonction :

var moyenne = function(nb1, nb2)
{
   return (nb1+nb2) / 2;
};

Rendre un argument facultatif

On peut vouloir rendre un argument facultatif.
En reprenant la fonction moyenne, on peut décider que moyenne(n) renverra la moyenne de n et 0.

Au début de la fonction, on va devoir vérifier si le second argument est défini (s'il n'est pas défini, sa valeur est undefined). Si ce n'est pas le cas, on lui donne la valeur 0 (comme convenu).

function moyenne(x,y)
{
   if(y == undefined)
      y = 0;
   return (x+y) / 2;
};

Avoir un nombre illimité d'arguments

On accède au tableau contenant tous les arguments passés à une fonction fct à l'aide de fct.arguments (ce sont les argumentsdefct).

Il ne reste plus qu'à travailler sur notre tableau d'arguments.

Exemple : une fonction renvoyant le plus grand des arguments.

function maxi(m)
{
   var nb = maxi.arguments;
   for(var i=1; i<nb.length; i++)
      if(nb[i] > m)
         m = nb[i];
   return m;
}

Dans cet exemple, m est un argument "classique".
Cependant, on le retrouve aussi dans la première case du tableau d'arguments (c'est d'ailleurs pour ça que la boucle commence à 1).

On peut maintenant appeler cette fonction comme ceci :

alert( maxi(1,4,9,2,5) );
alert( maxi(4,9) );

C'est parfois utile, car on a ainsi pas mal de souplesse lors de l'utilisation :) .

Si vous arrivez jusqu'ici en ayant lu tout ce chapitre, c'est que :

  • soit vous êtes persévérants, et vous avez voulu vous accorder une séance de révisions intenses (qui n'est, à mon avis, pas du temps perdu) : dans ce cas, j'espère que vous avez pris le temps de faire quelques "pauses" en cours de route ;)

  • soit vous êtes paresseux, et vous avez voulu éviter toute la première partie de ce cours, auquel cas vous êtes passés à côté de nombreuses subtilités...

  • soit vous êtes curieux, et vous voulez un aperçu général de la première partie de ce cours : si ce résumé vous a convaincus, direction le début du tuto pour approfondir tout cela ^^

  • soit vous êtes totalement inconscients, et là je ne peux rien faire pour vous :p .

Toujours est-il que le but premier de ce chapitre est de mettre à votre disposition un résumé de ce qu'il faut savoir : si vous avez des trous de mémoire, il sera votre compagnon.

Des remarques concernant les annexes ?

Ces chapitres se veulent pratiques.
Si vous avez la moindre remarque ou suggestion à nous faire pour les rendre plus fonctionnels, n'hésitez pas à nous envoyer un MP, en faisant précéder le titre par [JS-annexes].

Pour plus d'informations sur ce tutoriel, je vous encourage à visiter ce topic.
Nous vous rappelons qu'il n'est pas achevé, et que d'autres chapitres suivront bientôt.
Nous faisons également part de nos sincères remerciements à nos testeurs / relecteurs, dont vous trouverez les noms dans notre "biographie".

Exemple de certificat de réussite
Exemple de certificat de réussite