Travaux pratiques de JavaScript

Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

Table of Contents

• 1. Mise en place
  • 1.1. Prérequis
  • 1.2. Références
  • 1.3. Récupération des sources
  • 1.4. Téléchargement des modules
  • 1.5. Installation de Grunt
• 2. Travail à réaliser
  • 2.1. JavaScript pur
  • 2.2. Interaction avec le navigateur
• 3. Vérifier le code
  • 3.1. Exécuter les tests
  • 3.2. Exécuter la vérification syntaxique

1. Mise en place

1.1. Prérequis

• Il est nécessaire de disposer de Node Package Manager. La méthode d’installation dépend du système d’exploitation.

• Afin de récupérer les sources du workshop, il est souhaitable d’installer git.

1.2. Références

La référence du langage JavaScript est disponible sur le site de Mozilla.

1.3. Récupération des sources

Pour disposer des sources, deux possibilités existent :

1. Soit utiliser git :

   git clone [email protected]:formations/javascript-fondation.git

2. Ou bien télécharger l’archive puis la décompresser.

1.4. Téléchargement des modules

Le workshop est basé sur la structure d’un projet npm qui utilise Grunt comme exécuteur de tâches.

Pour télécharger les dépendances du projet, exécuter la commande suivante :

npm install

1.5. Installation de Grunt

Afin d’installer l’exécuteur de tâches Grunt nécessaire au lancement des tests, exécuter la commande suivante :

npm install -g grunt-cli

Tip	Sur un système *Nix, préfixer cette dernière par sudo pour demander une élevation temporaire des privilèges.

2. Travail à réaliser

2.1. JavaScript pur

La première partie du travail demandé consiste à implémenter le corps de fonctions JavaScript dans le fichier src/index.js.

Voici un exemple d’une telle fonction :

index.js

function add(i1, i2) {
    'use strict';
    // Définir une fonction add() qui prend en paramètres deux nombres i1 et i2 et retourne leur somme
}

Le résultat final est donc le suivant :

index.js

function add(i1, i2) {
    'use strict';
    // Définir une fonction add() qui prend en paramètres deux nombres i1 et i2 et retourne leur somme
    return i1 + i2;
}

2.2. Interaction avec le navigateur

La seconde partie du travail consiste à rendre fonctionnel le formulaire index.html.

Ce formulaire reprend les fonctions développées dans la première partie (et en ajoutent 3 autres, voir ci-dessous). L’objectif est d’utiliser celles-ci de manière interactive. Pour cela, pour chaque fonction, il faut :

1. Lire la valeur du (des) champs à chaque perte de focus de ceux-ci

2. Vérifier que tous les champs ont des valeurs valides pour la fonction (par exemple, fact() n’accepte que des nombres)

3. Exécuter la fonction

4. Valoriser la dernière colonne avec le résultat de la fonction

Pour les 3 dernières lignes, le champ accepte une URL et la sortie du champ lance une requête AJAX vers cette URL. Le résultat de la requête alimente la dernière colonne. Chaque ligne doit employer une méthode différente :

1. AJAX synchrone

2. AJAX asynchrone

3. jQuery

3. Vérifier le code

Pour aider à la vérification du code des implémentations, le projet dispose des tests unitaires sur les fonctions - Jasmine, et d’un vérificateur syntaxique - JSHint.

3.1. Exécuter les tests

Pour exécuter les tests, taper la commande suivante :

grunt jasmine

La console doit alors afficher le résultat suivant :

Running "jasmine:src" (jasmine) task
Testing jasmine specs via PhantomJS

add()
   X 1 & 2 -> 3
     Expected undefined to equal 3. (1)
   X 1 & 12 -> 13
     Expected undefined to equal 13. (1)
   X 10 & 2 -> 12
     Expected undefined to equal 12. (1)

Une fois la méthode correctement implémentée, on obtient ceci :

Running "jasmine:src" (jasmine) task
Testing jasmine specs via PhantomJS

add()
   ✓ 1 & 2 -> 3
   ✓ 1 & 12 -> 13
   ✓ 10 & 2 -> 12

3.2. Exécuter la vérification syntaxique

Pour exécuter la vérification syntaxique, taper la commande suivante :

grunt jshint

La console affiche alors un résultat similaire :

Running "jshint:all" (jshint) task

src/index.js
  line 2   col 18  'i2' is defined but never used.
  line 2   col 14  'i1' is defined but never used.

Le travail consiste à corriger les erreurs listées.

Pour exécuter à la fois les tests et la vérification, taper :

grunt check

Tip

Les tâches Grunt jasmine et jshint sont exécutées séquentiellement. Si au moins un unique test échoue, la tâche jasmine se terminera avec un statut en erreur et l’exécutions des tâches suivantes - y compris jshint, s’arrêtera là. Pour forcer l’exécution de jshint même en cas d’échec de jasmine, il est nécessaire d’utiliser le paramètre --force : grunt check --force