Waanser » Général

Javascript comme vous ne l’avez jamais vu !

roul — Mon, 18 May 2009 15:01:25 +0000

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

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

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

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 + '
');
document.write('iEntierA = ' + iEntierA + '
');
document.write('iEntierB = ' + iEntierB + '
');
document.write('--------------------------
');
document.write('getCalc(1) = ' + getCalc(1)+ '
');
document.write('--------------------------
');
document.write('iResultat = ' + iResultat + '
');
document.write('iEntierA = ' + iEntierA + '
');
document.write('iEntierB = ' + iEntierB + '
');

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

script.aculo.us. redimension fenêtre

roul — Wed, 25 Mar 2009 14:27:53 +0000

Redimensionner une fenêtre donne toujours un peu effet user-frendly sympa pour un site web.
Nous allons voir pas à pas comment l’intégrer à vos pages (avec une petite aide de script.aculo.us).

Mise en place des divs

Cette étape c’est la plus simple.

Dans le head, il faut juste charger les librairies script.aculo.us.

On va ajouter nos fonctions sympa pour l’effet drag and drop.

Là on prépare notre CSS :

Maintenant on créer nos divs (dans le body)

Et on affecte à nos div la fonction draggable (sinon sans ça, nous pourrions pas déplacer nos divs).

Voila ce que ça va donner au final : sur ce lien

Bon tout est prêt, on va pouvoir s’attaquer au plu dur :p

Agrandir une fenêtre

Dans cette exemple c’est la petite div rouge qui va définir la taille de la plus grosse.

Mais comment on va procéder roul ?

C’est pas compliqué, quand l’utilisateur va déplacer la div rouge, au moment de relâcher le bouton de la souris, le javascript va récupérer la position de la souris et va élargir la fenêtre (le div rose) jusqu’à cette position.

En traduction html ce la va donné :

envent : c’est les évènements utilisateur comme des clics de souris ou des entrées clavier.
Nous, ce qui va nous intéresser, c’est la position du curseur.

function UpdateDiv(e,boiteDim){
    var iPosY = e.pageY; // position ordonnée du curseur
    var iPosX = e.pageX;  // position abscisse du curseur
    alert('iPosY : '+iPosY+"\n"+'iPosX : '+iPosX)
    affiche(boiteDim);
}

Voila ce que cela doit afficher :

Le code source est ici

dimessionner notre div

Pour modifier la taille de la fenêtre, on va toucher au style.
pour récupérer le style en javascript il faut utiliser :
document.getElementById(ID).style

Après pour définir les attributs, il faut tout simplement utiliser le .
document.getElementById(‘boite’).style.width correspond à la propriété width du style du div boite

Voila ce que la va donner :

function UpdateDiv(e,boiteDim){
    var iPosY = e.pageY; // position ordonnée du curseur
    var iPosX = e.pageX;  // position abscisse du curseur
    var oStyleToMove = document.getElementById(boiteDim.id+'ToMove').style;
    // oStyleToMove le style de la div boiteDimToMove

    oStyleToMove.width = iPosX; // on élargi la div
    oStyleToMove.height = iPosY; // on allonge la div
    cache(boiteDim);
}

Le code source est ici

Ça fonctionne seulement si on bouge pas la fenêtre (div rose) !

Oui en effet ce script ne prend pas en compte de l’emplacement de la fenêtre, pour son redimensionnement.
Nous allons corriger cela. Pour connaitre la dimension de la fenêtre nous allons soustraire la position de la fenêtre à celle du curseur. (pas besoin d’être fort en math ^^)

Pour récupérer la position de la fenêtre nous allons concentrer sur son style (plus précisément à la propriété top et left).
oStyleToMove.top
oStyleToMove.left

on va afficher ces variables :

alert('Y : '+oStyleToMove.top+"\n X : "+oStyleToMove.left);

soustraction

On voit que le nombre est du type XXpx. On ne peut pas faire de calcul avec ce type de chaine.
On va donc supprimer ces px avec l’aide d’une expression régulière.

    // on enlève le px au coordonnée de la fenêtre
    var oExp =new RegExp("px", "g");
    var sTop = oStyleToMove.top.replace(oExp,'');
    var sLeft = oStyleToMove.left.replace(oExp,'');

On a plus qu’à faire la soustraction :

    var iPosY = e.pageY - sTop; // position ordonnée de la fenêtre
    var iPosX = e.pageX - sLeft;  // position abscisse de la fenêtre

Le code source :
c’est là

Et voila, maintenant nos utilisateurs peuvent redimensionner leur fenêtre en quelque clics

Pour aller plus loin

Je me suis aperçus que le petit cadre rouge n’est pas exactement coller en bas à droite.

Pour réajuster le tir, on va mettre à zero le style left et top (qui est utilisé par script.aculo.us.)

voici la correction :

 var oStyle = boiteDim.style;
    oStyle.marginLeft=iPosX- boiteDim.offsetHeight;
    oStyle.marginTop=iPosY- boiteDim.offsetWidth;
    oStyle.left=0;
    oStyle.top=0

Ce qui va donner au final ce code.

Compatibilité avec Internet Explorer

Internet Explorer nous facile vraiment pas le vie. nous allons voir comment rendre ce script compatible avec
IE.

Pour récupérer la position du curseur cela change :

var Xposition = (navigator.appName.substring(0,3) == "Net") ? e.pageX : e.clientX ;
var Yposition = (navigator.appName.substring(0,3) == "Net") ? e.pageY : e.clientY ;

et pour la position de la petite div

  if (navigator.appName.substring(0,3) == "Net")
    {
    	oStyle.marginLeft=iPosX - boiteDim.offsetHeight;
    }else
    {
    	oStyle.marginLeft=iPosX;
    }

Voila la version final compatible Internet Explorer

Ajax en toute simplicité

roul — Fri, 27 Feb 2009 17:58:32 +0000

L’Ajax comment cela fonctionne ?

Dès qu’un événement JavaScript se produit sur la page (ex : quand on clique sur un bouton),
L’ajax va faire appel à un code php. Ce code php va faire un traitement (ex : rechercher une liste de client). Il va renvoyer le résultat au javascript. Et Celui-ci va ensuite l’afficher.

Le jQuery c’est quoi ?

Le jQuery est un framework Javascript libre qui porte sur l’interaction entre JavaScript (comprenant l’AJAX) et HTML, et a pour but de simplifier des commandes communes de Javascript.

En route !

Quoi déjà ? Eh oui, dans cette documentation, nous allons voir directement l’utilisation de l’Ajax à travers un exemple concret en évitant les explications longues et fastidieuses.

Mise en situation :

Pour une école nous devons développer une page où l’instituteur pourra afficher les notes de chaque élève pour chaque matière.

Oh lala, ça va nous donner beaucoup de boulot tout ça ! Pas de panique les amis j’ai déjà tout préparé, il suffit juste de télécharger le pack :ecole
Vous le mettez dans votre dossier www.

Dans un premier temps, il faut créer une base de données ecole. Une fois ceci fait, il suffit de lancer le script ecole.sql dans phpmyadmin. Maintenant, on peut ouvrir notre page dans notre navigateur.

Voila notre belle page :

ajax

L’utilisation d’ajax dans cet exemple :

A chaque fois que l’utilisateur sélectionnera un élève ou une matière, les notes et la moyenne s’afficheront automatiquement sans rafraîchissement de page.

Dans le code le déclencheur sera donc :