Premiers pas en JavaScript
51.4 calendrier amélioré :
appel fonction VerifDonnees()
cuy copyleft
  See You Why?  

 


| | Calendrier - h (51.5)

Contenu

 

 

I. Présentation de notre calendrier

voir < < séquence précédente

II. Touches mois précédent et suivant

voir < < séquence précédente

III. Touches raccourcis 'année précédente' et 'année suivante'

voir < < séquence précédente

 

IV. Comment détecter d'où vient l'appel à la fonction VerifDonnees() ?

Observons ce qui se passe jusqu'ici.

Dès le chargement de notre calendrier perpétuel, l'ordinateur affiche par défaut le calendrier du mois en cours avec mise en évidence du jour actuel... les variables anSouh, moisSouh et jourSouh ont été affectées du jour en cours, même si elles n'étaient pas définies au moment de l'entrée dans la fonction VerifDonnees.

Un autre appel à cette fonction peut être fait via le bouton "Revenir à la date courante". Dans ce cas, on constatera en lisant la source, qu'il y a un 'reset' de la page (et donc une nouvelle lecture de la source) et... lors de ce nouveau chargement de la page, l'ordinateur affiche à nouveau par défaut le calendrier du mois en cours avec mise en évidence du jour actuel... les variables anSouh, moisSouh et jourSouh ont à nouveau été affectées du jour en cours, même si elles n'étaient pas définies au moment de l'entrée dans la fonction VerifDonnees, puisque rechargement de la page.

Nous serions donc en droit de penser que l'affectation des variables anSouh, moisSouh et jourSouh est la clé qui permet de détecter si l'on est au premier affichage de la page ou non, si les variables énumérées ci-avant sont définies ou non, puisque cliquer sur l'un des quatre nouveaux boutons (permettant de sélectionner l'année ou le mois, précédent ou suivant) se fait toujours après un affichage et donc une affectation des dites variables.

Magnifique raisonnement, mais c'est oublier qu'il existe un troisième appel possible de la fonction. En effet, si l'internaute introduit une date via les listes déroulantes, c'est la date introduite par l'internaute qui sera vérifiée et affichée, mais dans ce cas, les variables anSouh et autres sont définies et affectées lors de la fonction et celle-ci lira, conformément à nos souhaits, la valeur des données affichées par les listes déroulantes nouvellement affectées.
À la fin de la source, on lira en effet qu'un clic sur le bouton 'OK' appelle la fonction VerifDonnees, sans 'reset' et donc les variables anSouh et autres sont et restent affectées en entrant dans la fonction.

Fini donc de penser que l'affectation des variables anSouh, moisSouh et jourSouh est la clé qui permet de détecter si l'on est au premier affichage de la page ou non, si les variables énumérées ci-avant sont définies ou non, puisque cliquer sur l'un des quatre nouveaux boutons (permettant de sélectionner l'année ou le mois, précédent ou suivant) se fait toujours après un affichage et donc une affectation des dites variables, mais malheureusement, un clic sur le bouton 'OK' appelle aussi la fonction VerifDonnees, sans 'reset' et donc les variables anSouh et autres sont aussi et restent affectées en entrant dans la fonction.

Il sera donc nécessaire de trouver un autre moyen de distinguer l'appel à la fonction VerifDonnees par l'un des 4 nouveaux boutons créés et situés près du titre du tableau indiquant le mois et l'année affichés. Pourquoi dès lors ne pas adjoindre un paramètre qui distinguerait ces entrées de celles préalablement établies ? On pourrait imaginer un '1' dans les cas précédents et un '2' dans les appels provenant d'un clic sur l'un des 4 nouveaux boutons créés.

On sait déjà que les quatre nouvelles fonctions définies (mois_suiv, mois_prec, an_suiv et an_prec) appellent la fonction VerifDonnees. Il faudra donc y attribuer un paramètre '2' pour les distinguer des 3 autres appels abordés précédemment, sans oublier d'attribuer un paramètre '1' dans ces anciens appels.

A. Révision de notre fonction VerifDonnees()

