LIFWEB - TP1 - Premiers pas en JavaScript

L’environnement de développement standard pour cette UE est un OS Linux, l’éditeur VSCode, Node.js 18.x ou supérieur, et le navigateur Firefox.

Pour ce premier TP, l’environnement sera plus minimal. On utilisera un éditeur, un terminal, et Node.js. Firefox pourra être utilisé dans la partie bonus.

Important : Quand des liens vers des fichiers sont fournis dans le TP, enregistrez les sur votre compte en faisant clic-droit Save Link As… / Enregistrer sous….

Exercice 0 :

Dans un terminal, lancez la commande node. Vous aurez peut-être besoin de l’installer sur vos machines personnelles (apt install nodejs sous Ubuntu). Si node n’est pas installé, référez vous à la page suivante.

Essayez d’entrer une commande simple comme 2+2, et vérifiez que l’interprèteur JavaScript calcule le résultat (il l’affiche même en grisé avant que vous ayez appuyé sur Entrée). Les facilités habituelles d’une bonne ligne de commande sont disponibles (flèches haut/bas pour naviguer dans l’historique, complétion avec la touche tabulation, etc.)

Vous pouvez coller du texte dans l’interprète avec Control+Shift+v (n’oubliez pas Shift, comme d’habitude dans un terminal).

Exercice 1 : Tutoriel

Bases du langage

Ouvrir les pages https://javascript.info/ et https://developer.mozilla.org/en-US/docs/Web/JavaScript dans de nouvelles fenêtres de votre navigateur.

Ces sites des références pour ce TP et tous les autres.

Exercice 1.1 Lancer node dans votre console, et exécuter les commandes suivantes pour expliquer ce que font les opérateurs typeof et instanceof.

typeof "John";
typeof 3.14;
typeof NaN;
typeof false;
typeof null;
typeof undefined;
typeof un_truc_pas_declare;

typeof {};
typeof { name: "John", age: 34 };
({}) instanceof Object;

typeof [1, 2, 3, 4];
[1, 2] instanceof Array;
[1, 2] instanceof Object;

typeof new Date();
typeof new Date("2020-02-02");
new Date() instanceof Date;
new Date() instanceof Object;

typeof function () {};
typeof (() => {});
(() => {}) instanceof Function;
(() => {}) instanceof Object;

Exercice 1.2 Pour les expressions suivantes, prévoir sans l’exécuter la valeur de retour attendue de chaque ligne.

undefined == null;
null === undefined;

let example;
example == undefined;
example === undefined;
example == null;
example === null;

example = null;
example == undefined;
example === undefined;
example == null;
example === null;

let sExample, iExample, bExample;
sExample = "1";
iExample = 1;
bExample = true;
sExample == iExample;
sExample === iExample;
iExample == bExample;
iExample === bExample;
sExample == bExample;
sExample === bExample;

let oExample0 = { a: 0 };
let oExample1 = { a: 0 };
oExample0 == oExample0;
oExample0 === oExample0;
oExample0 == oExample1;

let tExample0 = [0];
let tExample1 = [0];
tExample0 == tExample0;
tExample0 === tExample0;
tExample0 == tExample1;
tExample0[0] == tExample1[0];
tExample0[0] === tExample1[0];

Faire de même pour les expressions du fichier suivant: tp1web_12equality.js Pour cela, mettre en commentaire le résultat attendu (true, false, autre).

Exécuter ensuite le fichier avec node node tp1web_12equality.js.

Exercice 1.3 Créer un fichier javascript contenant l’example suivant, et expliquer la différence de passage de paramètres en JavaScript entre les types primitifs et les objets.

let n = 42;
let b = false;
let s = "test";
let o = { name: "Aurélien", age: 42 };
let a = [0, 1, 1, 2, 3, 5, 8];
let f = function () {
  return 42;
};

function test1(num, bool, str, obj, arr) {
  num++;
  bool = !bool;
  str += "foo";
  obj.name = "Olivier";
  arr.push(13);

  console.log(num, bool, str, obj, arr);
}

test1(n, b, s, o, a);
console.log(n, b, s, o, a);

