Javascript comme vous ne l’avez jamais vu !

Javascript comme vous ne l’avez jamais vu !

sommaire :

  1. Prototype
  2. La variable native : arguments
  3. Attention à la portée des variables
  4. Les objets anonymes
 

Le Javascript est souvent considéré à tord comme un langage jouet, alors qu’il offre d’énorme possibilités.
Nous allons voir dans cet article des fonctions que vous avez jamais soupçonné l’existence ainsi que des façons de développer propre à JS.

Vous êtes prêt à avoir un regard nouveau sur le javascript ? Alors c’est parti :)

Prototype

Vous avez jamais entendu parler d’héritage en JS ? C’est normal, puisque nous sommes dans un langage de prototype. Mais nous avons autre chose qui remplace le système d’héritage ; l’ajout de propriété.

Voici une chaine toute simple :

var sMoi = 'Roul';



Nous allons ajouter une fonction à notre chaine. Pour cela nous allons ajouter une propriété à au prototype String. On peux dire que le prototype est la structure de l’entité concerné (String).

Cela va donner :

String.prototype.direBonjour=function(){
	return 'Bonjour ' + this.valueOf();
};

Pour faire appel à cette fonction il suffit de faire :

var sMoi = 'Roul';
alert(sMoi.direBonjour());

Le navigateur affiche :

javascript prototype

javascript prototype

Pas mal, non ? :)

Si vous ne connaissez pas, je vous conseille d’avoir toujours sous la main le site de w3schools qui contient la référence complète du javascript.

Un autre exemple plus complexe :

On va adapter la méthode array_map de php (Applique une fonction sur les éléments d’un tableau) pour
les tableau JS.

Array.prototype.map= function(fx)
{
	if (0 == this.length)
		return undefined;

	for (var index = 0; index < this.length; ++index)
		this[index] = fx(this[index]);
	return this;
}

alert([1, 2, 3, 4, 5].map(function(iNb)
{
	iNb = parseInt (iNb, 10);
	return (iNb * iNb);
}));

Voilà le rendu :

js prototype

js prototype

Vous êtes toujours là ? On peut passer à la suite. :)

La variable native : arguments

arguments est une variable locale créer nativement dans une fonction. Les arguments de la fonction y sont stockés. Cela peu être pratique pour certaines fonctions.
Voici un exemple :

function getSum() {
	var iSum =0;
	for (var iCompt = 0; iCompt < arguments.length; ++iCompt)
		iSum += arguments[iCompt];
	return iSum;
}

alert(getSum(1,2,3,4,5,6));

Le résultat :

js prototype

js prototype

Attention à la portée des variables

Il faut bien faire attention de bien déclarer vos variables, parce que vous risquez d’avoir des surprises.
Voyez l’exemple :

function getCalc(iEntierA)
{
	iEntierA = iEntierA + 2;
	iResultat = iEntierA * 2;
	var EntierB = 3;
	return iResultat;
}

var iResultat = 8;
var iEntierA = 6;
var iEntierB = 4;

document.write('iResultat = ' + iResultat + '<br/>');
document.write('iEntierA = ' + iEntierA + '<br/>');
document.write('iEntierB = ' + iEntierB + '<br/>');
document.write('--------------------------<br/>');
document.write('getCalc(1) = ' + getCalc(1)+ '<br/>');
document.write('--------------------------<br/>');
document.write('iResultat = ' + iResultat + '<br/>');
document.write('iEntierA = ' + iEntierA + '<br/>');
document.write('iEntierB = ' + iEntierB + '<br/>');

Voici le rendu :


iResultat = 8
iEntierA = 6
iEntierB = 4
————————–
getCalc(1) = 6
————————–
iResultat = 6
iEntierA = 6
iEntierB = 4


On voit clairement que iResultat est modifiée et qu’elle a prit la variable de la fonction.

Mais pourquoi ?

Comme elle n’a pas été déclarée localement dans la fonction (comme EntierB ), Javascript la retrouvée dans les variables globales. Et l’affectation de la nouvelle valeur a touchée la variable global.

Et iEntierA ? Comment ça ce fait qu’elle ne soit pas modifiée ?
Comme elle est en paramètre de la fonction getCalc, la déclaration se fait implicitement.

Les objets anonymes

Les objets anonymes sont des objets très flexibles où l’on peut ajouter toutes sorte de propriétés.

Voici une utilisation utile dans une fonction de ces objets :

function getPresentation(oMe)
{
	undefined === oMe.prenom ? 0 : alert('nom : ' + oMe.prenom);
	undefined === oMe.nom ? 0 : alert('nom : ' + oMe.nom);
	undefined === oMe.age ? 0 : alert('age : ' + oMe.age);
}

getPresentation({prenom: 'Yann', age: 26});
getPresentation({prenom: 'Romain'});

Eh voilà, on a vu quelques notions méconnues de javascript. :)

Si vous avez des remarques où des interrogations sur le JS, n’hésitez pas à nous le faire partager :)

Note de l'article




1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, moyenne: 3,22 max : 5)
Loading ... Loading ...

  1. passepied Says:

    Cool, j’ai appris quelques petits trucs

Donner votre avis :