JAVASCRIPT Développer des applications Web Mixte : présentiel / à distance

• Intégrateurs Web

• Connaître les notions fondamentales de la programmation (Algorithmie)
• Connaître les notions fondamentales de la création de pages Web HTML

A l'issue de cette formation, l'apprenant sera capable de :

• Intégrer un script à une page HTML
• Utiliser les types primitifs du langage Javascript et leurs fonctions
• Utiliser le DOM pour parcourir et modifier la structure d'une page
• Gérer des événements utilisateur
• Valider les données saisies dans un formulaire
• Stocker des données dans le navigateur
• Échanger des données avec un serveur via des API REST
• Exploiter l'API FileReader pour lire des fichiers en local
• Interagir avec des contenus multimédias
• Mettre en œuvre l'API de géolocalisation

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

• Intégrer un script à une page HTML
• Utiliser les types primitifs du langage Javascript et leurs fonctions
• Utiliser le DOM pour parcourir et modifier la structure d'une page
• Gérer des événements utilisateur
• Valider les données saisies dans un formulaire
• Stocker des données dans le navigateur
• Échanger des données avec un serveur via des API REST
• Exploiter l'API FileReader pour lire des fichiers en local
• Interagir avec des contenus multimédias
• Mettre en uvre l'API de géolocalisation

• Explications théoriques suivies de pratiques guidées puis de mises en autonomie.
• Exercices autonomes et réguliers pour assurer l'assimilation

Votre formation a lieu en présentiel :

• 1 vidéoprojecteur par salle
• 1 ordinateur

Votre formation se déroule à distance avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque)
• 1 Webcam (facultatif – dans l'idéal)
• 1 deuxième écran (facultatif – dans l'idéal)

Votre formation se déroule sur notre plate-forme de formation avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque - facultatif)

Support stagiaire :

À l'issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu'un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.

Nos formateurs sont certifiés à l'issue d'un parcours organisé par nos soins. Ils bénéficient d'un suivi de maintien et d'évolution de leurs compétences aussi bien au niveau technique que pédagogique.

Chacun de nos formateurs a bénéficié d'une formation spécifique à l'animation de classe virtuelle et à l'utilisation des solutions de formation à distance du Groupe ARKESYS.