Cours de JavaScript - Introduction à Javascript

version 1.64, dernière mise à jour le 17 novembre 2016.

   

Table des matières (TdM)

  1. I. Introduction
    1. JavaScript n'est pas Java
    2. Historique
    3. Insertion de code JavaScript dans un document (X)HTML
      1. Trois méthodes d'insertion
      2. Accessibilité
  1. II. Conventions
    1. Règles générales
    2. Commentaires
    3. Noms de variables et de fonctions
  1. III. Variables
    1. Types de données
      1. Les types
      2. Conversion de type
      3. Tests sur les types
    2. Déclaration ; affectation de valeurs
      1. Déclaration d'une variable sans affectation de valeur
      2. Opérateur d'affectation simple =
      3. Opérateurs d'affectation complexe
      4. Opérateur ternaire
  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. Introduction
      2. Déclarer une variable avec var
      3. Déclarer une variable avec let et const
    5. Exercice : Écriture d'une fonction avec arguments
    6. Obtenir la liste des arguments
  1. V. Tableaux
    1. Tableau à une dimension
      1. Exercice : Utilisation d’un tableau
    2. Tableau multidimensionnel
  1. VI. Opérateurs
    1. Opérateurs binaires mathématiques
    2. Opérateurs binaires de comparaison
    3. Opérateurs binaires logiques
    4. Opérateurs unaires
      1. Introduction
      2. Utilisation des opérateurs d'incrémentation et de décrémentation
    5. Exercice : Manipulation des opérateurs
  1. VII. Objets prédéfinis
    1. Quelques mots sur la programmation orientée objet
      1. Introduction
      2. Qu'est-ce qu'un objet ?
    2. L'objet String
      1. Propriétés de l'objet String
      2. Méthodes de l'objet String
    3. L'objet Math
      1. Propriétés de l'objet Math
      2. Méthodes de l'objet Math
      3. Exercice : Écriture d'une fonction complexe
    4. L'objet Date
      1. Constructeur de l'objet Date
      2. Méthodes de l'objet Date
    5. Trois méthodes de l'objet window pour interagir avec l'internaute
    6. Comment ajouter des méthodes et propriétés aux objets prédéfinis ?
  1. VIII. Tests et boucles
    1. Tests logiques
      1. Introduction
      2. Instruction if
      3. Exercice : Utilisation d’un test logique
      4. Instruction switch
      5. Exercice : Utilisation de switch
    2. Itérations
      1. Introduction
      2. do... while et while
      3. Exercice : Utilisation de while
      4. Boucles for
  1. IX. Divers
    1. Temporisation
      1. Fixer un délai pour une exécution : setTimeout et clearTimeout
      2. Répéter une action
    2. Évaluation d'une expression

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

JavaScript a été mis au point par Brendan Eich de Netscape Communications et baptisé LiveScript 1.0. Lorsque Java de la compagnie Sun est devenu populaire, le langage a été rebaptisé JavaScript.

La version 1.0 de JavaScript a été intégrée par Netscape dans son navigateur Netscape Navigator 2.0. Microsoft a alors suivi le mouvement et a introduit un langage compatible avec JavaScript dans Internet Explorer 3.0, le JScript 1.0.

Netscape a sorti ensuite la version 1.1 de son langage, pendant que Microsoft sortait une version 1.1 de JScript. Les deux langages étaient devenus en partie incompatibles.

Lorsque Netscape a rendu publiques les définitions de son langage afin de le rendre plus populaire, la compagnie et Microsoft ont trouvé un terrain d'entente afin de développer ECMAScript, sous le patronage de l'ECMA, une organisation suisse, en juillet 1997. Cela n'empêcha pas les compagnies de publier en parallèle JavaScript 1.2 et JScript 2.0 qui étaient encore moins compatibles entre eux.

À cette époque, le quotidien du développeur Web consistait surtout à gérer les incompatibilités entre les navigateurs -incompatibilités dans le code de script utilisé, mais aussi dans les éléments HTML supportés par chaque navigateur. Actuellement, les éditeurs de navigateur ont convergé sur le support de l'ECMAScript, ce qui a permis le développement de nombreuses bibliothèques.

