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 TW2-2025/ sur votre serveur web personnel (dans www-dev/), tous les TPs devront être mis en ligne dans ce dossier TW2-2025/.

Si vous n'avez pas suivi TW1 et/ou que vous ne savez pas comment utiliser l'espace web, une aide est disponible sur le serveur de FAQ du département. N'attendez pas pour appeler à l'aide en TP !

Important

Comme en TW1, vos données de TP seront collectées par un robot.

Utiliser l'outil evalweb pour vérifier que vos exercices sont au bon URL.

Si vous n'avez pas suivi TW1 et/ou que vous avez besoin d'explications pour le robot et/ou evalweb, appelez votre enseignant dès le 1er TP !

Utiliser UNIQUEMENT des console.log, interdit d'écrire des alert ou document.write

Ne JAMAIS commenter les console.log qui font les affichages demandés dans les exercices (le robot les collecte).

Exercice 1 — Hello World en Javascript #

Cet exercice sert uniquement pour tester l'inclusion de scripts et l'affichage de messages avec console.log.

Premier script et techniques d'affichage

  1. Créer les dossiers TP01/ex1/ et y mettre un fichier HTML avec le contenu suivant (penser à modifier la balise meta avec vos informations) : 
    <!DOCTYPE html>
<html lang="fr">
<head>
    <title>Hello world</title>
    <meta charset="UTF-8" />
    <meta name="author" content="à compléter" />
    <script>
"use strict";
console.log("Hello, console!");

    </script>
</head>
<body>
    <h1>Une page (presque) vide</h1>
    <h2>Ouvrir la console (Ctrl+Shift+K) pour voir les affichages générés.</h2>

</body>
</html>
  2. Ouvrir la page HTML avec Firefox (depuis le web ou en local, ça devrait fonctionner de manière identique)
    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).
  3. On va maintenant modifier le script. Essayez de créer une variable avec x = 3, puis affichez sa valeur en console.
    Si ça ne marche pas, quelle est l'erreur et pourquoi ? (et 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 ça devient vite difficile de s'y retrouver quand la page est un peu complexe ou le script long. Il est alors conseillé de créer un script externe (même principe que pour les styles CSS externes).

Rappel : 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 (la balise fermante suit immédiatement la balise ouvrante sans aucun code entre deux). Notons que cela n'empêche pas de mettre une autre balise <script> avec du code dedans.

  1. Dans un fichier coucou.js, écrire le code suivant : 
    "use strict";
console.log("Coucou du fichier externe !");
    Attention surtout pas de balise <script> dans le fichier JS. On y met uniquement le code vu que c'est un fichier Javascript (aucun HTML ne doit donc y figurer).
  2. Inclure ce script externe dans votre page web et vérifier que le message apparaît bien en console. Essayer de mettre l'appel du script externe au-dessus ou en dessous du script déjà présent dans la page : est-ce que cela change quelque chose ?

Exercice 2 — Introduction à Javascript #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante : 

https://dev-LOGIN.users.info.unicaen.fr/TW2-2025/TP01/ex2/intro.html
(en remplaçant LOGIN par votre nom de login). 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="LOGINS" />
en remplaçant LOGINS par les noms de login 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 dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.

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, créer un fichier Javascript tp1.js et mettre dans le HTML une balise <script> pour appeler de fichier JS.

Tout votre code doit donc être dans le fichier JS.
Nota: chaque partie est indépendante.

Important

  • mettre use strict; au début de votre fichier
  • utiliser uniquement console.log pour les affichages
  • ne PAS mettre les console.log en commentaires

Variables

  1. Créer une variable contenant l'entier 5 et afficher sa valeur en console.
  2. Créer une deuxième variable contenant l'entier 10.
  3. Créer une variable somme qui prend pour valeur la somme des 2 premières variables et l'afficher en console
  4. Afficher en console le type de la variable somme (mot clé typeof)
  5. Assigner la chaine de caractères "toto" à la variable somme et réafficher son type.
  6. Créer une variable suite contenant un entier
  7. Afficher en console somme + suite. Que s'affiche-t-il et que s'est-il passé ?
    N'hésitez pas à demander des explications !
  8. Ajouter un console.log("------------------------------"); pour séparer chaque partie.

Objets

Inclure ce code dans votre fichier JS :

const personne = {
    "prenom": "Thomas",
    "nom": "Pesquet",
    "anneeNaissance": 1978
};
  1. Afficher cet objet en console avec console.log() puis console.table()
  2. Créer une variable qui contient l'année courante. Pour cela utiliser new Date().getFullYear() (afin que la valeur soit toujours bonne l'année prochaine...)
  3. Calculer l'age de la personne et afficher le résultat en console.
  4. Ajouter un console.log("------------------------------"); pour séparer chaque partie.

