Organisme de Formation aux technologies et métiers de L'informatique
Effectuez une recherche
recherche
Accédez à votre espace client
Une question ? Contactez-nous
0 article panier
éditeurs domaines cursus certifications cpf
javascript

Cursus Développeur d'applications web full JavaScript

Cursus Métier Certifiant
Ce cursus métier est composé de plusieurs formations distinctes

Télécharger le plan de cours
Demander un devis
Obtenir un renseignement

Informations générales

MET042
16 jours (112h)
9 500 €HT
- MCSA Web Applications

Objectifs

Après ce cours, vous serez capable de :

  • Disposer du vocabulaire (source, bibliothèque, compilation, exécution, bug…) propre à la programmation
  • Savoir traduire des besoins fonctionnels en algorithmes (boucle, test…)
  • Savoir concevoir globalement une application (programme, modules, procédures, fonctions)
  • Identifier comment accéder aux données (fichiers, bases "SQL")
  • Identifier les différents types de langage (procédural, objet, événementiel)
  • Identifier l'importance des types de données
  • Savoir écrire des programmes simples en Basic et en Java
  • Disposer des compétences nécessaires au développement d'un site internet full HTML5 / CSS3
  • produire des pages compatibles avec les différents navigateurs internet
  • créer des interactions dynamiques avec l'utilisateur sans développement serveur
  • tirer parti des dernières nouveautés HTLM5 comme le lecteur vidéo compatible mobiles
  • Maîtriser l'utilisation des balises et feuilles de style HTML5/CSS3
  • Utiliser JavaScript pour gérer l'interactivité d'un site web
  • Savoir construire son site en Responsive Design
  • Gérer les évènements et les manipulations dynamiques
  • Évaluer les enjeux du développement d'une application web et son intérêt
  • Disposer des connaissances et compétences nécessaires pour rendre une application "offline"
  • Maîtriser l'utilisation du Framework proposé par Google : Angular 2+ (versions 2 et ultérieures)
  • Identifier comment tirer parti de Bootstrap pour développer rapidement des pages Web "responsive"
  • prendre en charge l'intégralité du développement de la partie "front"
  • Passer l'examen MCSA Web Applications
plus d'infos

Public

Ce cours s'adresse avant tout aux personnes suivantes :

  • Développeurs .Net ou Java souhaitant exploiter les possibilités offertes par HTML5 et CSS3
  • Chargés de développement d'applications informatiques

Prérequis

Pour suivre ce cours, vous devez déjà posséder les connaissances suivantes :

  • Aucun

Programme de la formation

Partie 1 : Initiation à la programmation (3j)

  • 1ère partie : Concevoir un programme
  • Qu'est-ce qu'un programme informatique
    • Traduire la pensée en langage machine
    • Langages compilés et langages interprétés
    • Réutiliser ce qui a déjà été fait
  • Algorithmique
    • Formaliser les étapes du programme
    • Comprendre ce que va faire le programme
  • Programmation structurée et programmation orientée objet
    • Pourquoi travailler avec des objets
    • Concepts de classe, héritage, polymorphisme
    • Les avantages de l'encapsulation
  • Choisir son langage
    • Langages de script
    • Langages objets
  • 2ème partie : Écrire son programme
    • 6.1)
  • Manipuler les données du programme
    • Déclaration des variables
    • Mise en oeuvre des types de données
    • Les opérateurs de la programmation
    • Les tableaux
  • Les structures de programmation
    • Structures de test
    • Structures de répétition
  • Passer à la pratique
    • Création d'un programme simple en Java
    • Écrire son premier script VBScript
  • 3ème partie : Les bonnes pratiques de la programmation
    • 10.1)
  • Modularisation du code
    • Notion de sous-programmes : les fonctions et les procédures
    • Gestion des paramètres
  • Partager son code
    • Trouver et utiliser les bibliothèques d'un langage
    • Savoir mettre à profit le travail déjà effectué
  • Bien écrire son programme
    • L'importance des commentaires
    • Les conventions de nommage
  • 4ème partie : Gestion des données externes
  • Les SGBD
    • Que sont les Systèmes de Gestion de Bases de données ?
    • Comment communiquer avec un SGBD ?
    • Les API de base de données
  • SQL : le langage des SGBD
    • La norme SQL
    • Les verbes du langage
    • L'interrogation des données par le SELECT
    • Utiliser les API de base de données
  • Gérer ses données à l'aide de fichier
    • Comprendre les étapes de manipulation d'un fichier
    • Le format CSV
    • Similarité du modèle d'entrée-sortie standard
  • 5ème partie : Les outils pour mieux coder
    • 18.1)
  • Les environnements de développement
    • De l'éditeur de texte simple à l'IDE
    • Un outil pour un langage
  • Corriger son code à l'aide de l'éditeur
    • Mise en oeuvre des techniques de débogage
    • Découvrir Visual Basic Editor

