LIFAP5 - TP1 : premiers pas en JavaScript et HTML

Un projet de départ vous est fourni (archive zip), il comprend un fichier LIFAP5-TP1.html qui charge LIFAP5-TP1.js. Le fichier JavaScript comprend tout l’outillage de base pour la gestion des événements HTML. Le fichier LIFAP5-TP1.css est également fourni pour le dernier exercice.

Utilisez les outils de développement (F12) de firefox pour activer la console javascript et mettre au point vos programmes.

Exercice 0 : Tutoriel

Bases du langages

  1. Ouvrir les pages http://devdocs.io/javascript/, https://javascript.info/, http://eslint.org et https://github.com/airbnb/javascript dans de nouvelles fenêtres. Ce seront des références pour ce TP et tous les autres.
  2. Exécuter les commandes suivantes dans la console 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;
  1. Ouvrir le fichier LIFAP5-TP1-equality.js, réfléchir pour prévoir la valeur de retour attendue puis vérifier dans la console. Résumer la différence entre les comparaisons == et ===
  2. A partir de l’exemple suivant, expliquez le passage de paramètres en JavaScript
let n = 42;
let b = false;
let s = "test";
let o = { name: "Romuald", age: 37 };
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);

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

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

// test2(o,a,f);
  1. 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.

Premières fonctions

  1. Écrire la fonction iterate_array(arr) qui va afficher les éléments du tableau passé en paramètre dans la console. Une fonction test() est prévue pour tester la fonction. Essayer les différentes variantes de boucles :
  2. Définir la fonction fibonacci(n) qui pour n > 1 renvoie un tableau de longueur n contenant les n premiers termes de la suite de Fibonacci, e.g., fibonacci(8) = [0,1,1,2,3,5,8,13].
  3. Question subsidiaire : que ce passe-t’il si on passe autre chose qu’un nombre à ces fonctions ou si le nombre est négatif ? Testez et corriger avec Number.isInteger(n).

Exercice 1 : 99 Bottles of Beer

  1. Écrire un programme qui génère les paroles de “99 Bottles of Beer” et renvoie une chaîne les contenant. Complétez pour cela la fonction bottles(beers) de LIFAP5-TP1.js.

  2. Analyser la fonction bottles(beers) avec ESLint. Quels sont les erreurs remontées ? Certaines sont-elles normales ?

Conseils pour l’exercice

  • Configurer l’outil ESLint pour accepter la syntaxe ES6, autoriser les affichages dans la console, formater le copde à votre goût etc. Pour cela, fouiller et tester les différentes options du menu Rules Configuration.
  • Utiliser les Template literals plutôt que des chaînes concaténées avec l’opérateur +.

Exercice 2 : fonction range

La fonction range(stop, [start], [step]) prend trois arguments en paramètre et renvoie le tableau des entiers compris entre start (inclus) et stop (exclu) avec un pas de step :

  • si start n’est pas défini, sa valeur par défaut est 0;
  • si step n’est pas défini, sa valeur par défaut est 1;
  • si stop est inférieur ou égal à start, alors la liste vide est retournée.

Exemples :

/* les tests suivants sont tous vrais */
(range(10, 0) == range(10)) == [0, 1, 2, 3, 4, 5, 6, 8, 9];
range(10, 4, 2) == [4, 6, 8];
range(-2, 0) == [];
  1. Complétez la fonction range(stop, start, step) de LIFAP5-TP1.js.

  2. Analyser la fonction range(stop, start, step) avec ESLint.

  3. Proposez une version récursive range_rec de la fonction en utilisant la fonction Array.prototype.concat()

Exercice 3 : calculatrice polonaise inverse

L’exercice consiste à écrire une calculatrice qui évalue des expressions arithmétiques en notation polonaise inverse. La principale fonction à réaliser est evaluate(expr) qui renvoie la valeur de l’expression expr passée en paramètre sous forme d’une chaîne de caractères. L’expression est construite à partir d’entiers et des opérations +, -, * et /.

Par exemple l’expression 5 1 2 + 4 * + 3 -, écrite 5 + ((1 + 2) * 4) - 3 dans la notation infixe usuelle, doit s’évaluer en 14. L’expression vide doit s’évaluer en 0.

Pour simplifier l’exercice, on supposera que les entiers et les opérateurs sont toujours séparés par des espaces dans l’expression fournie en paramètre, ainsi, 1 3 + est une expression valide mais 1 3+ ne l’est pas. De même, on ne gérera pas les erreurs comme la division par zéro ou les chaînes invalides.

Un algorithme d’évaluation consiste à lire de gauche à droite les éléments qui composent l’expression :

  • si c’est un nombre qui est lu, alors on l’ajoute à une pile;
  • si c’est une opération qui est lue, alors on remplace les deux premiers nombres au sommet de la pile par le résultat de l’opération sur ces deux nombres.
  1. Complétez la fonction evaluate(expr) de LIFAP5-TP1.js.

  2. Analyser la fonction evaluate(expr) avec ESLint.

Conseils pour l’exercice

  • la méthode split permet de transformer une chaîne en un tableau en décomposant les termes de la chaîne séparés par des espaces ;
  • utiliser parseFloat pour transformer une chaîne en nombre ;
  • utiliser isNaN pour tester si quelque chose est bien un nombre.

Exercice 4 : un petit peu de HTML

  1. modifier le fichier JavaScript et le fichier HTML pour que quand on clique sur le bouton Exécuter on affiche le contenu de my_object dans un <span> à ajouter.
  2. modifier la page pour qu’elle intègre une en-tête, un pied de page, un menu à gauche avec la liste des exercices et un corps le contenu actuel de la page. Utiliser le fichier LIFAP5-TP1.css pour positionner et colorier les éléments header, nav, main etc.