Premiers pas en JavaScript
50.3 emprunt bancaire
bas du calculateur
cuy copyleft
  See You Why?  

 


Création dela partie supérieure du calculateur (50.2) | | Deux dernières cellules du calculateur (50.4)

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 de la partie inférieure du calculateur

 

Comme signalé en fin de séquence précédente, il nous suffit de nous occuper du bas du calculateur et nous aurons fini :

   Calculez vos remboursements
 
Bienvenue chez CUY

Notre HÉLHa
Contact
Rechercher
Calculatrice
Les nouvelles

Notre coup de coeur

Abonnez-vous gratuitement à
notre bulletin d'information!
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. une observation

Comme tout cela semble bien compliqué ! Essayons de diviser notre travail en étapes.

Comme pour la partie supérieure développée dans la séquence précédente, n'y aurait-il pas un tableau dissimulé ? Peut-être un tableau de 2 lignes et 2 colonnes ?
Ceci est mis en évidence par l'image qui suit, en ajoutant dans la balise <table> l'argument border="2" cellpadding="2". On y découvre bien un tableau de 4 cellules.

Ici aussi, à ceux qui ont oublié (ou qui ne connaissent pas), nous suggérons d'aller (re)lire nos pages relatives au langage HTML et concernant les tableaux (http://cuy.be/html/html02fr.htm#TA).

   Calculez vos remboursements
 
Bienvenue chez CUY

Notre HÉLHa
Contact
Rechercher
Calculatrice
Les nouvelles

Notre coup de coeur

Abonnez-vous gratuitement à
notre bulletin d'information!
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

Cela suppose au moins une balise <table> suivie de </table>.

Les deux lignes se noteront par un doublement des deux balises <tr>...</tr>.

Les deux données (=colonnes) dans chaque ligne devraient donner naissance à un doublement des doubles balises <td>...</td> à l'intérieur de chaque ligne marquée par <tr>...</tr>.

 

B. première cellule du tableau

Elle semble bien facile. Un fond dégradé et un petit losange au milieu.

Pour le fond dégradé, facile, on emploiera le même que celui employé pour le haut du calculateur (rappel : head-under.jpg, un format .jpg n'admet pas la transparence, donc le fond couvrira l'éventuel fond d'écran de ma page (comme ici d'ailleurs).

Pour le losange, facile à créer avec "Gimp", GNU Image Manipulation Program, logiciel gratuit et disponible dans différentes langues... inutile de pirater des PhotoShop ou autres. Deux solutions,
soit ne créer que le losange et rendre le reste de l'image transparente... à sauvegarder en GIF ou PNG (car JPG n'admet pas la tranparence),
soit (ce fut notre choix) créer une image rectangulaire point par point avec pourtour de la même couleur que le fond sur lequel ce losange devra figurer (quasi impossible à employer sur un autre fond), peu importe le format de l'image... sauf si la couleur #C00000 a été choisie comme couleur de transparence (c'est exactement ce qui a été fait ici, la preuve : ).

Voici d'ailleurs l'agrandissement de ce petit losange créé. Le lecteur observera les 16 pixels de largeur et les 21 pixels de hauteur.

Le lecteur observera le paramètre style="background-image:url(head-under.jpg);" de l'instruction <td width="221" height="39" align="center" style="background-image:url(head-under.jpg);"> <img src="diamond.gif" width="16" height="21"> qui permet une image de fond pour une seule cellule d'un tableau.
Le lecteur aura aussi remarqué que les paramètres width et height de l'image sont inutiles, puisque c'est le format d'origine de notre image 'diamond.gif'.

<table>
  <tr> 
    <td width="221" height="39" align="center" style="background-image:url(head-under.jpg);">
       <img src="diamond.gif" width="16" height="21"> 
    </td>
    <td> 
      <p>Le texte : Calculez vos remboursements
en gras</p> </td> </tr> <tr> <td>  <p>liste de liens<br> et de remarques</p> </td> <td> <p>formulaire du<br>
calculateur</p> </td> </tr> </table>

Ce qui nous donnerait :

Le texte : Calculez vos remboursements en gras

liste de liens
et de remarques

formulaire du
calculateur

