Accueil Casino argent reel Meilleur casino Nouveaux casinos Live casino
vk ok fb

 
 

 

Premiers pas en JavaScript
50.4 emprunt bancaire
dernières cellules du calculateur
cuy copyleft
  See You Why?  

 

Création de la partie inférieure du calculateur - 2 premières cellules (50.3) | | Calculateur d'emprunt - calcul en JavaScript (50.5)

Contenu

 

 

I. Présentation de notre calculateur

voir < < < Section précédente

 

II. Création de la partie supérieure du calculateur

voir < < < Section précédente

 

III. Création du formulaire de la partie inférieure du calculateur

voir < < < Section précédente

 

IV. Dernières cellules du formulaire de la partie inférieure du calculateur

 

Comme signalé en fin de séquence précédente, il nous suffit de nous occuper des deux dernières cellules du bas du calculateur et nous aurons fini :

La troisième cellule :

 
Bienvenue chez CUY

Notre HÉLHa
Contact
Rechercher
Calculatrice
Les nouvelles

Notre coup de coeur
Abonnez-vous gratuitement à
notre bulletin d'information!

et enfin, cette dernière cellule :

Montant de l'emprunt €
Taux d'intérêt %
Nombre de mensualités
Montant des mensualités €
Instructions

Pour utiliser cette calculatrice, il suffit de compléter trois des quatre champs de ce formulaire, puis de cliquer sur le bouton "Calculer" en regard du paramètre à déterminer.

Attention: Les résultats peuvent comporter certaines erreurs d'arrondi.
Contactez votre organisme financier avant de prendre votre décision de financement.
Pour remettre le formulaire à zéro, cliquez sur
Site pédagogique réalisé par GVdK = CUY

 

 

A. observation de la troisième cellule

On y voit beaucoup d'éléments déjà traités :

Et comme les fois précédentes, on s'est souvent retrouvé face à un tableau, ne pourrait-on pas ici aussi penser que l'on ait un tableau qui expliquerait cet alignement. Observons de plus près.

 
Bienvenue chez CUY

Notre HÉLHa
Contact
Rechercher
Calculatrice
Les nouvelles

Notre coup de coeur
Abonnez-vous gratuitement à
notre bulletin d'information!

