JavaScript : développer des applications web

Contenu

Introduction

• HTML, CSS et JavaScript : Les 3 langages du navigateur
• Rôle du JavaScript dans un site web
• Caractéristiques de JavaScript et relations avec le standard ECMAScript
• Support de JavaScript dans les différents navigateurs
• Imbrication de JavaScript dans HTML
• Conventions de formatage et de codage
  • Console, débogage et outils des navigateurs
• Environnement de développement et de débogage

La syntaxe JavaScript

• Déclaration des variables
• Les types de données
• Les tableaux
• Les opérateurs et expressions
• Les structures de contrôle
• Les fonctions : déclaration et appel
• Les objets globaux : String, Date, RegExp, Array

L’approche objet en JavaScript

• Fonctions anonymes et encapsulation
• Objets
• Propriété prototype
• Fonctions flèche
• Déstructuration
• Casses et héritage
• Constructeurs et accesseurs

Les objets du navigateur

• Les principaux objets du DOM
  • Window, document, history, location, navigator
• Déboguer et générer des logs avec l’API Console
• Contrôler la version et tester la compatibilité du navigateur

Interagir avec le DOM

• Notion de nœud et d’arborescence de nœuds
• Parcourir et rechercher des éléments avec l’API Selector (querySelector() et querySelectorAll())
• Modifier la présentation et le contenu du DOM
• Modifier la structure du document
• Modifier un élément HTML

Gestion avancée des événements

• Intercepter les événements avec la fonction addEventListener()
• Comprendre la propagation des événements
• Objet Event
• Création d’événements personnalisés

Validation des formulaires côté client

• Ecrire et lire dans les champs des formulaires
• Mettre en place des champs obligatoire
• Valider les informations saisies
  • Mise en œuvre des expressions régulières
• Activer et désactiver le bouton d’envoi

Persistance des données en local

• Comprendre la différence entre les objets storage et les cookies
• L’API Storage
  • Utilisation du contexte local storage en lecture/écriture
  • Utilisation du contexte session storage en lecture/écriture
• Sauvegarder et restaurer l’état d’une page ou d’une application web au chargement
• Mise en œuvre des bases de données SQLite ou IndexedDB

Communication réseau (AJAX, JSON et services REST)

• Définition et conception d’un service REST
• L’objet XMLHttpRequest2
• Configurer une requête AJAX
• Format d’échange JSON
• L’événement progress
• Gestion du cache en mode déconnecté
• Détection des événements online et offline

Nouvelles interactions utilisateur

• Mettre en œuvre les actions de glisser-déposer
• Ajouter des informations sur demande avec les éléments Details et Summary
• Activer les contenus modifiables
• Autoriser l’affichage plein écran

Gestion de fichier

• Découvrir l’API File
• Lecture/écriture de document sur le poste client
• Gestion d’événements avancés tels que les notifications et le glisser-déposer « système »

Interagir avec les contenus multimédia

• Contrôler la lecture des éléments audio et vidéo
• Créer des animations avec l’élément Canvas et l’API Draw2D

Mettre en œuvre la géolocalisation

• API Geolocation
• Obtenir les informations de positionnement
• Utiliser les API Google Maps
  • Traduire une position en adresse physique
  • Afficher une carte, etc.

Travaux pratiques

• Manipulation des données de type simple
  • Transformation, mise en forme de texte
  • Manipulation des dates
  • Utilisation d’expression régulière
• Création d’un DataGrid HTML5
  • Mise en place de la sélection des lignes
  • Création, suppression de lignes
  • Ajout de nouvelles lignes de données
• Création et validation d’un formulaire HTML5
  • Validation native et JavaScript
  • Validation en cours de saisie
  • Contrôler l’envoi des données
• Gestion des données
  • Stockage des données en local
  • Chargement des données du tableau depuis le serveur web
• Création de classes métiers en JavaScript
  • Création d’objets métiers à l’aide d’un formulaire
  • Affichage des données dans un tableau HTML
  • Mise en place d’un Drag&Drop de fichier JSON
• Mise en œuvre des API JavaScript
  • Géolocalisation
  • Interaction avec un média
  • Affichage de notification