function test2(obj, arr, fun) {
  obj = { foo: "bar" };
  arr = [42];
  fun = function () {
    return 0;
  };

  console.log(obj, arr, fun);
}

test2(o, a, f);
console.log(o, a, f);

Exercice 1.4 Définir l’objet my_object qui contient un champ x, un champ y et une méthode do() qui va afficher les valeurs des champs x et y dans la console.

Exercice 2 : Itérer sur des tableaux

Exercice 2.1 Compléter les 5 fonctions du fichier suivant tp1web_21.js qui doivent afficher les éléments d’un tableau passé en paramètre. Chaque fonction s’appuiera sur une façon différente de faire une boucle en JavaScript :

La fonction test() en fin de fichier permet de tester si votre fonction d’itération fonctionne correctement.

Exercice 3 : Traiter des données

Vous allez maintenant gérer un pokedex qui contient quelques Pokemons. Voici le tableau de données que nous allons utiliser.

const pokemons = [
    { nom: "Pikachu", type: "électrique", niveau: 15 },
    { nom: "Salamèche", type: "feu", niveau: 12 },
    { nom: "Carapuce", type: "eau", niveau: 14 },
    { nom: "Bulbizarre", type: "plante", niveau: 13 },
    { nom: "Roucool", type: "normal/vol", niveau: 10 }
];

Exercice 3.0 : Créer un nouveau fichier javascript du nom de votre choix. Copier le tableau ci-dessus, et utiliser console.log(), pour afficher son contenu.

Exercice 3.1 : Création d’une équipe d’élite

Dans le fichier tout juste créé, ajouter une fonction equipeElite qui :

  • Prend en paramètre le tableau de Pokémon
  • Retourne un nouveau tableau contenant uniquement les Pokémon de niveau > 12.

Pour faire cela, utiliser une des fonctions natives de recherche dans un tableau

Exercice 3.2 : Présentation de l’équipe Créer une fonction presentationEquipe qui :

  • Prend en paramètre le tableau de Pokémon
  • Retourne une chaîne de caractères formatée comme suit pour chaque Pokémon : “NOM (Type: TYPE) - Niveau XX”
  • Chaque Pokémon doit être sur une nouvelle ligne

Il faut pour cela s’appuyer sur les méthodes propres aux String JavaScript.

Exercice 3.3 : Analyse de l’équipe

Créer une fonction analyseEquipe qui :

  • Prend en paramètre le tableau de Pokémon
  • Retourne un objet contenant le nombre de Pokémon par type (eau, feu, etc.) Note : Pour les doubles-types, comptez les deux types séparément (faites un traitement sur le string)

Vous pouvez tester avec le jeu de données suivant

Pour terminer, utiliser les différentes fonctions développées pour afficher une équipe avec seulement des Pokemons de niveau supérieur à 30. Puis une analyse de l’équipe.

Exercice 4 (BONUS) : un petit peu de HTML et de CSS

En vous appuyant sur le code fourni :

Ouvrez tp1.html dans Firefox (ou autre) et éditez tp1_bonus.js avec un éditeur.

Attention si vous ouvrez la page et l’enregistrez différemment, les fichiers ne seront pas au même endroit.

Utilisez les outils de développement (F12 ou Ctrl-Shit-K) de Firefox ou Chrome pour activer la console JavaScript et mettre au point vos programmes.

Exercice modifier la page pour qu’elle intègre un en-tête (<header>), un pied de page (<footer>), un menu (<nav>) avec le titre des exos 3.1, 3.2 et 3.3. Dans le menu nav chaque titre d’exo devra être dans un élément de liste avec les id suivants: equipeItem, analyseItem, et eliteItem.

Lors d’un clic le corps de la page sera modifié (code déjà présent) avec résultat des exos 3.1, 3.2 et 3.3 (à vous de remettre vos fonctions dans le fichier tp1_bonus.js).

Vous pouvez améliorer ce que retourne vos fonctions des exercice 3.1 à 3.3 pour fournir une structure html plus propre ques des chaines de caractère.

Utiliser le fichier tp1.css pour positionner et colorier les éléments header, nav, main etc.

Note en cas de problème avec Nodejs

Il est possible d’utiliser l’interpréteur en ligne suivant jdoodle