3.2 - Exercices


Pair/impair

  • Utiliser un seul fichier HTML avec la balise script pour réaliser cet exercice
  • Créer tous les éléments DOM de l'exercice en utilisant JavaScript.
  • Indiquer le nom de l'exercice dans un titre
  • Utiliser une fonction qui reçoit un nombre et l'affiche dans un paragraphe en vert avec une police italique s'il est pair, sinon en bleu souligné
  • Dans la fonction, valider que c'est bien un nombre entier, sinon afficher en rouge le paragraphe 'Pas un nombre!'
  • Appeler la fonction via la console
    • On doit pouvoir appeler la fonction plusieurs fois et mettre à jour l'affichage

Exemple:

Pair/Impair

14 est pair!

Notes

  • Pour les exercices qui suivent, vous devez utiliser un seul fichier HTML et un seul fichier JavaScript externe qui isole les différents exercices dans des div.
  • Considérez également qu'on doit pouvoir appeler les fonctions des exercices à répétition via la console et mettre à jour les éléments du DOM

Premier(ou pas)

  • Créer une fonction qui affiche les nombres premiers inférieurs à une valeur récupérée via un prompt
  • Valider que la valeur est bien un nombre entier supérieur à 1, sinon afficher une erreur dans: une alert, dans un paragraphe et à la console
  • Afficher les nombres dans une liste non-ordonnée en colorant 1 item sur 2

Exemple:

Nombres premiers inferieurs a 8:

  • 2
  • 3
  • 5
  • 7

Quel état?

Exemple:

A 12° Celsius l'eau est liquide!

À table

  • Créer une fonction qui affiche la table de multiplication simple d'un nombre récupéré via un prompt
    • Redemander une valeur avec le prompt tant qu'un nombre entier positif n'est pas saisis
  • Chaque multiplication doit se trouver dans un paragraphe distinct
  • Réalisation 🎥

Exemple:

Table simple de 10

0 * 10 = 0

1 * 10 = 10

2 * 10 = 20

...

10 * 10 = 10

Notes

  • Pour les exercices qui suivent, on peut établir une structure HTML de base qu'on viendra modifier en partie via le JavaScript

Un petit plus

  • Faire une fonction qui calcule la somme des nombres contenus dans un tableau reçu en paramètre
  • Afficher chaque valeur du tableau dans une colonne d'un tableau HTML
    • Utiliser le style line-through pour les valeurs invalides et les ignorer du calcul
  • Inscrire le résultat dans un paragraphe en gras sous le tableau
  • Afficher le résultat en rouge si négatif, jaune si zéro et vert si positif
  • Afficher une erreur en rouge dans un paragraphe si le paramètre est invalide(vide, pas de nombres, pas un tableau).
  • Pour afficher les bordures du tableau
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>
  • Modifier la fonction pour accepter tous les types de données en paramètre
    • Si le paramètre est un tableau, réinitialiser l'affichage avec ces valeurs
    • Si le paramètre est 1 seule valeur, mettre à jour l'affichage en incluant cette nouvelle valeur
    • Sinon, lorsqu'aucun paramètre n'est reçu, afficher un prompt pour récupérer une valeur

Exemple:

1true45allo

Résultat = 10

Au dessus de la moyenne

  • Créer une fonction qui récupère les valeur d'un prompt tant que l'utilisateur entre des nombres
    • Stocker ces nombres dans un tableau
  • Calculer la moyenne
  • Afficher chaque nombre sur une ligne d'un tableau HTML: en vert si supérieur ou égal à la moyenne, en rouge sinon
  • Afficher la moyenne dans un paragraphe sous le tableau

Exemple:

1
6
12
5

Moyenne = 6

Bonjour!

  • Faire une fonction qui demande le prénom, le nom et l’année de naissance de l’utilisateur via des prompt.
  • Afficher ensuite un message de bienvenue dans un paragraphe selon le format suivant:
Bonjour [Prénom Nom], vous avez [X] ans.
Vous êtes [status]!
  • Le [status] est déterminé selon l’âge( let currentYear = (new Date().getFullYear()) ), par exemple:
    • < 25 : jeune
    • < 50 : plus tout jeune
    • < 75 : vieillissant
    • >= 75 : vieux
  • Valider que les valeurs saisies ne sont pas vides et que l'année de naissance est bien un nombre entier positif inférieur à l'année courante, sinon afficher une alert
  • Conserver un historique des individus rencontrés dans un tableau HTML
  • Réalisation 🎥

    [EXTRA]

  • Un nouvel individu doit être inséré au début du tableau
  • On doit conserver un maximum de 10 individus en archive, au 11ème individu l'item le plus ancien est retiré pour faire place au nouveau
  • Afficher des statistiques sur l'âge des individus dans un paragraphe sous le tableau: minimum, maximum, moyenne.

Exemple:

Bonjour Bobby Tables, vous avez 18 ans.
Vous êtes jeune!

IndividuAgeStatus
Bobby Tables18jeune
[Prenom Nom][AGE][STATUS]
[Prenom Nom][AGE][STATUS]
[Prenom Nom][AGE][STATUS]
[Prenom Nom][AGE][STATUS]
[Prenom Nom][AGE][STATUS]
[Prenom Nom][AGE][STATUS]
[Prenom Nom][AGE][STATUS]
[Prenom Nom][AGE][STATUS]
[Prenom Nom][AGE][STATUS]

Statistiques sur l'age
Minimum: X
Maximum: Y
Moyenne: Z

À table, encore!

  • Créer une fonction qui génère la table de multiplication complète d'un nombre dans un tableau HTML récupéré via une prompt
  • Valider que la valeur est un nombre entier positif, sinon afficher une erreur dans un paragraphe
  • Réalisation 🎥

Exemple:

Table de 3
123
1123
2246
3369