Hello,

Dans cet exemple (dans la partie "Les objets HTML") :

function quoi()
{
      alert("Oui ?");
};
document.getElementById("uneImage").onclick = quoi;   // on parle de la fonction elle-meme : pas de parentheses

Effectivement, si on met des parenthèses après quoi, ça ne fonctionne pas, mais je ne comprends pas le commentaire... quelqu'un pourrait-il m'expliquer pourquoi il ne faut pas en mettre ? Merci

Salut,

Quand on définit une fonction en javascript, on définit en fait une variable qui contient une référence vers une fonction. En gros, la fonction est crée quelque part dans la mémoire de l'ordinateur et la variable contient un "lien" qui mène à cette fonction. Quand on met des parenthèses à une variable qui contient ce type de lien, on demande à javascript d'exécuter cette fonction. Si on ne met pas de parenthèses, on utilise la référence (le "lien") vers la fonction.
Donc dans la ligne que tu as cité, document.getElementById("uneImage").onclick est une fonction que javascript exécutera lorsqu'il détectera un clique sur l'élément. En lui assignant la référence vers la fonction, javascript exécutera cette fonction lors du clique. Si on avait mis des parenthèses on aurait exécuté la fonction au lieu de l'assigner à onclick et onclick aurait reçu le résultat de la fonction.

Merci Darkodam, tu viens de m'aider à bien comprendre ce concept moi aussi. C'est logique en fait, mais pas forcément évident au premier abord.

function ma_fonction(){
  return 5;
}
var a = ma_fonction(); // a=5
var b = ma_fonction; // b=function() { return 5; }

// Et donc... b() renvoie 5 ?

J'ai un doute sur la fin... ?

Citation : Golmote

// Et donc... b() renvoie 5 ?

Oui, c'est exactement ça

function maFonction() {
  alert('je suis une fonction');
}

// équivaut à 

var maFonction = function() { // on voit bien ici qu'on assigne une fonction (en fait sa référence) à une variable
  alert('je suis une fonction');
};

/*
maFonction contient une référence, pas la fonction elle-même. Donc :
*/

// On peut l'assigner à une autre variable
var a = maFonction;

// On peut détruire la référence
delete maFonction;
alert(maFonction); // Cette ligne plante car la variable "maFonction" à été détruite et n'est donc plus définie

// Tant qu'une référence vers la fonction existe, elle ne disparait pas
a(); // affiche une boîte de dialogue contenant 'je suis une fonction'

oui...
ça change pour ce genre de trucs:

z=0;
function ma_fonction(){
  return 5+z;
}
var a = ma_fonction(); a=5
var b = ma_fonction; // b=function() { return 5; }
alert('a:'+a+'/b:'+b);//a:5/b:5
z=1;
alert('a:'+a+'/b:'+b);//a:5/b:6

e gros si tu stoques la fonction dedans, ça recalcul à chaque fois...
enfin c'est ce que j'ai compris...

Merci Je crois que j'ai compris, ça ressemble aux références en PHP ou aux pointeurs en C... par contre, comment ça se fait alors que, si on met des parenthèses à quoi, on a le pop-up d'alerte qui s'affiche au chargement de la page ? Parce que d'après tes explications, la méthode document.getElementById("uneImage").onclick reçoit le résultat de la fonction quoi(), donc alert('Oui ?');... mais ensuite ? Pourquoi est-ce que ça provoque l'affichage ? Est-ce que alert('Oui ?'); est à son tour directement renvoyé par cette méthode document.getElementById("uneImage").onclick ? Ça ne me paraît pas très clair

parce que tu assignes la valeur de retour de la fonction si tu mets la parenthèses... donc ça l'active...
et si tu mets pas les parenthèses, ça attend que tu fasses appel à la variable...

En passant, j'en profite pour poser une tite question sur le même sujet :

var ma_fonction = function(a) {
	return function(b) {
		return a+b;
	};
};
y = ma_fonction(5); // ma_fonction(5) = function(b) { return 5+b; }
alert(y(3)); // affiche 8

Le return renvoie une fonction en elle-même, c'est ça ?

Quel peut être l'utilité de ça ? (J'ai trouvé ça sur un site sur les objets en JS je crois).

l'intérêt peut servir lors d'un événement avec un paramètre fixe pour un appel mais variable en fonction de la situation:

element.onclick=(function (param){
	return function(event){
		another_but_defined_function(event,param);
	}
})(element.id);

Ainsi on peut appeler la fonction another_but_defined_function depuis un onclick avec 2 parametres (event et un autre) au lieu d'un seul (event). Le 2e paramètre étant défini au moment de l'écriture de la fonction (dans l'exemple le paramètre vaut l'id de l'élément en question). Cette valeur n'étant connu qu'au moment de l'écriture de cette fonction (puisque lors de l'appel de la fonction element (et donc element.id) n'est plus dans le scope (bon d'accord dans ce cas on pourrait utiliser this.id mais c'est pour illustrer l'exemple))

Pas compris ce dernier exemple, mais sinon c'est ok. Merci pour vos réponses

Ok, donc c'est uniquement avec les closures... ?

Citation : restimel

l'intérêt peut servir lors d'un événement avec un paramètre fixe pour un appel mais variable en fonction de la situation:

element.onclick=(function (param){
	return function(event){
		another_but_defined_function(event,param);
	}
})(element.id);

Ainsi on peut appeler la fonction another_but_defined_function depuis un onclick avec 2 parametres (event et un autre) au lieu d'un seul (event). Le 2e paramètre étant défini au moment de l'écriture de la fonction (dans l'exemple le paramètre vaut l'id de l'élément en question). Cette valeur n'étant connu qu'au moment de l'écriture de cette fonction (puisque lors de l'appel de la fonction element (et donc element.id) n'est plus dans le scope (bon d'accord dans ce cas on pourrait utiliser this.id mais c'est pour illustrer l'exemple))

On définit l'élément.

Mais l'avantage, c'est de pouvoir écrire une fonction générique je pense. Qui permettra de créer d'autres fonctions