Aller au contenu principal

M2I : 03. Javascript - Fondamentaux

Durée

21 heures

Modalités

Formation
  • Classe virtuelle
  • Présentiel
Évaluation

La validation des acquis se fait en cours de formation, par des études de cas ou des travaux pratiques et, en fin de formation, par un questionnaire

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
882€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
3528€ HT / groupe
4 stagiaires minimum

Public

Développeurs Web, architectes web, chefs de projet, webmasters…

Pré-requis

Posséder des connaissances en langages HTML et CSS et en programmation structurée.

Objectifs pédagogiques

- Maîtriser l'utilisation des balises et feuilles de style HTML5/CSS3 

- Utiliser JavaScript pour gérer l'interactivité d'un site web 

- Savoir construire son site en Responsive Design 

- Gérer les évènements et les manipulations dynamiques

Programme détaillé

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'à ES2019

JavaScript et Ajax : relations avec le serveur

Structuration typique d'une page Web, où placer le JavaScript ?

Exemples de travaux pratiques (à titre indicatif)

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"

 

Exemples de travaux pratiques (à titre indicatif)

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

Exemples de travaux pratiques (à titre indicatif)

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

Exemples de travaux pratiques (à titre indicatif)

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

Exemples de travaux pratiques (à titre indicatif)

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

Exemples de travaux pratiques (à titre indicatif)

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

Exemples de travaux pratiques (à titre indicatif)

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

Exemples de travaux pratiques (à titre indicatif)

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 à 11

L'apport majeur de la version 6 (2015) de JavaScript

Les autres apports

Sessions

Filtrer les résultats
Modalités pédagogiques
Formation synchrone se déroulant avec la présence physique du (des) formateur(s) et du (des) apprenant(s) réunis dans un même lieu de formation.
Formation combinant des séquences en présentiel et des séquences à distance synchrones ou asynchrones.
Formation à distance, asynchrone, s’appuyant sur une plateforme d’apprentissage, pouvant être complétée par d’autres modalités de formation à distance (visio-conférence…)
Formation à distance, synchrone, s’appuyant sur un dispositif de visio-conférence. La classe virtuelle recrée à distance les conditions d’une formation en salle traditionnelle.
Type de formation
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
Options
Les compétences professionnelles visées par la formation sont validées via un test permettant d’obtenir une certification officielle.
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.