Affinity-web`Blog

L'actu AW au quotidien

Juil 07

Débuter avec PrototypeJS

Posté à 16:55 par eMeRiKa - Catégorie : Programmation

Tuto Prototype, tutoriaux prototype

Cet article a pour but de présenter Prototype après une rapide introduction sur le javascript et les frameworks existants.

Il s'agit également de la première étape d'une série d'articles expliquant la conception d'un système de vote en ajax!

Les frameworks Javascript

JavaScript (Js) est un langage de programmation de type script orienté objets, principalement utilisé dans les pages Web. Il ne faut pas le confondre avec le Java qui n'a rien à voir. Le code javascript est exécuté du coté de l'utilisateur et non sur le serveur comme le php par exemple. Il sert principalement a controler les formulaires modifier la page web (couleurs, images) en jouant sur le CSS ou le DOM (les balises HTML pour faire simple).

Avec la vague des sites Web 2.0 et l'utilisation massive de l'AJAX le javascript revient à la mode. Finit la recopie de bouts de code Js ou la peur de son utlisation.

L'un des principaux moteurs de son utilisation massive actuelle est l'apparition de frameworks javascripts. Bibliothèques de fonctions toutes faites, elles permettent des effets visuels, du drag and drop (glissé déposé), des requètes Ajax et bien d'autres fonctionnalités.

Prototype (couplé à scriptaculous pour les effets...) est l'un des Frameworks les plus utilisés et c'est celui que j'ai choisi.

Sachez qu'il en existe bien d'autres dont :

Aucun n'est réellement meilleur que les autres, il faut faire son choix entre sa facilité d'utilisation, les fonctionnalités qu'il propose, son poids et les ressources disponibles sur le web

PrototypeJs

Logo Prototype

PrototypeJs (également appelé Prototype simplement) est un framework open source (gratuit!!) crée par la communautée de développeur.

Il est téléchargeable à l'adresse : www.prototypejs.org/.

La documentation officielle (en anglais) est accessible sur : www.prototypejs.org/api/.

Prise en main de Prototype

Cet article nécessite des connaissances en xHTML/CSS, JavaScript et DOM. Si vous ne connaissez pas ces langages, de nombreux tutos existent sur Internet.

Récuperez Prototype et copiez le dans un répertoire donné. Créez ensuite un fichier html de test et un fichier javascript qui contiendra les fonctions.

Vou devriez avoir ceci : Fichiers

Voici le code xHTML/CSS qui va nous servir à faire le 1^er exemple :

<html> <head> <title>Prise en main de Prototype</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="fonctions.js"></script> <style type="text/css"> #montexte { color: green; } #montexte:hover { cursor:pointer; } </style> </head> <body> <h3>Test 1 : sélectionner un élément</h3> <p id="montexte" onClick="changeColor('montexte');">Texte en vert devient rouge quand je click dessus!!!</p> </body> </html>

Exemple 1 : Découvrir la sélection d'élément et la définition de style CSS via Prototype

Prototype fournit une alternative à la sélection d'élément document.getElementById('monid') via l'utilisation de $('monid'). Par la suite je n'utiliserai plus que cette méthode.
Pour en savoir plus : Voir sa doc.

De plus pour changer le style, ici la couleur du texte, on n'utilise plus document.getElementById('monid').style.color = 'red'; mais $('monid').setStyle({ color: 'red' });. Cela peut paraitre ici inutile mais lorsqu'on veut ajouter plusieurs propriétés CSS, cela facilite la tache, il suffit de les mettre les une à la suite des autres séparées d'une virgule. (Attention, pensez qu'en Javascript on ne met pas background-color mais backgroundColor, font-size mais fontSize etc...)
Pour en savoir plus : Voir sa doc.

Attention à la syntaxe utilisée par prototype, vous la rencontrerez de nombreuses fois. Ici la fonction setStyle prend entre crochets {} ses différents paramètres. Ils sont séparés d'une virgule!! Le dernier n'en comporte pas. On referme ensuite la parenthèse de la fonction puis insère le ; de fin de ligne.

$(id).setStyle({ color: 'red', backgroundColor: 'yellow', fontSize: '16px' });

Il existe également une fonction getStyle qui récupère la propriété CSS d'un élément. Le code suivant va ouvrir une popup avec la valeur de la police.

var size = $('monid').getStyle('fontSize'); alert(size);

Testez ces fonctions sur le bout de code donné plus haut.

Exemple 2 : Du JavaScript non intrusif, séparer le JS du HTML

Nous allons maintenant adapter le code précédent pour séparer le javascript du xHTML.

Tout comme on évite de mélanger le CSS au HTML, une programmation propre et moderne se doit de séparer le JS du HTML. Prototype gère les evènements event associés aux méthodes observe et element qui vont observer nos actions, récupérer les éléments et déclencher les changements (Couleur du texte ici).

N'hésitez pas à aller lire la doc pour plus d'informations.

Ajoutez le code suivant à la suite de votre fichier HTML.

<p id="changecouleur"> <span id="montexte1">Texte 1 qui va devenir rouge!!!</span><br/> <span id="montexte2">Texte 2 qui va devenir rouge!!!</span> </p>

Dans un premier temps, nous aller définir un évènement qui va observer la page. Il appelera une fonction qui elle définira toutes les actions possibles sur nos éléments.

Event.observe(window, 'load', page_loaded);

Event.observe prend en paramètres, l'élément à observer (ici la page : 'window'), pour quelle action (le chargement : 'load') et la fonction a exécuter ('page_loaded')

function page_loaded(evt) { Event.observe('changecouleur', 'click', changeColor2); }

Ensuite la fonction page_loaded conserve en paramètre l'élément qui a déclenché l'action sous forme d'event, et définit un nouvel évènement déclaré sur le click de changecouleur.

Tous les fils de l'élément changecouleur sont concernés. La fonction changeColor2 est indiquée à la fin.

function changeColor2(evt) { var monid = Event.element(evt); $(monid).setStyle({color = "red"}); Event.stop(evt); }

Event.element(evt) permet de récupérer l'élément DOM (ici l'un des deux spans) qui a déclenché l'action et va changer de couleur. Enfin on stop l'évènement s'il n'est plus éxécuté pour éviter d'encombrer la mémoire du navigateur.

Cette méthode est un peu dur à digérer au début et je vous invite à lire la doc pour plus d'informations. ce qu'il faut retenir c'est qu'on observe la page puis le click en transmettant une variable evt à chaque étape qui va permettre d'effectuer l'action sur le bon évènement.

Exemple 3 : Récupérer tous les éléments d'une classe

Dernier exemple de la prise en main de Prototype, cet exercice est très facile.

Je pense que vous avez du souvent pester contre l'absence de la fonction getElementsByClassName et bien elle existe dans prototype.

Il suffit de faire var mavariable = document.getElementsByClassName('maclass');. Cela retourne un tableau contenant tous les éléments de la classe. Pour plus d'informations : Voir sa doc.

Ajoutez ce code à votre fichier HTML pour faire le test :

<ul id="fruits"> <li id="apples">apples <ul> <li id="golden-delicious">Golden Delicious</li> <li id="mutsu" class="yummy">Mutsu</li> <li id="mcintosh" class="yummy">McIntosh</li> <li id="ida-red">Ida Red</li> </ul> </li> <li id="exotic" class="yummy">exotic fruits</li> <ul> <li id="kiwi">kiwi</li> <li id="granadilla">granadilla</li> </ul> </li> </ul> <p id="selectClass">sélection des éléments de la meme classe</p>

On va donc ajouter un nouvel évènement à notre fonction page_loaded qui va observer le clique sur selectClass et appeler une nouvelle fonction.

Cette fonction va récupérer les éléments de la classe yummy, parcourir le tableau retourné et changez la couleur en rouge.

On peut sélectionner tous les éléments de la page (qui ont cette classe bien sur ^^) avec document.getElementsByClassName ou réduire aux éléments fils en donnant un id $('monid').getElementsByClassName.

Nous voilà arrivé au terme de cet article. J'espère que vous m'avez suivi. Si vous avez des questions, remarques (ou trouvé une faute) n'hésitez pas à laisser un commentaire.

Le prochain article sur Prototype traitera des formulaires et des requètes Ajax.

Les derniers articles de la catégorie : Programmation

Lu 5462 fois

Article Précédent

Commentaires de cet article

"function changeColor2(evt) { var monid = Event.element(evt); $(monid).setStyle({color = "red"}); Event.stop(evt); }"

petite erreur "color = red" => color : red

autrement, tres sympa ton tutoriel :)

#1 Posté par SKiiiiP le 13/06/08 à 13:37, son 1^er commentaire

J'aime beaucoup ce framework mais je ne trouve pas beaucoup de tutos sur la toile, tu saurait nous en faire un assez complet ?

#2 Posté par Ebn le 30/07/08 à 14:20, son 1^er commentaire

Il doit y avoir 3 tutos qui parlent de PrototypeJs sur mon blog. Je te conseille également de lire la doc officielle qui est vraiment super bien faite.

Je n'ai plus trop le temps de dév, et je pense passer à la bibliothèque JS Mootools qui est plus légère et performante que Prototype donc pas de nouveaux tutos PrototypeJs dsl.

#3 Posté par eMeRiKa le 30/07/08 à 15:31, son 153^ème commentaire

Article Précédent : Les flux RSS expliqués

Zend Framework

26 Déce 08

Auto-Entrepreneur : tout savoir

24 Déce 08

Tuto : système de vote Ajax via Mootools

23 Déce 08

eGame, l'aventure commence

18 Déce 08

[MAJ] Microsoft abuse !

17 Déce 08

Blogosphère la mode des concours

07 Déce 08

Le patron de Facebook n'est pas "riche"

04 Déce 08

Ne pas laisser filer ses idées

03 Déce 08

106 articles dans la base de données

Archives ...

Enorme projet et énormément de travail à effectuer. C'est un e ...

Posté par dod le 06/01/09 à 13:28 sur l'article Le programme de Janvier

Merci pour ces infos. Cà m'étonne pas cette histoire de performance ...

Posté par eMeRiKa le 04/01/09 à 22:32 sur l'article Zend Framework

Je bosse avec KohanaPHP depuis un moment, grand frère de CodeIgniter, il est ...

Posté par zim le 04/01/09 à 20:46 sur l'article Zend Framework

Bon courage !

Posté par VuThé le 04/01/09 à 12:55 sur l'article Le programme de Janvier

Super programme ! Si tu as besoin d'un collaborateur pour la partie réf. et/ ...

Posté par Rémy Bigot le 03/01/09 à 17:53 sur l'article Le programme de Janvier

Joli programme ! courage et abnégation !

Posté par weetabix le 03/01/09 à 17:50 sur l'article Le programme de Janvier

Que de bonnes nouvelles alors. =) En espérant que tout ira pour le mieux. ...

Posté par viki53 le 03/01/09 à 17:42 sur l'article Le programme de Janvier

Beau programme ! ça fait plaisir de voir se construire des projet comme &cce ...

Posté par Enneite le 03/01/09 à 17:11 sur l'article Le programme de Janvier

474 commentaires dans la base de données

Rêve des femmes vs Rêve des hommes

Pub Diesel xxx vintage retro sexy

L'auto-entrepreneur, comment ça marche ? par Hervé Novelli

PSY 4 de la rime Luciano

Patrick Sebastien - Ah... si tu pouvais fermer ta gueule...

ITW LeWeb Marc Simoncini (Meetic)

replonge dans le code, ça faisait un bail que j'avais pas tater du PHP ! Et à retrouver l'envie de coder !! Good news vu ce qui m'attend
@kennyfeed eCPM de décembre 0,21 $... C'est la mort adsense, toujours les mêmes pubs et pas tjs ciblées (immobilier pour du jeux-vidéo tss)
@kennyfeed ça fait 10 fois plus pour moi ! Je me méfie du discours commercial du type mais même du 1? le CPM ça me va pour le moment
@kennyfeed ils font l'intermédiaire entre régie pub et éditeurs. Le type au tél m'a parlé de 2 à 3? le CPM. je vais tester 1mois j'te dirai
@kennyfeed t'as déjà testé Gestionpub.com ?

Chargement en cours!