Premiers pas en JavaScript
50.2 emprunt bancaire -
haut du calculateur

copyleft
See You Why?

Présentation du calculateur (50.1)

| | Bas du calculateur (50.3)

Contenu

I. Présentation de notre calculateur

voir < < < Section précédente

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

Avant de commencer,

observons le haut du calculateur :

	Votre avenir : être formé au C.U.Y. Centre Universitaire Yourtown	Centre Universitaire de Yourtown
		rue des forges 39 - 7350 Yourtown Tél : +32 (0)65 43 00 53

A. une observation

Ne ressemble-t-il pas étrangement à un tableau de 2 lignes et 3 colonnes,
bien que la première colonne ne semble pas divisée en deux lignes ?
Ceci est mis en évidence par l'image qui suit, en ajoutant dans la balise <table> l'argument border="2".

À 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).

	Votre avenir : être formé au C.U.Y. Centre Universitaire Yourtown	Centre Universitaire de Yourtown
		rue des forges 39 - 7350 Yourtown Tél : +32 (0)65 43 00 53

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

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

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

B. un premier essai de tableau

<table>
  <tr> 
    <td> 
          <img src="../../images/logocuy1t.gif">
    </td>
    <td> 
      <p>Votre avenir : être formé au C.U.Y.<br>
                Centre Universitaire de Yourtown</p>
    </td>
    <td> 
                Centre Universitaire de<br>
                Yourtown</td>
  </tr>
  <tr> 
    <td>  
    </td>
    <td bgcolor="#FFFFFF" width="342"> 
                rue des forges 39 - 7350 Yourtown<br>
                Tél : +32 (0)65 43 00 53</td>
  </tr>
</table>

Ce qui nous donnerait :

	Votre avenir : être formé au C.U.Y. Centre Universitaire de Yourtown	Centre Universitaire de Yourtown
	rue des forges 39 - 7350 Yourtown Tél : +32 (0)65 43 00 53

Heureusement, je sais que :