... juste avec une petite tricherie... personne n'a rien dit ; personne n'a rien vu...
j'ai pourtant bidouillé à votre insu : j'ai simplement transformé :

<table>
en
<table border="1">
sinon vous n'auriez même pas vu le tableau, puisque le paramètre par défaut est border="0"...

Par contre, je déplore la ligne brunâtre à doite de l'image. C'est normal : n'oublions pas que notre image fait 220 pixels sur 39... or le cadre prévu a 221 pixels de large, donc trop large pour l'image à y placer... l'image se reproduit (comme l'image de fond du site) et ce que vous voyez est la tranche gauche de l'image reproduite. Il suffit de diminuer comme nous l'avions fait dans le haut du calculateur : 219 est préférable à 221... sauf si l'on souhaite le trait brun à droite, ce qui faisait partie du modèle souhaité au départ.

 

 

C. la deuxième cellule

Ou la seconde de la première ligne... encore plus facile ! Il suffit d'écrire le texte "Calculez vos remboursements" en gras et précédé de quelques espaces (donc insécables).

Dois-je m'occuper de l'espace qu'occupera cette cellule ? N'oublions pas que la largeur du tableau, partie supérieure du calculateur était 1051 pixels... mais ne l'utilisons pas pour l'instant.

La source de notre deuxième cellule deviendra donc (voir en vert) :

<table>
  <tr> 
    <td width="221" height="39" align="center" style="background-image:url(head-under.jpg);">
       <img src="diamond.gif" width="16" height="21"> 
    </td>
    <td> 
       <div align="left">
<font face="Verdana, Arial, Helvetica, sans-serif">
&nbsp;&nbsp;&nbsp;<b>Calculez vos remboursements</b>
</font>
</div>
</td> </tr> <tr> <td>  <p>liste de liens<br> et de remarques</p> </td> <td> <p>formulaire du<br>
calculateur</p> </td> </tr> </table>

Ce qui générera un tableau de ce type :

   Calculez vos remboursements

liste de liens
et de remarques

formulaire du
calculateur

 

À ce stade-ci, vous êtes tout à fait en droit de vous poser des questions. En voici quelques unes que vous auriez pu (ou dû) vous poser :

    1. Pourquoi n'avoir pas fixé la largeur de la 2e colonne ?

      Très bonne observation... Vous vous rappelez probablement que l'image dégradée (head-under.jpg) avait pour mesure 220 x 39. Nous avions cependant fixé la largeur de la colonne à 221 pour voir apparaître la répétition de l'image (et donc un trait vertical à droite).
      Et comme la largeur totale du calculateur (voir partie supérieure) a été fixée à 1051 pixels, on aurait pu fixer la largeur de la colonne de droite ici à 830 px (différence entre 1051 et 221 pixels... mais on peut aussi le faire à la deuxième ligne. Ma préférence va cependant à la fixation le plus rapidement possible, donc ici.

    2. Pourquoi n'avoir pas ajouté une couleur de fond pour le texte de la cellule de droite de la première ligne ?

      Ce texte écrit en en noir sur une image de fond ne semble pas souffrir de la couleur gris clair de cette image.
      Cependant, dans une étape finale, nous proposerons une solution pour échapper aux inconvénients de cette image de fond. Ne pas oublier d'y revenir en son temps.

    3. Ne puis-je pas supprimer la largeur de la première cellule, puisqu'elle contient une image de taille fixée ?

      Bien vu ! Cependant, on a pu observer que si la largeur de la colonne est supérieure à la largeur de l'image, l'image se reproduit en largeur pour occuper tout l'espace nécessaire... Juste comme le fait l'image du bébé au doigt interrogateur qui sert d'image de fond pour nos pages...
      Une image de fond ne fixe ni la largeur d'une colonne, ni la largeur d'une page Web, contrairement à une image placée dans la colonne !
      La largeur indiquée était donc indispensable.

Il ne nous restera plus qu'à nous occuper de la suite de la page, à savoir les deux dernières cellules du navigateur, problème qui ne nous semble pas des moindres :

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

 

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

 

 

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

voir suite >>>

 

V. Premiers calculs JS du calculateur

voir suite >>>


Création dela partie supérieure du calculateur (50.2) | | Deux dernières cellules du calculateur (50.4)