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.
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
- 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>
- 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.
- 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).
- 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
.
- Dans un fichier
coucou.js
, écrire le code suivant :"use strict"; alert("Coucou !");
- 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" };
- Ajouter ce code dans un script existant, puis utiliser
alert
etconsole.log
pour afficher la variableoeuvre
. Remarquer les différences d'affichage. - 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
. - 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). - 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
- Afficher en console les entiers de 1 à 100.
- Plutôt que de tout afficher, demandez à l'internaute
un entier
debut
et un entierfin
à l'aide de l'instructionprompt
(voir la documentation de prompt), et affichez ensuite en console tous les entiers dedebut
àfin
. - Modifier le code pour n'afficher que les entiers entre
debut
àfin
qui sont multiples de 3.
Conversion de température
- É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 - Afficher en console la conversion de 68°F en °C
- 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.
- Dans une variable
fruits
, mettez un tableau contenant quelques fruits. - Afficher la variable avec
alert
etconsole.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. - 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 ...
- Créer une fonction
demanderUnFruit()
, qui demande à l'internaute avec unprompt
un nom de fruit, et qui l'ajoute à la fin du tableau. Remarquer que la variablefruits
est utilisée comme une variable globale. Tester la fonction en affichant la liste des fruits en console avec la fonctionafficherFruits
écrite précédemment. - Créer une fonction
demanderPlusieursFruits(n)
, qui prend en entrée un entiern
et qui demanden
fois à l'internaute d'ajouter un fruit. Tester la fonction en affichant la liste des fruits en console avec la fonctionafficherFruits
é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).
- Écrire une fonction
estBissextile(annee)
qui prend en paramètre une année et qui renvoietrue
si l'année est bissextile, etfalse
sinon. Tester la fonction (notamment avec les années données en exemple plus haut). - É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. - Écrire une fonction qui renvoie la plus petite année bissextile d'une liste d'années donnée en paramètre.