JavaScript - Les fondamentaux : créer des sites web dynamiques et interactifs Mixte : présentiel / à distance

• Appréhender Javascript dans la construction de sites et applications web
• Maîtriser les fonctionnalités essentielles
• Manipuler les pages et les rendre dynamiques
• Gérer les/Réagir aux événements et accroître l'interactivité
• Développer en Responsive Design

• Développeurs Web
• Architectes web
• Chefs de projet web
• Webmasters
• Intégrateurs web

• Posséder des connaissances en HTML et CSS
• Avoir des bases en programmation structurée
• Un questionnaire de positionnement sera réalisé au préalable pour adapter la formation à vos besoins

Jour 1 :

Appréhender Javascript dans la construction de sites et applications web

• Rappels sur le fonctionnement d'un site internet ou d'une application web
• Environnement de développement
• Utiliser HTML5 avec CSS3 et Javascript
• Principes du DOM
• Exemples de travaux pratiques : le formateur montre la création d'une page HTML simple (ou page/site existant) avec l'utilisation de balises, d'éléments de style (CSS). Une touche de javascript permet d'identifier le rôle du langage et son utilisation, ainsi que sa relation avec le DOM.

Maîtriser les fonctionnalités essentielles (1/2)

• Exécution de Javascript
• Côté client : Appel d'un script dans une page web
• Côté serveur : Appel d'un script avec NodeJS
• Exemples de travaux pratiques : le formateur montre des exemples et exécutions de code JS dans une page web ou via NodeJS. Les participants peuvent créer une nouvelle page HTML et charger un script JS qui fait des actions simples (exemple message console ou alerte). Les participants peuvent lancer un script via NodeJS.

Maîtriser les fonctionnalités essentielles (2/2)

• Syntaxes de bases d'écriture du langage
• Mots-clés (let, const)
• Fonctions
• Les fonctions fléchées
• Les fonctions de manipulation de données : map, filter, forEach…
• La programmation orientée objet en ES6
• Définition des classes
• L'opérateur new
• Modification d'un objet : getter / setter
• Héritage
• Rétrocompatibilité
• Table des compatibilités
• Polyfills
• Compilateurs
• Exemples de travaux pratiques : le formateur réalise et explique différentes syntaxes que les participants reproduisent et exécutent sur leur poste de travail.

Jour 2 :

Manipuler les pages et les rendre dynamiques

• Introduction à l'API DOM
• Format de données JSON
• Insérer ou récupérer des données dans les pages (balises data, )
• Exemples de travaux pratiques : le formateur utilise l'API DOM pour sélectionner et modifier des balises. Il insère des données JSON dans la page. Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des données JSON dans la page. Par exemple : affichage d'une liste de produits, ou données météos.

Gérer les/Réagir aux événements et accroître l'interactivité

• Gérer les évènements
  •  Ecouter les événements
  • Réagir aux événements
• Notion de callback
• Introduction aux traitements asynchrones et requêtes AJAX
• Exemples de travaux pratiques : le formateur utilise l'API DOM pour créer des écouteurs d'événements et traitements associés en callback. Il réalise une requête AJAX (par exemple pour l'envoi d'un formulaire). Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des évènements. Par exemple : chargement de données après un clic, envoi de formulaire, etc.

Jour  3 :

Développer en Responsive Design

• La méthode matchMedia (équivalent des Media Queries pour JavaScript)
• La détection des périphériques avec l'User-Agent
• Rétrocompatibilité (tables de compatibilité et polyfills)
• Exemples de travaux pratiques : le formateur utilise matchMedia et détecte le périphérique qui accède à la page web grâce à l'User-Agent. Les participants peuvent créer une nouvelle page HTML ou compléter leur page précédente en intégrant des traitements spécifiques à un type de périphérique (par exemple iOS ou Android) ou à une résolution (avec matchMedia). Il peut s'agir par exemple de créer un menu ou des onglets qui s'affichent différemment en fonction des résolutions et/ou types de périphériques.

Découvrir et utiliser une librairie ou un Framework Javascript

• Limites du JavaScript natif dans les projets complexes
• Les différences principales entre librairie et Framework
• Cas d'usage typiques des librairies et Frameworks : fonctionnalités types (agenda, graphiques…), SPA, DOM complexe, gestion de l'état, routing, accès API...
• Identifier et utiliser des annuaires et gestionnaires de dépendances pour installer des librairies en tout sécurité (npm,…)
• Exemples de travaux pratiques : le formateur utilise une librairie, selon les besoins ressentis par le groupe, par exemple Chart.js pour créer des graphiques sur une page web. Les participants peuvent créer une nouvelle page HTML en intégrant une librairie de leur choix.

• Exercices concrets
• Cas pratiques
• Quiz d'évaluation des connaissances

• Mise à disposition de postes de travail
• Vidéoprojecteur, tableau blanc, supports numériques
• Documentation pédagogique numérique

• Positionnement en amont de la formation :
• Un quiz de consolidation des pré-requis sera administré en amont de la formation
• Suivi « pendant » :
• Feuilles de présence
• Exercices pratiques
• Évaluation « fin de formation »
• Évaluation des acquis en fin de formation
• Formulaires d'évaluation de la formation
• Évaluation à froid :
• Suivi post-formation : Questionnaire de satisfaction à j+30

• Expliquer le rôle de JavaScript dans la construction de sites et applications web modernes
• Écrire du code JavaScript en utilisant les syntaxes ES6 (variables, fonctions, classes, fonctions fléchées)
• Manipuler le DOM pour rendre les pages web dynamiques (sélection, modification, insertion d'éléments)
• Gérer les événements utilisateurs et créer des interactions (clics, saisies, soumissions de formulaires)
• Développer des sites responsives en utilisant matchMedia et la détection de périphériques
• Intégrer des données JSON dans les pages web et gérer les formats de données
• Utiliser des bibliothèques JavaScript (comme jQuery ou Chart.js) pour enrichir les fonctionnalités
• Créer des pages web interactives combinant HTML5, CSS3 et JavaScript

Délais d'accès à la formation

Le délai d'accès à la formation est variable en fonction du dispositif de financement utilisé, du planning des formateurs et des contraintes du client. Pour les formations inter-entreprises, vous pouvez consulter notre calendrier en ligne ou prendre contact avec nous. Nous traitons vos demandes sous 48 heures

Accessibilité

Si vous êtes en situation de handicap, merci de nous en informer afin de vous accompagner, vous orienter, et étudier les compensations nécessaires pour répondre au mieux à votre demande de formation. Certaines formations peuvent nécessiter une adaptation pour les personnes en fonction de leur handicap. Nous restons disponibles pour échanger ensemble et nous pourrons vous orienter vers un de nos partenaires : Agefiph, Cap Emploi

Contactez-nous pour échanger sur vos besoins !

Rachel Girardeau

✉️ formation@napsia.com

📞 05 62 84 10 13