JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet - Web 2.0

Programmation Objet en Javascript

julien lavault — Mon, 03 Sep 2007 16:41:00 +0000

Ce tutoriel vous présente la syntaxe de la programmation Objet en Javascript. Pour la petite histoire, le Javascript était le précurseur des langages orienté Objet pour le Web. Décliner en Action Script pour Flash ou il a connu un très grand succès, il a perdu progressivement de sa notoriété au fil des années, mais heureusement avec le Buzz du Web 2.0 et Ajax, ce langage bénéficie d'une seconde vie !

Voici un exemple qui vous montre comme créer vos propres objet en Javascript et les instancier:

            // Object JS
           var monObjet = {

               // Paramètre
               param1: {"x": 0, "y": 0},    // On constate qu'un variable de paramètre peut aussi être un objet
               param2: 2,
               param3: 333,

               // Méthode
               maMethode1 : function (var1, var2) {
                   this['param1'].x = var1;   // On pointe sur le paramètre objet avec des crochets comme dans Flash!
                   this.param2 = var2;         // Poitage classique sur un paramètre
                    alert('Var1: '+var2);
               },

               maMethode2 : function() {
                   var var2 = this['param1'].x;
                    alert('Var2: '+var2);
               },

               maMethode3 : function() {
                   var var3 = this['param3'];
                    alert('Var3: '+var3);
               }

           }

           // Pour instancier un objet 'monObjet' et lui appliquer des méthode
           monObjet.maMethode1(100,200);
           monObjet.maMethode2();
            monObjet.maMethode3();

Comme vous pouvez le constater, ce n'est pas très compliquer, mais il y a beaucoup de mauvaise utilisation du Javascript qui porte souvent à confusion. Mais cet exemple illustre la véritable syntaxe orienté objet du Javascript, couplé avec Mootools, vous allez vraiment avoir un grande liberté d'action un fois ce principe maitrisé !

Nouveau blog JFLAD

julien lavault — Sat, 11 Aug 2007 12:31:00 +0000

Nous sommes heureux de vous présentez le nouveau blog de l'agence JFLAD! Sa vocation première s'orientera dorénavant vers l'exposition des travaux de R&D de l'agence, avec comme centre d'intérêt les nouvelles technologies de l'Internet et notamment le Web 2.0 et Ajax!

A noté que les Flux RSS ont également changer d'adresse, cliquez içi pour vous ré-abonnez.

Ce blog sera compléter d'un centre de ressource public qui devra voir le jour d'içi la fin de l'année.

Beaucoup d'amalgame dans le mot Ajax

julien lavault — Wed, 08 Aug 2007 17:45:00 +0000

A force de m'intéresser de très prêt à Ajax, je constate qu'il y énormément d'amalgame de fait à ce sujet! En effet, beaucoup pense que faire une requête en httpRequest au onclick d'un bouton constitue de l'Ajax. Hors la véritable utilisation de Ajax est véritablement ailleurs, la subtilité réside de faire un interface Web dont toute l'interactivité Javascript (dont les transferts asynchrone de donnée) sont Indépendante de l'application principale, c'est à dire que si le site le client ne possède pas Javascript, le site marche quand même normalement. Cela va plus loin, car cette méthode permet également de référencé les contenus des pages même si elles sont chargés de manière asynchrone!

Il faut que le document XHTML ne possède aucun script Javascript dans le body, mais juste l'appelle au librairie utilisées dans le header.

La technique est simple pour faire ceci, il faut utilisé les gestionnaires d'évènements ainsi que les sélecteurs d'éléments. Ainsi un site traditionnel pourra ce voir gréfer un ensemble évènementiel qui permettra de rendre un interface Web interactive. Le seul supplément sera de crée un fichier 'dataTransfert.php' qui transféra les templates de contenu. Autrement tout le reste sera simplement des librairie J avascript qui déclencheront des actions suivant un système évènementiel.

Voici un exemple de ce qu'il ne faut pas faire (gestionnaire d'évènement directement dans le document XHTML):

<p id="monBouton" onclick="maFoncitonJs();">Cliquez moi</p>

Voici le même exemple, mais correcte cette fois ci (fichier javascript inclus dans le header):

$'(monBouton').addEvent('click', function(){
// Contenu de ma fonction
});

Ce principe est la base, à partir de découle tout le reste, le Blog JFLAD vous présentera ultérieurement d'autres techniques pour faire des transferts asynchrone de données depuis une page traditionnelle en gardant une lisibilité dans les moteurs de recherche!

