Forum officiel - Topic "une petite question...."

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 29/09/2003 à 13:16:35

une petite question....

Attendez ne répondez pas de suite, je v réadapter et clarifier ce code ce soir pour qu'il colle mieux à ton code.

Au passage sans les class=MsoNormal ça donne:

<table width="100%" border="1">
<tr>
<td><div align="center">
<p align=center style='text-align:center'>VENDREDI 03/10/2003</p>
<p align=center style='text-align:center'>MONTVILLE</p>
<p align=center style='text-align:center'>20H15</p>
</div></td>
<td><div align="center">- MONTVILLE -3- - CAVELIER DE LA SALLE -- ISNEAUVILLE
-- BOSC LE HARD -- NOTRE DAME DE BONDEVILLE 2- - HOUPPEVILLE -</div></td>
</tr>
<tr>
<td><div align="center">
<p align=center style='text-align:center'><span lang=EN-GB
style='mso-ansi-language:EN-GB'>SAMEDI 04/10/2003<o></o></span></p>
<p align=center style='text-align:center'>CLEON TOURNOI
INTER ENTREPRISE 13H30</p>
</div></td>
<td><div align="center">CONTACTER JACQUES MARTIN 02 XX XX XX XX</div></td>
</tr>
<tr>
<td><div align="center">
<p align=center style='text-align:center'><span lang=EN-GB
style='mso-ansi-language:EN-GB'>VENDREDI 10/10/2003<o></o></span></p>
<p align=center style='text-align:center'><span lang=EN-GB
style='mso-ansi-language:EN-GB'>ASPTT MURS ST YON<o></o></span></p>
<p align=center style='text-align:center'>20H15</p>
</div></td>
<td><div align="center">- ASPTT ROUEN 2-- CAVELIER DE LA SALLE -- DUCLAIR
-- GRAND COURONNE COC -- LE MESNIL ESNARD -- ISNEAUVILLE -- SOTTEVILLE
LES ROUEN -- LA VAUPALIERE -</div></td>
</tr>
<tr>
<td><div align="center">
<p align=center style='text-align:center'>VENDREDI 10/10/
2003</p>
<p align=center style='text-align:center'>SAINT SAENS</p>
<p align=center style='text-align:center'>20H00</p>
</div></td>
<td><div align="center">- ST SAENS 2-- GOURNAY EN BRAY -- BOSC LE HARD --
NEUFCHATEL EN BRAY -- ISNEAUVILLE -- CAVELIER DE LA SALLE -- HOUPPEVILLE
– DEV -</div></td>
</tr>
<tr>
<td><div align="center">
<p align=center style='text-align:center'>MARDI 14/10/
2003</p>
<p align=center style='text-align:center'>CLEON</p>
<p align=center style='text-align:center'>20H00</p>
</div></td>
<td><div align="center">- CLEON 2-- MONTVILLE -- BOOS B V L 2-- BOURG ACHARD
CVBA -- NOTRE DAME DE BONDEVILLE –X-X-</div></td>
</tr>
</table>

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 29/09/2003 à 19:42:32

une petite question....

Bon c assez bizarre, je suis arrivé à quelque chose de parfaitement fonctionnel en manipulant le DOM avec Javascript sous Firebird (donc frère de Mozilla), mais... qui ne fonctionne pas sous IE.

Je crois savoir pourquoi: pour les navigateurs Gecko (Mozilla, Firebird, Netscape Navigator...), chaque noeud TR et TD commence par un noeud texte vide, quelque soit le contenu "volontaire" qu'ils aient.
Alors que je soupçonne IE d'être "normalement logique" à savoir que le premier noeud-fils d'un noeud TR va être un TD, et celui du TD... ce que l'auteur aura spécifié comme contenu de ce TD.

Bref, trève de bavardages, voici tout de même le code, c déjà une bonne base de travail puisqu'il fonctionne avec le plus standard des navigateurs. Les références sont: Javascript 1.5, DOM HTML level 2.

<html>

