Bonjour, j'essaye de faire joujou avec Yahoo User interface, j'ai commencé par le commencement, et je bloque sur la compréhension de la définition d'une fonction JS.
 
J'ai un niveau "tout juste moyen" en JS, et pour moi on définit une fonction comme ca :
 

 
Et là, je me retrouve avec ca :

 
J'ai du mal à comprendre à quoi sert le (function() du début et comment ca définit des fonctions ... car après ils appellent "helloWorld' (via le eventhandler)  

Up !

Upeuh

Personne pour m'expliquer parmis les 60 lurkeurs

je dis peut être une connerie mais  
au lieu d'écrire séparément la définition de la fonction et son appel :
 

 
ils mettent la définition et l'appel en une seule "ligne"

c'est ça qui te pose problème ?

L'appel il se fait via YUI, ca doit être cette ligne là :
 

 
Ce que je pige pas déjà c'est que le function() soit tout seul, le tartempion est plus bas ... on dirait une sorte de "multi définition", pour définit plusieurs fonctions d'un coup ....

**buuuuuuuump** (bruit du buzzer disant "t'as tort" )
c'est du JS,
 
si tu veux qu'au moment d'une action/event, une chose se passe, il faut mettre en place un listener
faut voir ça comme de la chasse : si tu veux réagir au "click", il faut d'abord que tu tendes le piège (le "listener" )
et pour tendre le piège, il faut que tu appelles tartampion
 
ta fonction tartampion contient d'autres fonctions, et ça c'est normal/logique aussi

Mes fonctions, c'est bien helloWorld et interceptlink dans cet exemple non ?
 
Si je les appelle elle vont s'exécuter non?
 
Du coup, pour moi YAHOO.util.Event.addListener("secondA", "click", interceptLink); exécute interceptlink quand je clique sur l'élément dans le DOM dont le nom est secondA non ?

j'essaye de t'expliquer que si le code avait été écrit ainsi c'était pareil :

en dehors de tartampion, si tu appelles helloworld ou interceptlink, elles seront indéfinies.
Elles ne sont définies que dans tartampion, et dans ton exemple, elles ne sont définies que dans la fonction qui se définit sans nom et s'appelle immédiatement

si la fonction interceptlink s'éxécute quand tu cliques sur l'élément, c'est parce que tartampion a été appelé et qu'il a mis en place le listener pour réagir au clic.

je commence à ne pas comprendre ce que tu ne comprends pas.

Tu as la definition d'une fonction anonyme et son appel en un seul coup:
La définition de ladite fonction:
function() {
..................
};
La définition et appel:
(function() {
.....................
})();
 
Le corps de la fonction anonyme fait trois choses:
YAHOO.util.Event.addListener("container", "click", helloWorld);  
YAHOO.util.Event.addListener("secondA", "click", interceptLink);
YAHOO.log("When you begin interacting with the example at left, you'll see log messages appear here.", "info", "example" );
 
et pour faire ces trois choses, il a besoin de deux fonctions auxiliaires (qui seront appellées quand le contexte element/evenement sera realisé), passées comme argument dans les appels précedents: helloWorld, interceptLink, qui sont alors elles aussi definies dans le corps de la fonction anonyme:
 
var helloWorld = function(e) {
alert("Hello World!" );
}
 
et  
 
var interceptLink = function(e) {
YAHOO.util.Event.preventDefault(e);
YAHOO.log("You clicked on the second YUI link.", "info", "example" );
alert("You clicked on the second YUI link." );
}
 
Ca devrait t'être plus clair maintenant.
 
A+,
 
 
 

Ok, merci à vous 2, je commence à piger, en fait ils ont fait comme ca pour faire des fonctions locales auxquelles on rattache le handler

Par contre,

var helloworld = function (e) {}

C'est pareil que

function helloworld(e) {} ?

[NOTE: je ne suis pas specialiste de Javascript, alors je raconte peut être des betises ici, je donne simplement mon impression]
Dans le même bloc, oui, c'est grosso modo la meme chose, mais ici, helloworld disparait lorsque l'on sort du corps de la fonction anonyme, puisqu'elle est définie dedans. Donc au moment de son appel par déclenchement de l'évènement sur l'élément DOM, elle n'existe a priori plus si on est passé par: function helloworld(e) {}  
Tandis qu'en faisant var helloworld = function (e) {}, on a transmis en parametre le code de la fonction (ou un pointeur sur, ce qui va bloquer le destruction du code correspondant a la sortie de la fonction anonyme, je ne sait pas comment ca marche en interne dans js), et donc au déclenchement de l'évènement sur l'élément DOM, il va y avoir du code a executer.
 
A+,

la déclaration suivante :  
 

Permet de déclarer du code dans une fonction anonyme et d'éxécuter aussitôt la fonction ( les parenthèses après l'accolade le permettent)
C'est plutôt utile quand tu ne veux pas que ton code vienne gêner le code des autres (écrasement d'une variable portant le même nom (ou d'une fonction)).