TP #1 - Rappels JavaScript

Prérequis : Installer NodeJS.

Partie 1 - Les fonctions

• Créer un fork du dépôt rappels-es5et récupérer ce dépôt sur votre machine.

• Lancer Visual Studio Code.

• Créer un fichier 01.function.js.

/rappels-es5
    01.function.js

• Ajoutez-y le contenu suivant :

console.log("01 - Fonctions");

• Tester avec Node via la commande :

cd rappels-es5
node 01.function.js

Définition d'une fonction

• Créer 2 variables :

  • nombre1dont la valeur initiale est 10;
  • nombre2dont la valeur initiale est 20;

• Créer une fonction :

  • avec le nom additionner;
  • avec 2 paramètres nb1et nb2;
  • qui retourne le résultat de l'addition entre nb1et nb2.

• Créer une variable resultat1dont le résultat est l'invocation de la fonction additionner avec les paramètres nombre1 et nombre2.

  • Afficher dans la console la valeur de la variable resultat1:

resultat1 = 30

Variable de type fonction

• Créer une variable sommedont la valeur est une référence à la fonction additionner.

• Créer une variable resultat2 dont le résultat est l'invocation de la fonction somme avec les paramètres nombre1 et nombre2.

• Afficher dans la console la valeur de la variable resultat2. La console devrait afficher désormais :

resultat1 = 30
resultat2 = 30

• Créer une variable multiplication dont la valeur est une fonction qui effectue la multiplication entre 2 nombres.

• Créer une variable resultat3 dont le résultat est l'invocation de la fonction multiplication avec les paramètres nombre1 et nombre2.

• Afficher dans la console la valeur de la variable resultat3. La console devrait afficher désormais :

resultat1 = 30
resultat2 = 30
resultat3 = 200

Fonction comme élément du 1er ordre

• Créer une variable afficherOperation qui a les caractéristiques suivantes :
  • Les paramètres suivants :
    • nomOperation de type String qui représente le nom d'une opération.
    • operation de type Fonction qui représente la fonction à exécuter.
    • nb1 de type Nombre
    • nb2 de type Nombre
  • L'implémentation consiste à afficher dans la console une chaîne de caractères de la forme suivante :

<nomOperation>(<nb1>, <nb2>) = <resultat invocation operation>

Exemple :

Multiplication(2,3) = 6

• Invoquer la fonction afficherOperation avec les paramètres suivants :

  • la chaîne de caractères Somme;
  • la variable somme précédemment créée;
  • la valeur 20;
  • la valeur 40.

• Tester. A ce stade, la console devrait afficher le résultat suivant :

resultat1 = 30
resultat2 = 30
resultat3 = 200
Somme(20,40) = 60

• Invoquer la fonction afficherOperation avec les paramètres suivants :

  • la chaîne de caractères Multiplication;
  • la variable multiplication précédemment créée;
  • la valeur 10;
  • la valeur 20.

• Tester.

  • A ce stade, la console devrait afficher le résultat suivant :

resultat1 = 30
resultat2 = 30
resultat3 = 200
Somme(20,40) = 60
Multiplication(10,20) = 200

• Invoquer la fonction afficherOperation avec les paramètres suivants :

  • la chaîne de caractères "Soustraction";
  • une fonction anonyme qui effectue une opération de soustraction entre 2 nombres;
  • la valeur 15;
  • la valeur 5.

• Tester.

  • A ce stade, la console devrait afficher le résultat suivant :

resultat1 = 30
resultat2 = 30
resultat3 = 200
Somme(0,40) = 60
Multiplication(10,20) = 200
Soustraction(15,5) = 10

Partie 2 - Les tableaux

• Créer un fichier 02.tableaux.js.

/rappels-es5
    01.function.js
    02.tableau.js

• Créer une variable villes qui a comme valeur un tableau des chaînes de caractères suivantes : 'nantes', 'paris', 'saint-nazaire', 'angers', 'le mans'.

forEach()

• A l'aide de la fonction forEach(), afficher tous les éléments du tableau dans la console.

nantes
paris
saint-nazaire
angers
le mans

every()

• A l'aide de la fonction every(), déterminer si toutes les villes de la variables villes contiennent la lettre a.

lettreADansToutesLesVilles = true

some()

• A l'aide de la fonction some(), déterminer si au moins une ville de la variables villes contient le caractère '-'.

auMoinsUneVilleAvecUnTiret = true

filter()

