JavaScript est le langage incontournable du developpement web, present cote client comme cote serveur. Cette formation de 3 jours vous donne des bases solides : syntaxe du langage, manipulation du DOM, gestion des evenements, validation de formulaires et appels Ajax. Vous apprendrez aussi a adapter dynamiquement vos interfaces avec les media queries, pour creer des applications web interactives et responsives des ES2023.

Public visé

Développeurs, architectes ou chefs de projets techniques.

Prérequis

Avoir suivi cette formation, ou en maîtriser les thèmes abordés :

Initiation à la programmation

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

Mémoriser les bases de JavaScript et son utilisation pour le DOM
Gérer les événements et les manipulations dynamiques
Identifier les bonnes pratiques de programmation JavaScript
Exécuter des appels synchrones (Ajax)
Appliquer les media queries en JavaScript pour les interfaces responsive

Programme

Jour 1 - Matin

Un langage pour le Web

Historique de JavaScript
Les meilleurs IDE actuels
Les librairies JavaScript et l’écosystème
Versions de JavaScript jusqu’à ES2023 (ES14)
JavaScript et Ajax : relations avec le serveur
Structuration typique d’une page Web, où placer le JavaScript ?

Travaux pratiques

Création d’une page typique utilisant JavaScript
Différentes façons d’intégrer JavaScript au projet

Bases du langage

Syntaxe de base
Déclarations et portées des données
“var” et “let”
Portée des données
Types de données, conversions et affectations
Structures de contrôle
- Boucles
- Tests
Types de données JSON
Pièges du typage dynamique
L’objet “console”

Travaux pratiques

Premier projet simple sur l’utilisation des bases de JavaScript
Déclarations de variables et utilisation
Boucles, tests et affichages

Jour 1 - Après-midi

Un langage à base de fonctions

La fonction, un élément de base du langage
Prototypes et fonctions
Constructeurs et “this”
Valeur de “this”
Fonctions et programmation fonctionnelle
Objet “window” ou le contexte global
Contextes d’exécution
Fonctions immédiates et anonymes
Les fonctions fléchées
La frontière avec la programmation objet

Travaux pratiques

Création d’un projet exploitant les fonctions de JavaScript
Mise en exergue de l’aspect fonctionnel du langage
Création et utilisation de fonctions anonymes

Jour 2 - Matin

Document Object Model (DOM)

Les objets du navigateur
Récupérer des éléments
Ajouter des balises
Modifier les contenus
Manipulation des CSS
Gestion des événements
L’objet “event” et son utilisation
Parcours du DOM
Modification du DOM, suppression et création d’éléments

Travaux pratiques

Projet de manipulation des objets d’une feuille HTML 5
Parcours, extraction des contenus et attributs
Modification, insertion et suppression d’éléments

Jour 2 - Après-midi

Gestion de formulaires avec JavaScript

Gérer le contenu des formulaires
Accès aux différents éléments
Gestion de la validation des données de formulaires
Ecrire un gestionnaire de formulaires

Travaux pratiques

Extraction des données d’un formulaire et contrôle des valeurs
Validation des champs de saisie
Conception d’un gestionnaire de saisie de formulaire

Jour 3 - Matin

Gérer les CSS depuis JavaScript

Rappel succinct de CSS
Les objets et propriétés importantes
Accéder en écriture et lecture à CSS

Travaux pratiques

Lecture de styles CSS depuis JavaScript
Application de nouveaux styles CSS avec JavaScript

Manipulation des Media queries pour un design responsive en JavaScript

Test en JavaScript des Media queries et adaptation des CSS adaptés
Construction dynamique d’interface selon le type d’écran

Travaux pratiques

Travail sur les Media queries

Jour 3 - Après-midi

Ajax

Architecture des sites Web avec et sans Ajax
Asynchronisme dans le navigateur
XMLHttpRequest et HTML 5
Gestion d’erreurs et timeout

Travaux pratiques

Ecriture d’un projet qui récupère les données d’un serveur
Les afficher sur une feuille avec Ajax et JSON
Remplacement de diverses écritures réalisées par des appels à des fonctions jQuery

Nouveautés ECMAScript 6 à 14

L’apport majeur de la version 6 (2015) de JavaScript
Les apports annuels de chaque version, de ES6 à ES14 ou ES2023

Modalités d’évaluation des acquis

En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-JS-100 — JavaScript - Les fondamentaux. Domaine : Développement. Niveau : Initiation. Durée : 3 jours (21 heures). Mots-clés : javascript, développement, initiation. Cylian Formation, Dijon.