JAVASCRIPT Développer des applications Web

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
• Destructuration
• 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

Concepteur : ENI SERVICES - Diffuseur : Groupe Arkesys