MODIFIER LE CONTENU D'UN DIV AVEC JAVASCRIPT

Commentaire de lecurieux41 le 15/04/2011 15:48:40

Désolé je n'étais en effet pas sur le bon site !
merçi

Commentaire de Alain Proviste le 15/04/2011 16:20:23 administrateur CS

tadaaa

Commentaire de LeFauve42 le 18/04/2011 11:02:23

Bonjour,

Je trouve un peu exagere le niveau initie. Surtout que le code contient pas mal de maladresses, comme (entre autre) declarer toutes les variables en global.

Le seul cas ou ce serait interessant d'avoir une variable globale etant de cacher les couteux appels a getElement, mais ce n'est pas fait...

Une autre remarque, la fonction getElement est inutilement couteuse. document.getElementById() est supporte depuis IE5 et sur toutes les versions de Firefox, Chrome, Safari, et opera (pour Opera, je ne suis pas sur du "toutes" mais c'est sans doute supporte sur celles de ces 10 dernieres annees).

Bref, le code pour supporter les 0.000001% de personnes utilisants IE 4 ou Netscape 4 est totalement inutile (pour rappels, ces deux browsers ont ete remplaces par des nouvelles versions (supportant document.getElementById()) respectivement en 1999 et 1998)...

Evidemment, quand on enleve tout ca, il ne reste rien, mais peut-etre que ce sujet ne necessite pas une source...

Eric

Commentaire de LeFauve42 le 18/04/2011 16:42:52

Jacques,

Sauf ton respect, declarer *toutes* les variables en global n'est *jamais* une bonne idee.
Ca fonctionne a peu pres parce que tu as quelques dizaines de lignes de code. Dans une application de plusieurs miliers de lignes, ca devient tout simplement impossible.
De plus, entre declarer une variable en global et ne pas la declarer, ca ne fait aucune difference en Javascript.

Si je peux te donner un conseil, c'est :
- Toujours declarer en variables locales a tes fonctions les variables que tu n'utilises pas dans les autres fonctions.
- Eviter d'utiliser les variables globales, sauf quand c'est vraiment necessaire (par exemple pour partager une valeur entre plusieurs fonctions).

Bon, d'accord ca fait 2 conseils :o)

Desole d'avoir ete un peu sec dans mon premier commentaire, mais je pense qu'il est important de ne pas encourager (surtout aupres des debutants) ce genre de pratiques.
Apres tout, le but de poster son code c'est aussi de recevoir des remarques constructives.

Eric

Commentaire de nicocoooo le 24/05/2011 21:00:47

Très utile

Commentaire de zozomusic le 06/06/2011 12:07:32

C'est le script que je cherchais ! Merci.
Mais je suis loin d'être au top au niveau programmation. J'ai téléchargé les fichiers, j'ai vu l'exemple en html, mais aucune explication de mise en place :(
Pourquoi 2 fichiers js ? Comment paramétrer les liens de menu (a onclick="AffRubrique('content0','deco0.gif','reader.jpg','','','','');" href="#">Div 1</a>) ?
Idée : mettre les explications dans les 4 div exemples ;)

Commentaire de lecurieux41 le 07/06/2011 15:26:07

Bonjour ZOZOMUSIC,
Pour répondre à tes questions, le fichier js ddaccordion ne sert qu'au fonctionnement du menu de gauche avec lequel on modifie les affichages. Ce menu n'est pas de moi mais provient de Dynamic Drive et il fallait bien un menu pour illustrer le fonctionnement.
Pour le parametrage il y a une ewplication dans le code du menu sur la page html.
-- image 1= Left 1055 Top 180 image 2= Left 1070 Top 560 (positions par défaut) Arguments= contenu,image1,image2,left1,top1,left2,top2-->
les positions par défaut des illustrations à droite
concernent l'affichage présent sur l'écran à l'ouverture de la page.
Les arguments: content0 est le nom du div à afficher quand on clique sur ce bouton du menu.
ensuite la source de l'image 1 ou rien s'il n'y a pas d'image.
La source de l'image 2 ou rien s'il n'y a pas d'image.
les 4 derniers parametres concernent la position de ces 2 images top image 1,left image 1 - top image 2,left image 2 ou bien sur rien s'il n'y a pas d'image à afficher avec ce div. Utiles si les images à afficher sont de dimensions différentes.
J'espère avoir été plus clair.

Commentaire de Alain Proviste le 07/06/2011 15:43:29 administrateur CS

tout ce qu'a dit lefauve42 est juste et témoigne des bonnes pratiques. Ton code est obsolète, de nouvelles fonctions sont maintenant supportées et permettent de faire beaucoup plus "proprement" la même chose que ce que tu proposes. Ce que tu as fait était très bien à l'époque mais javascript est un langage qui évolue très vite parce qu'il est très jeune et du coup, beaucoup de code destiné à des navigateurs dépassés devient lui même dépassé. En fait, sans être sévère, ton code est dépassé depuis 10 ans, et en terme d'ordre de grandeur par rapport à la durée de vie d'internet... je te laisse conclure...

quant aux déclarations des variables... première semaine de cours dans n'importe quelle école qui aborde la programmation : chaque variable doit être déclarée à sa juste portée, ni plus ni moins. tout déclarer en global est une faute de programmation. la plupart des débutants estiment qu'il est plus simple de tout déclarer en local, c'est une réaction naturelle qu'on a tous eu. Maintenant il faut savoir écouter les gens qui ont de l'expérience dans un domaine.

Bon courage

Commentaire de lecurieux41 le 07/06/2011 15:58:05

Merci beaucoup mais une fois de plus je n'ai jamais prétendu qu'il fallait déclarer TOUTES les variables en globales mais qu'il est préférable pour s'y retrouver de déclarer TOUTES LES GLOBALES en début de script.
Désolé si je n'ai pas été assez clair.
Ce qui me console c'est qu'obsolète ou non ça fonctionne très bien.
Je cherche beaucoup sur Internet et suis curieux (évidemment) de savoir ou trouver ces fameuses nouvelles fonctions qui font tout plus "proprement"
Merci

Commentaire de lecurieux41 le 07/06/2011 17:27:25

Ah encore une chose, j'ai corrigé 2 erreurs de </div> manquants dans le code html.
Copier/coller ça va plus vite mais on peut se tromper et comme l'affichage était bon je ne l'ai pas vu.
Maintenant c'est W3C nickel !

Commentaire de LeFauve42 le 07/06/2011 19:11:42

Jacques,

Si tu veux trouver des exemples de Javascript contemporain, le plus simple est de regarder les tutoriaux de librairies comme PrototypeJS ou JQuery.

En effet, de nos jours plus personne ne fait du Javascript "de base" sauf pour certains projets particuliers.

Le gros avantage de ces librairies est de se charger de l'interopérabilité entre les différents navigateurs, tout en offrant des fonctions de haut niveau pour gérer les cas les plus courants.

Par exemple, avec PrototypeJS pour modifier le contenu d'une div, ça donnerait ca :

<div id="maDiv"></div>
<script type="text/javascript>
  $("maDiv").update("Je suis un contenu dynamique !");
</script>

Si tu parles anglais, tu peux aussi t'inscrire aux mailing lists d'aide à Javascript. Même si tu ne postes pas de messages, cést très instructif de lire les problèmes rencontrés par les autres, et les solutions proposées.

Eric