LIFWEB - TP1 - Premiers pas en JavaScript

Un projet de départ vous est fourni, il comprend :

Le fichier tp1.js comprend tout l’outillage de base pour la gestion des événements HTML qui sera vue dans les prochains TPs.

L’environnement de développement standard pour cette UE est OS Linux, navigateur Firefox, éditeur VSCode et Node.js 18.x ou supérieur. Pour ce premier TP, l’environnement n’a pas encore d’importance. Le minimalisme est encouragé pour ce TP/

Important : copiez les fichiers sur votre compte en faisant clic-droit Save Link As….

Ouvrez tp1.html dans Firefox (ou autre) et éditez tp1.js avec un éditeur pour répondre aux exercices.

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 1 : Tutoriel

Bases du langage

Exercice ouvrir les pages https://javascript.info/ et https://developer.mozilla.org/en-US/docs/Web/JavaScript dans de nouvelles fenêtres. Ces sites des références pour ce TP et tous les autres.

Exercice 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;

Exercice Ouvrir le fichier tp1-equality.js et prévoir sans l’exécuter la valeur de retour attendue. Vérifier ensuite dans la console.

Exercice À partir de l’exemple suivant, expliquez 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: "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);
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 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

Exercice é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 :

Exercice 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].

Exercice 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 2 : 99 Bottles of Beer

Exercice é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 tp1.js.

Conseils pour l’exercice sur la comptine

  • Utiliser les Template literals plutôt que des chaînes concaténées avec l’opérateur +.

Exercice 3 : fonction range

La fonction range(stop, [start], [step]) inspirée de Python 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

  • L’appel range(10, 0) renvoie la même chose que range(10), c’est-à-dire [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] ;
  • L’appel range(10, 4, 2) renvoie [4, 6, 8] ;
  • L’appel range(-2, 0) renvoie [].

Exercice Complétez la fonction range(stop, start, step) de JS1.js.

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

Exercice modifier la page pour qu’elle intègre un en-tête (<header>), un pied de page (<footer>), un menu (<nav>) avec la liste des exercices et un corps le contenu actuel de la page. Utiliser le fichier tp1.css pour positionner et colorier les éléments header, nav, main etc.

Exercice 5 (BONUS) : 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.

Exercice Complétez la fonction evaluate(expr) de tp1.js.

Conseils pour la calculatrice

  • 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.