vendredi 12 mai 2006
Externalisation totale du javascript
Par Guillaume Hautbois, vendredi 12 mai 2006 à 16:09 :: devBlog
Une petite astuce que j'ai découverte récemment et testée pour trouver la meilleure utilisation. Le but est donc de ne plus avoir de gestion d'événements (onload, onlick...) dans le code xHTML mais que tout soit géré dans le javascript.
On va d'abord définir une fonction quelconque en javascript que l'on va essayer d'appeler avec l'événement interne, puis en externe :
function tell(personne, objet_creux_feminin_singulier) { alert(personne+" rentre dans sa "+objet_creux_feminin_singulier); }
Voici la manière classique d'appeler cette fonction avec l'événement onclick dans un document xHTML :
<a href="#" onclick="tell('toto', 'maison')">Interne</a>
Maintenant le but est d'appeler cette fonction sans l'événement, on va donc ajouter un id à l'élément "a" mais on aurait pu essayer de le retrouver avec getElementsByTagName() (ce qui serait plus difficile dans une page avec x liens).
<a href="#" id="toto_maison">Externe</a>
La méthode pour lier un événement est tout simplement "element.evenement" lorsque il n'y a pas de paramètres et "element.evenement = function() {}" lorsqu'il y a un ou plusieurs paramètres.
Ce qui donne dans notre cas :
document.getElementById('toto_maison').onclick = function() { tell('toto', 'maison'); }
Seulement si vous insérez directement ce code dans votre fichier javascript, il ne va pas fonctionner car il va vouloir lier l'événement alors que la page n'est pas terminée de charger et que cet élément n'existe pas encore !
La solution est alors de faire une fonction pour englober les liaisons :
function loadEvents() { // Evenement pour le lien toto document.getElementById('toto').onclick = function() { tell('toto', 'maison'); } }
Une fois cette fonction créée il faut encore la charger elle aussi, on pourrait le faire avec un onload() sur le body mais on a décidé de tout externaliser.
La solution consiste alors à définir l'exécution de cette fonction une fois que la fenetre est chargée :
window.onload = loadEvents;
Et voila, nous avons notre code final qui externalise totalement le javascript. Exemple complet ci-dessous :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Externalisation</title> <script type="text/javascript" src="externalisation.js"></script> </head> <body> <a href="#" onclick="tell('toto', 'maison')">Interne</a> <br/> <a href="#" id="toto_maison">Externe</a> </body> </html>
// JavaScript Document window.onload = loadEvents; function loadEvents() { // Evenement pour le lien toto document.getElementById('toto_maison').onclick = function() { tell('toto', 'maison'); } } function tell(personne, objet_creux_feminin_singulier) { alert(personne+" rentre dans sa "+objet_creux_feminin_singulier); }
EDIT : Ce script est maintenant disponible dans mon labo
Le meilleur anime actuellement en diffusion pour moi est Noein, c'est une histoire de science-fiction qui tourne autour des mondes parallèles, du temps et de l'espace, un sujet que l'on ne connait pas du tout, qui est basé sur des suppositions, et l'anime tire sa force justement de là !
Dès le premier épisode on tombe dans un monde imaginaire, avec des musiques sublimes, un "chara design" un peu déroutant au premier abord mais on s'y habitue très vite ! En bref un anime a découvrir de toute urgence ! L'anime est rendu à l'épisode 21 sur 24.
Kiba est plutôt un anime fantastique que science-fiction, c'est beaucoup plus de l'imaginaire, avec des "esprits" que l'on invoque pour combattre, etc...
On en est à l'épisode 6, l'intrigue n'est pas aussi forte que celle de Noein mais mérite le détour, l'animation est sympathique et la musique aussi (il y a d'ailleurs un sacré thème de trompette solo...), on a eu le droit a une histoire parallèle entre deux personnages qui se connaissaient au tout début pour le moment et l'on se demande quel sera leur lien dans les futurs épisodes...
Major est un anime du genre sport, et plus précisemment du baseball, il raconte l'histoire de Goro, jeune fan de baseball qui semble avoir une bien belle carrière de joueur professionnel devant lui mais qui va en voir de toutes les couleurs si il souhaite y parvenir...
Bon alors moi je ne suis pas un fan de baseball mais cet anime est vraiment bien fait et nous fait aimer ce sport, on s'attache aux personnage, les musiques sont aussi très bien.
Major est rendu à l'épisode 44, c'est donc la saison 2, la saison 1 étant terminée depuis le 26 ème épisode. Vous pouvez commencer à la saison 1 elle n'est pas encore licenciée (liens sur wtg fansubs).
Le dernier, hack roots correspond quand a lui à un genre assez peu commun, fantastique certes, mais l'histoire se déroulant dans un MMORPG, vous savez ces jeux Online Persistants comme World of Warcraft on l'on n'a plus de vie sociale après ^^.
Hack est une série ayant plusieurs "saisons" différentes. La première, et selon moi la meilleure est 