Partie 2 : Les fondamentaux du développement d'interfaces graphiques avec HTML5, CSS3 et JavaScript (5j)

  • Présentation
    • HTML : le langage du Web
    • Contexte historique
  • Environnement et structure
    • Concept et usage des balises
    • Le bon usage des balises
    • Particularités et pièges du HTML
    • Le document HTML minimum
  • Mise en forme du document
    • Le texte simple
    • Les objets d'un document
    • L'en-tête d'un document HTML
  • Mise en forme du texte
    • Titres et paragraphes de texte
    • Le contrôle de passage à la ligne
    • Le formatage du texte, l'alignement
    • La taille, la couleur et la police
    • Les caractères spéciaux
    • Les commentaires
    • Les autres balises de texte
  • Les listes
    • Numérotées, à puces, imbriquées
    • Les listes de définition
  • Les tableaux
    • Cellules de tableau et fusion des cellules
    • Gestion de la taille du tableau
    • En-tête et légende
    • Les bordures
    • Les groupes de colonnes et de lignes
  • Les hypertextes
    • La balise de liens
    • Les différents types de liens : vers une autre page, dans une page, vers un site Web, de téléchargement...
    • Les Target
    • L'attribut titre
    • La couleur des liens
    • Liens et feuilles de style
  • Insertions d'images
    • L'insertion d'une image
    • L'espace autour d'une image
    • L'alignement d'une image
    • Couleur et image d'arrière-plan
    • L'insertion d'un lien sur une image
    • Les images réactives
  • Les formulaires
    • La déclaration de formulaire
    • Zone de texte à une ligne
    • Menu déroulant
    • Boutons : radio, checkbox, d'envoi, d'annulation, de commande
    • Les formulaires : cachés, de transfert de fichier, de mot de passe
    • L'organisation des éléments d'un formulaire
  • Les méta-informations
    • Doctype ou DTD
  • Les feuilles de style
    • Les propriétés : couleur, police, marge,...
    • Les classes
    • Dynamiser un site avec CSS
    • Gérer les positionnements
  • Introduction à JavaScript
    • JavaScript pour quoi faire ?
    • L'environnement du client Web
    • Le navigateur, les outils
  • JavaScript : le coeur du langage
    • La syntaxe
    • Les variables, les fonctions globales, les opérateurs, les structures de contrôle
    • Les fonctions : définition, arguments, fonctions littérales, fonctions sous forme de données
    • Objets personnalisés et objets globaux
    • Manipuler les tableaux, les dates, les chaînes de caractères
  • Les objets du navigateur
    • La hiérarchie des objets
    • Les principaux objets : window, document, location, screen, navigator, form...
    • Manipuler des fenêtres
    • Gérer des timers
  • Introduction à HTML5
    • Contexte : fonctionnement d'un site internet
    • Histoire et normalisation du HTML
    • La nouvelle vision HTML5
    • Roadmap HTML5
  • Comment utiliser le HTML5 aujourd'hui
    • Savoir quand choisir le HTML5
    • Utiliser le HTML5 avec des navigateurs qui ne le supportent pas
  • Le balisage HTML5
    • Structure d'une page
    • Doctype
    • Les nouveaux éléments et les éléments obsolètes
    • HTML5 et CSS3
  • Les formulaires
    • La balise form
    • Créer et utiliser des formulaires HTML5
  • Audio et vidéo
    • Les éléments audio et vidéo
    • Les conteneurs, les codecs
    • Compromis pour un site à forte audience
  • Vue d'ensemble des APIs
    • Les APIs HTML5
    • Audio et vidéo
    • Site web hors ligne
    • Drag & Drop
  • Dessiner en HTML
    • Canvas vs SVG
    • Contexte et accessibilité
  • La communication en HTML5
    • Les évènements
    • Envoi de messages entre documents
    • Envoi de messages par canaux
    • Le push et les WebSockets pour plus de performances
  • La géolocalisation
    • Vue d'ensemble
    • La vie privée de l'utilisateur
  • Stockage
    • Stockage local
    • Stockage en session
    • Bases de données SQL Web
  • CSS : standardiser des propriétés
    • Se passer d'images, éviter les astuces
    • Coins arrondis, ombres portées, transparence, animations
    • Autres nouveautés
  • CSS : mise en page et positionnement
    • Vue d'ensemble : clarifier le code, éviter la multiplication de div imbriquées
    • Niveau de présentation
    • Mise en page par patron
    • Mise en page multi-colonnes
    • Mise en page par boites horizontales ou verticales
    • Positionnement par grille
    • Autres nouveautés
    • CSS pour mobiles et tablettes

