Tutoriel Ajax N°5 : comprendre la bibliothèque Prototype (prototype.js)

////Tutoriel Ajax N°5 : comprendre la bibliothèque Prototype (prototype.js)

Votre formation AJAX avec Objis, spécialiste formation java depuis 2005
Augmentez votre productivité de développeur Ajax en utilisant la bibliothèque Prototype (fichier prototype.js). Découvrez le positionnement, la valeur ajoutée et le contexte d’utilisation de Prototype. Comprenez comment prototype étend le langage Javascript, facilite l’utilisation de DOM et gère la différence entre navigateurs. Comprenez enfin la relation entre prototype et des frameworks Ajax comme script.aculo.us ou OpenRico

Objis, spécialiste de la formation Java, est heureux de vous offrir ce
tutoriel, extrait de séances pratiques de la formation AJAX
dispensée par Objis.

telechargement_pdf_plan_cours.gif
Les + objis

 70% de travaux pratiques

 Clé USB avec tous les outils utilisés + Corrigés TPs

 Bilan pédagogique individuel + conseils

Prérequis, outils et versions

 connaisances langage JAVASCRIPT – (recommandation)

 connaissances DOM (Document Object Model) – (recommandation)

 connaissances XML (eXtensible Makup Language) – ( recommandation)

 connaissances CSS (Cascading Style Sheet) – (recommandation)

telechargement_pdf_bulletin_inscription.gif

Liens utiles

 + de 100 tutoriaux java/jee Objis

 Tutoriaux AJAX Objis

 Objis, spécialiste formation java depuis 2005

 Introduction Javascript orienté Objet (developpez.com)

 Langage de script Ruby

 version 1.6.1 de prototype.js

 Site de Sam Stephenson, créateur de Prototype

 API de Prototype

 (PDF)API de Prototype

 Exemple mise en oeuvre propriété ‘prototype’ Javascript

 Référence Objets Javascript

 Méthodes utilitaires de Prototype

 Types de noeuds Javascript

Objectifs

 Comprendre la valeur ajoutée de la bibliothèque javascript prototype.js (appelée Prototype).

 Voir Ajax en action avec Prototype.

Programme

 Contexte

 Partie 1 : Téléchargement

 Partie 2 : Prototype étend le langage Javascript

 Partie 3 : Prototype étend le navigateur

 Partie 4 : Prototype en action avec Ajax

Durée

30 min.

Définition et objectifs

logo-prototype-jsLe fichier prototype.js (appelé Prototype dans la suite) est une bibliothèque javascript. Son poids est inférieur à 150ko.

Créé par Sam Stephenson, Prototype est née dans un contexte de développement ‘Ajax’ (2005), Prototype fournit des extensions au langage Javascript, au navigateur et à l’objet XMLHttpRequest (étudié dans notre tutoriel Ajax N°1).

 Objectif 1 : faciliter le travail du programmeur Javascript.

 Objectif 2 : augmenter la productivité du programmeur Javascript

Extension du langage javascript

Il peut paraître étrange de dire qu’une bibliothèque étend un langage à partir duquel la bibliothèque est construite. Mais c’est bel et bien le cas comme nous allons essayer de l’expliquer ci-dessous.

Javascript et Ruby

En fait, plusieurs langages de script fournissent des opportunités d’étendre les objets du langage. c’est par exemple le cas du langage de script Ruby. Notez en particuliers que plusieurs mécanismes d’extensions de Prototype sont empruntés à Ruby.

Partie 1 : Téléchargement

 Allez sur le site de téléchargement : http://www.prototypejs.org

tutoriel-bibliotheque-prototype-demo-ajax-1

 Cliquez sur le lien download

tutoriel-bibliotheque-prototype-demo-ajax-2

 Téléchargez la bibliothèque

tutoriel-bibliotheque-prototype-demo-ajax-3

 rangez-la dans répertoire : c:formationajaxoutils

 Faites en une copie dans votre environnement de développement, dans répertoire ‘scripts’ (ici dans répertoire tutoriel2demoajaxprototype)

