X

JavaScript

Développement parlant..., La boîte à menthol..., Open Source, Projecteur sur..., Surfez léger...
ZendX_jQuery : un helper qui joint l’utile à l’agréable…
18 novembre 2008 à 18:01 0
La version 1.7 du Zend Framework livrée hier apporte, comme toutes les précédentes, des nouveautés très intéressantes. Il y a quelques temps, des interrogations étaient sorties des débats quant au choix de Dojo en qualité de framework JavaScript intégré au Zend Framework... Si la concurrence en ce domaine est rude, force est de constater qu'une librairie sort un peu du lot : jQuery. Les développeurs du Zend Framework l'ont bien compris et proposent désormais une aide de vue très pratique qui facilitera l'intégration des composants de jQuery et UI jQuery... ZendX_jQuery s'utilise aisément sur un layout ou une vue et dispose même de décorateurs pour les formulaires... Notez que le système du Zend Framework permet une mise à jour de la librairie sans risque pour l'application dépendante. Prenez tout de même le temps de lire le changelog, on ne sait jamais...
LIRE LA SUITE...
Développement parlant..., La boîte à menthol..., Open Source, Surfez léger..., Un monde économique...
Google Chrome : impressions…
3 septembre 2008 à 18:13 7
Lancé hier soir en phase bêta, le petit dernier de la famille Google suscite beaucoup d'intêret. D'abord parce que la firme a la fâcheuse habitude de lancer des produits qui marchent et ensuite parce que ce butineur simple et léger pourrait changer le sens du mot surf... Sans aller jusqu'à la révolution, Google Chrome brille par sa rapidité. Le gain de temps sur le chargement des API bourrées de JavaScript est flagrant! Mais... Ça cale un peu pour le Flash, la gestion des pop-ups et autres... Du point de vue de la navigation pure et simple, c'est pas mal du tout. Ce billet à d'ailleurs été rédigé via ce nouveau navigateur en guise de test. C'est ce qui concerne les conditions applicables ainsi que la licence que ça se gâte un peu... On n'est plus sûr de la destination des requêtes que l'on envoie au serveur à chaque clic de souris... Comme toujours, Google impose sa solution grâce au pouvoir qu'il possède sur le web. Attention tout de même à ne pas tomber dans un piège bien dissimulé. Big brother is watching you...
LIRE LA SUITE...
En programmant..., La boîte à menthol..., Open Source, Projecteur sur..., Surfez léger...
jQuery : un ami qui vous veut du bien…
12 avril 2008 à 15:00 1
AJAX... Oui mais encore? Un produit ménager? Non, une technologie de développement! Il faudrait arrêter de la faire cette blague! Les lecteurs vont s'en lasser à force... Bref, s'il est un mot à la mode dans les open spaces des représentants phares du Web 2.0, c'est bien "AJAX"... Comme ça, pour les non aguerris, ça ne veut rien dire. Mais avec un exemple, tout devient plus clair... Un exemple simple (et utile) peut-être trouvé ici. Un exemple parmi d'autres bien entendu... AJAX côté utilisateur, c'est user friendly et c'est sexy. Mais c'est toujours ultra dépendant de l'activation de JavaScript sur la machine cliente (99% des cas). AJAX côté développeur, ça peut devenir un casse-tête. D'abord parce que ce n'est pas si simple que cela à mettre en place. Ensuite parce que les navigateurs n'interprètent pas les événements JavaScript de la même façon. Heureusement, la communauté de développeurs attachés à l'Open Source se distingue toujours par la mise en ligne de librairies qui valent le détour. jQuery en fait partie (oui, l'introduction du billet était longue!). jQuery, c'est un peu l'AJAX en un seul fichier. A l'aide de sélecteurs, on manipule aisément le contenu d'une page web. Gestion des événements, des requêtes, des attributs CSS... Tout (ou presque) y est! Un exemple simple peut permettre de comprendre comment jQuery transforme quinze lignes de code en une seule. Admettons que l'on ait un div visible :

Ici le contenu.
Avec les paramètres CSS suivants :
#layer {
     color : #000;
     cursor: pointer;
}
Avec jQuery, on peut faire disparaître ce div (en une ligne) :
$('#layer').click(function() {
     $('#layer').hide();
});
Ici, c'est un événement clic sur le div qui le fait disparaître. Mais on peut très bien gérer d'autres événements ou encore modifier des divs (ou toute autre balise) voisins, parents, etc. On peut également modifier les attributs CSS du div :
$('#layer').click(function() {
     $('#layer').css('color', '#fff');
});
Ici, on change la couleur du texte du div suite à un événement clic. Bien entendu, il ne s'agit là que d'exemples minimalistes de ce que permet jQuery. La documentation officielle détaille un peu plus les possibilités offertes par cette librairie. Pour les anglophobes, il existe également une très bonne documentation en français. Notez que jQuery, comme le veut la tradition du monde Open Source est ouvert aux plugins en tous genres... Inutile de perdre du temps à écrire et réécrire vos fonctions, adoptez jQuery, cette librairie fait tout pour vous!
LIRE LA SUITE...
Au travail !, En programmant..., La boîte à menthol..., Surfez léger...
Traîter une chaîne à la volée…
26 mai 2007 à 15:16 9
Uniformiser les données saisies par l'utilisateur d'un formulaire est généralement l'une des principales étapes de la conception d'une application. On formate, on normalise afin d'obtenir une restitution claire et uniforme. Prenons l'exemple d'un formulaire dans lequel il faudrait renseigner le nom, le prénom et la date de naissance. Des "règles" sont généralement utilisées. On aura ainsi besoin du nom en majuscules (ex : TORVALDS), du prénom avec l'initiale en majuscule (ex : Linus) et de la date de naissance sous la forme jj/mm/aaaa (ex : 01/01/1970). Plusieurs solutions de traitement existent pour ces trois champs. Suivant le langage utilisé, bien sûr, mais également suivant le moment du traitement. En PHP, on traite généralement les chaînes avant leur envoi dans la BDD. Ce procédé est complètement transparent pour l'utilisateur. Malheureusement, la localisation de l'application peut induire de plus ou moins nombreuses lignes de code. La gestion des majuscules accentuées n'étant pas encore optimale. On peut également opter pour un traitement à la volée. C'est-à-dire que la chaîne se modifie au fur et à mesure que l'utilisateur presse les touches du clavier. En plus d'être très dynamique, cette méthode rassure l'utilisateur et apporte un aspect légèrement plus pédagogique. JavaScript (parmi d'autres) le permet. Dans le cas du nom patronymique, que l'on voudrait voir apparaître en majuscules, deux solutions existent. La première, plus simple, requiert l'insertion de la fonction toUpperCase() dans l'attribut onkeyup de la balise input.
onkeyup="javascript:this.value=this.value.toUpperCase()"
Chaque caractère sera automatiquement converti en majuscule à la volée. Cependant, sur une grosse application, il peut être plus utile de créer une fonction type que l'on appellera pour chaque traitement. Un fichier js contenant toutes les fonctions peut faire l'affaire. Celui-ci contiendra une fonction générale :
function formatToutMaj(objCha) {
var objChaMaj;
objChaMaj = objCha.value.toUpperCase();
objCha.value = objChaMaj;
}
Fonction que l'on appellera à l'aide d'un onkeyup dans la balise input :
onkeyup="javascript:formatToutMaj(this.form.nom)"
Dans ce cas, l'attribut name de la balise input a pour valeur "nom". Ceci explique le this.form.nom... L'utilisation d'une fonction dédiée n'est pas véritablement justifiée dans la plupart des cas. Elle peut, par contre, s'avérer utile dans un souci de clarté ou pour être réutilisée ailleurs. Pour le prénom, la fonction est un petit peu plus complexe. Il faut forcer l'affichage en minuscules avant de mettre en majuscule l'initiale. Jusqu'ici rien de bien compliqué. Mais c'est sans compter sur les prénoms composés (que certains lient par des espaces ou des traits d'union).
function formatInitMaj(objCha) {
var nb;
var objChaTmp;
var tmpStr;
var debStr;
var finStr;
var strLen;
objChaTmp = objCha.value.toLowerCase();
strLen = objChaTmp.length;
if (strLen > 0) {
for (nb = 0; nb < strLen; nb++) {
if (nb == 0)  {
tmpStr = objChaTmp.substring(0, 1).toUpperCase();
finStr = objChaTmp.substring(1, strLen);
objChaTmp = tmpStr + finStr;
} else {
tmpStr = objChaTmp.substring(nb, nb+1);
if (tmpStr == " " || tmpStr == "-" || tmpStr == "_" ||
tmpStr == "/" && nb < (strLen-1)) {
tmpStr = objChaTmp.substring(nb+1, nb+2).toUpperCase();
debStr = objChaTmp.substring(0, nb+1);
finStr = objChaTmp.substring(nb+2, strLen);
objChaTmp = debStr + tmpStr + finStr;
}
}
}
}
objCha.value = objChaTmp;
}
Comme pour le nom, on appellera cette fonction par le biais de l'attribut onkeyup :
onkeyup="javascript:formatInitMaj(this.form.prenom)"
Enfin, et pour terminer, on peut traiter la saisie des dates au format jj/mm/aaaa en demandant à l'utilisateur de ne taper que les chiffres (ex : 01011970).
function formatDate(objCha) {
var objChaTmp;
var debStr;
var reg;
var separ;
var strLen;
separ = "/";
debStr = objCha.value;
strLen = debStr.length;
if (strLen == 2 || strLen == 5) {
objChaTmp = debStr + separ;
} else {
objChaTmp = debStr;
}
objCha.value = objChaTmp;
}
Une fonction que l'on appellera encore et toujours de la même façon :
onkeyup="javascript:formatDate(this.form.date)"
Ici, on ajoute un "/" de séparation après le jour et après le mois. L'attribut maxlenght="10" de la balise input permettra de verrouiller encore plus le format de la date. Il existe évidemment des moyens plus souples, plus rapides pour arriver aux mêmes résultats. Ces trois fonctions ne sont que des exemples. Elles sont, toutefois, faciles à décoder pour un débutant et faciles à adapter... Attention tout de même ; le JavaScript s'exécute côté client et non côté serveur comme le PHP. Les réglages personnels peuvent entraver le bon fonctionnement de certaines fonctions. Veillez également à ne pas alourdir vos applications avec des bouts de code plus inutiles les uns que les autres...
LIRE LA SUITE...
Au travail !, La boîte à menthol..., Surfez léger...
On touche au but!
20 février 2006 à 2:31 6
Je vois presque le bout du tunnel. Cerruti Andorre est en très bonne voie. A moins d'une catastrophe interplanétaire, le site dans sa version Fr devrait être terminé mercredi et peut-être même mardi (avec de la chance). Le catalogue et l'inscription des membres sont techniquement bouclés depuis quelques minutes. Tout s'administre intégralement depuis le site. La personne que j'avais mis à contribution a terminé le contenu de la partie défilés. Son travail, mêlé à quelques morceaux de JavaScript, donne un résultat très sympathique. Demain, il faudra terminer les textes publicitaires et commencer à entrer les articles de la collection dans la base de données. On va y arriver!
LIRE LA SUITE...