#1 Syntaxe esnext+

Objectifs

  • Faire un tour d'horizon des nouveautés apportées par esnext.

Répertoire TP

  • Créer un répertoire /es2015 dans votre espace esnext (fork à créer).
  • Créer un script /es2015/app.js.
/es2015
    app.js

Le code sera écrit dans le fichier /es2015/app.js.

let

  • Créer une variable favoriteCityId (à l'aide mot clé let) qui contient la chaîne de caractères : "rome".
  • Afficher dans la console (console.log(...)) la variable favoriteCityId.
  • Affecter une nouvelle valeur à la variable favoriteCityId : une chaînes de caractères : "paris".
  • Afficher dans la console (console.log(...)) la variable favoriteCityId.
  • Vérifier le résultat dans la console
rome
paris

const

  • Créer une constante citiesId (à l'aide mot clé const) qui contient un tableau de chaînes de caractères : "paris", "nyc", "rome", "rio-de-janeiro".
  • Afficher dans la console (console.log(...)) la constante citiesId.
  • Vérifier le résultat dans la console .
  • Affecter une nouvelle valeur à la constante citiesId : un tableau vide par exemple. Que constatez-vous dans la console ? Mettre en commentaire la ligne de code de la nouvelle affectation.
  • Ajouter un nouvel élément au tableau : "tokyo".
  • Afficher dans la console (console.log(...)) la constante citiesId.
["paris", "nyc", "rome", "rio-de-janeiro"]
["paris", "nyc", "rome", "rio-de-janeiro", "tokyo"]

Création d'objet

  • Créer une fonction getWeather qui possède un paramètre cityId.
  • Dans cette fonction, ajouter 2 variables locales :
    • city qui stocke la valeur du paramètre cityId en lettres majuscules.
    • temperature valorisé à 20.
    • Utiliser la nouvelle syntaxe ES2015, pour retourner un objet de la forme {city: "PARIS", temperature: 20}.
  • Créer une constante weather qui exécute la fonction getWeather en lui passant en paramètre favoriteCityId.
  • Afficher dans la console constante weather
Object {city: "PARIS", temperature: 20}

Affectation destructurée

  • Avec la nouvelle syntaxe d'affectation destructurée, créer deux constantes city et temperature qui récupère leurs valeurs à partir de la constante weather.
  • Afficher dans la console la valeur de constante city.
  • Afficher dans la console la valeur de constante temperature.
PARIS
20

Rest operator

  • A l'aide du rest operator, créer à partir du tableau citiesId, 3 constantes : parisId, nycId et othersCitiesId.
  • Afficher dans la console la valeur de constante parisId.
  • Afficher dans la console la valeur de constante nycId.
  • Afficher dans la console la taille du tableau othersCitiesId.
paris
nyc
3

Classe

  • Créer une classe Trip.
  • Ajouter un constructeur avec les propriétés : id, name, imageUrl.
  • Créer un objet parisTrip avec la classe Trip avec les informations suivantes :
    • id : paris
    • name : Paris
    • imageUrl : img/paris.jpg
    • Afficher dans la console :
    • l'objet parisTrip.
    • la propriété name de l'objet parisTrip.
  • Vérifier le résultat dans la console.
Trip {id: "paris", name: "Paris", imageUrl: "img/paris.jpg"}
Paris
  • Ajouter la méthode toString() à la classe Trip qui permet d'avoir l'affichage ci-après. Afficher dans la console le résultat de son exécution sur l'objet parisTrip.
Trip [paris, Paris, img/paris.jpg]
  • Ajouter un getter et un setter pour la propriété price. La classe sauvegardera la valeur dans une variable privée appellée _price.
  • Compléter la méthode toString() pour qu'elle affiche la valeur de _price.
  • Valoriser à 100 la propriété price de l'objet parisTrip.
  • Afficher dans la console, le résultat de la méthode toString() de l'objet parisTrip.
Trip [paris, Paris, img/paris.jpg, 100]
  • Ajouter à la classe Trip une méthode statique getDefaultTrip() qui retourne une instance de la classe Trip valorisée avec les informations suivantes :
    • id : rio-de-janeiro
    • name : Rio de Janeiro
    • imageUrl : img/rio-de-janeiro.jpg
  • Créer une constante defaultTrip qui récupère le résultat de l'exécution de la méthode getDefaultTrip().
  • Afficher dans la console defaultTrip.toString().
Trip [rio-de-janeiro, Rio de Janeiro, img/rio-de-janeiro.jpg, undefined]

Héritage

  • Créer la classe FreeTrip qui étends Trip.
  • Elle se construit avec les informations suivantes : id, name et imageUrl. La propriété price est valorisé par défaut à 0.
  • Créer une constante freeTrip, instance de la classe FreeTrip avec les informations suivantes :
    • id : nantes
    • name : Nantes
    • imageUrl : img/nantes.jpg
  • Afficher dans la console freeTrip.toString()
Trip [nantes, Nantes, img/nantes.jpg, 0]
  • Redéfinir la méthode toString() dont le résultat est la concaténation de la chaîne de caractères Free et du résultat de l'exécution de la méthode toString() de la classe Trip.
FreeTrip [nantes, Nantes, img/nantes.jpg, 0]

Promise, Set, Map, Arrow Function

Partons de la base de code suivante :

class TripService {

    constructor() {
        // TODO Set of 3 trips
        //
        // new Trip('paris', 'Paris', 'img/paris.jpg')
        // new Trip('nantes', 'Nantes', 'img/nantes.jpg')
        // new Trip('rio-de-janeiro', 'Rio de Janeiro', 'img/rio-de-janeiro.jpg')
    }

    findByName(tripName) {

         return new Promise((resolve, reject) => {

             setTimeout( () => {
                 // ici l'exécution du code est asynchrone

                 // TODO utiliser resolve et reject en fonction du résultat de la recherche

             }, 2000)
        });
    }
}

class PriceService {

    constructor() {
        // TODO Map of 2 trips
        // 'paris' --> price = 100
        // 'rio-de-janeiro' --> price = 800)
        // no price for 'nantes'
    }

    findPriceByTripId(tripId) {

       return new Promise((resolve, reject) => {

                    setTimeout( () => {
                        // ici l'exécution du code est asynchrone

                        // TODO utiliser resolve et reject en fonction du résultat de la recherche

                    }, 2000)
               });
    }
}

  • Compléter le constructeur de la classe TripService pour initialiser un Set de 3 objet Trip.

  • Compléter le constructeur de la classe PriceService pour initialiser une Map (clé = identifiant voyage, valeur = prix). Stocker y 2 prix pour les villes Paris et Rio de Janeiro.

  • Compléter la méthode findByName(tripName) pour qu'elle renvoie une promesse.

    • Pour simuler une récupération des données distantes, utiliser la méthode setTimeout(fn,delay) pour créer une latence de 2s.
    • Renvoyer l'objet Trip correspondant au nom du voyage en paramètre.
    • Si aucun voyage ne correspond au nom en paramètre, renvoyer une erreur No trip with name xxx.

  • Compléter la méthode findPriceByTripId pour qu'elle renvoie une promesse.

    • Utiliser la méthode setTimeout(fn,delay) pour créer une latence de 2s.
    • Renvoyer la valeur du prix si trouvé
    • Si aucun prix trouvé, renvoyer l'erreur No price found for id xxxx.

  • Créer une instance de TripService et une instance de PriceService.

  • Effectuer une recherche par nom de voyage avec la valeur Paris. Afficher dans la console le résultat trouvé.
Trip found : Trip {id: "paris", name: "Paris", imageUrl: "img/paris.jpg"}
  • Effectuer une recherche par nom de voyage avec la valeur Toulouse. Afficher dans la console le résultat trouvé.
No trip with name Toulouse
  • Chainer l'utilisation des services TripService et PriceService pour récupérer le prix du voyage 'Rio de Janeiro'.
Price found : 800
  • Chainer l'utilisation des services TripService et PriceService pour récupérer le prix du voyage 'Nantes'.
No price for trip id nantes

results matching ""

    No results matching ""