Cours de JavaScript - Initiation à JavaScript

version 1.2.1, dernière mise à jour le 5 octobre 2016.

   

Table des matières (TdM)

  1. I. Introduction
    1. JavaScript n'est pas Java
    2. Trois méthodes d’insertion de code JavaScript dans un document (X)HTML
  1. II. Syntaxe générale
    1. Conventions d’écriture
      1. Fin de ligne
      2. Noms de variables et de fonctions
    2. Commentaires
  1. III. Variables
    1. Types de données
      1. Les types
      2. Conversion de type
    2. Déclaration ; affectation de valeurs
      1. Opérateur d'affectation simple =
      2. Opérateurs d'affectation complexe
  1. IV. Fonctions
    1. Introduction
    2. Déclaration d’une fonction
      1. Valeur retournée
      2. Exercice : Écriture d'une fonction simple
      3. Exercice : Écriture d'une fonction renvoyant une valeur
    3. Valeur de paramètres par défaut
    4. Portée d’une variable
      1. Exercice : Écriture d'une fonction avec arguments
  1. V. Tableaux et boucles
    1. Tableau à une dimension
      1. Exercice : Utilisation d’un tableau
    2. Boucles for
      1. Exercice : Utilisation de boucles
  1. VI. Opérateurs
    1. Opérateurs binaires mathématiques
    2. Opérateurs binaires de comparaison
    3. Opérateurs logiques
  1. VII. Tests logiques
    1. Instruction if
      1. Exercice : Utilisation d’un test logique
    2. Instruction switch
      1. Exercice : Utilisation de switch

Retour au menu

Contenu du cours

I. Introduction

1. JavaScript n'est pas Java

Pour commencer, tordons le cou à une erreur classique : JavaScript et Java ne sont en aucune manière apparentés. Il s'agit de deux langages différents. En effet, dans le cadre d'un site Web :

>Retour à la TdM

2. Trois méthodes d’insertion de code JavaScript dans un document (X)HTML

Il existe trois manières d'insérer du code JavaScript dans un document (X)HTML :

>Retour à la TdM

II. Syntaxe générale

1. Conventions d’écriture

a. Fin de ligne

Chaque instruction de code doit se terminer par ;. Par exemple, les deux syntaxes suivantes aboutissent au même résultat :

a
=
b
+
2
;

et...

a=b+2 ;

b. Noms de variables et de fonctions

JavaScript est sensible à la casse employée. Par conséquent, variabletest et Variabletest désignent deux variables différentes.

Il existe un certain nombre de noms réservés, qui sont à peu près les mêmes que dans les autres langages de programmation, comme var, function, for, if... Nous les rencontrerons au fur et à mesure.

>Retour à la TdM

2. Commentaires

Un commentaire JavaScript permet de placer du texte en-dehors du script : il n'est alors pas interprété. Deux syntaxes sont possibles :

//Une ligne

/*Deux
lignes*/

>Retour à la TdM

III. Variables

1. Types de données

a. Les types

JavaScript est un langage dans lequel il est possible de ne pas déclarer qu'une variable doit être d'un certain de type de données. Cela signifie qu'il suffit d'indiquer a=2;, par exemple, pour déclarer premièrement que l'on définit une variable qui s'appelle a et qui a pour valeur 2, mais aussi deuxièmement que cette variable est de type nombre.

Il n'existe que quelques types de données en JavaScript, ce qui en facilite l'usage mais complique le contrôle des valeurs autorisées pour une variable donnée. Ces types prédéfinis sont :

Il existe d’autres types, qui sortent du cadre restreint de ce cours.

b. Conversion de type

JavaScript permet de changer le type d'une variable, avec les fonctions suivantes :

>Retour à la TdM

2. Déclaration ; affectation de valeurs

a. Opérateur d'affectation simple =

On affecte une valeur à l'aide de l'opérateur =. Par exemple, a="Ceci est une chaîne". Cet opérateur permet aussi d'affecter la même valeur à plusieurs variables. Par exemple, a=b=c=d=e=5; affecte la valeur 5 aux cinq variables a, b, c, d et e.

