Prototype et Scriptaculous , livre ebook

Éric Sarrion

Prototype et Scriptaculous

Dynamiser ses sites web
avec JavaScript
Groupe Eyrolles
61, bd Saint-Germain
75240 Paris cedex 05
www.editions-eyrolles.com

Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui menacée. En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris.

ISBN 978-2-212-85408-4
© Groupe Eyrolles

Le format ePub a été préparé par Isako www.isako.com à partir de l'édition papier du même ouvrage.
Table
Couverture
Titre
Licence
Table
Avant-propos
Pourquoi cet ouvrage ?
Plan de l’ouvrage
À qui s'adresse cet ouvrage ?
Remerciements
PREMIÈRE PARTIE - Prototype
Installation de Prototype
Aperçu général de Prototype
1 - Créer des classes
Créer des classes sans Prototype
Créer des classes avec Prototype
Héritage
Le mot-clé $super
Ajouter dynamiquement des méthodes à une classe
Les méthodes superclass et subclasses
2 - Classes générales
Classe Object
Méthodes gérant les propriétés de l’objet
Méthodes booléennes
Classe Enumerable
Itération sur les éléments de la collection
Méthodes principales
Exemples d’utilisation des méthodes
Créer une classe qui hérite de Enumerable
Classe Array
Création d’un tableau
Méthodes principales
Exemples d’utilisation des méthodes
Classe Hash
Création d’une table de hachage
Méthodes principales
Exemples d’utilisation des méthodes
Classe ObjectRange
Création d’un intervalle
Méthodes principales
Classe Number
Classe String
Méthodes principales
Exemples d’utilisation des méthodes
Classe PeriodicalExecuter
3 - Classe Function
Fonctionnement standard de la classe Function
Création d’un objet Function
Propriété this
Propriété prototype
Propriété arguments
Propriété caller
Méthodes de base
Méthodes définies par Prototype
Méthode bind (obj, arg1, ..., argN)
Méthode bindAsEventListener (obj, arg1, ..., argN)
Méthode wrap ()
4 - Classe Element
Gestion des éléments sans Prototype
Éléments et attributs
DOM (Document Object Model)
Création dynamique d’éléments HTML et texte
Méthodes d’insertion dans la page
Accès direct aux éléments de la page
Propriétés principales
Propriétés communes aux éléments HTML et texte
Propriétés spécifiques aux éléments HTML
Propriété spécifique aux éléments texte
Exemple : création dynamique dans la page
Gérer les éléments avec Prototype
Sélecteurs CSS
Sélecteurs simples
Sélecteurs d’attributs
Sélecteurs de classe
Sélecteurs d’id
Pseudo-classes
:link et :visited
:focus
:first-child
:last-child
:nth-child(an+b)
:only-child
:not
Combinateurs
Combinateur de descendance
Combinateur filial
Combinateur d’adjacence directe
Combinateur d’adjacence indirecte
Création d’un élément HTML
Éléments étendus
Formes d’écriture des méthodes de la classe Element
Accéder aux éléments de l’arborescence
Exemples d’utilisation
Mettre à jour le contenu d’un élément
Exemples d’utilisation
Modification de l’état d’un élément
Classes CSS de l’élément
Style de l’élément
Élément visible/caché
Opacité de l’élément
Attributs de l’élément
Autres caractéristiques
Exemples d’utilisation
Positionnement et dimensions sur l’écran
Exemples d’utilisation
Gestion des événements
Ajouter nos propres méthodes à la classe Element
Exemple d’utilisation
Classe Element.Layout
Propriétés définies dans Element.Layout.PROPERTIES
Méthodes de la classe Element.Layout
Méthodes de la classe Element
5 - Gérer les événements
Gérer les événements sans Prototype
Classe Event
Définitions des codes des touches du clavier
Élément sur lequel survient l’événement
Coordonnées de l’événement
Gestion des boutons de la souris
Propagation de l’événement
Événements étendus
Observation de l’événement
Exemples d’utilisation
Déplacement d’un élément dans la page
Affichage d’un menu
Classe Event.Handler
Exemple d’utilisation
Classe Element
Exemple d’utilisation
6 - Classes observateurs des formulaires
Classe Form.Element.Observer
Classe Form.Observer
Classe Form.Element.EventObserver
Classe Form.EventObserver
7 - Classes Ajax
Mise en place d’un serveur
Mise en place d’un serveur PHP
Mise en place d’un serveur Ruby on Rails
Classe Ajax.Request
Options disponibles dans Ajax.Request
Code pour un serveur PHP
Code pour un serveur Ruby on Rails
Traiter la réponse du serveur (paramètre xml)
Récupérer et utiliser responseText
Code pour un serveur PHP
Code pour un serveur Ruby on Rails
Récupérer responseXML
Code pour un serveur PHP
Code pour un serveur Ruby on Rails
Utiliser responseXML
Code pour un serveur PHP
Code pour un serveur Ruby on Rails
Utiliser responseText ou responseXML ?
Transmettre des paramètres au serveur
Code pour un serveur PHP
Code pour un serveur Ruby on Rails
Classe Ajax.Updater
Propriété options.insertion
Propriété options.evalScripts
Classe Ajax.PeriodicalUpdater
Exemples d’utilisation
Affichage de l’heure du serveur
Code pour un serveur PHP
Code pour un serveur Ruby on Rails
Utilisation de start () et stop ()
DEUXIÈME PARTIE - Scriptaculous
Installation de Scriptaculous
Contenu de Scriptaculous
8 - Effets visuels
Paramètres d’un effet visuel
Étapes d’exécution d’un effet visuel
Classe Effect.Base
Méthodes de gestion des effets visuels
Méthodes événementielles liées aux effets visuels
Classe Effect.Opacity
Classe Effect.Move
Classe Effect.Scale
Classe Effect.Highlight
Classe Effect.Morph
Classe Effect.Transform
Classe Effect.Parallel
Influence de l’option transition dans l’effet
Effets visuels standards
Effect.Fade
Effect.Appear
Effect.Puff
Effect.BlindUp
Effect.BlindDown
Effect.SwitchOff
Effect.DropOut
Effect.Shake
Effect.SlideDown
Effect.SlideUp
Effect.Squish
Effect.Grow
Effect.Shrink
Effect.Pulsate
Effect.Fold
Méthodes ajoutées à la classe Element
Création d’un nouvel effet visuel
Création d’une classe d’effet visuel
Création d’une fonction d’effet visuel
Ajout de l’effet dans les méthodes de la classe Element
Ajout d’un effet sous forme de classe d’effet
Ajout d’un effet sous forme de fonction d’effet
Effet multiple
9 - Auto-complétion
Classe Autocompleter.Base
Fonctionnement de base
Propriétés de la classe Autocompleter.Base
Options de baseInitialize ()
Exemple d’utilisation
Classe Ajax.Autocompleter
Fonctionnement de base
Propriétés de la classe Ajax.Autocompleter
Options de la classe Ajax.Autocompleter
Exemple d’utilisation
Code pour un serveur PHP
Code pour un serveur Ruby on Rails
Classe Autocompleter.Local
Fonctionnement de base
Options de la classe Autocompleter.Local
Exemple d’utilisation
Classe Ajax.InPlaceEditor
Principes du fonctionnement
Propriétés de la classe Ajax.InPlaceEditor
Méthode de la classe Ajax.InPlaceEditor
Les options de new
Le pointeur de la souris touche l’élément
Le pointeur de la souris sort de l’élément
L’utilisateur clique sur l