>Retour à la TdM

3. Insertion de code JavaScript dans un document (X)HTML

a. Trois méthodes d'insertion

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

  1. La manière la plus simple à mettre en œuvre est l'utilisation des attributs prévus dans les recommandations (X)HTML pour cela : onclick, onmouseover, etc. Cette méthode présente un inconvénient majeur, celui de mêler le code destiné à donner la structure du document (le HTML) au code destiné à interagir avec lui, le JavaScript. La mise à jour d'une telle page est difficile, de la même manière que gérer la mise en forme CSS à l'aide de l'attribut style est une pratique généralement à déconseiller.

  2. Une deuxième méthode, analogue à l'utlisation d'une feuille de style interne en CSS, consiste à faire appel à l'élément script et à insérer le code JavaScript à l'intérieur de cet élément. Par exemple,

    <script type="application/javascript">(...)</script>

    L'attribut type est obligatoire en HTML4, facultatif en HTML5. Vous rencontrerez parfois l'atttribut language avec la valeur JavaScript, mais cet attribut est obsolète et ne devrait donc plus être utilisé. La valeur type/javascript est elle aussi obsolète depuis avril 2006 et a été remplacée par application/javascript.

    Cet élément peut être présent dans l'entête du fichier HTML tout comme l'élément style des feuilles de style internes. Il est aussi possible de l'insérer au cœur de la page HTML, comme descendant de l'élément body, mais cela complique encore une fois la maintenance de la page. Enfin, il peut être incorporé à la toute fin du code, avant la balise fermante </body>. Cela a pour avantage de ne charger le code JavaScript qu'après le chargement de l'ensemble du HTML. Nous y reviendrons.

  3. Une troisième méthode fait elle aussi appel à l'élément script, mais cette fois-ci le code JavaScript se trouve dans un fichier externe. Dans ce cas, l'élément script précise à l'aide de l'attribut src l'emplacement du fichier JavaScript :

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

    Cette dernière méthode est la plus commode à mettre en œuvre si un script doit être utilisé sur plusieurs pages, mais elle doit être maniée avec précaution afin d'éviter toute perte d'informations. À la fin de ce cours, nous reviendrons sur de bonnes pratiques de codage à utiliser afin d'éliminer ce genre de soucis.

b. Accessibilité

Par le passé, des outils de consultation de pages qui ne supportaient pas JavaScript, ou, ce qui est pire, n'en avaient qu'un support partiel. De plus, les robos indexeurs des moteurs de recherche étaient incapables d'indexer du contenu produit en JavaScript. C'est la raison pour laquelle, à chaque fois que du contenu ou une fonctionnalité était ajouté à une page en faisant appel à JavaScript, il était nécessaire de prévoir une alternative sous un format accessible à ce genre d'outils de consultation (le plus souvent simplement du HTML), et fournissant à ces outils une information équivalente et des fonctionnalités permettant d'atteindre les mêmes buts. Cette alternative devait être présente dans un élément noscript, enfant de script lorsqu'il est descendant de l'élément body. Par exemple :

<script>
  (...)
  <noscript>Information équivalente au contenu produit par le script</noscript>
</script>

À l'heure actuelle, ces limitations ne sont plus de mise, à moins que l'on ne se trouve face à un parc contraint de machines anciennes, ce qui peut arriver dans certaines structures. Officiellement, JavaScript est en effet reconnu comme étant une technologie « compatible avec l'accessibilité », et à ce titre, il n'est plus nécessaire de prévoir une version « de secours ». En contrepartie, le code doit être conçu de sorte qu'il produise un contenu accessible et que son fonctionnement s'opère sans entraver l"utilisabilité de la page (par exemple, si une image est intriduite par le JavaScript, elle doit comporter une alternative textuelle pertinente ; si un menu déroulant est géré, il doit pouvoir être utilisé au clavier et à la souris, etc.).

