JavaScript, cycle complet

Développez avec JavaScript, du simple menu déroulant à l’application web

  • Filière :

    Développement logiciel

  • Sous-filière :

    Technos Web (PHP, JS...)

  • Référence

    JS01

  • Durée

    5 jours (35 h)

  • Prix par personne HT

    2 300 € HT

Description

Avec l’évolution du Web, et le besoin toujours croissant d’interactivité, le JavaScript s’est imposé comme LE langage du Web incontournable. Aujourd’hui le JavaScript est omniprésent et on le retrouve dans les pages web, le développement mobile ou d’applications, au niveau serveur etc. Fort de ses avancées de ces dernières années, il est devenu un langage complet et puissant. Le JavaScript natif a surpassé JQuery et il est essentiel de le maitriser pour profiter au mieux de toutes les possibilités offertes.

Cette formation a pour but d’aborder le plus de concepts inhérents à JavaScript et son environnement afin de permettre aux stagiaires de développer toutes sortes d’applications.

Objectifs pédagogiques

  • Apprendre le langage JavaScript et maîtriser les bonnes pratiques de développement
  • Interagir avec les feuilles de style
  • Gérer les événements et les données
  • Manipuler le DOM pour manipuler la page (et comprendre la relation entre les deux)
  • Comprendre et maitriser Ajax
  • Comprendre et maitriser la programmation orientée objet avec JavaScript
  • Appréhender l’ensemble de la chaine de compilation ES6
  • Maitriser les concepts ES6
  • Mettre en œuvre les bonnes pratiques
  • Exploiter la puissance d’ES6 dans la réalisation d’applications

Public cible

Développeurs expérimentés dans un autre langage souhaitant développer leurs applications avec JavaScript

Pré-requis

Bonnes connaissances de HTML et CSS. Connaissance d’un autre langage de programmation

Modalités d’évaluation

L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.

Méthodes pédagogiques

50% théorie / 50% pratique

Programme de la formation

Préface

  • Présentation de différents éditeurs
  • Présentation des outils de développement intégrés au navigateur
  • Présentation de l’application à réaliser tout au long de la formation

 

Présentation du marché

  • Avant
  • Après

Rôles et standards

  • Définition
  • Structuration du langage
  • Statistiques de Javascript de nos jours
  • Utilisation
  • Combattre les idées reçues
  • Evolution des frameworks
  • Problèmes

Javascript & HTML

  • Synchrone vs Asynchrone
  • La base HTML <script>

Javascript, le langage

  • Types
  • Commentaires
  • Les mots clés
  • Variables et fonctions
  • Manipulations
  • Les arrays
  • Les conditions
  • Les opérateurs
  • Les boucles
  • Les objets globaux
  • Réalisation Exercice 1
  • Les objets
  • Le format JSON
  • Réalisation Exercice 2

DOM et manipulation

  • Le Document Object Model
  • Interfaces du DOM
  • Méthodes des nœuds
  • Propriétés des nœuds
  • Interface CSS
  • Réalisation Exercice 3

Time handler & DOM events

  • Définition d’un évènement
  • Types d’évènements
  • SetTimeout
  • SetInterval
  • Event listeners
  • Bubbling
  • Natif vs JQuery
  • Réalisation Exercice 4

Les fonctions

  • Définition
  • Déclaration et passage de paramètres
  • Portée de la fonction
  • Closure
  • IIFE

Ajax & Dialogue serveur

  • Définition
  • Principe
  • Pourquoi ?
  • Risques
  • Contexte favorable
  • Les verbes HTTP et les status
  • Exemple
  • L’objet XmlHttpRequest
  • Types de données transmises
  • Ajax et IE
  • Ajax et JQuery
  • Réalisation Exercice 5

Bonnes pratiques

  • Convention de nommage
  • JsDoc
  • Eslint
  • L’objet console et le debug

Pour aller plus loin

  • L’objet JSON
  • Présentation de NodeJS
  • Présentation de NPM
  • Le futur de Javascript
  • Réalisation Exercice 6

Les modules

  • Amd & RequireJS
  • CommonJS

Programmation orientée objet : les bases

  • Glossaire
  • Encapsulation
  • Classe vs fonction

Programmation orientée objet : Avancée

  • Objet simple
  • Constructeur
  • Privé / publique
  • O.O et prototype
  • Réalisation Exercice 7
  • Prototype
  • Héritage
  • Classes ES6
  • Super / extends

Le Front-End aujourd’hui

  • Tour d’horizon
  • Glossaire
  • Data-binding
  • Mutabilité et immutabilité

Les outils

  • ESLint
  • Babel
  • Exercice

Webpack

  • Entrées / Sorties
  • Les source-maps
  • Module
  • Plugins
  • Webpack dev server
  • Exercice

Les modules JavaScript

  • Définition
  • CommonJS
  • Modules ES6
  • Exercice

Les nouveautés d’ES6, partie 1

  • Compatibilité grâce aux polyfills
  • Template, string, literals
  • Map, reduce
  • Nouvelles méthodes des chaines de caractères
  • Fonctions fléchées
  • Promises
  • L’API fetch
  • Particularités d’application des fonctions fléchées
  • Affectation par décomposition (objets, arrays)
  • Boucle for in
  • Spread operator
  • Exercice

Les nouveautés d’ES6, partie 2

  • Nouvelles méthodes des arrays
  • Classes
  • Super / extends

Qualité

Cette formation est accessible aux personnes en situation de handicap, nous contacter en cas de besoin d’informations complémentaires.

pictogramme commentaire Avis et témoignage

Voir tous les avis

Programme mis à jour le