Dator Blog

Les événements en Javascript sont une notion plus qu’obligatoire pour faire des applications dynamiques.

Dans le Javascript basique (sans framework), on peut relever plusieurs évènements comme onBlur, onChange, onClick, onDblClick, onFocus et bien d’autres.

Ces balises se positionnent dans les balise HTML directement .

Par exemple :

MonBouton

Ici, au clique sur le bouton, on va déclencher un évènement Javascript que va lancer la fonction show().

Avec Prototype, nous pouvons assigner des événements lors d’une action sans passer cet événement dans le code HTML.

Cette propriété est : Event.observe() et prends trois paramètres.

Event.observe('monElement', 'Evenement', 'laFonctionALancer')

Et voici un exemple :

Event.observe('button-tag','click',launchUpdate);

function launchUpdate(){
alert('Je vais faire une mise à jour !');
}

Au clique sur l’élément button-tag, on va lancer la fonction launchUpdate . C’est aussi simple que cela.

Pour arrêter d’observer un élément, il suffit de mettre ce bout de code :

Event.stopObserving('button-tag','click',launchUpdate);

Voila ce que l’on peut dire sur l’observateur d’évènement de base de prototype .

• 0 commentaire

Qui ne sais jamais demander si on pouvais envoyer un formulaire sur un page PHP sans rechargement de page ? Moi le premier j’ai toujours rechercher cela mais la plupart du temps cela n’était pas fiable ou pas pratique à utiliser.

Prototype la fait (bien d’autre framework aussi, mais je m’y connais un peu plus en prototype).

Nous allons donc voir, dans ce billet, comment utiliser certaines action de prototype pour agir sur nos formulaires HTML.

Lire le reste de cet article »

• 5 commentaires

Depuis quelque temps je vous parle d’un framework Javascript que j’affectionne tout particulièrement pour sa flexibilité et sa « simplicité» .

Je vous ai montrer comment utiliser quelque éléments déjà intégré à cette librairir mais aujourd’hui nous allons apprendre comment créer ses propres classes avec Prototype.

Et cela a été très bien pensé, en quelque ligne de code nous pouvons créer nos classes avec une simplicité déconcertante. Le but de créer ses propres classes est de pouvoir agir sur des éléments que vous avez besoin pour votre site internet et qui interagisse entre eux.

Ce billet n’est pas là pour faire un rappel de la programmation objet mais uniquement pour vous montrer la simplicité de la réalisation de cette technique de programmation de plus en plus utilisé dans le monde de l’informatique.

Lire le reste de cet article »

• 0 commentaire

Beaucoup d’entre vous m’ont déjà demandé comment mettre à jour un conteneur HTML avec Ajax toutes les « tant»  secondes.

Avec notre framework Prototype, nous avons une méthode de la classe Ajax qui nous permet d’actualiser un conteneur toutes les secondes ou toutes les 3 secondes !

Cette méthode se nomme : PeriodicalUpdater . Cette méthode prend plusieurs paramètres : Le conteneur à actualiser, la page qui recoit la requête AJAX ainsi que plusieurs paramètre comme la méthode d’envoi (GET ou POST) et enfin la fréquence d’actualisation du conteneur . Je sais pas si je m’exprime bien …

Un exemple concret sera peut être un peu plus explicatif :

new Ajax.PeriodicalUpdater('maDiv', '/mapageAjax.php', {
method: 'get', frequency: 3
});

Dans cet exemple , on peut voir que l’on met en paramètre le conteneur (maDiv), la page AJAX (mapageAjax.php), la méthode d’envoi (get), la fréquence d’actualisation (3).

Alors alors, notre ajax va envoyer une requête à la page renseigné toute les 3 secondes et va actualiser le conteneur toutes les 3 secondes !

Simple non?

Bon codage à tous !

• 1 commentaire

Bonjour à tous !

Le second screencast de Dator.fr est déjà là ! Grâce à celui-ci vous aller apprendre à créer une pagination en ajax en utilisant Prototype, PHP, SQL et Ajax !

La vidéo se trouve ici

N’hesitez pas à me dire ce que vous en pensez et surtout me dire si vous n’avez pas compris quelque chose, les commentaires sont la !

Bon « visionnage»  de vidéos !

PS : Je crois que le son n’est pas super bon…

Edit : Voici les sources complètes

• 37 commentaires

Le premier screencast de Dator.fr est arrivé ! Je vais vous expliquer comment utiliser Prototype, Scriptaculous, PHP et une base de données pour réaliser un moteur de recherche en Ajax !

Tout est expliqué dans la vidéo que je viens de finir, je vous explique comment paramétrer le javascript afin de pouvoir envoyer des requêtes AJAX.

La vidéo est ici !

Je vous laisse me dire si ce screencast est réussi … ou pas. Si vous préférez les tutoriaux écrits plutôt que vidéos ? enfin tout ce que vous voulez !

Bonne vidéo et bon développement à tous !

• 20 commentaires