>Retour à la TdM

II. Conventions

1. Règles générales

JavaScript est assez souple. Ainsi, écrire a = b + 2 ou a=b+2 est équivalent, et signifie que l'on affecte à la variable a la valeur de la variable b augmentée de 2. Il accepte de même l'insertion de tabulations au sein des expressions, avant ou après les opérateurs. On peut insérer un retour chariot partout où il est possible de placer un espace. Par conséquent, les lignes de code doivent se terminer par des ";". Par exemple...

a
=
b
+
2
;

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

  1. Quand le commentaire s'étend sur une seule ligne, on peut commencer cette ligne par //.

  2. Quand le commentaire doit s'étendre sur plusieurs lignes, il doit commencer par /* et se terminer par */.

//Une ligne

/*Deux
lignes*/

>Retour à la TdM

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

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 :

b. Conversion de type

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

c. Tests sur les types

Il est parfois nécessaire, avant de lancer un traitement sur des variables supposées être des nombres, de tester si tel est vraiment le cas.

>Retour à la TdM

2. Déclaration ; affectation de valeurs

a. Déclaration d'une variable sans affectation de valeur

Une déclaration (sans affectation de valeur) se fait à l'aide du mot-clef var. Par exemple, var a; déclare l'existence d'une variable s'appelant le nom a, mais sans lui avoir affecté de valeur. Elle est donc de type undefined.

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

c. Opérateurs d'affectation complexe

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

d. Opérateur ternaire

Cet opérateur permet d'affecter une valeur à une variable en fonction du résultat à un test. Sa syntaxe est la suivante :

variable=TestÀRéaliser ?valeurSiTestVrai:ValeurSiTestFaux

Par exemple, a=b>3?0:1 affecte 0 à a si b est strictement supérieur à 3, et 1 dans le cas contraire. Cette syntaxe permet aussi d'affecter une valeur à une variable si elle n'a pas été définie, tout en la laissant inchangée si elle l'a été, en écrivant par exemple a?a:"Valeur par défaut";.

>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

a. Introduction

La portée d'une variable désigne l'ensemble du code dans lequel elle peut être utilisée. Elle peut être définie avec les mots-clefs var, const ou let.

b. Déclarer une variable avec var

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.

Attention, ce mot-clef ne peut pas être « factorisé ». Si on écrit par exemple var a = b = c = 5;, cela équivaut à var a=5; b=5; c=5; : dans ce cas, seule la variable a a une portée locale, b et c sont globales.

c. Déclarer une variable avec let et const

On peut affiner la portée d'une variable avec le mot-clef let. let permet de limiter la portée d'une variable à un bloc (compris entre deux accolades), alors que var s'étend au-delà du bloc. Par exemple...

function testVarLet()
  {
    var x=5 ;
    let y=5 ;
    {
      var x=6 ;
      let y=6 ;
    }
    console.log(x) ;
    console.log(y) ;
  }

... renverra 6 puis 5, la portée de y modifiée étant restée confinée dans le bloc.

const fonctionne, du point de vue de la portée, de manière similaire à let mais introduit une nuance de taille : on ne peut pas affecter une nouvelle valeur à une variable définie avec const. Par exemple...

function testVarLet()
  {
    const X=5 ;
    const X=6 ;
    const Y={prop1:1, prop2:"essai"} ;
    const Y={prop1:2, prop2:"test"} ;
  }

... déclenchera des erreurs. Mais const ne signifie pas que la « constante » ne peut pas changer ; cette instruction signifie que la variable (ici X ou Y) pointe toujours vers la même référence. Le code suivant ne produit ainsi pas d'erreur, car on ne change pas la valeur de la constante (qui continue à pointer vers un objet donné), mais son contenu :

function testVarLet()
  {
    const Z={prop1:1, prop2:"essai"} ;
    const Z.prop1=2; Z.prop2="test" ;
  }

>Retour à la TdM

Exercice 1. Écriture d'une fonction avec arguments

Énoncé
Correction

5. Obtenir la liste des arguments

