Premiers pas en JavaScript

Licence Informatique 1ère année

Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, vous prenez en main les bases du langage JavaScript. Ce langage ressemble assez, pour des raisons distinctes, à la fois à C et à Python : vous ne devriez pas être trop dépaysé·e·s ! Cependant, cette proximité peut s'avérer piégeuse : notez bien ce qui est identique et ce qui est différent.

Notes de cours

Préambule

Créer un dossier 2020/TW2/ sur votre serveur web personnel (dans www-dev/), tous les TPs devront être mis en ligne dans ce dossier 2020/TW2/.

Si vous n'avez pas suivi TW1 ou que vous ne savez pas comment utiliser l'espace web, un résumé est disponible ici.

Exercice 1 — Hello World en JavaScript #

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/2020/TW2/TP01/ex1/hello.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 vise à vous lancer en JavaScript.

Premier script et techniques d'affichage

  1. Créer un fichier HTML avec le contenu suivant : 
    <!DOCTYPE html>
<html lang="fr">
<head>
<title>Hello world</title>
<meta charset="UTF-8" />
<meta name="author" content="NUMETUS" />
<script>
"use strict";

alert("Hello, world!");
console.log("Hello, console!");

</script>
</head>
<body></body>
</html>
  2. Ouvrir la page HTML avec Firefox (depuis le web ou en local, ça devrait fonctionner de manière identique) : vous devriez avoir un message pop-up et un message dans la page.
  3. Ouvrir la console de Firefox (raccourci control-maj-K, ou depuis le menu, « Développement web » puis « Console web »). Vous devriez voir le message « Hello, console! » (il y aura peut-être aussi d'autres messages, notamment des avertissements : la console sert à vous informer de tout ce qui se passe avec la page).
  4. On va maintenant modifier le script. Essayez de créer une variable avec x = 3, puis affichez-la avec une des deux techniques. Pourquoi cela ne marche-t-il pas ? Que faut-il faire pour que ça marche ?

Un script externe

Pour l'instant, on a placé le code de notre script dans la page HTML. C'est pratique pour aller vite, mais il est déconseillé de le faire : il devient vite difficile de s'y retrouver quand la page est un peu complexe.

Dans le cadre de ce cours, dès qu'on manipulera des pages HTML non vides, on vous demandera systématiquement de mettre votre code JavaScript dans un fichier à part, et de l'inclure depuis le fichier HTML en utilisant l'attribut src de l'élément script. Par exemple, pour inclure le script toto.js, on utilisera le code HTML suivant :

<script src="toto.js"></script>

Attention, il ne faut rien mettre à l'intérieur de l'élément script si on utilise l'attribut src.

  1. Dans un fichier coucou.js, écrire le code suivant : 
    "use strict";

alert("Coucou !");
  2. Inclure ce script externe dans hello.html et vérifier que le message pop-up apparaît bien. Essayer de placer l'appel du script au-dessus ou en-dessous du script déjà présent dans la page : est-ce que cela change quelque chose ?

Exercice 2 — Objets, boucles, fonctions et tableaux #

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/2020/TW2/TP01/ex2/intro.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 de vous faire manipuler la syntaxe de base de Javascript. Pour commencer, créer une page HTML intro.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 ! NB: chaque partie est indépendante, vous pouvez faire plusieurs scripts si vous voulez. Cependant, faites attention à ce que toutes les parties soient bien exécutées depuis intro.html pour le rendu final.

Des objets

Les « objets » JavaScript ressemblent beaucoup aux « dictionnaires » de Python. Par exemple, le code suivant met dans la variable oeuvre un objet représentant une peinture : 

let oeuvre = {
    "auteur": "Jacques-Louis David",
    "titre": "Le Sacre de Napoléon",
    "annee": 1807,
    "hauteur": 621,
    "largeur": 979,
    "url": "https://fr.wikipedia.org/wiki/Le_Sacre_de_Napol%C3%A9on"
};
  1. Ajouter ce code dans un script existant, puis utiliser alert et console.log pour afficher la variable oeuvre. Remarquer les différences d'affichage.
  2. Ajouter une instruction qui modifie le titre de l'œuvre (sans toucher à la déclaration initiale de l'objet), et vérifier le résultat avec console.log.
  3. Afficher en console (i.e. avec console.log) l'aire de l'œuvre, en mètres carrés (NB: la hauteur et la largeur sont données en centimètres).
  4. Mettre dans une variable un objet représentant un animal, avec un nom (une chaîne de caractères), une espèce (idem) et un âge (un nombre) et l'afficher en console avec console.log.

Boucles

  1. Afficher en console les entiers de 1 à 100.
  2. Plutôt que de tout afficher, demandez à l'internaute un entier debut et un entier fin à l'aide de l'instruction prompt (voir la documentation de prompt), et affichez ensuite en console tous les entiers de debut à fin.
  3. Modifier le code pour n'afficher que les entiers entre debut à fin qui sont multiples de 3.

Conversion de température

  1. Écrire une fonction pour convertir une température de degrés Fahrenheit en degrés Celsius. La fonction doit prendre en entrée un nombre, qui est une température en °F, et retourner la température en °C.
    Rappel : c = (f-32)×5/9
  2. Afficher en console la conversion de 68°F en °C
  3. Utiliser un prompt pour demander à l'internaute la température à convertir et afficher ensuite en console le résultat en °C

Fruits

On manipule ici des tableaux JavaScript (documentation de Array). Ils ressemblent beaucoup aux listes de Python.

  1. Dans une variable fruits, mettez un tableau contenant quelques fruits.
  2. Afficher la variable avec alert et console.log. Remarquer une nouvelle fois les différences d'affichage : de façon générale, console.log() affiche des détails intéressants pour débugger.
  3. Créer une fonction afficherFruits qui affiche dans la console la liste des fruits de notre tableau. Le format doit être le suivant (en supposant que les premiers fruits du tableau soient pomme, poire et banane) : 
    fruit numéro 1 : pomme
fruit numéro 2 : poire
fruit numéro 3 : banane
  ...
  4. Créer une fonction demanderUnFruit(), qui demande à l'internaute avec un prompt un nom de fruit, et qui l'ajoute à la fin du tableau. Remarquer que la variable fruits est utilisée comme une variable globale. Tester la fonction en affichant la liste des fruits en console avec la fonction afficherFruits écrite précédemment.
  5. Créer une fonction demanderPlusieursFruits(n), qui prend en entrée un entier n et qui demande n fois à l'internaute d'ajouter un fruit. Tester la fonction en affichant la liste des fruits en console avec la fonction afficherFruits écrite précédemment.

Années bissextiles

Pour rappel, une année est bissextile si elle est multiple de 4, à l'exception des années qui sont multiples de 100 mais pas de 400 : par exemple, 2008, 2012 et 2020 sont bissextiles (elles sont multiples de 4 sans être multiples de 100), mais 1800, 1900 et 2100 ne le sont pas (elles sont multiples de 4, mais aussi de 100, et pas de 400), et 2000 l'est (elle est multiple de 400).

  1. Écrire une fonction estBissextile(annee) qui prend en paramètre une année et qui renvoie true si l'année est bissextile, et false sinon. Tester la fonction (notamment avec les années données en exemple plus haut).
  2. Écrire une fonction recupererBissextiles(liste) qui prend en paramètre un tableau d'années et renvoie un tableau ne contenant que les années qui sont bissextiles dans le tableau initial. Tester la fonction.
  3. Écrire une fonction qui renvoie la plus petite année bissextile d'une liste d'années donnée en paramètre.