tutoriel-bibliotheque-prototype-demo-ajax-3bis

 Créez une page incluant le script dans une page (x)html

tutoriel-bibliotheque-prototype-demo-ajax-4

impact de prototype.js sur objet javascript ‘window’

 A l’aide du script suivant (merci wikituto), analysez les propriétés de l’objet window Javascript avant et après l’ajout du script prototype.js

tutoriel-bibliotheque-prototype-demo-ajax-5

Avant l’ajout de la ligne 5

proprietes_window_avant_ajout_prototype

Après l’ajout de la ligne 5

proprietes_window_apres_ajout_prototype

QUESTION : quelles différences ?

 Identifiez 3 nouvelles propriétés

 Recherchez la définition de ces propriéts dans le code de prototype.js

A partir de la documentation des méthodes utilitaires de prototype.js, Identifiez les propriétés suivantes :

tutoriel-bibliotheque-prototype-demo-ajax-6

Partie 1 : Prototype étend le langage Javascript

Abordons les éléments clés du langage et identifions la valeur ajoutée de Prototype.

INFO : pour utiliser au mieux Prototype, une connaissance des éléments clés de javascript sera idéale.
Nous recommandons cette introduction Javascript orienté Objet.

Héritage

La ligne de code suivante crée un objet javascript ;

tutoriel-bibliotheque-prototype-demo-ajax-0

l’objet monObjet possède par défaut :

— plusieurs propriétés et méthodes (comme la méthode toString()),

— un mécanisme d’héritage basé sur la propriété ‘prototype’

— la possibilité d’avoir ‘à la volée’ de nouvelles propriétés et méthodes

tutoriel-bibliotheque-prototype-demo-ajax-01

En utilisant la propriété ‘prototype’ de cet objet, il vous serait possible de créer une hiérarchie d’objets Javascript, un peu comme avec hiérarchie d’objet Java.

Possible mais laborieux…!

Valeur ajoutée de Prototype pour l’héritage Javascript

la bibliothèque Prototype ajoute à notre variable monObjet des capacités qui nous permettront de créer plus facilement et plus naturellement une hiérarchie d’objets.

Fonctions

Les fonctions occupent dans l’univers Javascript une place de premier choix. Tout comme les nombres et les chaines de caractères, ils sont considérés comme des ‘pseudo-objets’.Les fonctions peuvent être référencés directement, passés en tant qu’argument à d’autres fonctions, et être attachés ‘à la volée’ à des objets.

Comprendre les fonctions en Javascript est important pour le développeur Ajax/Web2.0 car ils sont associés au modèle évènementiel de tous les navigateurs.

Valeur ajoutée de Prototype pour les fonctions Javascript

Prototype facilite l’association de fonctions javascript à des objets.

Tableaux

En javascript, les tableaux sont une liste extensible d’éléments ;
Vous pouvez récupérer un élément du tableau ainsi :

 var monElement = monTableau[4];

Vous pouvez faire une boucle sur tous les éléments du tableau ainsi :

for()************

Valeur ajoutée de Prototype pour les tableaux Javascript

Prototype a apporté dans javascript un savoir-faire que posséde la langage Ruby. En particulier, plusieurs opportunité de d’intéragir avec un tableau, en utilisant le Type ‘Enumeration’.

Chaine et nombres

En javascript, les chaines et le nombres sont des pseudo-objets.

 Expliquez le résultat de : alert (« objisspecialistejava ».substring(5,16));

 Expliquez le résultat de : var x=4567 ; x.toExponential();

La plupart des méthodes associées aux chaînes et nombres sont relatives au formatage ou à création contenu HTML.

Valeur ajoutée de Prototype pour les chaines et nombres

Prototype apporte aux chaines et nombres des capacités supplémentaires qui facilitent par exemple :

— le travail avec les couleurs HTML

— l’internationalisation (i18n, multilangue) du texte

A l’aide de la documentation Prototype, expliquez la valeur ajoutée de l’utilitaile $w

