Affinity-web`Blog
L'actu AW au quotidien
17
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
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 : 
Voici le code xHTML/CSS qui va nous servir à faire le 1er exemple :
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.
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.
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.
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 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')
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.
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 :
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 10580 fois
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 1er 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 1er 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 192ème commentaire
135 articles dans la base de données
Archives ...
bonjour moi je connais une adresse mail contact francophone oiu on peut commander s ...
Posté par seb le 11/08/10 à 22:24 sur l'article Acheter ses cigarettes sur internet
bonjour ou on peut acheté des clop en ligne
Posté par nana le 08/08/10 à 16:40 sur l'article Acheter ses cigarettes sur internet
Pour la livraison je compte 2 semaines
J'y suis depuis quelques temps je oeux vous ...
Posté par jean le 07/06/10 à 08:39 sur l'article Acheter ses cigarettes sur internet
Posté par extrem le 28/05/10 à 13:11 sur l'article Digipresse en ligne
Cigarettes bon marché en ligne
Cigarettes bon marché - Les cigaret ...
Posté par 561zeevwi le 03/05/10 à 12:37 sur l'article Acheter ses cigarettes sur internet
Bonjour tout le monde, Merci eMeRiKa pour ce tuto très clair, mais j'aimerai ...
Posté par spykoN le 30/04/10 à 10:45 sur l'article Tutorial : Ajax avec Prototype
Je ne trouve pas de référence à FF comme le principal concurre ...
Posté par eMeRiKa le 18/04/10 à 18:27 sur l'article Google Chrome
Je ne suis pas d'accord sur le fait que Firefox soit le principal concurrent de Chr ...
Posté par Tof le 17/04/10 à 00:51 sur l'article Google Chrome
664 commentaires dans la base de données
Carnet de bord
Singstar : une love story qui sonne faux
Clip the parachute ending - Birdy Nam Nam
Google Street View Slow motion
Cat Shower 2
Wii Kebab
Le Jour du Permis - Facebook
- RT @tuxboard: Nouvelle espèce de poisson découverte : Le Poisson Bogdanoff http://ow.ly/2AqdH
- @_kud c'est quoi/qui ? (j'écoute de la techno HDC pas du métal HDC par contre)
- @Aemaeth13 celle là je m'y attendais non fr.wikipedia.org/wik... :)
- @vlaavlaa ho non ça m'attire pas du tout en concert #trance #électro #hardcore powa !
- @vlaavlaa je plussoie, dommage que vos concerts avec @Aemaeth13 sont pas dans mes gouts musicaux
Chargement en cours!