Partie 3 : Javascript - Fondamentaux (3j)

  • Introduction
    • JavaScript pour quoi faire ?
    • L'environnement du client Web
    • Le navigateur
    • Le modèle client / serveur
    • Les outils
    • Insérer un script dans un document HTML/XHTML
  • JavaScript : le coeur du langage
    • La syntaxe
    • Les variables et les constantes
    • Les fonctions globales : afficher des informations (console, alert) et interroger l'utilisateur (prompt)
    • Les opérateurs
    • Les structures de contrôle
    • Les fonctions : définition, arguments, fonctions littérales, fonctions sous forme de données
    • Les objets personnalisés : constructeur, méthodes et propriétés, prototype, objets littéraux, objets sous forme de tableaux associatifs
    • Les objets globaux : Array, Date, Math, RegExp, String... Manipuler les tableaux, les dates, les chaînes de caractères
  • Les objets du navigateur
    • La hiérarchie des objets
    • Les principaux objets : window, document, location, screen, navigatior, form... Leurs propriétés et méthodes
    • Manipuler des fenêtres
    • Gérer des timers
  • Le DOM
    • Introduction au XML, XHTML et HTML
    • Le DOM et les navigateurs
    • Sélectionner des éléments : API Selector Lvl 1 & 2
    • Manipuler des éléments : créer et insérer de nouveaux éléments, modifier les attributs d'un élément, modifier le contenu
  • La gestion des évènements
    • Le gestionnaire d'évènements
    • Modèle DOM
    • L'objet Event
    • La propagation des évènements
    • Compatibilité avec les différents navigateurs
  • Les formulaires
    • Les différents éléments d'un formulaire
    • Vérifier les données saisies dans les différents champs
    • Soumettre un formulaire
  • Les styles CSS
    • Rappel sur les styles CSS
    • Manipuler les styles CSS
    • Modifier une propriété de style d'un élément
    • Modifier la classe d'un élément
    • Modifier l'aspect d'un élément
    • Déplacer, afficher, masquer, réduire un élément
  • Requêtes avec un serveur
    • Présentation et historique d'Ajax
    • ActiveX
    • XMLhttpRequest
    • Fetch
  • Introduction à JQuery
    • Présentation de la librairie
    • Manipulation du DOM (sélection, création, modification, suppression de noeuds)
    • Gestion des événements
    • Création d'effets / animation
    • Modification des styles
    • Unobstrusive JavaScript avec jQuery