Partie 2 : Prototype étend le navigateur

DOM

DOM permet d’exposer les éléments visuels d’une page HTML sous forme d’objet Javascript.

Dans un contexte multi-navigateur, manipuler DOM est un exercice périlleux.

Valeur ajoutée de Prototype pour DOM

Prototype fournit certaines méthodes qui facilitent l’utilisation de DOM.

A l’aide de la documentation Prototype, expliquez la valeur ajoutée de l’utilitaire $ ainsi que de l’objet Element

Formulaires HTML

Les formulaires sont au coeur des applications web

Valeur ajoutée de Prototype pour formulaire HTML

Prototype fournit certains utilitaires qui facilitent le travail avec les formulaires HTML.

A l’aide de la documentation Prototype, expliquez la valeur ajoutée de :
:

— l’utilitaire $F

— la collection de méthodes Form.Element

Evènements Javascript

Les navigateurs n’ont pas la même façon de gérer les évènements qui arrivent dans une page.

Valeur ajoutée de Prototype pour évènements javascript

Javascript gère pour vous les différences d’implémentation de gestion d’évènement des différents navigateurs.

Ajax

Les navigateurs supportent une version ou une autre de l’Objet XMLHttpRequest. Cependant l’utilisation n’est ni aisée, ni intuitive et nécessite une bonne connaissance de l’objet (par exemple connaître que l’état 4 correspond à ‘chargement OK’).

Valeur ajoutée de Prototype pour AJAX

Prototype fournit son propre mécanisme d’héritage pour fournir une hiérarchie de classes , héritant de la ‘classe abstraite’ Ajax.Base :

— Ajax.Request

— Ajax.Updater

— Ajax.PeriodicalUpdater

— Ajax.Responder

Ces classes facilitent le développement Ajax. Cela permet par exemple de coder en une seule ligne la plupart des requêtes Ajax.

A l’aide de la documentation Prototype, expliquez ces différentes classes.

Partie 3 : Prototype en action avec Ajax

Dans cette partie, nous proposons une version du tutoriel1 AJAX avec ‘Prototype’. Vous allez constater comment l’utilisation de fonctions utilitaires de Prototype (comme $ (qui remplace document.getElementById()) et $A qui remplace et étend Array)

Page html

tutoriel-comprendre-bibliotheque-prototype-5

 Expliquez

tutoriel-comprendre-bibliotheque-prototype-7

Code script demoajax.js

 Analysez le code suivant

tutoriel-comprendre-bibliotheque-prototype-6

Quelle valeur ajoutée par rapport au code du tutoriel 1 (XMLHTTPRequest) ?

Un click sur le bouton ‘Charger formations Objis’ entraine ceci :

 Expliquez.

tutoriel-comprendre-bibliotheque-prototype-8

Corrigé

TP_demo_prototype

A VOUS DE JOUER !

 Adaptez le code ci-dessus afin d’obtenir le même résultat que dans le tutoriel 1, c’est à dire qu’à la place du mot ‘NOEUD’, on voit le texte de la formation.

 Expliquez le code suivant :

tutoriel-comprendre-bibliotheque-prototype-9

 Expliquez le code suivant

tutoriel-comprendre-bibliotheque-prototype-10

Conclusion

Dans ce tutoriel, vous avez découvert la bibliothèque javascript ‘prototype’. Vous avec compris que prototype vous permet de réaliser des taches bas niveau tout.

cle_usb_objis_mini.bmp

Pour aller plus loin

 Si vous appréciez notre sens du partage, devenez membre ‘classic’ du Club Objis.

 Accélérez significativement votre maîtrise d’AJAX avec un coach Objis : devenez membre Silver / Gold du Club Objis.

Prochaine formation AJAX


Votre formation AJAX avec Objis, spécialiste formation java depuis 2005

2018-01-30T14:50:37+01:00

Contactez nous

241 rue DUGUESCLIN, 69003 Lyon

Web : Objis : spécialiste formation Java