<head>
<style type="text/css">
body { margin:0.5em }
table, tr, td { border:1px solid #000000; margin:0 }
table, tr { padding:0 }
</style>
<script type="text/javascript">
function parseCellContent()
{
var rows = document.getElementsByTagName("tr");
for(var i=0; i<rows.length; i++)
{
var cell1 = rows.item(i).firstChild.nextSibling;
/* on prend le 2e noeud fils du noeud TR courant,
car le premier noeud fils de TR est toujours un noeud de texte,
même vide
*/
//pareil: 2e noeud fils = 1er P, dont le premier fils est le noeud texte contenant la date
var p1 = cell1.firstChild.nextSibling.firstChild;
var p1text = p1.nodeValue;
var re = /(\d\d)\/(\d\d)\/(\d\d\d\d)/;
var ok = re.test(p1text);
if(ok)
{
var parseResult = re.exec(p1text);
var date_event = parseResult[0];
var mydate = new Date(parseResult[3], parseResult[2]-1, parseResult[1]);
var today = new Date();
if(mydate.getTime() < today.getTime())
//si la date de l'événement est antérieure à la date d'aujourd'hui
{
rows.item(i).style.display = "none";
}
}
}
}
</script>
</head>

<body onload="parseCellContent()">

<table>
<tr>
<td>
<p>VENDREDI 03/10/2003</p>
<p>MONTVILLE</p>
<p>20H15</p>
</td>
<td>- MONTVILLE -3- - CAVELIER DE LA SALLE -- ISNEAUVILLE
-- BOSC LE HARD -- NOTRE DAME DE BONDEVILLE 2- - HOUPPEVILLE -</td>
</tr>
<tr>
<td>
<p>SAMEDI 04/10/2003</p>
<p>CLEON TOURNOI
INTER ENTREPRISE 13H30</p>
</td>
<td>CONTACTER JACQUES MARTIN 02 XX XX XX XX</td>
</tr>
<tr>
<td>
<p>VENDREDI 10/10/2003</p>
<p>ASPTT MURS ST YON</p>
<p>20H15</p>
</td>
<td>- ASPTT ROUEN 2-- CAVELIER DE LA SALLE -- DUCLAIR
-- GRAND COURONNE COC -- LE MESNIL ESNARD -- ISNEAUVILLE -- SOTTEVILLE
LES ROUEN -- LA VAUPALIERE -</td>
</tr>
<tr>
<td>
<p>VENDREDI 10/10/2003</p>
<p>SAINT SAENS</p>
<p>20H00</p>
</td>
<td>- ST SAENS 2-- GOURNAY EN BRAY -- BOSC LE HARD --
NEUFCHATEL EN BRAY -- ISNEAUVILLE -- CAVELIER DE LA SALLE -- HOUPPEVILLE
– DEV -</td>
</tr>
<tr>
<td>
<p>MARDI 14/10/2003</p>
<p>CLEON</p>
<p>20H00</p>
</td>
<td>- CLEON 2-- MONTVILLE -- BOOS B V L 2-- BOURG ACHARD
CVBA -- NOTRE DAME DE BONDEVILLE –X-X-</td>
</tr>
</table>

</body>
</html>

Message modéré le 29/09 à 19:54:57 par Babaorum.

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 29/09/2003 à 19:54:09

une petite question....

Oui je confirme mon doute, c bien la différence entre IE et les Gecko-like

le premier noeud texte vide.

Bon ce n'est pas grave, le code serait très peu changé: il faut juste incorporer un test sur le type du noeud (propriété nodeType): si celui-ci n'est pas un noeud texte mais un noeud Element (nodeType=3), c qu'on est sous IE et que le premier fils est un TD, donc on prend le premier fils: objetTR.firstChild.
Si au contraire le nodeType=1 (= noeud texte) on est sous Gecko et donc on prend le deuxième fils: objetTR.firstChild.nextSibling

C pas super compliqué, en revanche quelle déception de voir que même poru le DOM qui se veut archi standard en fait ça n'a pas été respecté >:(

le W3C avait voulu le truc universel et inter-langage et voilà qu'on se retrouve à faire des test poru différencier IE et Moz

C nul

inscrit le 06/03/2003

le 29/09/2003 à 21:02:53

une petite question....

Tu vois la différence entre partir d'un code existant et le modifier et partir de rien, c'est que là je comprend pas gd chose au code (:)

Tu peux expliquer un peu stp ou me donner un lien que je lise un peu sur le sujet

Sinon, mon code htm serait plutôt ds ce genre après modifs

<table width="75%" border="1">
<tr bordercolor="#000000">
<td width="40%"> <div align="center"><font size="2">VENDREDI 03/10/2003
</font></div>
<p align="center"><font size="2">MONTVILLE : 20H15<br>
</font></p></td>
<td> <div align="center"><font size="2">- MONTVILLE -3- - CAVELIER DE LA
SALLE -- ISNEAUVILLE -- <br>
BOSC LE HARD -- NOTRE DAME DE BONDEVILLE 2 -- HOUPPEVILLE -<br>
</font></div></td>
</tr>

ça change rien je suppose. (Par contre si t'as quelque chose à dire sur le code en lui même : les div, les p, les font ... vas-y ;o)

)

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 30/09/2003 à 09:06:27

une petite question....

Centaurus

il est clair qu'à l'heure du XML et du XHTML, donc de la séparation stricte des données et de la mise en forme, il est très avantageux de travailler avec un code HTML très épuré, très propre, avec le moins de paramètres de style et de paramètres en général. C'est ce que j'ai voulu mettre en avant avec le code que j'ai épuré à partir du tien. Toute la mise en forme se fait tout de même dans la page html, mais dans un style en ligne, séparé des données. Si tu as besoin de mettre en forme tes cellules, tu appliqueras des propriétés CSS aux éléments TD (couleur, police, ce que tu veux).

Donc dans ton code tous les <font> et <div> peuvent virer.
Tu as besoin de table, tr et td pour ton tableau, évident (tu pourrais le faire sans: avec les CSS mais les tableaux restent un excellent outil de mise en forme ET d'organisation structurelle des données, ne les boudons donc pas).
Ensuite du fait que dans la première cellule de chaque ligne la nature des données est trois fois différente (une date, un lieu, un nom d'équipe), les paragrahes P sont ici gardés pour leur propriété de séparation des données et non pas pour la mise en forme. On aurait pu mettre des div à la place, mais P est un bon élément aussi. Il permet donc d'accéder plus facilement aux différentes données (donc si tu veux rajouter une fonction pour trier par... lieu par exemple, cette séparation des données existe encore et toujours).

Voici la parfaite illustration du bien-fondé d'un code séparant totalement contenu et mise en forme.

L'explication du code Javascript maintenant: voir post suivant

Message modéré le 30/09 à 09:45:59 par Babaorum.

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 30/09/2003 à 09:45:09

une petite question....

Déjà notre balise body présente le gestionnaire d'événement onload qui exécutera, APRES le chargement complet de la page (donc une fois tous les éléments/noeuds définis), la fonction Javascript parseCellContent() (en français: "traiter le contenu des cellules"). Voici cette fonction, je l'isole ici:

1. function parseCellContent()
2. {
3. var rows = document.getElementsByTagName("tr");
4. for(var i=0; i<rows.length; i++)
5. {
6. var cell1 = rows.item(i).firstChild.nextSibling;
7. /* on prend le 2e noeud fils du noeud TR courant,
8. car le premier noeud fils de TR est toujours un noeud de texte,
9. même vide
10. */
11. //pareil: 2e noeud fils = 1er P, dont le premier fils est le noeud texte contenant la date
12. var p1 = cell1.firstChild.nextSibling.firstChild;
13. var p1text = p1.nodeValue;
14. var re = /(\d\d)\/(\d\d)\/(\d\d\d\d)/;
15. var ok = re.test(p1text);
16. if(ok)
17. {
18. var parseResult = re.exec(p1text);
19. var date_event = parseResult[0];
20. var mydate = new Date(parseResult[3], parseResult[2]-1, parseResult[1]);
21. var today = new Date();
22. if(mydate.getTime() < today.getTime())
23. //si la date de l'événement est antérieure à la date d'aujourd'hui
24. {
25. rows.item(i).style.display = "none";
26. }
27. }
28. }
29. }

On va faire ça bien

3. var rows = document.getElementsByTagName("tr");
On définit une variable locale représentant un objet/élément/noeud du DOM, auquel on accesse par la fonction interne getElementsByTagName qui ramène une collection/un tableau d'objets/éléments dont le nom de balise est le paramètre donné. Ici donc une collection de tous les noeuds TR de la page, où qu'ils soient.

4. for(var i=0; i<rows.length; i++)
On commence une boucle qui va traverser toute cette collection de noeuds TR (les lignes du tableau donc), depuis l'item 0 à l'item final.

6. var cell1 = rows.item(i).firstChild.nextSibling;
On définit à chaque passage de la boucle un objet représentant le premier noeud-fils TD (selon la structure DOM admise par Mozilla) du noeud TD courant.
rows.item(i) est le noeud TR en cours dans la boucle.
.firstChild est son premier noeud-fils, qui dans Moz est un noeud texte vide, qui ne nous intéresse pas
.nextSibling et son frère "cadet", que l'on sait être le premier noeud TD, donc la première cellule de la ligne en cours. Voilà notre objectif.

12. var p1 = cell1.firstChild.nextSibling.firstChild;
A "l'étage" du noeud TD qui nous concerne se reproduit avec Moz la même chose: le premier noeud sera un noeud texte vide, que l'on va donc "shunter" pour passer à son petit frère, que nous savons être un noeud P. On se rapproche du contenu texte de la cellule.
cell1 est le noeud cellule précédemment défini.
.firstChild est son premier fils: dans Moz le noeud texte vide
.nextSibling est son frère cadet: le premier noeud P dans TD
.firstChild est le seul noeud texte fils du noeud P. En effet tout texte est compris dans un noeud de texte *à l'intérieur* de la balise qui contient de texte dans le code HTML. Cela est une subtilité importante. Ca veut dire qu'une fois arrivé au noeud TD, il y a encore cet unique noeud-fils de texte... dont la valeur est notre DATE !

13. var p1text = p1.nodeValue;
Date que voilà: la valeur de noeud du noeud texte. Cette variable est donc une chaîne de caractères tout ce qu'il y a de plus classique à la différence des variables précédentes qui sont des objets Javascript, accédés ("pointés") selon la structure DOM que sait reconnaître le navigateur.

14. var re = /(\d\d)\/(\d\d)\/(\d\d\d\d)/;

On définit une variable RegExp qui est une *expression régulière*. Pour ceux qui ont déjà touché aux langages de script de manière un peu avancé, voici un des outils les plus puissants et provenant à ma connaissance du monde Unix (comme beaucoup d'outils particulièrement puissants). Ces expressions régulières permettent de rechercher un *motif* générique où l'on ne donne pas une chaine littérale de caractère mais des symboles pouvant représenter un ou plusieurs caractères possibles.
Voici en gros la traduction de cette expression régulière: les / / servent à la délimiter, il nous reste donc:
(\d\d)\/(\d\d)\/(\d\d\d\d)
Mise à part le couleur bleue générale que j'utilise pour le code, on voit trois groupes de couleur représentant trois sous-motifs. Ils sont isolés par des ( ) tout simplement. Les bouts de chaîne de caractère correspondants respectifs, si la recherche trouve un résultat, seront enregistrés chacun dans une variable d'un tableau de variable (variable de type array) que l'on pourra réutiliser. Voyons l'intérêt de la chose en décryptant d'abord l'ensemble de la regexp (on omettra de parler des parenthèses puisqu'on sait déjà leur usage).
\d est le symbole pour digit et représente un caractère numérique, donc de 0 à 9
\/ est le code pour le caractère / tout simplement :-)
Donc on voit que l'on recherche un motif ressemblant à ça: chiffrechiffre/chiffrechiffre/chiffrechiffrechiffrechiffre
Ca ressemblerait un peu à notre date

La bonne question est: pourquoi le rechercher dans le contenu texte de la première cellule de chaque ligne, puisqu'on SAIT que ce sera une date ?

Tout simplement parce qu'on a besoin de séparer très simplement année, mois et date qui seront utilisés pour créer et manipuler un objet Date un peu plus loin.
Les trois sous-motifs sont bien sûr la date, le mois et l'année.

15. var ok = re.test(p1text);
En tout premier lieu, c'est simplement une précaution: on s'assure tout de même que l'on retrouve bien une correspondance au motif appliquée à notre chaîne de caractères p1text. Si ce n'était pas le cas, c que la date n'aurait pas été trouvée. Ca c'est simplement pour montrer un peu comment ça marche.
La méthode test(chaine_de_caracteres) de l'objet regexp teste simplement si on a un résultat. La valeur retournée est donc un simple bouléen: vrai ou faux. On enregistre cette valeur dans une variable ok

16. if(ok)
Si la valeur de OK est vraie (donc qu'un résultat a été trouvé: notre date)...

18. var parseResult = re.exec(p1text);
on définit une variable de type Array on va être stocké tous les résultats de la recherche (motif principal ET sous-motifs). Pour que la valeur retournée soit toutes ces valeurs, on utilise une autre méthode: exec de notre objet regexp.

19. var date_event = parseResult[0];
Cette variable va recevoir la chaîne de caractère correspondant au motif général: nous avons donc notre date, au format littéral (une chaîne de caractères donc). Cette valeur est le premier élément du tableau de variable qui a reçu les résultats de la recherche, parseResult

20. var mydate = new Date(parseResult[3], parseResult[2]-1, parseResult[1]);
La variable mydate est une variable *objet* Date, qui permet de manipuler les dates, de les comparer, etc... ce qui n'est pas possible avec une chaîne de caractères. Les paramètres de la création de cet objet date sont: année, mois, date du mois, heures, minutes, secondes (là je n'ai pas mis les 3 derniers... ce serait 0 pour les trois).

21. var today = new Date();
Voilà l'objet de comparaison, représentant la date système du jour: aujourd'hui

22. if(mydate.getTime() < today.getTime())
Et voilà notre comparaison, en *millisecondes*. Donc plus un événement est récent, plus le temps aura passé, plus le nombre de msec sera GRAND. Plus il sera ancien, plus il est PETIT. Les millisecondes sont retournées par la méthode getTime() de l'objet Date.
Si notre événement en msec (mydate.getTime()) est plus ancien que la date d'aujourd'hui en msec (today.getTime())...

25. rows.item(i).style.display = "none";
... alors on applique une propriété de style display:none à toute la ligne TR en cours.

Voilà voilà

Message modéré le 30/09 à 09:46:51 par Babaorum.

inscrit le 06/03/2003

le 30/09/2003 à 11:37:17

une petite question....

Ok. Hier soir j'ai compris certaines choses, notamment au niveau des css. Donc dans mon tableau je n'ai plus que les td, tr et p et tout le reste c'est mis en page par les css.

<style type="text/css">
body { margin:0.5em }
table, tr, td { border:1px solid #000000; margin:0; text-align: center; font-size: 12;}
table, tr { padding:0 }
table { width:75% }
p { color:blue }
</style>

Je lis le reste ...

inscrit le 06/03/2003

le 30/09/2003 à 14:11:06

une petite question....

Bon je crois que j'ai compris certaines bribes du code (o)

Mais tu as aussi parlé d'un problème sous IE ...

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 30/09/2003 à 22:30:01

une petite question....

Qui peut être résolu en testant si le premier fils de TR est bien un TD ou pas, et si le premier fils de TD est bien un P ou pas.
En gros deux tests donc deux lignes de code à ajouter. C une réadaptation pratique du code mais ça fonctionnera.

inscrit le 06/03/2003

le 30/09/2003 à 23:25:33

une petite question....

Ok Merci. je vais essayer de faire ces tests moi-même (vu que j'ai IE)

inscrit le 06/03/2003

le 01/10/2003 à 10:56:00

une petite question....

Bon, euh, tu pourrais me donner le code de ces tests stp ?

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 01/10/2003 à 15:40:47

une petite question....

6. var cell1 = rows.item(i).firstChild.nextSibling;

Là il faut modifier:

var cell1 = rows.item(i).firstChild
//Là on pointe le premier fils de TR: ça peut être un TD (IE) ou un noeud texte (Moz, Firebird...)
//donc on teste dans le vide: si c le noeud qu'on attend, on ne reste là, sinon on pointe le frère suivant
if(cell1.nodeName.toUpperCase() != "TD") { cell1 = cell1.nextSibling; }

Pareil quand on explore la descendance de notre TD (une fois trouvé):

12. var p1 = cell1.firstChild.nextSibling.firstChild;

On modifie de la même manière:
var p1 = cell1.firstChild;
if(p1.nodeName.toUpperCase() != "P") { p1 = p1.nextSibling; }
//et on redescend maintenant au fils du P, qui est le noeud texte contenant la date
p1 = p1.firstChild

inscrit le 06/03/2003

le 01/10/2003 à 17:14:05

une petite question....

Cool merci, ça fonctionne à merveille. Enfin, ça doit fonctionner à merveille mais mon site rame 8-)

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 02/10/2003 à 01:07:27

une petite question....

En tout cas le code pompte dans la mémoire vive de l'ordi sur lequel tourne le navigateur, c purement local. Donc ça dépend de l'hôte.

inscrit le 06/03/2003

le 02/10/2003 à 11:11:31

une petite question....

En fait ça ne fonctionne pas tout à fait bien.
Car les lignes disparaissent le jour même.

Le 03/10, la ligne du 03-10 aura disparu.

adjoint

L'homme n'est qu'une machine

inscrit le 01/03/2003

le 02/10/2003 à 14:39:20

une petite question....

Allons un peu d'adaptation: comme on compare des dates formulées en millisecondes, il suffit de soustraire à la date du jour l'équivalent en millisecondes d'une journée entière:

1000x60x60x24 = 86400000 msec

22. if(mydate.getTime() < (today.getTime()-86400000))

Ce qui revient à dire en français "si la date de l'événement est plus ancienne que la veille"
Donc le 2/10/2003 seules les dates antérieures au 1-10-2003 seront "cachées"

Message modéré le 02/10 à 14:40:00 par Babaorum.

vertigo_76

inscrit le 05/03/2003

le 02/10/2003 à 15:13:46

une petite question....

inscrit le 06/03/2003

le 02/10/2003 à 18:08:49

une petite question....

D'accord, merci 8-)

Message modéré le 02/10 à 18:24:33 par Centaurus.

adjoint