Développement jQuery : mise en œuvre pratique

Enrichir rapidement des pages Web

Objectifs

→ Définir le rôle de jQuery dans le développement front-end
→ Lire, comprendre, modifier et écrire du code jQuery
→ Interagir avec le DOM et gérer les événements utilisateur
→ Ajouter des effets graphiques et des animations
→ Installer et utiliser un plugin jQuery

Public concerné

Intégrateurs, développeurs et designers Web.

Pré-requis

Il est nécessaire de maîtriser le HTML et d’avoir des notions de CSS. La connaissance de JavaScript n’est pas requise (les notions de base sont rappelées) mais est un plus.

Programme

Définir le rôle de jQuery dans le développement front-end

  • Connaître le rôle de JavaScript dans le développement Web
  • Comprendre le rôle d‘une bibliothèque et la place de jQuery dans l‘écosystème JavaScript
  • Connaître les domaines d’intervention de jQuery et les problématiques qu’il peut résoudre
  • Appréhender les outils de développement JavaScript et le workflow
  • Se familiariser avec l‘écosystème jQuery : communauté, plugins et outils
  • Savoir obtenir et insérer jQuery dans des pages

 

Étude de cas : analyse de sites Internet

Lire, comprendre, modifier et écrire du code jQuery

  • Maîtriser la syntaxe JavaScript et ses notions fondamentales
  • Comprendre les notions de variables et de données, de lecture et d‘écriture, les types primitifs et les objets de base (Number, String, Boolean…)
  • Utiliser les opérateurs et les expressions
  • Maîtriser les structures de contrôles : conditionnelles, boucles

 

Accéder au DOM pour le modifier

  • Comprendre l‘arbre DOM, les noeuds parents et enfants
  • Connaître les bases de la manipulation du DOM en JavaScript (getElementById, querySelector…)
  • Manipuler le DOM avec jQuery : la fonction $() et le chaînage de méthodes
  • Maîtriser les sélecteurs : simples, multiples, d‘attribut, de classe…
  • Maîtriser les pseudo-classes :first-child, :not(), :odd, :hidden…

 

Exercice : manipuler les éléments d‘une page HTML avec jQuery

Interagir avec le DOM et gérer les événements utilisateur

  • Comprendre la notion d‘événement pour gérer l‘interactivité
  • Maîtriser la syntaxe on() : un système unifié et compatible entre tous les navigateurs
  • Utiliser les MouseEvents : click, mouseover, mouseout, mousemove…
  • Manipuler les éléments HTML de la page
  • Manipuler les attributs, les classes et les styles des éléments HTML
  • Manipuler les dimensions et la position d‘un élément
  • Récupérer ou générer du contenu HTML ou textuel : création de menus ou de listes dynamiques
  • Insérer du HTML dans la page : append(), prepend(), before()…
  • Travailler avec les éléments de formulaire

 

Exercice : créer une barre de navigation dynamique avec menu déroulant

Ajouter des effets graphiques et des animations

  • Réaliser des effets par manipulation des classes CSS
  • Utiliser des effets animés prédéfinis : fadeIn(), slideUp(), show(), hide()…
  • Savoir enchaîner des effets et mettre en attente avec delay()
  • Comprendre la notion de callback : “complete”
  • Utiliser des accélérations : notion d‘“easing”
  • Réaliser des animations personnalisées avec animate()

 

Exercice : créer un mini-site en ”single-page“ avec onglets et transitions animées

Installer et utiliser un plugin jQuery

  • Chercher et trouver un plugin jQuery
  • Connaître les plugins les plus utiles

 

Exercice : rechercher, sélectionner, installer et configurer un plugin jQuery

Méthodes pédagogiques

Alternance de théorie, de démonstrations et de mise en pratique grâce à de nombreux exercices concrets facilement transposables en milieu professionnel : tooltip (infobulle), diaporama, menu animé, accélérations, personnalisateur de carte de visite, drag n‘drop…

Moyens techniquesMoyens spécifiques à cette formation :

→ Logiciels : Sublime Text 3, plugins


Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateur

Développeur Web ayant plus de 10 ans d‘expérience en enseignement.

Marketing Digital
Web
Médias sociaux
Voir toutes les formations

jQuery : mise en œuvre pratique

3 jours 21 heures 1 600 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

jQuery : mise en œuvre pratique

3 jours 21 heures 4 170 €HT*

* À partir de

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis
L'avis des participants
Formateur très bon pédagogue ce qui permet de mieux comprendre le sujet abordé.
Léa S. - Graphiste pour la CSC (session du 28 au 30 juin 2017)
Stage très utile pour me sentir plus autonome dans la compréhension du langage.
Géraldine B. - Webdesginer / intégrateur (session de 2 au 4 novembre 2016)