Quelle que soit la fonction, déclarée avec des paramètres ou non, il est possible de récupérer la liste des arguments qui lui sont passés à l'aide de la propriété arguments. Par exemple...

var moyenne = function(){
  let somme = 0 ;
  for (let i=0;i<arguments.length;i++) somme+=Number(arguments[i]) ;
  console.log (somme/arguments.length) ;
}

Ainsi, moyenne(5) renvoie 5, moyenne(1, 23, -4.3) renvoie 6.566666666666666.

>Retour à la TdM

V. Tableaux

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. On peut aussi ajouter des éléments à la fin d'un tableau, avec la méthode push() : par exemple, var tab = new Array (3);tableau1.push(23); ajoute un quatrième élément au tableau, et tab[3] vaut 23.

  4. 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. Tableau multidimensionnel

Un tableau à deux dimensions se déclare en déclarant tout d'abord un tableau à une dimension, puis en déclarant que chacun des éléments de ce tableau est lui-même un tableau. Par exemple,

var tableau1 = new Array(4) ;
for (i=0;i<tableau1.length;i++)
  {
    tableau1[i] = newArray(2) ;
  }

La déclaration précédente amène à un tableau de 4×2 éléments. Le processus peut aisément être étendu à la déclaration d’un tableau quelconque de n dimensions.

>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 binaires logiques

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

>Retour à la TdM

4. Opérateurs unaires

a. Introduction

Les opérateurs unaires s'appliquent à une seule quantité. Il y en a trois.

b. Utilisation des opérateurs d'incrémentation et de décrémentation

La position des opérateurs d'incrémentation ou de décrémentation est importante dans le cas d'un calcul. Lorsque l'opérateur est en position de préfixe, l'opération est réalisée avant tout calcul. Lorsqu'il est en postfixe, l'opération est réalisée à la toute fin du calcul. Voici quelques exemples :

var a=3 ;
b=(a++)*2 ;

var a=3 ;
b=(++a)*2 ;

Le premier exemple effectue d'abord la multiplication de a par 2, puis incrémente a. On obtient donc b=(3)*2=6. Le second exemple incrémente d'abord a, puis multiplie le résultat par 2. On obtient donc b=(3+1)*2=8. Dans les deux cas, la valeur finale de a est 3+1=4.

>Retour à la TdM

Exercice 1. Manipulation des opérateurs

Énoncé
Correction

VII. Objets prédéfinis

1. Quelques mots sur la programmation orientée objet

a. Introduction

Il n'est pas dans le propos de ce cours de faire une initiation complète à la Programmation Orientée Objet, mais d'en présenter les quelques points qui sont utiles au jour le jour en JavaScript. Nous reviendrons plus en détails dans un autre chapitre sur la manière de manipuler des objets en JavaScript .

b. Qu'est-ce qu'un objet ?

Un objet est une entité de programmation qui possèdent un certain nombre de propriétés, et sur laquelle il est possible d'agir ou qui est susceptible d'agir par l'intermédiaire de méthodes. Une méthode est une sorte de fonction s'appliquant à l'objet, et à la syntaxe un peu particulière.

Une propriété caractérise un objet. Par exemple, si l'on pense à un objet physique comme une boîte, ses propriétés pourraient être ses longueur, hauteur et profondeur, sa couleur, le fait qu'elle soit ouverte ou fermée, pleine ou vide, etc. Des méthodes permettant d'interagir avec cette boîte seraient par exemple l'action de l'ouvrir ou de la fermer (qui agirait sur la propriété « ouverte ou fermée »), celle d'y ajouter ou d'en extraire du contenu (qui agirait sur la propriété « pleine ou vide »), etc. En JavaScript comme dans les autres langages orientés objet, on représente les propriétés et les méthodes avec des points. Pour reprendre notre exemple de boîte, une implémentation Javascript en serait :

boite.longueur ;
boite.hauteur ;
boite.profondeur ;
boite.couleur ;
boite.ouverte ;
boite.pleine ;

