Commentaires

1. Le lundi 24 novembre 2008, à 20h01, par Bruno Bichet

Salut Victor,

Merci de relayer cette craduction, vu le nombre de style en ligne ou d'événements onquelquechose qu'on peut rencontrer dans une journée d'intégration

Je compte ajouter ton script dans la liste des 21 scripts à posséder dans sa boite à outils.

Une chose qui m'a sûrement échappé (en gros, j'y comprend rien ) c'est comment tu charges plusieurs fonctions comme "fnGetNews ()" avec "fnLoad ()" ?

Si tu avais un exemple, ça serait super cool

2. Le lundi 24 novembre 2008, à 23h34, par Victor Brito

Merci pour l'ajout, Bruno.

Pour répondre à ta question, je vois, pour ma part, deux cas de figure :

1. les fonctions qui sont appelées dans d'autres fonctions,
2. les fonctions qui sont indépendantes les unes des autres.

Le premier cas de figure ressemble à celui du code pondu sur le billet, où tu as une fonction A qui appelle une fonction B, que ce soit en l'exécutant (B (); ou B (param1, param2…), par exemple) ou en utilisant un gestionnaire d'événements. La fonction permettant de charger le script au chargement du document n'aura besoin que d'appeler la fonction A (une fois le document chargé, lorsque les conditions seront réunies pour que la fonction A appelle la fonction B, la fonction B sera executée sans problème).

Le second cas de figure oblige à appeler chaque fonction dans la fonction de chargement du script au chargement du document. Autrement dit, il faut autant de window.addEventListener (et de window.attachEvent) qu'il y a de fonctions. Autrement dit :

function fnLonelyFunction1 ()
{
  // An independent function
}

function fnLonelyFunction2 ()
{
  // Another independent function
}

// Let us load the functions above
function fnLoad ()
{
  // For standards-compliant browsers
  if (window.addEventListener)
  {
    window.addEventListener ('load', fnLonelyFunction1, false);
    window.addEventListener ('load', fnLonelyFunction2, false);
  }
  // For Internet Explorer
  else if (window.attachEvent)
  {
    window.attachEvent ('onload', fnLonelyFunction1);
    window.attachEvent ('onload', fnLonelyFunction2);
  }
  // For browsers who do not understand DOM level 2, there is no event
  // (which means these browsers will behave as though JavaScript were deactivated or not supported)
  else return;
}
// Execute
fnLoad ();

Soit dit en passant, si l'on n'utilise pas la dernière condition de la fonction fnLoad () (else return;), il n'est alors pas nécessaire de créer ladite fonction fnLoad () et de l'exécuter. Autrement dit :

// Another way to load the functions when document is on load
// (directly, without creating any function)

// For standards-compliant browsers
if (window.addEventListener)
{
  window.addEventListener ('load', fnLonelyFunction1, false);
  window.addEventListener ('load', fnLonelyFunction2, false);
}
// For Internet Explorer
else if (window.attachEvent)
{
  window.attachEvent ('onload', fnLonelyFunction1);
  window.attachEvent ('onload', fnLonelyFunction2);
}
// In this case, we totally ignore browsers who do not understand DOM level 2

J'espère avoir été clair.

3. Le mardi 25 novembre 2008, à 07h35, par Bruno Bichet

Ok, c'est plus clair pour moi comme ça, je pensais qu'il fallait passer par une boucle pour lister les fonctions à charger. Merci encore !

4. Le mardi 25 novembre 2008, à 13h19, par Cyrano

Bonjour,
je crois que j'ai un exemple qui pourrait parfaitement illustrer les propos de ce billet. Comment utiliser HTML + CSS + JavaScript sans mélanger tout ça dans la même page.

J'invite chacun à fouiller les codes de cette page : http://jem-web.info/tutoform/

Enjoy ! (comme on dit en latin :P)

5. Le mardi 25 novembre 2008, à 17h03, par Victor Brito

Même s'il manque quelques éléments label pour rendre les cases à cocher parfaitement accessibles, merci d'avoir partagé cet autre exemple.

Si uere Latine loquereris, diceres: Gaude.