mon logo CUY est grand (je sais qu'il fait 450 sur 300 pixels) ; je dois réduire cette image à 450 pixels de largeur sur 150 pixels de hauteur (déformations possibles et même probables) ;
il s'appelle "logocuy1t.gif" ;
il se situe 2 répertoires plus haut dans l'arborescence des fichiers, dans un répertoire 'images' ;
j'aimerais aussi qu'un message apparaisse si la souris reste sur ce logo de CUY (du type : "C.U.Y. est un centre d'études à distance, pour mieux vous servir."). Et voilà où on en est... :

Tiens ! N'y a-t-il pas une erreur ? Je ne vois qu'un doublement (au lieu d'un triplement) des doubles balises <td>...</td> à l'intérieur de la deuxième ligne marquée par le deuxième <tr>...</tr>, d'ailleurs, l'adresse n'est pas à sa place et il y a une cellule non visible...

Cela ne nous rappelle-t-il pas qu'il existe une instruction propre à une cellule d'un tableau qui détermine qu'à partir de cette cellule les cellules contiguës seront divisées en deux : rowspan="2" ? En d'autres mots, que cette cellule-ci occupera deux lignes ? Et nous nous rappelons tous que cette précision ne peut apparaître que dans une balise de type <td>.

C. la gestion des couleurs

Choix de la couleur :
De plus, une couleur de fond de type brunâtre ou rougeâtre (un rouge pas trop poussé peut-être : essayons #F00000, #E00000, #C00000, #A00000, #900000... #C00000 semble être le meilleur).

Aisance du logo :
Et si mon logo de CUY était moins "serré" dans sa cellule ? Rien ne m'empêche de lui donner de l'aisance en précisant la taille de la cellule dans laquelle il se situera (480 sur 180 pour une image de 450 sur 150, c'est bien, non ?) ; voir modifications en rouge ci-dessous.
Et si de plus, dans cette cellule (voir vert ci-dessous), tout cela était centré ?

Quant à la seconde cellule (la deuxième de la même ligne), j'aimerais faire autrement pour que (voir bleu ci-dessous) :

le texte soit centré ;
le fond soit brunâtre (couleur C00000, comme celle où se trouve le logo) ;
le texte apparaisse en blanc, plus grand, en gras et d'une autre police de caractères ;
un texte publicitaire apparaisse si la souris du lecteur venait à traîner sur ce texte (du genre "Régent en sciences économiques, une formation qui vous ouvre les portes, tant dans l'enseignement que dans le domaine bancaire, des assurances... notre Centre vous aidera dans toutes vos démarches."... c'est possible, ça ??? Et oui, via un paramètre 'title' dans une balise <td>, voir la source proposée ci après, en bleu).

Quant à la troisième cellule de la même ligne... même genre de critère, sauf encore plus grand et justification à droite (question d'esthétique).

Et si nous passions à la deuxième ligne ?

Deux <td> pour trois colonnes ?
Plus que deux cellules à définir, puisque le rowspan="2" de la première cellule indique que la première cellule de la première ligne occuperait 2 lignes.

Un dégradé de couleurs ?
La deuxième (qui est la première à définir) semble contenir un dégradé de couleurs, de brun à blanc, ou de C00000 à FFFFFF. Comment faire ? Avoir le logiciel libre "The Gimp" (téléchargeable ici) et suivre les explications ici. Une image du type :

fera l'affaire. Elle s'appelle "head-under.jpg" et se situe dans le même répertoire ; de plus, elle fait 220 pixels de large sur 39 pixels de haut. Curieux, la manière de l'appeler, non ? De quoi revoir un peu la balise "style"... non, je n'avais pas tout dit ;-))

Dernière cellule...
Et enfin, la dernière cellule : un texte quasi noir, à peine bleuté (#000033) sur fond blanc (#FFFFFF) pour écrire l'adresse et le numéro de téléphone... en gras, avec retour à la ligne et justification à droite.

Notre source du tableau supérieur est donc devenue :


<table>
  <tr> 
    <td width="480" height="180" rowspan="2" bgcolor="#C00000"> 
      <div align="center">
          <img src="../../images/logocuy1t.gif" width="450" height="150"
                         alt="C.U.Y. est un centre d'études à distance, pour mieux vous servir.">
          </div>
    </td>
    <td align="center" 
                title="Régent en sciences économiques, une formation qui vous ouvre les portes, tant dans l'enseignement
                         que dans le domaine bancaire, des assurances... notre Centre vous aidera dans toutes vos démarches."
                style="background-color:#C00000;font-family:serif;font-size:16px;color:white;font-weight:bold;" width="219"> 
      <p>Votre avenir : être formé au C.U.Y.<br>
                Centre Universitaire de Yourtown</p>
    </td>
    <td height="54" colspan="2" bgcolor="#C00000" width="342"> 
      <div align="right" style="font-family:serif;color:#FFFFFF;font-size:30px;font-weight:bold;padding-right:10px;">
                Centre Universitaire de<br>
                Yourtown</div>
    </td>
  </tr>
  <tr> 
    <td width="219" height="40" align="center" style="background-image:url(head-under.jpg);">  
    </td>
    <td bgcolor="#FFFFFF" width="342"> 
      <div align="right" style="color:#000033;font-weight:bold;padding-right:10px;padding-left:10px;">
                rue des forges 39 - 7350 Yourtown<br>
                Tél : +32 (0)65 43 00 53</div>
    </td>
  </tr>
</table>

Quelques questions que vous auriez pu (ou dû) vous poser :

Pourquoi avoir fixé la largeur de la 2^e colonne de la 1^re ligne à 219 ?

Très bonne observation... aviez-vous remarqué que l'image dégradée (head-under.jpg) avait pour mesure 220 x 39 ?
Fixer la largeur de la colonne à 219 empêche de voir apparaître la limite (cadre) de l'image.
Pourquoi avoir ajouté le paramètre "padding-right:10px;" dans la cellule de droite du tableau qui reprend le texte "Centre Universitaire de Yourtown" ?

Ce texte écrit en blanc sur fond brunâtre est justifié à droite.
En l'absence de ce paramètre, le texte blanc aurait "collé" au bord blanc, à gauche de cette cellule du tableau... peu esthétique, non ?
Pourquoi avoir ajouté le paramètre "padding-left:10px;" dans la cellule de droite du tableau qui reprend l'adresse du "C.U.Y." ?
J'aurais pu vous répondre "sérieusement" comme à la question précédente...
Bravo pour votre question !
Observons la gauche de la cellule :
1. pas de justification à gauche ;
2. texte noir sur fond blanc ;
3. fond blanc contre fond blanc ;
4. largeur de cette colonne fixée à 342 pixels...
Rien ne justifie ce "padding-left:10px;"
Pourquoi avoir ajouté le paramètre ' colspan="2" ' dans la cellule de droite du tableau qui reprend le texte "Centre Universitaire de Yourtown" (en haut, à droite) ?

Ce paramètre signifierait que la/les cellule(s) située(s) en dessous serai(en)t divisée(s) en deux colonnes (ou que cette cellule est à cheval sur deux colonnes)...
Conséquence : la ligne suivante aurait dû compter un couple <td>...</td> de plus que la précédente.
Autre conséquence attendue : voir apparaître deux colonnes sous le texte "Centre Universitaire de Yourtown"... peu visible, non ?
D'où, RIEN ne justifie la présence de ce paramètre ' colspan="2" ' dans la cellule de droite du tableau qui reprend le texte "Centre Universitaire de Yourtown"
La largeur du tableau est-elle fixée ?

À vous de relire la source...
cependant, rappelez-vous que
- le sigle CUY occupe 450 pixels de large et que nous l'avons placé dans une cellule de 480 pixels pour le laisser à l'aise ;
- le dégradé de couleurs est une image de 230 pixels de large que nous avons coincée dans une cellule de 229 pixels de large ;
- les cellules de droite ont chaque fois été dimensionnées à 342 pixels.
Je n'avais vraiment pas envie de vous aider, mais je pense que, sauf erreur, la somme doit faire 1051 pixels.

Il ne nous restera plus qu'à nous occuper de la suite de la page, à savoir :

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

qui suivra ce tableau supérieur que nous venons de créer :

	Votre avenir : être formé au C.U.Y. Centre Universitaire Yourtown	Centre Universitaire de Yourtown
		rue des forges 39 - 7350 Yourtown Tél : +32 (0)65 43 00 53

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

voir suite >>>

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

voir suite >>>

V. Premiers calculs JS du calculateur

voir suite >>>

Présentation du calculateur (50.1)

| | Bas du calculateur (50.3)

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_501_emprunt_bancaire_1.html

partager sur FaceBook...

consulter sur FaceBook...

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.

Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)
Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

EasyCounter BelStat
La 1 000 000^e page a été visitée le 21 mai 2010.
La 2 000 000^e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000^e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000^e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000^e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000^e page visitée, trop tôt pour y penser ?

et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.

La 3 333 333^e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666^e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici

Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois

m-à-j du 22/11/2021 :
Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus,
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016)
202. Cook Islands (CK September 19, 2015) 203. Faroe Islands (FO January 27, 2015)
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).