Exercice — Introduction à Javascript

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 1^er é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 1^er 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).