boite.ouvrir() ;
boite.fermer() ;
boite.remplir(contenu) ;
boite.vider() ;

Nous allons voir des exemples de propriétés et de méthodes pour des objets que l'on utilise très souvent en JavaScript.

>Retour à la TdM

2. L'objet String

a. Propriétés de l'objet String

Cet objet ne possède qu'une seule propriété, length, qui renvoie sa longueur. Ainsi, chaine="Bonjour!";alert(chaine.length); renvoie 8.

b. Méthodes de l'objet String

Les méthodes de cet objet permettent de manipuler les chaînes de caractères. Elles s'appliquent à toute variable de ce type.

>Retour à la TdM

3. L'objet Math

a. Propriétés de l'objet Math

Il est courant de devoir faire appel à des fonctions ou des constantes mathématiques dès lors que l'on souhaite réaliser quelques calculs. Plusieurs sont disponibles à l'aide de cet objet (ne pas oublier la majuscule à Math !).

b. Méthodes de l'objet Math

Ces méthodes correspondent à des fonctions mathématiques.

Exercice 1. Écriture d'une fonction complexe

Énoncé
Correction (Appel à une fonction retournant une valeur)
Correction (Calcul de la longueur d'un côté de triangle rectangle)
Correction (Création d'un tableau à deux dimensions)

>Retour à la TdM

4. L'objet Date

a. Constructeur de l'objet Date

Date est un type d'objet qui permet de gérer non seulement les dates, mais aussi les heures et durées. Le constructeur est ce qui permet de créer une nouvelle « instance » de la classe Date. Sa syntaxe est

var nouvelleDate = new Date(annee, mois, jour [, heure, minute, seconde, milliseconde]) ;

Les paramètres heure, minute, seconde et milliseconde sont optionnels. Par exemple, une variable stockant la date du 11 octobre 2003 à 9h32 passée de 34 secondes et 123 millisecondes est créée par...

var nouvelleDate = new Date(2003, 9, 11, 9, 32, 34, 123) ;

Si aucun paramètre n'est utilisé, par exemple auj=new Date;, la date renvoyée est la date courante.

b. Méthodes de l'objet Date

Tous les exemples ci-dessous sont donnés avec l'objet nouvelleDate tel qu'il a été créé plus haut. Les méthodes de Date sont :

Chacune de ces méthodes a son pendant permettant de spécifier la propriété correspondante (par exemple setDate en parallèle de getDate).

>Retour à la TdM

5. Trois méthodes de l'objet window pour interagir avec l'internaute

Nous reviendrons sur l'objet window plus loin dans ce cours. Pour le moment, voici trois méthodes d'un usage courant, permettant de gérer les interactions avec l'utilisateur :

>Retour à la TdM

6. Comment ajouter des méthodes et propriétés aux objets prédéfinis ?

On peut parfois avoir besoin d'ajouter des propriétés ou des méthodes aux objets prédéfinis. Par exemple, on peut souhaiter mettre en majuscule la première lettre de n'importe quelle chaîne. Il est possible de le faire en étendant les propriétés et méthodes prédéfinies, à l'aide de la propriété prototype :

//On vérifie que la propriété n'existe pas déjà...
if (!String.prototype.capitalize)
  {
    String.prototype.capitalize = function()
      {
        return this.charAt(0).toUpperCase()+this.slice(1).toLowerCase() ;
      }
  }

Il suffit alors d'appeler cette nouvelle méthode comme n'importe quelle autre, par exemple  : var test="Essai";alert(test.capitalize());

Cependant, définir de la sorte une méthode n'est pas sans effet secondaire. En effet, si on exécute une simple boucle var chaine="hep"; for (var i in chaine) console.log(i+" : "+chaine[i]), on obtient successivement les chaînes de caractères "h", "e" etb "p" mais aussi pour finir capitalize: function () { return this.charAt(0).toUpperCase()+this.slice(1).toLowerCase() ; }. Afin d'éviter cet effet de bord gênant, on doit explicitement déclarer que cette méthode n'est pas énumérable :

//On vérifie que la propriété n'existe pas déjà...
if (!String.prototype.capitalize)
  {
    Object.defineProperty(String.prototype,'capitalize',
      {
        value : function()
          {
            return this.charAt(0).toUpperCase()+this.slice(1).toLowerCase() ;
          } ,
        enumerable: false
      }) ;
  }

>Retour à la TdM

VIII. Tests et boucles

1. Tests logiques

a. Introduction

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.

b. 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
c. 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 2. Utilisation de switch

Énoncé
Correction

>Retour à la TdM

2. Itérations

a. Introduction

Les itérations sont des séries d'instructions qui doivent être exécutées de manière répétitive, un certain nombre de fois ou bien jusqu'à ce qu'une condition soit réalisée. Quatre instructions sont disponibles : do... while, while, for et for... in

b. do... while et while

Ces deux instructions jouent des rôles similaires. Une série d'instructions est répétée tant qu'une condition est réalisée. Par exemple...

var compteur = 1 ;
do
  {
    compteur++ ;
    alert(compteur) ;
  }
while (compteur<3)

Le code précédent affichera successivement 2 puis 3 avant de sortir de la boucle. Il en est de même pour...

var compteur = 1 ;
while (compteur<3)
  {
    compteur++ ;
    alert(compteur) ;
  }

La différence vient du fait que do... while exécutera l'ensemble d'instructions au moins une fois. Ainsi...

var compteur = 1 ;
do
  {
    compteur++ ;
    alert(compteur) ;
  }
while (compteur<1)

... affichera 2 une fois avant de sortir de la boucle. En revanche...

var compteur = 1 ;
while (compteur<1)
  {
    compteur++ ;
    alert(compteur) ;
  }

... n'affichera rien du tout.

Exercice 1. Utilisation de while

Énoncé
Correction
c. Boucles for

Deux types de boucles for existent en JavaScript. Ces boucles s'effectuent un nombre déterminé de fois. La plus simple à concevoir est par exemple la boucle...

for (var i=0;i<3;i++)
  {
    //Suite d'instructions...
  }

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.

Une variante de la boucle for est la boucle for... in. Cette boucle permet de parcourir un tableau ou plus généralement un objet. Par exemple,

var tab = new Array(3) ;
for (element in tab)
  {
    element="test" ;
  }

L'exemple précédent crée un tableau de trois chaînes de caractères, dont chaque élément contient la chaîne "test".

>Retour à la TdM

IX. Divers

1. Temporisation

a. Fixer un délai pour une exécution : setTimeout et clearTimeout

Ces deux méthodes de l'objet window permettent d'indiquer une liste d'instructions à exécuter au bout d'un certain temps. Par exemple,

function fonctionTest(i)
  {
    while (i>0)
      {
        alert(i) ;
        setTimeout("fonctionTest(i)", 1000) ;
      }
    i-- ;
  }

Le second paramètre est le temps au bout duquel le premier paramètre doit être évalué, exprimé en millisecondes. Ici, fonctionTest(3) affichera toutes les secondes successivement 3, puis 2, puis 1 avant de s'arrêter. setTimeout renvoie un entier servant à identifier l'appel à cette méthode, et il est possible de stopper ces répétitions à l'aide de la méthode clearTimeout(identifiant).

b. Répéter une action

La méthode setInterval, qui renvoie un entier servant d'identifiant, permet de relancer une fonction à intervalles de temps réguliers (exprimés en millisecondes). Le code suivant relance la fonction fonctionARepeter toutes les secondes.

identifiant=setInterval("fonctionARepeter()", 1000) ;

L'identifiant retourné permet de stopper ces répétitions à l'aide de la méthode clearInterval.

>Retour à la TdM

2. Évaluation d'une expression

Il est possible de demander à ce qu'une expression soit évaluée à la saisie, à l'aide de la fonction eval(). Par exemple, eval("a=3+2;alert(a);") affiche 5 dans une boîte d'alerte. Attention : cette fonction est à utiliser avec précaution, pour des raisons de sécurité.

>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