Formation Développement Internet
JavaScript et jQuery
L'utilisation de JavaScript permet une véritable révolution des pages Web :
- des interfaces plus conviviales, plus réactives, plus fluides,
- une autre approche pour le développement Web.
jQuery "Write less, do more" apporte encore un plus car il simplifie le code, facilite le développement et la maintenance : comment faire plus avec moins de code...
La maîtrise de JavaScript est un préalable indispensable avant d'aborder le développement d'applications Internet riches avec Ajax (Asynchronous JavaScript ans XML).
jQuery permet aussi de palier aux manques CSS de quelques navigateurs...
Objectifs
Acquérir les bases JavaScript nécessaires pour développer des interfaces (pages Web) plus conviviales et interactives.
Utiliser jQuey pour développer plus rapidement et efficacement
Description
Introduction
- JavaScript : Pourquoi faire ?
- Les différentes versions, la compatibilité avec les navigateurs
- Les outils
présentation de l'éditeur Aptana,
FireFox avec Firebug
- Insérer un script dans un document XHTML
JavaScript : Le cœur du langage
- La syntaxe
- Les variables
- Les fonctions globales
- Les opérateurs
- Les structures de contrôle
- Les exceptions
- Les fonctions
Définition, arguments fonctions littérales, fermeture
- Les objets
Définition, objets littéraux, prototype
- Les objets du langage
Array, Date, Math, RegExp, String...
Manipuler les tableaux , les dates, les chaînes de caractères...
- Ateliers
Créer un convertisseur Euros vers Francs
Afficher une date et un compte à rebours
Contrôler la syntaxe d'une adresse email
Les objets du navigateur
- Introduction
- Window, Les cookies, Document, Location
- Frames, Navigator, Form, History, Image, Screen
- Ateliers
Créer un diaporama "simple" et automatique
Mémoriser les préférences de l'utilisateur
Le DOM (Document Object Model)
- Rappel sur le HTML
- Modélisation d'un document
- Les interfaces
- Manipuler les nœuds, les attributs
- Créer et insérer de nouveaux éléments
- Modifier les attributs d'un élément
- Modifier le contenu d'un élément,
insérer dynamiquement une chaîne de caractères, du HTML
- Ateliers
Insérer un message avec innerHTML
Insérer un message avec le DOM
jQuery et le DOM
- Introduction
- Compatibilité avec les navigateurs
- Un 1er exemple, un aperçu de jQuery, jQuery(), $()
- Sélectionner un élément ou une collection d'éléments, les sélecteurs
- Naviguer dans le DOM
- Manipuler le DOM
ajouter du HTML, modifier le contenu d'un élément
modifier les attributs d'un élément HTML
- Ateliers
Insérer un message
Insérer un champ SELECT dans un formulaire
Définir un message par défaut dans un champ TEXT de formulaire
Les styles CSS
- Rappel sur les styles CSS
- Manipuler les styles CSS avec JavaScript,
ajouter une classe, appliquer un style...
- Ateliers
Afficher/masquer un élément
jQuery et les CSS
- Ajouter des styles CSS à un élément
- Remédier aux manques de certains navigateurs ou incompatabilité,
opacity...
- Ateliers
Ajouter une transparence à des vignettes
Ajouter automatiquement un logo sur des liens de type PDF ou DOC.
La gestion des événements
- JavaScript dans une URL
- Modèle "DOM 0"
- Modèle Microsoft Internet Explorer (MSIE)
- Modèle DOM 2
- Compatibilité MSIE et DOM 2
- Ateliers
Créer un menu extensible
Afficher une infobulle au survol d'un élément
jQuery, les gestionnaires d'évéments, les effets
- Des gestionnaires compatibles pour les navigateurs
- Des événements évolués : bouton à bascule...
- Le effets : fadeIn, fadeOut, slideIn, slideOut ...
- Ateliers
Eclaircir des vignettes au survol
Ajouter un effet à l'ouverture de la page
Créer un menu extensible
avec un effet
Les formulaires
- Les différents éléments d'un formulaire
- Valider et soumettre le formulaire
- Atelier : Créer un formulaire
Afficher le nombre de caractères d'un champ
Valider la syntaxe d'une adresse email ou d'une donnée
Installer un calendrier (plugin jQuery)
Soumettre le formulaire
Aller plus loin
- Les bonnes pratiques
- Réorganiser le code
- Rendre le JavaScipt discret "Unobtrusive JavaScript"
- Avoir des pages accessibles
- Les bibliothèques et frameworks
- Présentation d'Ajax Asynchronous JavaScript And XML
Aller plus loin avec jQuery
- Les interface utilisateurs jQuery :
onglets, accordéon...
- Quelques utilitaires, plugins
- Créer un plugins, paramétrer un plugin existant
- Ateliers
Mettre en place un plugin " LightBox"
Les ateliers
Les ateliers illustrent par des exemples concrets les sujets abordés, apportant ainsi aux participants une première expérience en JavaScript et jQuery.
Durée : 4 jours
Public : Personnes souhaitant créer
ou mettre à jour un site Web avec des interfaces interactives et conviviales.
Pré-requis : Pratiquer couramment
les outils informatiques et savoir naviguer sur le Web, connaître
le HTML et le CSS, quelques notions d'anglais.
Retour au catalogue des formations
Financement
Financement possible au titre de la formation continue.
Consultez votre OPCA (Organisme Paritaire Collecteur Agréé) ou contactez-nous.