b. Opérateurs d'affectation complexe

Ces opérateurs permettent d'effectuer une opération sur une variable puis de lui affecter le résultat.

>Retour à la TdM

IV. Fonctions

1. Introduction

Parfois, il est nécessaire de répéter de mêmes portions de codes. Par exemple, on peut souhaiter afficher un résultat donné sous une certaine forme, ou bien faire un calcul répétitif. Dans ce cas, au lieu de réécrire plusieurs fois cette même portion de code, on définit ce que l’on appelle des fonctions. Ces fonctions peuvent accepter des paramètres, ou arguments, pour leur permettre de réaliser l’action désirée.

>Retour à la TdM

2. Déclaration d’une fonction

Une fonction est un ensemble d'instructions que l'on peut appeler séparément. La forme générale de sa déclaration est

function nomFonction(liste éventuelle des arguments)
{
(...)
}

Une fonction est ensuite appelée dans le code JavaScript par nomFonction(arguments...). Une fonction peut ne pas nécessiter d'arguments (qui en sont les données d'entrée), et elle peut ne pas retourner de valeur en sortie.

Exemple de fonction ne prenant pas d’argument...

function quandSommesNous()
{
aujourdhui=new Date ;
alert(aujourdhui);
}

b. Valeur retournée

Une fonction peut éventuellement « retourner » une valeur à l'aide de l’instruction return. Par exemple,

function surfaceRectangle(longueur, largeur)
{
return longueur*largeur ;
}

Un appel à cette fonction se fait par exemple ainsi :

alert(surfaceRectangle(2.5, 3))

À l'écran, une boîte d'affichage montrera 7.5.

Exercice 1. Écriture d'une fonction simple

Énoncé
Correction

Exercice 2. Écriture d'une fonction renvoyant une valeur

Énoncé
Correction

>Retour à la TdM

3. Valeur de paramètres par défaut

La version 2015 d'ECMAScript (dite aussi ES6) introduit la possibilité de définir des valeurs par défaut pour les paramètres passés à une fonction. On écrira ainsi, par exemple...

function surfaceRectangle(longueur=30, largeur=20)
  {
    return longueur*largeur ;
  }

>Retour à la TdM

4. Portée d’une variable

La portée d'une variable désigne l'ensemble du code dans lequel elle peut être utilisée.

Si une variable est déclarée sans le mot-clef var, elle peut être utilisée n'importe où dans le script. On l’appelle alors variable globale.

Si une variable est déclarée avec le mot-clef var, elle ne peut être utilisée que dans le bloc où elle se trouve. On l’appelle alors variable locale. Ainsi, dans l'exemple suivant...

var a = 8 ;

function testFonction(){
var pi = 3.14 ;
(...) ;
}

function testFonction2(){
(...) ;
}

... la variable a peut être utilisée dans les fonctions testFonction1 et testFonction2, mais la variable pi ne peut être utilisée que dans la fonction testFonction1.

Cette possibilité de contrôler la portée d'une variable conduit à conseiller l'utilisation du mot-clef var dès que cela est possible. Cela permet par exemple d'éviter d'écraser par inadvertance la valeur d'une variable portant le même nom.

Exercice 1. Écriture d'une fonction avec arguments

Énoncé
Correction

>Retour à la TdM

V. Tableaux et boucles

1. Tableau à une dimension

Un tableau permet de déclarer une variable qui doit se présenter comme une collection de valeurs. On numérote alors ces valeurs à partir de 0. Par exemple,

//Déclaration d'un tableau de 4 éléments :
var tableau1 = new Array(4) ;
//Déclaration d'un tableau dont le nombre d'éléments est a priori inconnu :
var tableau2 = new Array() ;

