Formation Maîtriser JavaScript

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)

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

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 naviGusturs, au JavaScript et au DOM Les principes d’utilisation des DOM Les différences principales entre les naviGusturs 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 naviGusturs 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

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.

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