Objets (suite)

  1. Mettre dans une variable un objet représentant une voiture, avec une marque (une chaîne de caractères), un modèle (idem) et une année de production (un nombre) et l'afficher en console.
  2. Écrire le code qui modifie l'année (sans modifier la déclaration initiale de l'objet).
  3. Afficher à nouveau cet objet en console.
  4. Ajouter un console.log("------------------------------"); pour séparer chaque partie.

Tableaux

  1. Créer un tableau contenant les entiers 1, 3 et 5 et l'afficher en console avec console.log() puis console.table()
  2. Afficher en console le 1er élément du tableau puis son dernier.
  3. Si ce n'est pas ce qui a été fait pour afficher le dernier élément, utiliser un code qui fonctionera bien quel que soit le nombre d'éléments du tableau.
  4. Ajouter un élément à la fin du tableau et afficher le tableau en console (méthode push)
  5. Enlever le premier élément du tableau et afficher le tableau en console (méthode shift)
  6. Enlever le dernier élément du tableau et afficher le tableau en console (méthode pop)
  7. Afficher en console le nombre d'éléments du tableau (il doit y en avoir 2)
  8. En utilisant la syntaxe de décomposition, créer un tableau qui contient les chaines "titi", "toto", puis les éléments du 1er tableau et enfin se termine avec l'élément "titi"
  9. Afficher ce tableau en console
  10. Ajouter un console.log("------------------------------"); pour séparer chaque partie.

Boucles

Quatre façons de boucler sur un tableau

Supposons que la variable tab contienne un tableau. Javascript dispose de plusieurs façons d'itérer sur les indices et/ou valeurs de ce tableau. Voyons cela :

1- Un for comme en C

for (let i = 0; i < tab.length; i++) { ... } permet d'avoir les indices du tableau (rappelons que tab.length est la longueur de celui-ci).
On aura alors accès aux valeurs avec tab[i], que ce soit en lecture ou en écriture pour modifier le tableau.
break et continue permettent de sortir de la boucle ou de passer à l'itération suivante.
Documentation : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/for

2- Un for presque comme en Python

for (let i in tab) { ... } permet d'avoir les indices du tableau.
Attention piège : ça ressemble au python mais cela donne accès aux indices et non aux valeurs du tableau.
On aura alors accès aux valeurs avec tab[i], que ce soit en lecture ou en écriture pour modifier le tableau.
break et continue permettent de sortir de la boucle ou de passer à l'itération suivante.
Documentation : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/for...in

3- Un for presque comme en Python

for (let val of tab) { ... } permet d'avoir les valeurs du tableau.
On aura alors accès aux valeurs du tableau mais en lecture seulement, c'est-à-dire que val = "toto" change uniquement la valeur de val localement, le tableau ne sera pas modifié.
break et continue permettent de sortir de la boucle ou de passer à l'itération suivante.
Documentation : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/for...of

4- forEach et fonction fléchée

tab.forEach((element) => console.log(element)) permet d'itérer sur les valeurs du tableau.
Attention : il faut maîtriser les fonctions fléchées et il n'y a pas de possibilité de sortir de l'itération avec break
Documentation : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Application
  1. Afficher en console les entiers de 1 à 10 (avec une boucle for).
  2. Afficher en console les entiers entre 0 et 30 (strictement < 30) qui sont multiples de 3 sans avoir besoin d'un if dans la boucle for.
  3. Écrire une boucle qui crée un tableau nommé entiers contenant 50 entiers aléatoires entre 0 et 100. Afficher ensuite ce tableau en console.
    On utilisera Math.floor(Math.random() * 100) pour créer un entier aléatoire entre 0 et 100.
  4. Écrire une boucle qui affiche les éléments du tableau entiers multiples de 4.
  5. Ajouter un console.log("------------------------------"); pour séparer chaque partie.

Fonction : 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 69°F puis de 32°F en °C
  3. Optionnel : améliorer la fonction pour arrondir le résultat à un chiffre après la virgule.
    On pourra utiliser Math.round() ou Number.toFixed()
  4. Ajouter un console.log("------------------------------"); pour séparer chaque partie.

Fonction : 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 argument une année et qui retourne true si l'année est bissextile, et false sinon.
  2. Afficher en console le résultat (true/false) pour les années 1994, 2008, 1800 et 2000.
    Vous devez obtenir false, true, false, true
  3. Écrire une fonction recupererBissextiles(liste) qui prend en argument un tableau d'années et retourne un tableau ne contenant que les années qui sont bissextiles.
    Tester la fonction avec le tableau [1348, 2778, 2022, 2200, 1984, 636] et afficher le tableau de résultats en console (vous devez obtenir 1348, 1984 et 636)
  4. Écrire une fonction plusPetiteBissextile qui prend en argument une liste d'années et retourne la plus petite année bissextile.
    Tester la fonction avec le tableau [1976, 1946, 2000, 1942, 1940, 1964] et afficher le résultat en console (vous devez obtenir 1940).