• A l'aide de la fonction filter(), créer une variable villesSansTiretSansEspace qui contient un tableau dont les villes n'ont ni tiret, ni espace.

villesSansTiretSansEspace = [ 'nantes', 'paris', 'angers' ]

Chainer les Fonctions

• A partir du tableau villes, construire un tableau dont :

  • la dernière lettre du nom est 's'
  • les noms des villes sont en majuscules

villesMajusculeSeTerminantParS = [ 'NANTES', 'PARIS', 'ANGERS', 'LE MANS' ]

Partie 3 - Programmation orientée objet

• Créer un fichier 03.poo.js.

/rappels-es5
    01.function.js
    02.tableau.js
    03.poo.js

Fonction constructeur

• Créer une fonction constructeur Personne qui permet de créer un objet ayant les caractéristiques suivantes :

  • Un attribut nom.
  • Un attribut prenom.
  • Un attribut pseudo.
  • Une méthode getNomComplet qui retourne une chaine de caractères contenant le nom, le prénom et le pseudo.

• Créer un objet jules en utilisant la fonction constructeur Personne avec :

  • Le prénom Jules.
  • Le nom LEMAIRE.
  • Le pseudo jules77.

• Créer un objet paul en utilisant la fonction constructeur Personne avec :

  • Le prénom Paul.
  • Le nom LEMAIRE.
  • Le pseudo paul44.

• Afficher dans la console :

  • Le nom de l'objet jules.
  • Le prénom de l'objet jules.
  • Le pseudo de l'objet jules.
  • Le nom complet de l'objet jules.

• Répéter l'affichage précédent pour l'objet paul (créer une fonction réutilisable afficherPersonne).

• Tester.

Modifier un objet

• Modifier le pseudo de l'objet jules en jules44.

• Afficher dans la console :

  • Le nom complet de l'objet jules.

• Tester.

Ajouter une propriété à Personne

• Afficher la propriété age de l'objet jules.

  • Vérifier que la valeur est undefined.

• Ajouter la propriété age à la structure Personne avec la valeur par défaut NON RENSEIGNE.

  • Utiliser la propriété prototype.

• Afficher la propriété age de l'objet jules dans la console.

• Tester.

• Modifier l'age de l'objet jules à 30.

• Afficher la propriété age de l'objet jules dans la console.

• Tester.

Ajouter une méthode à Personne

• Ajouter la méthode getInitiales à la structure Personne qui retourne une chaine de caractères composée de la première lettre du prénom et de la première lettre du nom.
  • En javascript, pour récupérer un caractère d'une chaine de caractères, utiliser la fonction charAt. Exemple :

"Jules".charAt(0) == "J"
"Jules".charAt(3) == "e"

• Afficher dans la console les initiales de l'objet jules.

• Tester.

Objet sans fonction constructeur

• Créer un objet robert sans fonction constructeur avec :

  • L'attribut prenom qui vaut Robert.
  • L'attribut nom qui vaut LEPREFET.
  • L'attribut pseudo qui vaut robert77.
  • La méthode getNomComplet qui retourne une chaine de caractères contenant le nom, le prénom et le pseudo.

• Réutiliser la fonction afficherPersonne pour afficher les informations de l'objet robert.

• Tester.

Héritage via une fonction constructeur

• Créer une fonction constructeur Client qui possède les mêmes caractéristiques que Personne et qui contient en plus :

  • Une propriété numeroClient.
  • Une fonction getInfos qui retourne :
    • Le numéro du client.
    • Le nom du client.
    • Le prenom du client.

• Utiliser call avec la fonction Personne (Personne.call(…)).

Aide :

• La fonction call en javascript permet d'appliquer une fonction à un objet donnné.

Par exemple :

var robert = { nom: 'Robert'};

function afficherNom(texte) {
    console.log('Nom', this.nom, texte); // this = robert
}

afficherNom.call(robert, 'untexte');

• Créer un objet steve à partir de la structure Client avec :

  • L'attribut prenom qui vaut Steve.
  • L'attribut nom qui vaut LUCAS.
  • L'attribut pseudo qui vaut steve44.
  • L'attribut numeroClient qui vaut A01.

• Afficher dans la console les informations de l'objet steve via la fonction afficherPersonne.

• Tester.

• Afficher le numéro client de l'objet steve dans la console.

• Afficher dans la console le résultat de l'exécution de la fonction getInfos pour l'objet steve dans la console.

• Tester.