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:

• 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:

Quel état?

• Faire une fonction qui demande la température de l'eau avec un prompt et affiche son état(solide, liquide, gazeux) dans un paragraphe accompagné d'une image indiquant le status
  • Solide
  • Liquide
  • Gazeux
• Validez qu'un nombre est bien saisi, sinon afficher une erreur en rouge dans le paragraphe avec l'image
  • Erreur
• L'état est obtenu selon les conditions suivantes
  • Solide < 0
  • Liquide >= 0 ET < 100
  • Gazeux >= 100

🎥 Réalisation

Exemple:

À 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:

• 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

Un petit plus plus

• 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:

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:

• 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

[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:

À 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: