ENI SERVICE

JavaScript – Développer des applications Web

Par ENI SERVICE

Objectifs

  • 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

Programme

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

Pédagogie

Formation avec un formateur, qui peut être suivie selon l’une des 3 modalités ci-dessous :

1 – Dans la salle de cours en présence du formateur.

2 – Dans l’une de nos salles de cours immersives, avec le formateur présent physiquement à distance. Les salles immersives sont équipées d’un système de visio-conférence HD et complétées par des outils pédagogiques qui garantissent le même niveau de qualité.

3 – Depuis votre domicile ou votre entreprise. Vous rejoignez un environnement de formation en ligne, à l’aide de votre ordinateur, tout en étant éloigné physiquement du formateur et des autres participants. Vous êtes en totale immersion avec le groupe et participez à la formation dans les mêmes conditions que le présentiel. Pour plus d’informations : Le téléprésentiel – notre solution de formation à distance.

Le nombre de stagiaires peut varier de 1 à 12 personnes (5 à 6 personnes en moyenne), ce qui facilite le suivi permanent et la proximité avec chaque stagiaire.

Chaque stagiaire dispose d’un poste de travail adapté aux besoins de la formation, d’un support de cours et/ou un manuel de référence au format numérique ou papier (pour les sessions inter-entreprises, dans le cas où le support de cours officiel est en anglais, nous offrons en complément, s’il existe, un ouvrage de référence des Editions ENI au format numérique rédigé en français).

Pour une meilleure assimilation, le formateur alterne tout au long de la journée les exposés théoriques, les démonstrations et la mise en pratique au travers d’exercices et de cas concrets réalisés seul ou en groupe.

En début et en fin de formation, les stagiaires réalisent une auto-évaluation de leurs connaissances et compétences en lien avec les objectifs de la formation. L’écart entre les deux évaluations permet ainsi de mesurer leurs acquis.

En complément, pour les stagiaires qui le souhaitent, certaines formations peuvent être validées officiellement par un examen de certification. Les candidats à la certification doivent produire un travail personnel important en vue de se présenter au passage de l’examen, le seul suivi de la formation ne constitue pas un élément suffisant pour garantir un bon résultat et/ou l’obtention de la certification.

Pour certaines formations certifiantes (ex : ITIL, Prince2, DPO, …), le passage de l’examen de certification est inclus et réalisé en fin de formation. Les candidats sont alors préparés par le formateur au passage de l’examen tout au long de la formation.

Feuille de présence, émargée par demi-journée par chaque stagiaire et le formateur ;

Evaluation qualitative de fin de formation, qui est ensuite analysée par l’équipe pédagogique ENI ;

Attestation de fin de formation, remise au stagiaire en main propre ou par courrier électronique.

La formation est animée par un professionnel de l'informatique et de la pédagogie, dont les compétences techniques, professionnelles et pédagogiques ont été validées par des certifications et/ou testées et approuvées par les éditeurs et/ou notre équipe pédagogique. Il est en veille technologique permanente et possède plusieurs années d'expérience sur les produits, technologies et méthodes enseignés. Il est présent auprès des stagiaires pendant toute la durée de la formation.

Formations de la même catégories (5)

Ambient IT
Vue.JsPar Ambient IT

Créé et propulsé par les développeurs d’alibaba.com, Vue.js est un framework évolutif pour construire des interfaces utilisateur. À la différence des autres frameworks monolithiques, Vue a été conçu et pensé pour pouvoir être adopté de manière incrémentale. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l’intégrer avec d’autres bibliothèques ou projets existants. D’un autre côté, Vue est tout à fait capable de faire tourner des applications web monopages quand il est couplé avec des outils modernes et des bibliothèques complémentaires.

Vue.js est connu pour avoir rendu le développement front amusant ! Il est sans conteste le framework web moderne à la foi productif et accessible. Dans cette formation vous apprendrez à créer des interfaces web riches en utilisant Vue.js 2 : templating, composants de vue, découverte de son écosystème.

Comme toutes nos formations, celle-ci vous présentera la dernière version stable en date (Vue.js 2.6).

Tanit Formation
Exploiter la puissance javascript pour dynamiser les applications webPar Tanit Formation

Dans cette formation, vous apprendrez à développer des applications Web côté client en écrivant des scripts JavaScript pour interagir dynamiquement avec le contenu de la page Web, soit en lien avec des actions de l'utilisateur et/ou suite à un échange de données avec un service Web.

Ziggourat
JavaScript PerfectionnementPar Ziggourat

Cette formation vous permet de découvrir les différentes approches de la programmation orientée objet en JavaScript.

ENI SERVICE
Vue.js – Développer des applications WebPar ENI SERVICE

Dans cette formation, vous apprendrez à industrialiser, structurer et optimiser vos développements d'applications Web JavaScript en utilisant le framework Vue.js.

Orsys
JavaScript, maîtriser la Programmation Orientée ObjetPar Orsys

Vous maitriserez les mécanismes de la programmation Objet en JavaScript. Vous étudierez en détail son modèle Objet en mettant en œuvre notamment le concept de classes et d'héritage. Vous découvrirez également les mécanismes avancés du JavaScript et l'intérêt de l'intégrer avec du TypeScript.