Pour affecter des valeurs à un tableau, plusieurs possibilités sont disponibles :

  1. On peut affecter les valeurs l'une après l'autre :

    var tableau1 = new Array(4) ;
    tableau1[0]="Beurre" ;
    tableau1[1]="Confiture" ;
    tableau1[2]="Pain" ;
    tableau1[3]="Jus de fruit" ;

  2. On peut affecter les valeurs en une seule ligne :

    var tableau1 = new Array(4) ;
    tableau1=["Beurre", "Confiture", "Pain", "Jus de fruit"] ;

  3. Il est enfin possible de déclarer et définir le tableau simultanément :

    var tableau1 = new Array('Beurre', 'Confiture', 'Pain', 'Jus de fruit') ;

La propriété length d'un tableau renvoie son nombre d'éléments. Par exemple...

var tableau1 = new Array('Beurre', 'Confiture', 'Pain', 'Jus de fruit') ;
alert(tableau1.length) ;

... renvoie 4.

Exercice 1. Utilisation d’un tableau

Énoncé
Correction

>Retour à la TdM

2. Boucles for

Une boucle permet de réaliser une suite d'instructions un nombre déterminé de fois. Par exemple...

var tab = new Array(3) ;
for (i=0;i<3;i++)
  {
    tab[i]=i ;
  }

Vous noterez que la numérotation commence à 0. La syntaxe générale de la parenthèse après le mot-clef for est

  1. instruction de départ ;

  2. condition de fin ;

  3. instruction à exécuter à chaque fin d'itération.

La dernière instruction est souvent limitée à une incrémentation, mais lorsque la boucle ne comporte qu'une seule instruction, il est possible de l'y placer. L'exemple précédent se simplifie donc en…

var tab = new Array(3) ;
for (i=0;i<3;tab[i++]=i) ;

Exercice 1. Utilisation de boucles

Énoncé
Correction

>Retour à la TdM

VI. Opérateurs

1. Opérateurs binaires mathématiques

Les opérateurs binaires sont ceux qui effectuent une opération sur deux variables ou données. Ces opérateurs sont :

>Retour à la TdM

2. Opérateurs binaires de comparaison

Les opérateurs binaires de comparaison permettent de réaliser des tests sur des variables ou des données. Leur valeur de sortie est un booléen. Ces opérateurs sont :

>Retour à la TdM

3. Opérateurs logiques

Ces opérateurs renvoient aussi des booléens, et opèrent sur des booléens.

>Retour à la TdM

VII. Tests logiques

Les tests logiques permettent de réaliser des opérations en fonction des conditions dans lesquelles le code s'exécute. Par exemple, si l'utilisateur a entré un prénom féminin en guise d'identifiant, on peut envisager d'accorder les participes passés en fonction de ce choix.

1. Instruction if

L'instruction if est la plus simple possible. Elle permet de tester une condition unique. Par exemple,

if (choix==1)
{
alert("Vous avez fait le premier choix") ;
}

Elle peut être complétée par l'instruction else, qui permet d'indiquer le code à exécuter si la condition n'est pas remplie :

if (choix==1)
{
alert("Vous avez fait le premier choix") ;
}
else
{
alert("Vous n'avez pas fait le premier choix") ;
}

Exercice 1. Utilisation d’un test logique

Énoncé
Correction

>Retour à la TdM

2. Instruction switch

Cette instruction permet de réaliser des branchements conditionnels. Elle s'utilise avec le mot-clef case. Chaque cas est analysé, puis si le test est concluant, la liste d'instructions suivant le case est exécutée. Cette exécution se poursuit jusqu'à rencontrer l'instruction break. On indique la liste des instructions à réaliser par défaut avec default. Par exemple,

switch (choix)
{
case 1:
alert("Vous avez fait le premier choix") ;
break ;
case 2:
alert("Vous avez fait le deuxième choix") ;
break ;
case 3:
alert("Vous avez fait le troisième choix") ;
break ;
default :
alert("Vous avez fait un choix au moins égal à 4") ;
}

Si on avait omis le break à la fin du troisième case, si l'utilisateur avait saisi 3 on aurait eu coup sur coup l'affichage des messages "Vous avez fait le troisième choix" et "Vous avez fait un choix au moins égal à 4".

Exercice 1. Utilisation de switch

Énoncé
Correction

>Retour à la TdM

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu