Formation Applications Web

JavaScript et jQuery

JavaScript est le langage qui permet de manipuler le HTML et CSS dans une page Web pour obtenir des interfaces plus conviviales, plus réactives, plus fluides.

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 Web avec Ajax (Asynchronous JavaScript ans XML) et les fonctionnalités avancées des nouveaux navigateurs : Drag n Drop, gélocalisation, communication, application cache...

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 jQuery pour développer plus rapidement et efficacement

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.

Afficher le détail

Programme

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 HTML

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

L'API JavaScript HTML5

Introduction
  • Les évolutions JavaScript
  • Les équipements, les navigateurs
Présentation des nouvelles fonctionnalités
  • Drag and Drop
  • Geo localisation
  • Server Sent Events
  • Web Messaging, channel messaging
  • Web Storage : sessionStorage, localStorage, base de données
  • Application Cache
  • Web Worker

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

Les échanges Ajax avec jQuery

  • Présentation d'Ajax Asynchronous JavaScript And XML
  • Les différentes méthodes
  • Les échanges simplifiés
  • Ateliers
  • Afficher un champ de sélection département/commun dans un formulaire
  • Afficher des données type flux RSS
  • Afficher une liste et le détail

Aller plus loin

  • Les bonnes pratiques
  • Réorganiser le code
  • Rendre le JavaScipt discret "Unobtrusive JavaScript"

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.

  • La formation peut se dérouler avec l'éditeur dont vous disposez, cela peut être Eclipse, Aptana, DreamWeaver...

Financement

Financement possible au titre de la formation continue.
Consultez votre OPCA (Organisme Paritaire Collecteur Agréé) ou contactez-nous.

Retour vers le haut de page