JavaScript - Historique des versions

Lapin le 2 février 2011 à 06:00

2011-02-02T06:00:09Z

← Version précédente		Version du 2 février 2011 à 06:00
Ligne 56 :		Ligne 56 :
	// un clic sur la page affichera "body"</javascript>		// un clic sur la page affichera "body"</javascript>

-	=== s'affranchir de '''this''' ===	+	=== S'affranchir de '''this''' ===

	Etant donné la différence entre le '''this''' JavaScript et le '''this''' tel qu'il est admis dans d'autres langages orientés objet, beaucoup de programmeurs utilisent ''self'' comme référence à l'objet courant.		Etant donné la différence entre le '''this''' JavaScript et le '''this''' tel qu'il est admis dans d'autres langages orientés objet, beaucoup de programmeurs utilisent ''self'' comme référence à l'objet courant.
Ligne 225 :		Ligne 225 :


-	Pourquoi n'avions-nous pas le problème avec num ? Car quand on a passé ''i'' à la fonction, ''i'' étant un type ~~entier~~ primitif (~~comme les flotants~~, ~~les booléens et~~ null), JavaScript le passe par valeur, c'est à dire qu'il '''copie''' ''i'' dans ''num''. Si ''i'' valait 1, ''num'' était défini à 1. Les entiers ne sont pas des '''références''', mais ils contiennent réellement le scalaire en eux. Alors que les tableaux sont des '''références''' vers un objet '''Array'''. Pour preuve :	+	Pourquoi n'avions-nous pas le problème avec num ? Car quand on a passé ''i'' à la fonction, ''i'' étant un type primitif (i.e. un nombre, un booléen, une chaîne ou null), JavaScript le passe par valeur, c'est à dire qu'il '''copie''' ''i'' dans ''num''. Si ''i'' valait 1, ''num'' était défini à 1. Les entiers ne sont pas des '''références''', mais ils contiennent réellement le scalaire en eux. Alors que les tableaux sont des '''références''' vers un objet '''Array'''. Pour preuve :

	<javascript>var a = [1, 2]; // a est une référence vers un Array contenant [1, 2]		<javascript>var a = [1, 2]; // a est une référence vers un Array contenant [1, 2]

Lapin : Correction de petites maladresses.

2011-02-02T04:50:36Z

Correction de petites maladresses.

← Version précédente		Version du 2 février 2011 à 04:50
Ligne 195 :		Ligne 195 :
	}		}
	}</javascript>		}</javascript>
-
-	~~Comme dit plus haut, la ''closure'' contient les variables (dont les paramètres) de la fonction, aussi, au lieu de les passer en paramètres, on peut créer des variables locales :~~
-
-	~~<javascript>function go() {~~
-	~~for(var i=0; i<3; i++) {~~
-	~~var a = document.createElement('a');~~
-	~~a.href = "javascript:";~~
-	~~a.innerHTML = "Je dis "+i+" ";~~
-	~~(function() {~~
-	~~var elem = a;~~
-	~~var num = i;~~
-	~~elem.addEventListener('click', function() { alert("Je dis "+num); }, false);~~
-	~~})();~~
-	~~document.body.appendChild(a);~~
-	}
-	~~}</javascript>~~
-
-	Ca revient strictement au même, mais je préfère cette écriture car elle rend évidente ce qu'on souhaite enfermer dans notre nouvelle ''closure'', et surtout, elle montre clairement comment les données sont copiées, problème qu'on va examiner avec l'exemple suivant.

	=== Les références aux autres ''closures'' ===		=== Les références aux autres ''closures'' ===
Ligne 226 :		Ligne 208 :
	a.innerHTML = "Je dis "+i+" ";		a.innerHTML = "Je dis "+i+" ";
	truc[1] = i;		truc[1] = i;
-	(function() {	+	(function(tablo) {
-	~~var tablo = truc;~~	+
	a.addEventListener('click', function() { alert(tablo.join(" ")); }, false);		a.addEventListener('click', function() { alert(tablo.join(" ")); }, false);
-	})();	+	})(truc);
	document.body.appendChild(a);		document.body.appendChild(a);
	}		}
Ligne 244 :		Ligne 225 :


-	Pourquoi n'avions-nous pas le problème avec num ? Car quand on a ~~écrit~~ ''~~num =~~ i'', ''i'' étant un type ~~scalaire~~ entier (~~''Integer''~~), JavaScript '''copie''' ''i'' dans ''num''. Si ''i'' valait 1, ''num'' était défini à 1. Les ~~''Integer''~~ ne sont pas des '''références''', mais ils contiennent réellement le scalaire ~~entier~~ en eux. Alors que les tableaux sont des '''références''' vers un objet '''Array'''. Pour preuve :	+	Pourquoi n'avions-nous pas le problème avec num ? Car quand on a passé ''i'' à la fonction, ''i'' étant un type entier primitif (comme les flotants, les booléens et null), JavaScript le passe par valeur, c'est à dire qu'il '''copie''' ''i'' dans ''num''. Si ''i'' valait 1, ''num'' était défini à 1. Les entiers ne sont pas des '''références''', mais ils contiennent réellement le scalaire en eux. Alors que les tableaux sont des '''références''' vers un objet '''Array'''. Pour preuve :

	<javascript>var a = [1, 2]; // a est une référence vers un Array contenant [1, 2]		<javascript>var a = [1, 2]; // a est une référence vers un Array contenant [1, 2]
Ligne 251 :		Ligne 232 :
	alert(a[0]); // 666 !</javascript>		alert(a[0]); // 666 !</javascript>

-	Donc lorsqu'on ~~a écrit~~ ''~~tablo =~~ truc'', ~~on n~~'a fait ~~que faire~~ référence au même objet '''Array'''.	+	Donc lorsqu'on passe ''truc'' à la fonction, ''tablo'' fait référence au même objet '''Array''' que ''truc''.

	Pour garantir d'avoir un type complexe enfermé dans une ''closure'', il faut faire attention qu'il ne réfère pas à un autre objet, mais qu'il réfère à une copie unique.		Pour garantir d'avoir un type complexe enfermé dans une ''closure'', il faut faire attention qu'il ne réfère pas à un autre objet, mais qu'il réfère à une copie unique.
Ligne 267 :		Ligne 248 :
	truc[0] = "Je dis";		truc[0] = "Je dis";
	truc[1] = i;		truc[1] = i;
-	(function() {	+	(function(tablo) {
-	~~var tablo = truc;~~	+
	a.addEventListener('click', function() { alert(tablo.join(" ")); }, false);		a.addEventListener('click', function() { alert(tablo.join(" ")); }, false);
-	})();	+	})(truc);
	document.body.appendChild(a);		document.body.appendChild(a);
	}		}
Ligne 295 :		Ligne 275 :
	go();</javascript>		go();</javascript>

-	La fonction ''copy'' n'existe pas en JavaScript ~~1.5 (ni 1.8 il me semble)~~, mais de telles fonctions ont été codées par de nombreux frameworks. C'est ce qu'ils appellent la '''deep copy''', copie profonde d'un objet.	+	La fonction ''copy'' n'existe pas en JavaScript, mais de telles fonctions ont été codées par de nombreux frameworks. C'est ce qu'ils appellent la '''deep copy''', copie profonde d'un objet.

	Attention cependant, ces fonctions échouent parfois à copier certains objets de type natif. Par exemple, dans ''JQuery'', copier une expression régulière ne fonctionnera pas, et de manière générale, copier un objet contenant dans ses membres ou sous-membres une ''RegExp'', ''Date'' ou ''Function'' ne fonctionne pas.		Attention cependant, ces fonctions échouent parfois à copier certains objets de type natif. Par exemple, dans ''JQuery'', copier une expression régulière ne fonctionnera pas, et de manière générale, copier un objet contenant dans ses membres ou sous-membres une ''RegExp'', ''Date'' ou ''Function'' ne fonctionne pas.

Lapin : les closures

2009-09-14T00:12:01Z

les closures

Modifications en cours

Lapin : S'affranchir de this

2009-09-13T23:27:35Z

S'affranchir de this

← Version précédente		Version du 13 septembre 2009 à 23:27
Ligne 55 :		Ligne 55 :
	<javascript>document.body.addEventListener('click', function(evt){ alert(this.nodeName); };		<javascript>document.body.addEventListener('click', function(evt){ alert(this.nodeName); };
	// un clic sur la page affichera "body"</javascript>		// un clic sur la page affichera "body"</javascript>
		+
		+	=== s'affranchir de '''this''' ===
		+
		+	Etant donné la différence entre le '''this''' JavaScript et le '''this''' tel qu'il est admis dans d'autres langages orientés objet, beaucoup de programmeurs utilisent ''self'' comme référence à l'objet courant.
		+
		+	Il suffit de procéder ainsi dans le constructeur de l'objet :
		+	<javascript>function Truc(){ // constructeur
		+	var self = this;
		+	this.param = 5;
		+	this.getParam = function(){ return self.param; }
		+	}
		+	var mon_truc = new Truc();
		+	mon_truc.getParam(); // renvoie bien sur 5
		+	fnp = mon_truc.getParam;
		+	fnp(); // renvoie aussi 5 !</javascript>
		+
		+	En effet, dans la fonction ''getParam'', ''self'' fait référence au ''this'' en vigueur lors de la construction de l'objet, soit l'objet lui même.
		+
		+	Mais la vraie question est : comment ''getParam'' peut-il faire référence à une variable qui n'est pas dans sa portée, et qui plus est dans un bloc qui a terminé de s'exécuter depuis ?!
		+
		+	Ceci est possible grâce (ou à cause, selon votre humeur) aux ''closures'', que nous verrons dans le chapitre suivant.

Lapin : this

2009-09-13T23:03:13Z

this

← Version précédente		Version du 13 septembre 2009 à 23:03
Ligne 29 :		Ligne 29 :

	Dans la fonction ''g'', la référence est trouvée dans la portée de ''g'', et masque celle du ''Global Object''.		Dans la fonction ''g'', la référence est trouvée dans la portée de ''g'', et masque celle du ''Global Object''.
		+
		+	= What the hell is '''this'''??? =
		+
		+	En voilà un mot qui fait peur. Quand utiliser this ? Que représente-t-il ?
		+
		+	'''this''' dans le ''Global Scope'' fait référence au ''Global Object'' (l'objet ''window'' dans un navigateur)
		+
		+	'''this''', utilisé au sein d'une fonction, fait référence à l'objet sur lequel a été appelée la fonction.
		+
		+	<javascript>Tablo = { _tab: [1, 2, 3, 'soleil'] };
		+	Tablo.getVal = function(index){ return this._tab[index]; }
		+	Tablo.getVal(3); // return 'soleil' :)</javascript>
		+	'''this''' fait référence à l'objet ''Tablo'' sur lequel à été appelée la fonction ''getVal''.
		+
		+	Définissons maintenant une référence vers la fonction :
		+	<javascript>fn = Tablo.getVal;
		+	fn(3); // Erreur: this._tab is undefined :(</javascript>
		+	Comme on l'a vu plus haut, ''fn'' est une propriété du ''Global Object''. '''this''' fait donc ici référence au ''Global Object'' ! Et le ''Global Object'' n'a aucune propriété ''_tab''.
		+
		+	Heureusement, '''this''' peut être redéfini à la main avec ''call'' (ou ''apply'') :
		+	<javascript>// Appeller fn dans le contexte de Tablo (pour que this = Tablo) :
		+	fn.call(Tablo, 3); // return 'soleil' :D</javascript>
		+
		+	Dans les ''EventListener'' appelés depuis la page web, '''this''' fait référence à l'objet DOM ayant reçu l'évènement :
		+	<javascript>document.body.addEventListener('click', function(evt){ alert(this.nodeName); };
		+	// un clic sur la page affichera "body"</javascript>

Lapin le 13 septembre 2009 à 22:37

2009-09-13T22:37:56Z

Nouvelle page

JavaScript est décrit comme un des langages les plus difficiles à maîtriser.
D'un autre coté, son modèle objet est d'une simplicité et d'une puissance remarquable.
A la base des sites web dynamiques, c'est un outil indispensable pour faire plein de zolis trucs tout mignons.

Cet article s'adresse à des personnes qui connaissent les bases de JavaScript, et qui souhaitent le maîtriser d'avantage.

= ''Global Object'' et ''Global Scope'' =

Le ''Global Object'' est, dans le contexte d'une page web, l'objet ''window''. Toute propriété ou méthode utilisée sans avoir spécifié son objet fait référence au ''Global Object'' :

<javascript>hello_world = "Bonjour";
obj = {f:function() { return hello_world; }};
alert(obj.f()); // affiche "Bonjour"</javascript>
''hello_world'' et ''obj'' deviennent des propriétés de ''window''.
''alert'' est une méthode de window.

Le ''Global Scope'' est la portée la plus large d'un programme. Toute variable déclarée en dehors d'une fonction est dans le ''Global Scope''.

<javascript>var hello_world = "Bonjour";
obj = {f:function() { return hello_world; }
g:function() { var hello_world = "Salut"; return hello_world; }
};
alert(obj.f()); // affiche "Bonjour"
alert(obj.g()); // affiche "Salut"</javascript>

La première variable ''hello_world'' est dans le ''Global Scope''.

Dans la fonction ''f'', la référence à ''hello_world'' est d'abord cherchée dans la portée de ''f'' (non trouvée), puis remonte la ''Scope Chain'' d'un niveau, et trouve la variable dans le ''Global Object''.

Dans la fonction ''g'', la référence est trouvée dans la portée de ''g'', et masque celle du ''Global Object''.