Programme de Formation Javascript/Ecmascript : Approfondissement

Aller plus loin avec les objets

Le prototypage

Déclaration de méthodes

L'association d'objet rapide ( Object.assign() )

Les chaînes de caractères et les dates

Les méthodes associées aux chaînes de caractères

La classe Math

Internationalisation: format de dates et monétaires

Utiliser les syntaxes de classe

Déclaration de Classe

Constructeur et accesseur

Les variables et méthodes de classe (static)

Héritage

Iterator et Generator

Les collections (Set et Map)

Atelier : Créer le jeu du chifumi en orienté objet Exploiter les traitements asynchrone avec les promesses

Définition

Créer une promesse

Les fonctions resolve() et reject()

Attacher nos callbacks à une promise (then(), catch()

Atelier : Récupérer des données à l'aide de Promesse Dialoguer avec un serveur (Ajax, XMLHttpRequest)

Principe de communication asynchrone

Instancier et préparer un objet XMLHttpRequest

Gestion des erreurs

Barre de progression

Protocole HTTP, méthodes et status

Sérialisation et désérialisation de données

Utilisation des données: Le format XML, le format JSON

Atelier : Soumettre et lire des données provenant d'une API REST

Programme de Formation Javascript/Ecmascript : Initiation + Approfondissement

Introduction

Présentation

Panorama des environnements JavaScript

Versions et standard ECMAScript

Écrire des instructions en Javascript

Les variables et les types de données

Les opérateurs

Portée des variables var, let, const

Les intructions de bloc

Les structures de contrôle (conditionnelles et itératives)

Déclarer et appeler des fonctions

Définir une fonction, syntaxe déclarative et expressions

Transmettre des paramètres

Retourner une valeur

Définir des paramètres par défaut

La console (log, debug, info, error, ...)

Interagir avec le document via le DOM

Présentation, historique et version

Les objets window et document

Accéder aux éléments (getElementById, querySelector, querySelectorAll)

Découvrir les évènements

Liste des évènements de souris et de clavier (click, keypress, mouseover, etc)

Gestion des fenêtres et boîtes de dialogues

Atelier : Faire afficher et masquer des balises HTML Manipuler des tableaux

Présentation et structures d'un tableau

Déclaration de tableau (littéral, constructeur)

Ajout et suppression de données (push(), splice())

Parcourir un tableau (forEach, for of)

Les fonctions spécifiques (slice, pop, shift, reverse, etc)

Les fonctions find() et findIndex()

Appréhender le concept d'objet

Présentation

Les objets littéraux

Ajouter & accéder aux propriétés

Les property shorthand

Exploiter des sucres syntaxiques

Les littéraux de templates

Affectation par décomposition

Rest Parameter & Spread Operator

Les fermetures

Les fonctions fléchées

Atelier : Filtrer des données affichées dans une liste Déclencher des traitements au travers d'événements

Principe des écouteurs d'évènement

Les évènements attacher au navigateur (load, unload, resize, etc)

Les évènements de formulaire (submit et reset)

Récupérer et manipuler l'évènement

Les fonctions preventDefault() et stopPropagation()

Atelier : Valider les données d'un formulaire Gérer dynamiquement les attributs

Manipuler les attributs (getAttribute & setAttribute)

Modifier le contenu d'une balises (innerHTML, innerText, innerContent)

Liste des propriétés css en javascript

Modifier le css à l'aide de l'attribut style

Ajout & suppression de class (className, classList)

Parcourir et transformer le DOM

Parcourir l'arbre DOM (parentNode, childNode)

Les fonctions parentChild() et firstChild()

Créer et insérer une balise (createElement, appendChild, createTextNode)

Les fonctions NextSibling et PreviousSibling

Supprimer une balise (removeChild)

Atelier : Réordonner une liste avec du drag & drop Aller plus loin avec les objets

Le prototypage

Déclaration de méthodes

L'association d'objet rapide ( Object.assign() )

Les chaînes de caractères et les dates

Les méthodes associées aux chaînes de caractères

La classe Math

Internationalisation: format de dates et monétaires

Utiliser les syntaxes de classe

Déclaration de Classe

Constructeur et accesseur

Les variables et méthodes de classe (static)

Héritage

Iterator et Generator

Les collections (Set et Map)

Atelier : Créer le jeu du chifumi en orienté objet Exploiter les traitements asynchrone avec les promesses

Définition

Créer une promesse

Les fonctions resolve() et reject()

Attacher nos callbacks à une promise (then(), catch()

Atelier : Récupérer des données à l'aide de Promesse Dialoguer avec un serveur (Ajax, XMLHttpRequest)

Principe de communication asynchrone

Instancier et préparer un objet XMLHttpRequest

Gestion des erreurs

Barre de progression

Protocole HTTP, méthodes et status

Sérialisation et désérialisation de données

Utilisation des données: Le format XML, le format JSON

Atelier : Soumettre et lire des données provenant d'une API REST

Programme de Formation Webpack, Grunt, Gulp et Bower : Créer un environnement de développement

Présentation

Historique des versions

Les avantages de Webpack

Gulp vs Grunt vs Webpack

La documentation

Rappel node et npm

Atelier : Installer et créer un projet avec Webpack Les bases

Configuration de l'environnement: webpack.config

Gestion des points d'entrées et des sorties

Utiliser les loaders et les plugins

Démarrer une application à l'aide des scripts npm

Utiliser les syntaxes ES6: babel loader

Atelier : Gérer un projet avec typescript

Environnement et optimisation

Mode dev et mode prod

Créer un serveur local avec webpack-dev-server

Les sources map

Mise à jour automatique: watch mode

Minification des sources

Utiliser le lazy loading

Atelier : Configurer un projet pour l'environnement de développement et de production Présentation Grunt / Gulp / Bower Gulp

Undertaker, le système d'enregistrement des tâches automatisées

Création de tâches

Vyniles, les objets de fichiers virtuels

Globbing : localiser les fichiers à l'aide de globs

Modules de Gulp : publication de correction avec Semver

Atelier : installer, créer un projet et configurer l'environnement de développement Grunt

gruntfile.js(ou Gruntfile.coffee) et package.json

Configurer et créer les tâches automatisées

Charger des tâches externes

Alertes et erreurs

Atelier : installer, créer un projet et configurer l'environnement de développement Bower ou Yarn

Comparaison Bower - npm

installer des packages

créer son propre package

utiliser les variables d'environnement

Hooks

Atelier : installer, créer un projet et tester

Programme de Formation Bootstrap : Sites Web adaptatifs

Découvrir Bootstrap

Bootstrap : présentation, apports, exemples

Bootstrap et le Responsive Web Design (RWD)

Cohabitation de Bootstrap avec les autres frameworks javascript : jQuery, ExtJS,...

Grille Bootstrap, templates de base et layouts

Composants et classes CSS

Mécanisme de RWD (classes CSS / device)

Documentation, liens utiles

Rappels HTML5/CSS

Bases de jQuery

Atelier : Inclure Bootstrap dans un projet, une première grille flexibleMaîtriser les classes CSS de base

Typographie et liens

Tableaux : lignes, bordures, survol, RWD

Eléments de formulaires, contrôles supportés

Boutons : options, tailles, état

Images et icônes : éviter les débordements

Atelier : Utilisation de classes bootstrap dans des pages webUtiliser les composants Bootstrap

Barres de navigation : tabs, pills, justified nav

Menus déroulants : formulaires, boutons, positionnement

Breadcrumb (fil d'arianne)

Pagination

Badges

Alertes

Barres de progression : labels, animations

Media object

List group

Atelier : Multiples exemples d'intégration de composants BootstrapManipuler Bootstrap en Javascript

Mise en place de transitions

Fenêtres modales : types, tailles

Gestion des menus déroulants

Tabulations

Sliders

Auto-complétion

Personnalisation de Bootstrap

Gestion des claviers virtuels

Désactivation du responsive sur certaines pages

Gestion du zoom

Atelier : Intégration d'interractions et de transitionsManipuler Bootstrap avec Less

Présentation de Less

Utilisation en mode interprété / compilé

Variables: déclaration et appel

Variables: interpolation et lazy loading

Héritage de règles

Manipulation avancée

Mixin: principes de base, espace de nommage

Mixin paramétrique

Mixin en tant que fonction

Gardien: structures conditionnelles et itératives

Inclusions d'autres feuilles Less

Atelier : Modification multiple des composants Bootstrap avec Less

Programme de Formation jQuery

Introduction

Présentation de jQuery : objectifs, alternatives...

Cas d'utilisation, exemples de sites

Principes spécifiques et astuces

Cohabitation avec d'autres frameworks

Atelier : Mise en place de jQuery (développement/production) - gestion des conflits avec les autres frameworks ($ / jQuery)Le coeur de jQuery

Fonctions essentielles et chaînage

Sélecteurs CSS3 étendus

Parcours, manipulation de l'arbre DOM et filtres

Atelier : Manipulation de pages web avec jQuery : éléments, styles, ...Le système complet des callbacks

Principe

Contrôle du contexte d'exécution des callbacks

Fonctions existantes

Atelier : Multiples cas d'utilisation des callbacks, consommationInterfaces utilisateurs grâce à jQuery

Comportement des liens

Association d'évènements et déclenchement

Effets d’animations

Atelier : Panorama des évènements gérés par jQuery, association d'effetsAJAX avec jQuery

Communication asynchrone/synchrone

Mise en oeuvre d'AJAX

Fonctions jQuery disponibles

Interface des objets Deferred et Promise

Chargement de pages et injection de code

Intégration complète d'AJAX et de l'UI

Compatibilité avec les autres frameworks

Atelier : Requêtes AJAX et parsing XML avec jQueryLe système des plugins et l'augmentation de jQuery

Principe de fonctionnement

Panorama des plugins existants (jQuery UI, autres...)

Widgets : sliders, infobulles, drag’n’drop...

Création d'un plugin personnalisé jQuery

Atelier : Intégration/utilisation de plugins existants (slider, datePicket, ...) - Création d'un plugin

Programme de Formation Accessibilité Web

Comprendre l'accessibilité

Les problématiques et contraintes

Les normes WCAG 2.0, RGAA et AccessiWeb 2.2

Rendre des pages accessibles

Les éléments obligatoires pour une page (doctype, langue, etc)

Les attributs des balises (images, liens, multimedias, etc)

Structurer et présenter les informations (Titre, liste, citation, etc)

Les styles et les couleurs

Les formulaires

Faciliter la navigation

Rendre accessible les éléments consultatifs (document en téléchargement)

Atelier: Mettre en place une page valide pour l'accessibilitéUtiliser des éditeurs

Les éditeurs WYSIWYG et l’accessibilité

L’intégration d’outil CMS et l’accessibilité

Atelier: Intégrer un WYSIWYG et tester l'accessibilité Valider l'accessibilité d'un site

Comprendre le principe de la validation automatique

Utiliser les outils de validation

Les niveaux de validations

Atelier: Tester la validité d'un site