Référence: 2002862F

/

Mise à jour le

Javascript/Ecmascript : initiation + approfondissement

Dawan

Niveau de sortie : Sans niveau spécifique

Pour cette formation

1 session disponible

Consulter

Objectifs

    Apprendre et maitriser les bases de JavaScript, du DOM et de l'Ajax

Programme


Introduction

Présentation
Panorama des environnements JavaScript
Versions et standard ECMAScript
Les bases

  • Les variables et les types de données
  • Les opérateurs
  • Portée des variables var, let, const
  • Les intructions de bloc
  • Les structures de contrôle (conditionnelles et itératives)
  • Les littéraux de templates
  • Affectation par décomposition
  • Les fonctions

Définir une fonction, syntaxe déclarative et expressions
  • Les quatres manière d'appeler une fonction
  • Définir des paramètres par défaut
  • Rest Parameter & Spread Operator
  • Les fermetures
  • Les fonctions fléchées
  • La console (log, debug, info, error, ...)
  • Les tableaux

Présentation et structures d'un tableau
  • Déclaration de tableau (littéral, constructeur)
  • Ajout et suppression de données (push(), splice())
  • Parcourir un tableau (forEach, for of)
  • Les fonctions spécifiques (slice, pop, shift, reverse, etc)
  • Les fonctions find() et findIndex()
  • Les Objets

Présentation
  • Les objets littéraux
  • Ajouter & accéder aux propriétés
  • Les property shorthand
  • Le prototypage
  • Déclaration de méthodes
  • L'association d'objet rapide ( Object.assign() )
  • Les chaînes de caractères et les dates
  • Les méthodes associées aux chaînes de caractères
  • La classe Math
  • Internationalisation: format de dates et monétaires
  • La syntaxe de classe

  • Déclaration de Classe
  • Constructeur et accesseur
  • Les variables et méthodes de classe (static)
  • Héritage
  • Iterator et Generator
  • Les collections (Set et Map)
  • Les Promesses

Définition
Créer une promesse
Les fonctions resolve() et reject()
Attacher nos callbacks à une promise (then(), catch())

Atelier : Récupérer des données à l'aide de Promesse
Document Object Model

Présentation, historique et version
  • Les objets window et document
  • Accéder aux éléments (getElementById, querySelector, querySelectorAll)
  • Manipuler les attributs (getAttribute & setAttribute)
  • Modifier le contenu d'une balises (innerHTML, innerText, innerContent)
  • Gestion des fenêtres et boîtes dialogues

Atelier : Créer une liste d'invités
Les évènements

Principe des événements, manipuler les écouteurs
  • Liste des évènements de souris et de clavier (click, keypress, mouseover, etc)
  • Les évènement attacher au navigateur (load, unload, resize, etc)
  • Les évènements de formulaire (submit et reset)
  • Récupérer et manipuler l'évènement
  • Les fonctions preventDefault() et stopPropagation()

Atelier : Créer une galerie d'image
Gestion dynamique du CSS

Liste des propriétés css en javascript
Modifier le css à l'aide de l'attribut style
Ajout & suppression de class (className, classList)

Atelier :  Animer la galerie d'image
DOM avancée

Parcourir l'arbre DOM (parentNode, childNode)
  • Les fonctions parentChild() et firstChild()
  • Créer et insérer une balise (createElement, appendChild, createTextNode)
  • Les fonctions NextSibling et PreviousSibling
  • Supprimer une balise (removeChild)

Atelier : Réordonner une liste avec du drag & drop
Ajax et XMLHttpRequest

Principe de communication asynchrone
  • Instancier et préparer un objet XMLHttpRequest
  • Gestion des erreurs
  • Barre de progression
  • Protocole HTTP, méthodes et status
  • Sérialisation et désérialisation de données
  • Utilisation des données: Le format XML, le format JSON

Atelier : Lire de données provenant d'une API REST

Atelier : Lire de données provenant d'un flux RSS

Certifications et métiers visés

Consulter le diplôme, titre ou certificat... délivrés en fin de formation ainsi que les métiers auxquels cette formation vous donne accès.

Résultats attendus

Attestation de fin de formation

1 session : Javascript/Ecmascript : initiation + approfondissement

  • au

    Dawan

    • Commune : Lyon 3e (69)

    Formation professionnelle