Une autre solution est de refaire une recherche avec les mots : flèche, icone, droite et de faire votre choix parmi les icones proposées. Nous avons choisi l'icône suivante pour l'année suivante (à bien dimensionner pour convenir à votre horloge et à retourner pour l'année précédente) flech_simple_droite.

Où placer ces icônes ? De part et d'autre de la notification du mois nous semble être le choix le plus judicieux.
Notre ancien code était :
/* ********** verifier les donnees fournies *********************** */
function VerifDonnees() {
   jourSouh = document.CalPerpet.selJour.selectedIndex + 1;
   moisSouh = document.CalPerpet.selMois.selectedIndex + 1;
   anSouh = (document.CalPerpet.selSiecle.selectedIndex + 15) * 100 + document.CalPerpet.selAn.selectedIndex;
   t_LongMaxMois[2] = fevrierbissextile(anSouh);
   //affecte aux variables les valeurs sélectionnées dans les listes déroulantes
   /* ********** vérifier si date choisie est du calendrier grégorien ************ */
   if ((anSouh * 10000 + moisSouh * 100 + jourSouh) < 15821220) {
      alert("Date antérieure au 20 décembre 1582, hors du calendrier Grégorien. \nMerci de choisir une date ultérieure.");
      document.CalPerpet.reset();
      VerifDonnees();
   } else if (t_LongMaxMois[moisSouh] < jourSouh) {
      /* *********** verifier si le jour ne dépasse pas la longueur du mois *************** */
      alert("Il n'y a pas " + jourSouh + " jours en " + t_ListeMois[moisSouh] + " " + anSouh + " mais " +       t_LongMaxMois[moisSouh] + ". \nMerci de choisir une autre date.");
      document.CalPerpet.reset();
      VerifDonnees();
   } else {
      AfficheCalendrier();
   }
}

qui, si l'on tient compte des éléments d'analyse faite depuis ce début de chapitre deviendrait [modifié (en rouge) :
/* ********** verifier les donnees fournies *********************** */
function VerifDonnees(par) {
   if (par==1) {
      jourSouh = document.CalPerpet.selJour.selectedIndex + 1;
      moisSouh = document.CalPerpet.selMois.selectedIndex + 1;
      anSouh = (document.CalPerpet.selSiecle.selectedIndex + 15) * 100 + document.CalPerpet.selAn.selectedIndex;
   }
   
t_LongMaxMois[2] = fevrierbissextile(anSouh);
   //affecte aux variables les valeurs sélectionnées dans les listes déroulantes
   /* ********** vérifier si date choisie est du calendrier grégorien ************ */
   if ((anSouh * 10000 + moisSouh * 100 + jourSouh) < 15821220) {
      alert("Date antérieure au 20 décembre 1582, hors du calendrier Grégorien. \nMerci de choisir une date ultérieure.");
      document.CalPerpet.reset();
      VerifDonnees(1);
   } else if (t_LongMaxMois[moisSouh] < jourSouh) {
      /* *********** verifier si le jour ne dépasse pas la longueur du mois *************** */
      alert("Il n'y a pas " + jourSouh + " jours en " + t_ListeMois[moisSouh] + " " + anSouh + " mais " +       t_LongMaxMois[moisSouh] + ". \nMerci de choisir une autre date.");
      document.CalPerpet.reset();
      VerifDonnees(1);
   } else {
      AfficheCalendrier();
   }
}

Ainsi, de :

Janvier 2015
le résultat de la ligne supérieure du calendrier deviendrait :
flech_dbl_gauche   flech_simple_gauche   Janvier 2015   flech_simple_droite   flech_dbl_droite
Encore faut-il savoir où et comment activer ces touches...

 

B. L'activation par JS de ces touches... Où ?

Dans la séquence précédente, nous avions réfléchi à la question et avions décidé de le faire en affectant de nouvelles valeurs aux trois variables anSouh, moisSouh et jourSouh avant d'appeler la fonction VerifDonnees() sans oublier de détecter que l'on n'est pas au passage de lecture de la fonction qui ne lit que les choix faits via les listes déroulantes...

 

C. L'activation par JS de ces touches... Comment ?

Deux nouveaux boutons, donc deux nouvelles fonctions à activer : une pour l'année précedente, l'autre pour l'année suivante.

Comment créer ces fonctions ? Beaucoup plus facile que pour les mois... sauf une erreur possible tous les "29 février" des années bissextiles ;o) d'où :


function an_suiv() {
   anSouh++;
   if (t_LongMaxMois[moisSouh] < jourSouh) {
      jourSouh = t_LongMaxMois[moisSouh];
   }
   VerifDonnees();
}
  function an_prec() {
   anSouh--;
   if (t_LongMaxMois[moisSouh] < jourSouh) {
      jourSouh = t_LongMaxMois[moisSouh];
   }
   VerifDonnees();
}

Et notre lecteur de se réjouir d'avoir maitrisé ces mofifications à apporter à notre calendrier perpétuel de départ... malheureusement, s'il n'a pas réagi précédemment, c'est qu'il a admis sans esprit critique la lecture de nos pages... parfois volontairement inexactes pour relever l'état critique de nos lecteurs.

Le lecteur qui arrive à ce niveau de lecture et qui n'a pas encore réagi (alors qu'il aurait déjà dû le faire il y a deux séquences) se ferait gronder comme les élèves d'antan qui cherchaient une place au fond de la classe, à côté du feu (ou des radiateurs... selon l'époque).

En effet, en ajoutant ou retirant un an, même si la vérification if (t_LongMaxMois[moisSouh] < jourSouh) est faite, aucune vérification n'est faite pour voir si la nouvelle année souhaitée est une année bissextile ou non. Donc, après chaque instruction du type anSouh++ ou anSouh--, le lecteur aura soin de corriger la valeur de t_LongMoisMax[2] afin d'avoir un mois de février correctement corrigé s'il échet.

 

IV. Calendrier amélioré actuel

Et, bien qu'aucune suite ne soit disponible pour l'instant, le lecteur aura compris que d'aucuns auraient préféré que les listes déroulantes affichent la nouvelle date affichée et qu'il y ait parfaite adéquation entre le calendrier affiché et les boites de dialogue qui apparaissent au-dessus de notre calendrier perpétuel... notre contact possible ci-dessous permet à tout lecteur de nous faire une proposition...

voir suite >>>

 

V. P

voir suite >>>


| | Calendrier - h (51.5) dr