Un œil un peu aiguisé verra vite apparaitre la possibilité d'un tableau à une seule colonne mais à plusieurs lignes. L'ajout des paramètres border="2" cellpadding="2" fait mieux apercevoir cette disposition. Je compte 11 lignes dont plusieurs quasi identiques... pas vous ? Cela nous facilitera le travail.

      1. image de bordure supérieure (nous l'appelerons 'navhead.gif') ;
      2. liste de choix : CUY, HELHa, contact, etc. (appelons la provisoirement 'a') ;
      3. image de bordure inférieure ( symétrique de la précédente - nous l'appelerons 'navbottom.gif') ;
      4. notre losange ('diamond.gif') ;
      5. image de bordure supérieure 'navhead.gif' ;
      6. Notre coup de coeur (couleur) (appelons le provisoirement 'bb') ;
      7. image de bordure inférieure ( 'navbottom.gif') ;
      8. notre losange ('diamond.gif') ;
      9. image de bordure supérieure 'navhead.gif' ;
      10. invitation à s'inscrire... (appelons la provisoirement 'ccc') ;
      11. image de bordure inférieure ( 'navbottom.gif').

Le lecteur observera qu'à cette étape-ci, nous avons numéroté ces 11 lignes, nous abandonnerons cette numérotation plus avant.

Démarrons donc la construction de ce tableau qui se trouve dans la deuxième ligne, première colonne de notre calculateur et dont voici un début de source :

 

B. construction du tableau de la troisième cellule

<tr>
   <td valign="top" width="221" align="center" style="background-image:url(head-under.jpg);"> 
      <table width="151" border="0" cellspacing="1" cellpadding="0" align="center">
         <tr><!--1-->
             <td><img src="navhead.gif" width="141" height="9">
             </td>
         </tr>
         <tr><!--2-->
             <td>a
             </td>
         </tr>
         <tr><!--3-->
             <td><img src="navbottom.gif" width="141" height="9">
             </td>
         </tr>
         <tr><!--4-->
             <td><img src="diamond.gif" width="16" height="21">
             </td>
         </tr>
         <tr><!--5-->
             <td><img src="navhead.gif" width="141" height="9">
             </td>
         </tr>
         <tr><!--6-->
             <td>bb
             </td>
         </tr>
         <tr><!--7-->
             <td><img src="navbottom.gif" width="141" height="9">
             </td>
         </tr>
         <tr><!--8-->
             <td><img src="diamond.gif" width="16" height="21">
             </td>
         </tr>
         <tr><!--9-->
             <td><img src="navhead.gif" width="141" height="9">
             </td>
         </tr>
         <tr><!--10-->
             <td>ccc
             </td>
         </tr>
         <tr><!--11-->
             <td><img src="navbottom.gif" width="141" height="9">
             </td>
         </tr>
      </table>
   </td>
</tr>

Ce qui donnerait :

a
bb
ccc

Ce tableau comporte de gros défauts que nous essayerons de corriger.

      1. Nous remarquons que notre instruction align="center" dans <table> ne porte pas ses fruits...

        En effet, cette instruction implique l'alignement au centre de tout le tableau, mais pas de chacun des éléments du tableau... essayons plutôt de la placer au niveau de chaque élément à centrer, c'est-à-dire au niveau de chaque <td>.

      2. Les éléments notés (provisoirement a, bb, ccc) sont illisibles en noir sur fond brunâtre...

        Essayons d'y mettre un fond blanc en modifiant chaque <td> en un <td align="center" style="padding-top:3px;padding-bottom:3px;border:1px solid #C00000;background-color:white;">, le texte devrait apparaitre sur fond blanc et dans un cadre fin de la couleur brunâtre que nous avions choisie, avec une marge d'aisance de 2 ou 3 pixels au dessus et en dessous.

      3. Les éléments notés provisoirement a, bb et ccc n'étaient que provisoires, il faudrait les changer par leur valeur réelle.

        En supposant que notre volonté d'y mettre un fond blanc en modifiant chaque <td>, il faudra encore modifier chacun des éléments.
        a deviendra :
        <td align="center" style="padding-top:2px;padding-bottom:2px;border:1px solid #C00000;background-color:white;">
          <font color="00AA00"><a class="nav" href="http://cuy.be">Bienvenue chez CUY</a><br>
          <a class="nav" href="http://www.helha.be">Notre Haute École</a><br>
          <a class="nav" href="mailto:cuy.w(at)skynet.be">Contacts</a><br>
          <a class="nav" href="recherche.php">Rechercher</a><br>
          <a class="nav" href="calc.php">Calculatrice</a><br>
          <a class="nav" href="content/headlines.php">Les nouvelles</a></font>
        </td>

        bb deviendra :
        <td align="center" style="font-size:11px;border:1px solid #C00000;background-color:white;padding-top:3px;padding-bottom:3px;">
        <span style="color:#FF5240;font-weight:bold;">
        Notre coup de coeur</span><br>
        <div class='tiny'>
        <script language="javascript" src="FR-featured.js" type="text/JavaScript"></script>
        <noscript> Javascript est utile pour tirer le meilleur parti de
        ce site, même si l'essentiel du site fonctionne correctement.<br>
        <br> Sans Javascript, vous ne verrez pas les agrandissements des photos.
        Vous pouvez néanmoins accéder à <a class='nostyle' style="font-size:10px;color:#cccccc;" href="fullist.php">Toute
        notre base en un clic</a></noscript></div>
        </td>

        ccc deviendra :
        <td align="center" height="40" style="border:1px solid #C00000;background-color:white;padding-top:2px;padding-bottom:2px;">
           <a class="nav" href="clientadd.php" style="font-size:11px;">
           Abonnez-vous gratuitement à<br>
           notre bulletin d'information!</a>
        </td>

      4. Les éléments notés que l'on souhaitait voir avec un léger décalage vers la droite apparaissent centrés et il manque l'espace entre le bord supérieur et la cadre...

        N'avez-vous pas songé à une colonne supplémentaire qui ne contiendrait que quelques espaces insécables ?
        Mais il faudra recommencer l'opération dans chaque ligne (<tr>) du tableau ?
        Non, il suffit de le faire une fois dans la première ligne et spécifier que cela concernera plusieurs lignes. Jamais entendu parler du paramètre rowspan="11" ?

Et ceci devrait achever les modifications à apporter. Essayons :

 

 

 

C. observation de la quatrième et dernière cellule

Il ne faut pas trois heures pour se rendre compte qu'il s'agit d'un formulaire qui sera la clé du développement de notre calculateur. Nous savons que des tableaux avec paramètre border="0" sont un bon moyen d'obtenir une belle mise en page, je m'efforcerai donc de les mettre en évidence :

Montant de l'emprunt €
Taux d'intérêt %
Nombre de mensualités
Montant des mensualités €
Instructions

Pour utiliser cette calculatrice, il suffit de compléter trois des quatre champs de ce formulaire, puis de cliquer sur le bouton "Calculer" en regard du paramètre à déterminer.

Attention: Les résultats peuvent comporter certaines erreurs d'arrondi.
Contactez votre organisme financier avant de prendre votre décision de financement.
Pour remettre le formulaire à zéro, cliquez sur
Site pédagogique réalisé par GVdK = CUY

Le même avec des tableaux mis en évidence :

Montant de l'emprunt €
Taux d'intérêt %
Nombre de mensualités
Montant des mensualités €
Instructions

Pour utiliser cette calculatrice, il suffit de compléter trois des quatre champs de ce formulaire, puis de cliquer sur le bouton "Calculer" en regard du paramètre à déterminer.

Attention: Les résultats peuvent comporter certaines erreurs d'arrondi.
Contactez votre organisme financier avant de prendre votre décision de financement.
Pour remettre le formulaire à zéro, cliquez sur
Site pédagogique réalisé par GVdK = CUY

Le lecteur aura remarqué que la technique des tableaux imbriqués est ici employée presque avec excès.
Rappelez vous qu'il s'agit de la dernière cellule d'un tableau (le bas de notre calculateur) qui contient un
tableau (que nous avons mis en évidence en bleu) qui contient un
tableau (que nous avons mis en évidence en jaune) qui contient un
tableau (que nous avons mis en évidence en rouge) qui enfin contient le formulaire.

Montant de l'emprunt €
Taux d'intérêt %
Nombre de mensualités
Montant des mensualités €
Instructions

Pour utiliser cette calculatrice, il suffit de compléter trois des quatre champs de ce formulaire, puis de cliquer sur le bouton "Calculer" en regard du paramètre à déterminer.

Attention: Les résultats peuvent comporter certaines erreurs d'arrondi.
Contactez votre organisme financier avant de prendre votre décision de financement.
Pour remettre le formulaire à zéro, cliquez sur
Site pédagogique réalisé par GVdK = CUY
Observons le tableau (bleu).
Il ne semble contenir qu'une seule cellule.
Inutile alors ?
Non, son but est d'avoir un beau tableau (surnommé "jaune") avec une marge à gauche et à droite qui mettra en évidence l'encadrement prévu dans le tableau dit 'jaune'.
Ces marges prévues seront définies par le paramètre style="padding-left:20px;padding-right:10px;" et l'unique cellule aura comme largeur 796 pixels, soit les 1051 de largeur de la partie supérieure diminuée des 221 (largeur des 1re et 3e cellules), des 30 (marges) et aisance pour le flottement.

Observons le tableau (jaune).
Quatre lignes dont la 1re et la 3e seront divisées en 2 colonnes pour former le graphisme de l'encadrement.
La 2e ligne ne contiendra que le formulaire dans le tableau rouge.
Et enfin la 4e ligne, une petite signature.

Un commentaire sur le graphisme de l'encadrement. On y observe aussi un dégradé, mais dont la partie centrale est plus importante.
En fait, on utilise une première image (baptisée 'topleft.jpg') et son symétrique (baptisé 'topright.jpg') et pour le bas, les symétriques et (baptisés respectivement 'bottomleft.jpg' et 'bottomright.jpg' qui ont été construits à partir de notre dégradé de départ 'head-under.jpg' de 220 px de long, dont nous n'avons gardé que les 150 pixels de gauche et coupé les coins.
Il ne restait alors qu'à mesurer la couleur des points les plus clairs de ces images coupées et de découvrir que c'était #ECD7D7 pour en faire la couleur de fond le l'espace compris entre ces deux images... le tour est joué.

Le lecteur attentif aura remarqué que nous avons été paresseux et n'avons pas rendu les coins coupés transparents... quelle tristesse... mais nous préférons être intelligemment paresseux... et placer le tout sur un fond quasi blanc (c'est plus rapide et plus facile à faire).

Montant de l'emprunt €
Taux d'intérêt %
Nombre de mensualités
Montant des mensualités €
Instructions

Pour utiliser cette calculatrice, il suffit de compléter trois des quatre champs de ce formulaire, puis de cliquer sur le bouton "Calculer" en regard du paramètre à déterminer.

Attention: Les résultats peuvent comporter certaines erreurs d'arrondi.
Contactez votre organisme financier avant de prendre votre décision de financement.
Pour remettre le formulaire à zéro, cliquez sur
Site pédagogique réalisé par GVdK = CUY
Observons le tableau (rouge) enfin.
Tout est le formulaire, donc les balises <form> et </form> doivent encadrer le tout.
Six lignes, donc six doubles balises <tr>...</tr>. Certaines avec 3 cellules par lignes : il faudra alors trois doubles <td>...</td> pour ces quatre premières lignes-là et un unique <td colspan="3"> pour les deux dernières.
Un espacement important entre chaque cellule laisse sous-entendre que <table> devra avoir un argument cellpadding avec une valeur non négligeable.

Les quatre premières lignes.
Ces lignes sont construites sur un même modèle : trois colonnes, donc trois <td>.
Première colonne, un titre mis en forme selon un format à préciser (tiny, car petit et gras).
Deuxième colonne, un input de type "text" de 10 caractères... ce qui limite l'emploi de notre calculateur à ceux qui empruntent moins de un milliard ;o) .
Dernière colonne, un bouton "calculer" qui, selon la ligne, calculera la valeur recherchée en face du bouton cliqué. On se rappelera l'évènement "onClick" vu dans le chapitre 21.

 

 

D. source du tableau 'bleu' de la quatrième et dernière cellule

Une seule cellule donc :

<table>
<!-- bleu -->
  <tr>
    <td width="796" valign="top" style="padding-left:20px;padding-right:10px;">
      <p>Tableau jaune</p>
    </td>
  </tr>
<!-- fin tableau bleu -->
</table> 

Ce qui donne :

Tableau jaune

 

 

E. source du tableau 'jaune' de la quatrième et dernière cellule

En suivant ce que nous avons observé plus haut, nous pourrons transformer la ligne <p>Tableau jaune</p> par le code suivant :

<table>
<!-- jaune -->
  <tr>
    <td align="left" height="9" style="background-color:#ECD7D7;"><img src="topleft.jpg" width="150" height="9"></td>
    <td align="right" height="9" style="background-color:#ECD7D7;"><img src="topright.jpg" width="150" height="9"></td>
  </tr>
  <tr>
    <td colspan="3" style="border-left:3px solid #ECD7D7; border-right:3px solid #ECD7D7;" valign="top">
    <p>tableau rouge</p>
        <!-- rouge -->
    </td>
  </tr>
  <tr>
    <td align="left" height="9" style="background-color:#ECD7D7;"><img src="bottomleft.jpg" width="150" height="9"></td>
    <td align="right" height="9" style="background-color:#ECD7D7;"><img src="bottomright.jpg" width="150" height="9"></td>
  </tr>
  <tr>
    <td colspan="2" align="center">
        <a href="http://cuy.be/" target="_blank" style="font-family:serif;font-size:12px;font-weight:normal;text-decoration:none;" title="Les sites internet dynamiques">
        Site p&eacute;dagogique r&eacute;alis&eacute; par GVdK = CUY</a></td>
  </tr>
<!-- fin tableau jaune -->
</table> 

Ce qui donne :

Tableau rouge
Site pédagogique réalisé par GVdK = CUY

 

 

 

 

E. source du tableau 'rouge' de la quatrième et dernière cellule

Suivant ce que nous avons observé plus haut, nous pourrons transformer la ligne <p>Tableau rouge</p> par le code suivant :

<!-- rouge -->
<table align="center" cellspacing="10" width="100%">
  <form method="POST">
  <tr>
    <td class="tiny"><b>Montant de l'emprunt </b></td>
    <td nowrap>
      <input class='selectbg' type="TEXT" name="loan" size="10" onChange="maj_valeur(this)">
      <b>&euro;</b></td>
    <td align="right">
      <input class="inputbutton" type="BUTTON" value="Calculer" onClick="calcul_montantemprunte(this.form)" name="BUTTON">
    </td>
  </tr>
  <tr>
    <td class="tiny"><b>Taux d'intérêt</b></td>
    <td nowrap>
      <input class='selectbg' type="TEXT" name="rate" size="10" onChange="maj_valeur(this)">
      <b>%</b></td>
    <td align="right">
      <input class="inputbutton" type="BUTTON" value="Calculer"         onClick="calcul_taux(this.form)" name="BUTTON">
    </td>
  </tr>
  <tr>
    <td class="tiny"><b>Nombre de mensualités</b></td>
    <td>
      <input class='selectbg' type="TEXT" name="num" size="10" onChange="maj_valeur(this)">
    </td>
    <td align="right">
      <input class="inputbutton" type="BUTTON" value="Calculer"         onClick="calcul_nbre_mensualite(this.form)" name="BUTTON">
    </td>
    <input type="hidden" value="12" name="num_annum" size="10" onChange="maj_valeur(this)">
  </tr>
  <tr>
    <td class="tiny"><b>Montant des mensualités</b></td>
    <td nowrap>
      <input class='selectbg' type="TEXT" name="amount" size="10"         onChange="maj_valeur(this)">
      <b>&euro;</b></td>
    <td align="right">
      <input class="inputbutton" type="BUTTON" value="Calculer"         onClick="calcul_mensualite(this.form)" name="BUTTON">
    </td>
  </tr>
  <tr>
    <td height="67" colspan="3" class=infolayer align="center">
      <span style="color:#FF6060;font-weight:bold;text-decoration:underline;font-size:11px;">Instructions</span>
      <br>
      <br>
      Pour utiliser cette calculatrice, il suffit de compl&eacute;ter
      trois des quatre champs de ce formulaire, puis de cliquer
      sur le bouton "Calculer" en regard du param&egrave;tre &agrave;
      d&eacute;terminer.<br>
      <br>
      <b>Attention:</b> Les r&eacute;sultats peuvent comporter certaines
      erreurs d'arrondi.<br>
      Contactez votre organisme financier avant de prendre votre
      d&eacute;cision de financement.<br>
      <script type="text/javascript"></script>
      <noscript>
      <div class="tinyred"><br>
      Cette calculatrice nécessite Javascript pour fonctionner.<br>
      Il ne semble pas disponible. Assurez-vous de ne pas l'avoir
      désactivé.<br>
      Merci! </div>
      </noscript> </td>
  <tr>
    <td colspan="3" align="right" class="tiny"> Pour remettre le
      formulaire &agrave; z&eacute;ro, cliquez sur
      <input class="inputbutton" type=reset value=" Effacer " name="reset">
    </td>
  </tr>
</form>
<!-- fin de tableau rouge>
</table>

Ce qui donne :

 

Montant de l'emprunt €
Taux d'intérêt %
Nombre de mensualités
Montant des mensualités €
Instructions

Pour utiliser cette calculatrice, il suffit de compléter trois des quatre champs de ce formulaire, puis de cliquer sur le bouton "Calculer" en regard du paramètre à déterminer.

Attention: Les résultats peuvent comporter certaines erreurs d'arrondi.
Contactez votre organisme financier avant de prendre votre décision de financement.
Pour remettre le formulaire à zéro, cliquez sur

Pas de panique ! Le paramètre width de ce tableau est 100 %... il prend donc toute la place disponible, mais quand il sera coincé dans les cellules et tableaux précédents, il sera plus à l'étroit.

Reste cependant à élucider la teinte des boutons "Calculer" et celle des 'input' de type 'text'. N'avez-vous pas remarqué le paramètre class dont on retrouve la définition dans la feuille de style 'styles.css'.
On peut y lire :
.inputbutton {
color:white;
background-color: #C00000;
}
et
.selectbg {
background-color: #ECD7D7;
}

Ceci explique cela.

 

 

 

Il ne nous restera alors plus qu'à définir les fonctions JavaScript (ce qui était le but initial de cette présentation) :

Ce sera l'objet de la séquence suivante.

Mais avant cela, pour une touche finale esthétique... (juste comme si on n'avait pas encore parler de tableau ;o) ), j'avais annoncé le gadget qui ferait disparaitre les défauts de largeurs des différentes parties, les coins coupés de nos images ainsi que ce fond d'écran qui peut en gêner certains... j'ai mis le tout dans un tableau de fond gris très clair, avec une bordure de quelques pixels.
J'ai donc écrit au tout début :

<table align="center" bgcolor="#FAFAFA" cellpadding="6" cellspacing="6"><tr><td>

et, à la toute fin :

</td></tr></table>

 

 

 

V. Premiers calculs JS du calculateur

voir suite >>>

Création de la partie inférieure du calculateur - 2 premières cellules (50.3) | | Calculateur d'emprunt - calcul en JavaScript (50.5)