Formation Prototype et Scriptaculous


  • FRAMEWORKS JAVASCRIPT - CLIENT RICHE ET RAPIDITÉ DE DÉVELOPPEMENT
REFERENCE
 
 
IJPS
DUREE
 
 
3 jours
TARIFS
 
 
En Intra
Niveau : Intermédiaire
Cours à distance: Possible
OBJECTIFS :
 

Prototype est une librairie JavaScript qui regroupe un ensemble de méthodes pour simplifier l'utilisation d'AJAX et du JavaScript en général pour créer des pages WEB hautement dynamiques et compatibles avec les différents navigateurs du marché. Scriptaculous (script.aculo.us) est une librairie JavaScript basée sur Prototype. Elle permet d'ajouter de nouvelles fonctionnalités de contrôle d'éléments HTML ainsi que des effets visuels à une page WEB. Dans cette formation Prototype et Scriptaculous vous apprendrez à utiliser toute la puissance du WEB 2.0.
A l'issue de la formation Prototype et Scriptaculous vous serez capable de :
- développer plus rapidement la mise à jour partielle ou périodique d'une page (Ajax, XMLHttpRequest)
- Manipuler le DOM afin de récupérer, insérer, ou masquer les éléments HTML des pages de façon plus efficace et avec de nouvelles fonctionnalités
- Utiliser les solutions offertes par Prototype aux incompatibilités entre les navigateurs (COMPAT),
- Manipuler plus facilement les structures de données JavaScript avec de nouveaux composants comme String, Enumerable, Array
- Gérer les événements HTML à l'aide de la classe Event
- Proposer des effets visuels riches
- Rendre des éléments HTML déplaçables en Drag & Drop
- Utiliser des sliders dans la page HTML
- Proposer l'autocomplétion dans vos pages

PRÉ-REQUIS :
 

Seules les notions de base de HTML et CSS sont nécessaires. La connaissance du langage JavaScript et d'un langage serveur (PHP, Java, etc) est un plus mais il faut impérativement connaître au moins un langage de programmation.

PUBLIC :
 

Cette formation Prototype et Scriptaculous s'adresse aux développeurs et aux chefs de projets

PROGRAMME :
 

 

Présentation de Prototype


En quoi Prototype étend le langage Javascript ?
Comparaison de code avec et sans Prototype
Vue générale des classes
Installation de prototype.js

Création de classes avec Prototype


Héritage - Utilisation de superclass et subclasses
Utilisation du mot clé $super
Ajout dynamique de méthodes à une classe

Classes générales de Prototype


Chaînes de Caractères et Nombres (String, Number)
Gérer les dates et les heures (Date)
Gérer les collections avec la classe Enumerable
Manipuler les tableaux avec la classe Array
Principes et intérêts du hashage (classe Hash)
Intervalles avec la classe ObjectRange
Exécution périodique (PeriodicalExecuter)
La syntaxe concise et puissante des expressions régulières (RegExp)

Classe Function dans Prototype


Fonctionnement standard de la classe Function
Utilisation du mot clé this
Méthodes définies par prototype (bind, wrap, ...)

Classe Element, DOM et CSS


Rappels sur la gestion « classique » du DOM en javascript
En quoi Prototype facilite l'utilisation du DOM ?
Les apports de l'utilitaire $ et de l'objet Element
Mieux gérer les formulaires HTML avec $F et la collection de méthodes Form.Element
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
Ajouter nos propres méthodes à la classe Element
Gestion des CSS avec Prototype
Classe Element.Layout

Gestion des événements avec Prototype


Gestion des événements sans Prototype
Apports de la Classe Event
Exemples d'utilisation (déplacement d'un élément dans la page, affichage d'un menu)
Classe Event.handler

Ajax et Prototype


L'objet XMLHttpRequest et les navigateurs
Valeur ajoutée de Prototype pour Ajax
Les classes Ajax.Request, Ajax.Updater et Ajax.PeriodicalUpdater

Effets visuels avec Scriptaculous


Aperçu général du framework Scriptaculous
Installation de Scriptaculous.js
Paramètres généraux des effets visuels
Etapes d'exécution d'un effet visuel
Synthèse des classes (Effect.Base, Effect.Event, Effet.Opacity, ...)
Les effets visuels standards (Fade, Appear, BlindUp, Shake, ...
Influence de l'option transition dans l'effet
Création d'un nouvel effet visuel (classe, fonction)

Auto-completion avec Scriptaculous


Compléter une zone de texte automatiquement grâce à scriptaculous
Utilisation de données locales (Autocompleter.Local)
Utilisation de données distantes depuis le serveur WEB (Ajax.Autocompleter)
Modifier le contenu d'un élément de type INPUT ou Textarea (Ajax.InPlaceEditor)
Réaliser des formulaires de données entièrement éditables (liste déroulante, select, Ajax.InPlaceCollectionEditor)

Complements (Drag & drop, Sliders)


Glisser, déposer des éléments HTML
Les Objets Droppables, Draggables, et Sortable
Récapitulatif des options les plus utilisées
Utiliser un slider (Control.Slider)

 

EN INTRA SEULEMENT
FORMATION PROTOTYPE ET SCRIPTACULOUS
Contactez-nous pour obtenir les prochaines disponibilités de nos consultants formateurs
S’inscrire à la formation
CETTE FORMATION SUR-MESURE Ce cours est réalisable en intra-entreprise, dans vos locaux ou nos salles de cours CONTACTER NOTRE SERVICE INTRA
D'autres formations
SUR LE MÊME THÈME

4 j

 
Cette formation vous permettra de d'apprendre à développer des applications Web full JavaScript tout en découvrant les fonctionnalités principales des technologies Javascript ExtJS5, Angular JS et...

5 j

 
Cette formation vous propose de vous apprendre le langage JavaScript en profondeur pour la création de vos sites Internet, applications web et mobiles. Gestion...

3 j

 
Node.js est une approche performante et non-sequentielle, permettant de développer très facilement des applications écrites en Javascript, mais côté...

3 j

 

Web - Digital

Node.js avancé
Node.js est un projet open-source reposant sur le moteur V8 de Chrome. Il permet d'exécuter du code JavaScript côté serveur, contrairement à ce que l'on a...
Plus de formations sur le même thème

Des questions ?

ON VOUS RAPPELLE

 

0

Formations
Informatique
et Management
en ligne à ce jour

+ 0

Stagiaires dans nos
salles de cours sur
l'année

0%

De participants
satisfaits ou très
satisfaits de nos
formations

0

Formateurs experts
validés PLB