Formation Maîtriser JavaScript

Le web est devenu très dynamique et interactif. Des interfaces utilisateurs (UI) riches sont désormais nécessaires à la fois pour les back-offices et le côté front. JavaScript, avec sa composante AJAX, est donc aujourd’hui devenu incontournable dans le développement d’un site ou d’une application web et même une sérieuse alternative dans le développement mobile mutliplateformes.

La connaissance du langage Javascript constitue avec le couple HTML/CSS les bases des connaissances pour tout développeur Web côté front. Cette formation vous permettra de devenir un développeur Javascript avec de solides bases pour débuter avec ce langage ou vous préparer à une spécialisation sur l’un des nombreux frameworks Javascritp du moment (Angular, React, Node, etc.) y compris dans le monde mobile (Cordova). Une initiation à Jquery vous permettra d’en comprendre le confort pour manipuler le DOM et ajouter de l’interactivité à votre site.

Objectifs pédagogiques :

• Comprendre les briques d’une application ou d’un site Web ainsi que leurs échanges entre elles (http, xml, json, Javascript, Ajax, etc.)
• Connaître la syntaxe du langage Javascript
• Savoir utiliser les objets prédéfinis du langage
• Manipuler le contenu d’une page Web
• Animer son aspect graphique
• Mettre en place l’aspect interactif grâce aux événements déclenchés par l’utilisateur
• Bien comprendre les concepts asynchrones de JavaScript et la communication serveur (Ajax)
• Savoir utiliser les nouveautés apportées par le HTML5 comme l’utilisation de la géolocalisation ou le stockage de données hors ligne depuis un programme Javascript.
• Comprendre les bases de Jquery et en quoi il facilite le travail du développeur Javascript (DOM, effet, etc.)
• Respecter les bonnes pratiques du développeur Javascript et veiller aux performances
• Réaliser toute la partie Front End d’une application Web
• Débuguer en toute sérénité vos applications
• Découvrir les nouveautés du langage avec EcmaScript 6 (2016) et EcmaScript 7 (2017)

Public :

Cette formation s’adresse aux développeurs et chefs de projets.

Prérequis :

La connaissance des langages HTML, CSS ainsi que les bases de la programmation (variables, tests, boucles, fonctions) sont des prérequis indispensables.

Architecture et protocoles Web

Le modèle client/serveur dans le contexte du Web
Positionnement et complémentarité des différentes briques (HTML, CSS, Javascript, Java, PHP, etc.)
Protocoles et formats d’échange entre ces briques (HTTP, XML, JSON, WebServices, Ajax, etc.)
Mode d’appels des scripts depuis les pages HTML
Comment créer une zone de saisie?
Les différents modes de saisie HTML
Introduction aux navigateurs, au JavaScript et au DOM
Les principes d’utilisation des DOM
Les différences principales entre les navigateurs
L’interpréteur JavaScript: entrées/sorties des programmes

Le langage JavaScript

Introduction au langage JavaScript
Présentation d’exemples simples
Les versions de JavaScript
JavaScript embarqué dans les pages HTML
La grammaire du langage
Les variables
Les types de données
Les opérateurs
Les instructions
Les structures de programmation
La définition et l’utilisation de fonctions
Les objets et leurs utilisations en JavaScript (méthodes, propriétés)
Les dialogues avec l’utilisateur
Les tableaux
Les pièges classiques en JavaScript

Nouveautés EcmaScript 2015/2016 (présentation)

Javascript et EcmaScript (vocabulaire : ECMA, Ecmascript, ES6, ES7, ES2015, ES2017, etc.)
Les nouveautés apportées par ES6 et ES7
Compatibilité avec les navigateurs et les frameworks
Arrow function, promise, etc.
Module import

Gérer les événements et les données en Javascript

Les évènements gérés par Javascript (survol, clic, clavier, etc.)
Propagation des événements
L’objet Event
Les pop-ups
Le fonctionnement de l’objet document. Interactivité, contrôle et transformation des pages HTML
Manipulation de la page (DOM)
Manipulation des URL et des redirections
Sélection d’éléments
Modification du contenu HTML
Modification du graphisme CSS

Développer au quotidien avec JavaScript

Gestion des chaînes de caractères à travers l’objet String
Les principales fonctions mathématiques dans l’objet Math
Manipulation des dates via l’objet Date
Manipulation des tableaux via l’objet Array
Les expressions régulières dans le JavaScript
Règles de transtypage et comparaisons
Paramètres obligatoires / facultatifs / indéfinis des fonctions
Quelques outils pour tester, debugger et mesurer les performances de vos programmes Javascript

Gestion des formulaires

Composants d’un formulaire (checkbox, textbox, list, button, etc.)
Manipulation de l’objet form
Contrôle des données saisies dans un formulaire
Le Formulaire dynamique
Liens entre événements et formulaire (chargement, modification, validation, etc.)

AJAX : dialoguer avec le serveur

Pourquoi AJAX (Asynchronous Javascript And Xml) ?
Mise en œuvre avec l’objet XMLHttpRequest
Méthodes de requête http (GET, POST, etc.)
Récupération de contenus HTML, XML ou JSON

Présentation de JavaScript avec HTML5

Géolocalisation
Glisser / Déposer
Multi upload
Historique (pushstate)
Local Storage
Web GL
Web RTC
Fullscreen
API branchées mobile
Détecteur de proximité
Vibration API
Utilisation du gyroscope du smartphone
Accès à la webcam, au micro
Shadow DOM
Evolutions attendues …

Initiation à JQuery

Qu’est-ce que Jquery ?
Chargement de Jquery dans la page ou via un CDN
Bases syntaxiques de jQuery
Effets
Evènements
Manipulation DOM
AJAX

Ce cours est ponctué de nombreux Travaux Pratiques pour une meilleure assimilation de la théorie:

• Manipuler le DOM avec Javascript:
  Modifier des éléments de la page en les ciblant
• Js Interactif:
  Création d’un système de bulle de texte qui apparaît au survol d’un mot
  Création d’un menu déroulant JS
  Création d’une barre de progression de lecture de l’article
  Création d’un système d’onglet
• Js Mini Application:
  Création d’une mini application de gestion de tâches (sans partie backend)
  Sauvegarde des données en Local Storage
• Js et formulaires:
  Reprise du formulaire vu en HTML/CSS et ajout de validation temps réel
• JS et Ajax:
  Réalisation d’un Live sportif : mise à jour asynchrone d’une page avec Ajax
  Comprendre le chargement « intelligent » de la page
• JS et HTML 5:
  Géolocalisation et affichage sur une Google Map
  Enregistrement des données en local storage
  Mise en œuvre du Drag and Drop
  Création d’un chat temps réel
• JS et mobile:
  Utilisation des APIS mobiles comme le gyroscope
• Librairies JS et Jquery:
  Réalisation d’une table avec tri temps réel via librairie Js
  Ajout d’un diaporama d’images animées, des infobulles, et un système de filtrage
  Gestion d’un formulaire en Jquery