Exercices manipulation des dates en javascript

Exercices manipulation des dates en javascript

  1. Objectifs

    • Etre capable de manipuler des dates en javascript
  2. Exercice 01

    1. Énoncé
      • Écrire une page html5 qui contient:
      • Une zone de texte de type date
      • Un bouton dont la valeur est “Calculez votre âge”
      • Une zone de texte pour afficher l’age en année
      • Une zone de texte pour afficher l’age compmlet
      • Réaliser un script qui permet de calculer l’âge en fonction de la date de naissance rempli par l’utilisateur.
      • Traiter les cas des zéros pour les mois et les jours seulement
      • Le résultat final doit correspondre au schémas suivant:



    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
  3. Exercice 02

    1. Énoncé
      • Dans une page HTML créer un script qui:
      • Fournir un commentaire selon l’âge de la personne. Vous devez fournir un commentaire sur 4 tranches d’âge différentes qui sont les suivantes :
      • Tranche d’âge Exemple de commentaire
        1 à 17 ans “Vous n’êtes pas encore majeur.”
        18 à 49 ans “Vous êtes majeur mais pas encore senior.”
        50 à 59 ans “Vous êtes senior mais pas encore retraité.”
        60 à 120 ans “Vous êtes retraité, profitez de votre temps libre !”
      • Le déroulement du code sera le suivant :
        • L’utilisateur charge la page web.
        • Il est ensuite invité à taper son âge dans une fenêtre d’interaction.
        • Une fois l’âge fourni l’utilisateur obtient un petit commentaire.
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !
  4. Exercice 03

    1. Énoncé
      • Réaliser un script js qui permet d’afficher en temps réel la date et l’heure dans :
        • En haut gauche de la page
        • La barre status de la fenêtre.
      • Vous utiliserez les tableaux pour faire une transcription des jours de la semaine (Lundi, Mardi, …) et des mois (Janvier, Février, …).
      • L’affichage sera le suivant :Nous somme le : Jour en toute lettre JJ mois en toute lettre et l’année sur quatre chiffre
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !

  5. Exercice 04

    1. Énoncé
      • Réaliser à l’aide de HTML5,CSS,Bootstrap4 et Javascript l’équivalent de la page web suivante :
      • Le fichier HTML dot contenir deux balises div et une balise span seulement
      • Votre page doive être “responsive”
      • La couleur de la page body background-color:#58b1e7 ; ce trouve dans un fichier séparé css est appelé cssheureDegital.css
      • La couleur de l’élément entete est background-color:#000 ;
      • La couleur de l’élément horloge est background-color:#000 ;
      • Cette page utilise une fonction prédéfinie setInterval() qui s’appelle elle-même toutes les secondes.
      • Cette fonction commence par retrouver l’élément HTML qui est destiné à afficher l’heure.

      • Cette fonction Javascript se trouve dans un fichier javascript séparé appelé jsheureDegital.js.
      • La date affichée est accompagnée de pm ou am
      • Colorer les deux-points dans l’heure avec une couleur différente.
    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la solution !



Abonnez vous à notre chaîne YouTube gratuitement