Tableaux et Objets

Licence Informatique 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Pour continuer votre familiarisation avec JavaScript, ce TP vous fait travailler sur les structures de données qui vont servir ensuite pour chaque TP. Très important donc !

Notes de cours

Exercice 1 — Tableaux et objets, la suite #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW2/TP02/ex1/index.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Cet exercice a pour objectif d'approfondir la manipulation de divers types en Javascript. Pour commencer, créer une page HTML index.html sans rien dans le body, et insérer dans l'en-tête du fichier une balise script. Vous pouvez utiliser un script externe ou non. Dans les deux cas, n'oubliez pas le "use strict"; ! Faire les affichages uniquement avec des console.log

Tableaux

Pour chaque cas, tester avec un ou plusieurs jeux de tests et afficher en console les résultats.
Écrire les fonctions qui :

  1. Calcule la somme des éléments d'un tableau d'entiers
  2. Affiche le dernier élément d'un tableau.
  3. Affiche les n derniers éléments d'un tableau (voir slice()).
  4. Prend en entrée un tableau d'entiers tab et un entier n, et retourne un tableau contenant uniquement les éléments de tab supérieurs à n
  5. Prend 2 tableaux d'entiers en entrée et retourne le tableau des éléments communs. Utilser indexOf() pour tester la présence d'un élément dans un tableau. Attention à ne pas ajouter plusieurs fois le même entier s'il apparait plusieurs fois dans un des deux tableaux.
  6. Prend 2 tableaux d'entiers en entrée et retourne le tableau des éléments n'apparaissant que dans un des deux tableaux
  7. Prend un tableau d'entiers en entrée et retourne la chaîne de caractères composée des lettres minuscules correspondant à chaque entier modulo 26. On pourra utiliser fromCodePoint() et la table des caractères ASCII

Objets

  1. Créer un objet avec 2 propriétés et l'afficher en console :
    • title ayant la valeur "le titre"
    • liste étant une liste (tableau) d'entiers 5, 8, 19
  2. Créer un objet avec 2 propriétés et l'afficher en console :
    • contact ayant pour valeur un objet avec 2 propriétés :
      • email ayant pour valeur "toto@gmail.com"
      • phone ayant pour valeur "098765432"
    • stores ayant pour valeur une liste d'objets :
      1. un objet avec les propriétés name valant "BestStore" et city valant "Houston"
      2. un objet avec les propriétés name valant "TestZone" et city valant "Paris"
      3. un objet avec les propriétés name valant "ZeStore" et city valant "London"

Objets, suite

On modélise les points du plan par un objet Javascript comme sur cet exemple :
let A = { "x": 5, "y": -2 };

  1. Écrire une fonction prenant en paramètres 2 entiers et retourne un objet point selon le modèle ci-dessus
  2. Écrire une fonction qui prend en entrée 2 objets point A et B et calcule la distance AB. Voir les fonctions Math de Javascript pour le calcul.
  3. Écrire une fonction qui prend en entrée 3 objets points A, B et C et retourne le boolén vrai si (AB) et (BC) sont orthogonales

Objets encore

On considère l'objet suivant qui modélise un ensemble de personnes :

let liste = {
    "Cole": {
        "nom": "Cole",
        "prenom": "Hickman",
        "email": "marquitatillman@sarasonic.com",
        "telephone": "06.31.17.18.12"
    },
    "Triat": {
        "nom": "Triat",
        "prenom": "Welch",
        "telephone": "06.96.93.50.31"
    },
    "Cabrera": {
        "nom": "Cabrera",
        "prenom": "Gary",
        "email": "hopkinslarson@netur.com"
    },
    "Humphrey": {
        "nom": "Humphrey",
        "prenom": "Jody"
    }
};

Réaliser en console :

  1. Afficher la liste des clés de l'objet liste
  2. Afficher si la clé Toto apparait dans l'objet liste
  3. Afficher si la clé Humphrey apparait dans l'objet liste
  4. Afficher les coordonnées de chaque personne sous la forme ci-dessous. Bien entendu il faut que le code marche encore et affiche les bonnes informations si on change les données de la liste de personnes. Tester par exemple en ajoutant un email ou téléphone à quelqu'un qui n'en a pas, puis en ajoutant 2 personnes en plus.
    On pourra chercher les fonctions utilise dans la documentation sur les objets et voir comment itérer sur les clés d'un objet (Attention : ce n'est pas le for...in de Python !!)
    Hickman Cole a pour téléphone 06.31.17.18.12
    Hickman Cole a pour adresse email marquitatillman@sarasonic.com
    Welch Triat a pour téléphone 06.96.93.50.31
    Welch Triat n'a pas d'adresse email.
    Gary Cabrera n'a pas de téléphone.
    Gary Cabrera a pour adresse email hopkinslarson@netur.com
    Jody Humphrey n'a pas de téléphone.
    Jody Humphrey n'a pas d'adresse email.