Petits trucs pour… #4 : Affichage dynamique de blocs
Labo, Petits trucs pour... 16 juillet 2008Bonsoir à tous,
Oui, il est un peu tard, mais voici la quatrième édition des „Petits trucs pour…“ !. En voyant la demande d'un membre d'Art-Toon (Insérer un bloc avec un lien), j'ai développé en deux deux un truc fonctionnel pour faire ce qu'il demande… Et c'est ce que je vais dévoiler ici.
Comme l'avait suggéré rocawear, il „suffisait“ de faire un onclick sur le lien pour afficher / cacher le bloc. Oui, mais tant qu'a faire, allons un peu loin, et creusons un peu ce filon. Pourquoi ne pas, plutôt que d'afficher bêtement un bloc, quitte à faire s'empiler les uns sur les autres les blocs affichés au fur et à mesure, afficher un seul bloc (celui selectionné) et cacher les autres blocs à cacher ?
Grâce à DOM, tout devient „un peu“ plus simple… Il suffit de parcourir tous les noeuds enfants (liste ChildNodes) d'un „parent“ (qu'on a définit lors de l'appel à la fonction qui affiche / cache les blocs), et de regarder ceux qui ont un id dit „similaire“, qu'il faut cacher. Et, en sortant de la boucle, afficher le bloc correspondant.
Une fonction JS toute bête, finalement !
Tags : DOM, javascript
16 juillet 2008 à 10:39
Intéressant.
Je pense que ce petit code va bientôt me servir.
@Talus : Tu sais pas où je pourrais trouver un bon cours JS, je pense que le cours du SdZ (fait par le groupe de membres JoSé2)est bien, mais je suis pas un connaisseur du JS :s
16 juillet 2008 à 12:27
„Simple“ avec DOM, mais encore plus simple avec jQuery et encore plus beau :D
16 juillet 2008 à 20:08
Sargeros > Simple, la pratique. Savoir ce que tu veux faire, et, par la suite, chercher sur le net les différents objets… Le fonctionnement OO en JS est super interessant.
Lunthear > Bouh ! Lourd, lourd, et encore lourd !
19 juillet 2008 à 3:28
o0 tien mon pseudo sur un blog ^^
très sympa ce que tu lui a filé comme code-source ;)
++
17 août 2008 à 23:55
Talus, franchement jQuery c'est pas lourd du tout. Vraiment pas lourd. J'ai codé un mini-bureau web2.0 avec jQuery pour l'intranet d'Hachette avec et franchement … rien à redire, très léger, et ça accélère tellement le développement.
Au pire, utilises Prototype, mais ne développe pas sans lib js, c'est nul … :) (shame on l'API DOM)
17 août 2008 à 23:59
J'aime pas _trop_ utiliser les framework que je ne fais pas… Et, peut-être (voir surement) que j'ai tort, mais comme un framework (tel jQuery par exemple, que j'ai testé et utilisé un moment, mais très vite fait) peut-être lourd, car certes le dév est facilité, mais tu dois t'encombrer de trucs qui ne te serviront certainement pas… :/
19 août 2008 à 14:30
Et ? T'as vu la taille ? Par contre quand tu vas coder sans tu vas te mettre à utiliser des algos non optimisés (genre tu passes facilement de o(n2) à o(n) d'un algo trivial à un algo réfléchi, je crois que c'est l'algo de recherche de texte de Knuth qui a cette caractéristique).
Ou alors la VM javascript a une structure interne particulière, et parfois changer l'ordre des parenthèses t'apporteras un overhead cpu, ou des trucs sur les spécificités des navigateurs (par exemple jQuery va utiliser automatiquement foreach sur javascript>=1.9, foreach utilisant un itérateur, ça va beaucoup plus vite). Voire des leaks oubliés. Voire des bugs.
En plus, c'est forcément plus lourd, mais c'est supra léger Prototype, c'est fait pour. Et franchement, le temps que tu vas gagner est complètement ahurissant (tester 5 minutes un framework != l'utiliser, et jQuery est plutôt lourd par rapport à prototype, j'y consens).
Ensuite ouai ça dépend de ce que tu fais, si c'est une applie avec quazi pas de js (genre 2 fonctions qui se battent) perso je l'écrirais à la main mais pour une vraie applie web … :)
19 août 2008 à 18:02
Oui, dans ce cas, dans le cadre d'une appli web quelque peu plus grosse, je reconnais que l'utilisation d'un framework peut accélérer le développement, mais je trouve plus interessant de coder ça à la main… Quitte à s'inspirer de sources dites „externes“ (frameworks, autre scripts, etc).