Partie 4 : Conception d'interfaces graphiques full JavaScript avec Angular, TypeScript et Bootstrap (5j)

  • Évolutions récentes du développement Web
    • Du site web à l'application web
    • Les nouveaux frameworks web et leurs utilités
    • La structure d'une application web
    • Les outils : webpack, npm, angular-cli
  • Rappels
    • Présentation de JavaScript ES6
    • Présentation des fonctions fléchées (Arrow functions) et de leur intérêt
    • Introduction aux fonctions synchrones et asynchrones (Promises & observables)
  • TypeScript : Principes et fonctionnement
    • Installation TypeScript
    • Transpiler EcmaScript
    • Let, variables locales et constantes
    • Typage et types natifs
    • Paramètres optionnels, valeurs par défaut
    • Classes et interfaces
    • Gestion des modules
    • Décorateurs
  • Angular : Principes et gestion des composants
    • Définition de composants
    • Comprendre les Web Components (standard, concepts, shadow DOM, scoped CSS...)
    • Cycle de vie dans l'application
    • Angular Compiler : Change Detection
    • Syntaxe des templates : interpolation/expression, Binding et filtres
    • Directives de transformation : ngIf, ngFor, ngSwitch...
    • Définition syntaxique, le symbole (*)
    • Variables locales et variables de Template
    • Classe de composants
    • Directives de configuration : selector, provider
    • Evènements utilisateur et évènements logiques personnalisés : EventEmitter
  • Angular : Gestion de l'environnement
    • FormControl et FormGroup
    • TDF versus DDF : Template Driven Form et Data Driven Form
    • Validation et gestion d'erreur personnalisée
    • Liaison de données via HTTP
    • Gestion et configuration des échanges HTTP au niveau applicatif
    • Création de routes
    • Intercepter les paramètres de routage et wildcard
    • Ciblage, router-outlet événements de routage
    • Gestion de routes dans l'arbre des composants
    • Configuration des Guard pour le l'initialisation des routes
  • Angular : fonctions avancées
    • Services workers
    • Création de pipes
    • AOT
  • Indexed DB
    • Paradigme de stockage objets
    • Principes de fonctionnements
    • Créer et structurer l'objet de stockage
    • CRUD
    • Updating de la structure
    • Sécurité
  • Socket IO
    • Présentation de Socket .IO
    • Intérêts d'utilisation
    • Communication full duplex
    • http2, Socket .IO
    • Gestion des sockets
    • Les rooms et le broadcast
plus d'infos

Méthode pédagogique

Chaque participant travaille sur un poste informatique qui lui est dédié. Un support de cours lui est remis soit en début soit en fin de cours. La théorie est complétée par des cas pratiques ou exercices corrigés et discutés avec le formateur. Le formateur projette une présentation pour animer la formation et reste disponible pour répondre à toutes les questions.

Méthode d'évaluation

Tout au long de la formation, les exercices et mises en situation permettent de valider et contrôler les acquis du stagiaire. En fin de formation, le stagiaire complète un QCM d'auto-évaluation.

Certification

Cette formation prépare au passage de la certification suivante.
N'hésitez pas à nous contacter pour toute information complémentaire.

MCSA Web Applications

Cette formation prépare au test 70-480 et entre en jeu dans le cursus de certification MCSA Web Applications.

Suivre cette formation à distance

  • Un ordinateur avec webcam, micro, haut-parleur et un navigateur (de préférence Chrome ou Firefox). Un casque n'est pas nécessaire suivant l'environnement.
  • Une connexion Internet de type ADSL ou supérieure. Attention, une connexion Internet ne permettant pas, par exemple, de recevoir la télévision par Internet, ne sera pas suffisante, cela engendrera des déconnexions intempestives du stagiaire et dérangera toute la classe.
  • Privilégier une connexion filaire plutôt que le Wifi.
  • Avoir accès au poste depuis lequel vous suivrez le cours à distance au moins 2 jours avant la formation pour effectuer les tests de connexion préalables.
  • Votre numéro de téléphone portable (pour l'envoi du mot de passe d'accès aux supports de cours et pour une messagerie instantanée autre que celle intégrée à la classe virtuelle).
  • Selon la formation, une configuration spécifique de votre machine peut être attendue, merci de nous contacter.
  • Pour les formations incluant le passage d'une certification la dernière journée, un voucher vous est fourni pour passer l'examen en ligne.
  • Pour les formations logiciel (Adobe, Microsoft Office...), il est nécessaire d'avoir le logiciel installé sur votre machine, nous ne fournissons pas de licence ou de version test.
  • Horaires identiques au présentiel.

Mis à jour le 07/03/2025