Je vous conseil fortement l'utilisation du framework Mootools dont j'ai déjà fait l'éloge dans de précédent billet, ce framework est vraiment sur-puissant, et possède toutes les fonctionnalités imaginable pour faire de l'Ajax et rendre une application Web riche version Web 2.0.

Mootools confirme ses bonnes performance

julien lavault — Mon, 25 Jun 2007 15:34:00 +0000

Mootools, la librairie Javacript Web 2.0, confirme ses très bonnes performances.

En effet, l'application slickspeed permet de tester les librairies Javascript bien connues: prototype, jQuery 1.1.2, MooTools 1.2, ext1.1b1, cssQuery 2.02 et dojo query. Les tests permettent de tester la vitesse d'exécution et la validités des scripts. Les résultats obtenus sont très favorable à Mootools, ce qui confirme le sérieux et la qualité de cette librairie.

Dans un prochain billet, un exemple d'utilisation avec Ajax.

Ajaxload préchargement en AJAX

julien lavault — Fri, 09 Feb 2007 10:11:00 +0000

Pour faire des pré-chargements en Ajax à la sauce Web 2.0. La méthode est très simple, faire une barre de progression en gif animé! Le site ajaxload propose un générateur de divers gif de pré-chargement bien pratique. A vous de créer !

Scriptaculous la librairie javascript tendance

julien lavault — Wed, 07 Feb 2007 18:14:00 +0000

Un peu d'interactivité dans les pages Web statique à la sauce Web 2.0. Pour ce qui ne connaisse pas encore la librairie Javascript scriptaculous, cette librairie sert à manipulée vos objets (<balise>) du dom avec une interactivité hors du commun et à faire des applications en Ajax. Je l'utilise tellement ces derniers temps et c'est d'ailleurs devenu une des spécialités de JFLAD, il était donc naturel que je contribue à sa promotion. Ces scripts de qualités apportent une véritable valeur ajoutée à une page Web statique! Il permet également de facilité la gestion de donnée dans les back-offices, je pense notamment à la gestion simplifier du glisser déposé. Bref une multitudes d'outils à adapté suivant les besoins!
En plus du glissé déposé, il est également possible de faire des transfert de données en Ajax, des effets graphique sur les objets du Dom, des scroll-bars personnalisées...

Voici quelques exemples qui illustreront plus explicitement ma description:

Finalement l'interactivité ne rime par forcément avec Flash!!! Son utilisation est vraiment très simple et d'une très grande adaptabilité. J'espère que j'aurais contribué à faire de nouveau adeptes.

Focus sur les Web 2.0

julien lavault — Sat, 11 Nov 2006 10:26:00 +0000

On parle beaucoup du Web 2.0, beaucoup d'amalgames sont faits sur ce sujet. Différents avis sur le Web 2.0 s’opposent : l’arrivée de nouvelles technologies (Ajax, RSS, XHTML…), la standardisation des normes, le partage de connaissances, la personnalisation des services Web par l’internaute, la syndication des contenus… Ces différents points de vues on tous une part de véracité, néanmoins il me semble que beaucoup de ces nouvelles technologies sont loin d’être novatrices; en effet les Flux RSS ou encore l’Ajax existent depuis plus de 5ans, ce n’est que leur utilisation qui explose réellement en ce moment.

Certes le Web évolue, mais pas aussi vite qu’on semble le dire, il existe un réel temps d’adaptation et d’absorption des nouvelles technologies qui évoluent plus vite que les mentalités . Mais quelques grosse enseignes, que je ne citerai pas …, arrivent à tirer profit de ces nouvelles technologies et à faire gonfler leurs chiffres d’affaires... Beaucoup de personnes parlent de Ajax comme le Web 2.0, la révolution de l’Internet ! Je ne comprends absolument pas ce point de vue car Ajax n’est en aucun point une révolution, car d‘une par Ajax n’est pas nouveau et d’autre part la méthode Ajax (transfert asynchrone de données sans rechargement de page) est déjà très répandu à travers Flash et d’autres technologies coté client !

Pour revenir au sujet, je dirais pour conclure que le Web 2.0 est avant tout une méthodologie qui repose sur l’implication, la participation de l’internaute à la vie communautaire d’un site Internet. L’internaute devient acteur et non plus un simple visiteur, voici pour moi la vrai définition du Web 2.0. L’émergence de nouvelles technologies n’est qu’une conséquence de l’évolution des mentalités vers ce nouveau principe et non pas l’inverse !

Donnez vos réactions, vos avis m’intéressent !