- Référence : IJDH
- Durée : 3 jours (21h)
- Lieu : Au choix. À distance ou en présentiel, à Paris ou en Régions
1990€ HT
Choisir une date et Réserver- Best
- AC
Formation JavaScript, les fondamentaux
4.6 sur 5 étoiles
5 étoiles
4 étoiles
3 étoiles
2 étoiles
1 étoile
Durée
3 jours
Niveau
Intermédiaire
Classe à distance
Possible
Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...
Référence
IJDH
Éligible CPF
Non
Le JavaScript permet la manipulation interactive des éléments constituant une page web côté client (Frontend) même si on peut également l’utiliser côté serveur (Backend). Jadis considéré comme un « petit langage de programmation », il est devenu au fil du temps un véritable langage de programmation avec toutes les composantes propres aux langages de haut niveau et fort de son succès il sert de socle aujourd’hui à tous les standard Frontend du marché comme Vue.js, React, ou Angular.
Après avoir pris en main votre environnement de développement et les fondamentaux syntaxique du langage vous comprenez sous quelle forme une page HTML est manipulée dans un programme Javascript en termes de structure de données (objets HTML ou DOM) et comment Javascript interagit dynamiquement avec cette page au rythme des événements (modification d’un texte, clic sur un bouton, apparition d’un bloc d’information, survol d’une zone, saisie dans un formulaire, etc.). Puis vous comprenez comment Javascript à travers la technique AJAX (Asynchronous Javascript And XML) fluidifie les échanges entre un navigateur et un serveur Web en chargeant ou en envoyant des données en arrière-plan sans devoir recharger toute la page.
Enfin, vous comprenez comment Javascript gère le Responsive Design (adaptation aux différents écrans) explicitement ou indirectement via les CSS ou d’autres technologies.
Ce cours s'appuie sur de nombreux exemples concrets que vous mettrez en œuvre et pourrez réutiliser au quotidien.
Si vous souhaitez allez plus loin que la découverte du langage Javascript et de ses concepts, vous pouvez aussi choisir la formation Développement d’applications web front-end avec JavaScript et les Frameworks Open Source (IJSO1) qui présente en plus les frameworks React et Angular.
Objectif opérationnel :
Savoir développer des sites et des applications web avec le langage de programmation JavaScript.
Objectifs pédagogiques :
À l'issue de cette formation JavaScript, vous aurez acquis les connaissances et compétences nécessaires pour :
- Appréhender Javascript dans la construction de sites et applications web
- Maîtriser les fonctionnalités essentielles
- Manipuler les pages et les rendre dynamiques
- Gérer les/Réagir aux événements et accroitre l'interactivité
- Développer en responsive design
Public :
Ce cours JavaScript s’adresse aux développeurs (back-end ou front-end) chargés de concevoir, d’organiser et d’animer l’interactivité d’un site ou d’une application web. Familiers du HTML et du CSS, ces développeurs sont sollicités pour apporter du dynamisme visuel et fonctionnel à une ou plusieurs briques de développement, tout en intégrant les considérations de responsive design, de performance et d’expérience utilisateur.
Prérequis :
Les participants à cette formation JavaScript possèdent une bonne connaissance préalable du HTML, du CSS, d’un langage de programmation structurée et plus globalement de l’architecture d’une page web. Cette vue d’ensemble les prédispose à connaître les besoins et les enjeux soulevés par la programmation en JavaScript et les différents types d’évènements et de manipulations à prendre en compte.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant ce test.
J1
Présentation des différentes possibilités avec illustration par des exemples complexes et concrets
Mode d'appels des scripts depuis les pages HTML
Comment créer une zone de saisie ?
Les différents modes de saisie HTML
La mise en page avec le CSS
Introduction aux navigateurs, au JavaScript et au DOM
Les principes d'utilisation des DOM, les différences principales entre les navigateurs et les conseils d'utilisation
L'interpréteur JavaScript: entrées/sorties des programmes
Présentation de la consoleTravaux pratiquesObjectif : Prendre en main l'environnement et comprendre comment manipuler le DOM
Description : Création d’une petite page HTML contenant différents champs de saisie (texte, sélection, bouton) Gestion de l’interactivité avec JavaScript, affichage des évènements sur la console
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, les dialogues avec l'utilisateur, les tableaux, la gestion des événements et les différences selon les navigateurs, les objets prédéfinis
Les pièges classiques en JavaScriptTravaux pratiquesObjectif : Effectuer son premier développement en JavaScriptDescription : Création d’un premier script permettant de saisir des nombres et d’afficher en temps-réel la moyenne, le plus grand, le plus petit, etc.J2
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 JavaScriptTravaux pratiques Objectif : Se familiariser avec la richesse des bibliothèques d’objets Javascript
Description : Extraction de la date locale d’un visiteur pour effectuer des calculs sur les minutes et les jours. (getDate, getDay, getHours, etc. ) afin de présenter un compteur qui affiche des informations sur le temps passé sur une page (échéance de validation d’un caddie)
L'objet Document : le fonctionnement de l'objet Document.
Interactivité, contrôle et transformation des pages HTML
L'objet Form
Contrôle des données saisies dans un formulaire
Gestion des contenus des champs de saisie
Formulaire dynamiqueTravaux pratiques Objectif : Savoir gérer les objets JavaScript et les objets HTML
Description : Création de formulaire et de panier d’achatJ3
Modification du contenu HTML
Modification du graphisme CSSTravaux pratiquesObjectif : Être capable de manipuler des éléments contextuels sur une page
Description : On manipule le panier d’achat sous forme de tableau HTML géré via le DOM. On propose d’implémenter le Drag and Drop avec dans la fenêtre de gauche les titres des livres et dans la fenêtre de droite la panier d’achat. Si l’objet est mal centré lors du « drop » il retourne sur la fenêtre de gauche.
XMLHttpRequest
Méthodes et en-têtes http
Récupération de contenus HTML, XML ou JSON
Consommer un web Service en JavascriptTravaux pratiquesObjectif : Dialoguer avec le serveur sans recharger la page
Description : On alimente les titres des couvertures du TP précédent par un appel à un Web Service
Comment gérer les différences de taille des écrans ?
Les grilles fluides
Des images adaptatives
Créer du design adaptatif
Présentation de Bootstrap
CSS et Responsive DesignTravaux pratiquesObjectif : Savoir mettre en œuvre un site responsive
Description : À partir de l’application Web du TP adaptation de la mise en page afin qu’elle s’affiche correctement sur différents formats d’écran (desktop, tablette, mobile). Utilisation des media queries CSS, des unités flexibles (em, %, vh/vw), et des techniques de positionnement modernes comme Flexbox ou Grid.
Introduction aux techniques http, aux navigateurs et leurs DOM
Les principes de base des technologies clients serveursPrésentation des différentes possibilités avec illustration par des exemples complexes et concrets
Mode d'appels des scripts depuis les pages HTML
Comment créer une zone de saisie ?
Les différents modes de saisie HTML
La mise en page avec le CSS
Introduction aux navigateurs, au JavaScript et au DOM
Les principes d'utilisation des DOM, les différences principales entre les navigateurs et les conseils d'utilisation
L'interpréteur JavaScript: entrées/sorties des programmes
Présentation de la consoleTravaux pratiquesObjectif : Prendre en main l'environnement et comprendre comment manipuler le DOM
Description : Création d’une petite page HTML contenant différents champs de saisie (texte, sélection, bouton) Gestion de l’interactivité avec JavaScript, affichage des évènements sur la console
Le langage JavaScript
Introduction au langage JavaScript, présentation d'exemples simples, les versions de JavaScript, JavaScript embarqué dans les pages HTMLLa 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, les dialogues avec l'utilisateur, les tableaux, la gestion des événements et les différences selon les navigateurs, les objets prédéfinis
Les pièges classiques en JavaScriptTravaux pratiquesObjectif : Effectuer son premier développement en JavaScriptDescription : Création d’un premier script permettant de saisir des nombres et d’afficher en temps-réel la moyenne, le plus grand, le plus petit, etc.J2
Les objets du langage JavaScript
Gestion des chaînes de caractères à travers l'objet StringLes 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 JavaScriptTravaux pratiques Objectif : Se familiariser avec la richesse des bibliothèques d’objets Javascript
Description : Extraction de la date locale d’un visiteur pour effectuer des calculs sur les minutes et les jours. (getDate, getDay, getHours, etc. ) afin de présenter un compteur qui affiche des informations sur le temps passé sur une page (échéance de validation d’un caddie)
Javascript : Les objets de la page HTML
L'objet Windows : gestion des fenêtres et de leur communication. Les popupsL'objet Document : le fonctionnement de l'objet Document.
Interactivité, contrôle et transformation des pages HTML
L'objet Form
Contrôle des données saisies dans un formulaire
Gestion des contenus des champs de saisie
Formulaire dynamiqueTravaux pratiques Objectif : Savoir gérer les objets JavaScript et les objets HTML
Description : Création de formulaire et de panier d’achatJ3
Manipulation de la page (DOM)
Sélection d'élémentsModification du contenu HTML
Modification du graphisme CSSTravaux pratiquesObjectif : Être capable de manipuler des éléments contextuels sur une page
Description : On manipule le panier d’achat sous forme de tableau HTML géré via le DOM. On propose d’implémenter le Drag and Drop avec dans la fenêtre de gauche les titres des livres et dans la fenêtre de droite la panier d’achat. Si l’objet est mal centré lors du « drop » il retourne sur la fenêtre de gauche.
AJAX : dialoguer avec le serveur
Pourquoi AJAX (Asynchronous Javascript And Xml ) ?XMLHttpRequest
Méthodes et en-têtes http
Récupération de contenus HTML, XML ou JSON
Consommer un web Service en JavascriptTravaux pratiquesObjectif : Dialoguer avec le serveur sans recharger la page
Description : On alimente les titres des couvertures du TP précédent par un appel à un Web Service
Responsive Design
Les requêtes de média (Media Queries)Comment gérer les différences de taille des écrans ?
Les grilles fluides
Des images adaptatives
Créer du design adaptatif
Présentation de Bootstrap
CSS et Responsive DesignTravaux pratiquesObjectif : Savoir mettre en œuvre un site responsive
Description : À partir de l’application Web du TP adaptation de la mise en page afin qu’elle s’affiche correctement sur différents formats d’écran (desktop, tablette, mobile). Utilisation des media queries CSS, des unités flexibles (em, %, vh/vw), et des techniques de positionnement modernes comme Flexbox ou Grid.
L’approche pédagogique repose sur un apprentissage par la pratique structurée autour d’un projet fil rouge parlant à tout le monde et décomposé en petits ateliers progressifs (site Web marchand proposant des produits, visiteur, panier d’achat, dates des visites du site, etc.).
Pédagogiquement le message important à faire passer est sur la structuration d’une page WEB (que l’on parle de site WEB ou d’application WEB) « vue par Javascript ». On fait donc réfléchir les participants sur le fait qu’une page HTML n’est pas « consommable » telle quelle dans un programme Javascript et on pose la problématique « En quoi le format texte brute d’une page Web au format HTML ne facilite pas sa gestion dans un programme informatique ? » avant même d’aborder le contexte Javascript. Nous adoptons la même démarche de pédagogie inductive pour tous les sujets conceptuels de la formation (DOM, programmation événementielle, responsive, etc.) que l’on valide sous forme de Quiz et nous réservons les ateliers pratiques pour valider les acquis opérationnels.
Dates et lieux
1
2
1
2
Votre formation JavaScript prise en charge jusqu'à 100% des coûts pédagogiques ! *
Depuis 2011, Atlas (ex-Fafiec) a sélectionné PLB Consultant pour vous proposer les meilleures formations autour du développement objet avec .NET, Java et C++.
- Sessions inter-entreprise sur Paris et Lille.
- Sessions intra-entreprise sur toute la France.
* jusqu'à 100% des coûts pédagogiques selon votre branche d'activité dans la limite des fonds mutualisés dédiés aux actions collectives et en application des critères de prise en charge en vigueur (cf conditions détaillées sur le site d'Atlas)
Vous pouvez retrouver le lien direct vers cette formation sur le site d'Atlas, à l'adresse suivante :
Avis des participants à la formation JavaScript, les fondamentaux
Les avis figurant ci-dessous sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
MJ
4/5
Mon avis sur le contenu du stage :
"Le support du cours est interessante et indisponsable, j'aurais peut etre apprecie plus de structure dans les exemples pour m'aider a referencer les parties que je n'ai pas reussi a completer. J'ai perdu du temps avec le machine virtuel, et finalement c' etait aussi simple de travailler en locale avec une editor et Mozilla"
Mon avis sur le formateur :
"Ca aller assez vite pour moi, surtout que je n'avais pas pu suivre le cours HTML/CSS par avant. J'avais besoin de plus d'interactivite et de repetition, meme si le methode pedagogique faisait le repetition des informations importante par les exemples. "
Ce que j'ai le plus apprécié :
"les examples construit par la formateurs en live. "
Ce que j'ai le moins apprécié :
"pas assez de discussion entre les participants avec les questions qui peut aider tout le monde, peut etre le formateur peux soliciter plus les personnes pour travailler directement avec eux sur leurs questions. Peut etre une methode pour poser les bonnes questions au debut (d'ou viens les inputs/outputs, quel sonts les functions...)"
Olivier
5/5
Mon avis sur le contenu du stage :
"Heureusement que j'en avais fait auparavant tout de même. Je vais devoir digérer tout cela et expérimenter avant de me prétendre opérationnel. Cette formation me permet d'avoir une vision globale de ce qui a évolué fortement ces derniers temps. Cela me permet d'envisager plus sereinement le tournant technologique engagé dans mon service (angular)"
Mon avis sur le formateur :
"Un praticien expert, rien de tel. Normalement cette formation est impossible à faire tellement le sujet est foisonnant : good game :)"
Mon avis sur la salle de formation :
"Mauvais en raison de la connexion lamentable mais c'était notre problème. La prochaine formation à distance serait à mon domicile où ça fonctionne nickel (connexion normale et double écran)."
DT
5/5
Mon avis sur le contenu du stage :
"La partie JQuery, aujourd'hui datée, pourrait être vue rapidement, et réserver une partie aux dernières évolutions du language post 2015. Les exercices effectués en TDD sont une bonne idée."
Ce que j'ai le plus apprécié :
"Formation très bien organisée. Locaux accueillants, propres, café et fruits offerts en salle de pause. Les postes de travails sont suffisament puissants, intallation clean avec accès en administrateur pratique pour installer son IDE préféré."
Ce que j'ai le moins apprécié :
"La salle, petite, accumule vite la chaleur."
Vanessa
4/5
Mon avis sur le contenu du stage :
"Exercices pas toujours simple par rapport à ce qu'il vient d'être vu...notamment pour zoomer sur ce qu'il vient d'être appris. "
Mon avis sur le formateur :
"Les problèmes de distance n'ont surement pas arrangé... "
Ce que j'ai le plus apprécié :
"Tout ce qui a été prévu par PLB au niveau technique était parfait. Après nous dépendions de la qualité bande passante sur place..."
Ce que j'ai le moins apprécié :
"coupures pendant la formation qui peuvent rendre compliqué l'apprentissage..."
MOTTA VITTORIO Emmanuel
5/5
Mon avis sur le contenu du stage :
"Très satisfait de cette formation. Merci."
Mon avis sur le formateur :
"Cette formation a répondu à mes attentes. Le formateur très disponible et vu le nombre peu élevé de participants (3 personnes), le formateur était vraiment très disponible pour répondre à toutes nos interrogations et nos attentes."
Mon avis sur la salle de formation :
"Très satisfait."
Ce que j'ai le plus apprécié :
"Tout."
AC
5/5
Mon avis sur le contenu du stage :
"Travaux pratique : via site web, pas à pas, très bien pour apprendre en excerçant !"
Mon avis sur le formateur :
"Parfait, très bon formateur, très bonne communication & connaissances"
Ce que j'ai le plus apprécié :
"Communication avec les autres & le formateur, le support et les travaux pratique proposés, l'aide apportée dès que besoin"
Ce que j'ai le moins apprécié :
"RAS"
SIATOTHRO Manuelo
4/5
Mon avis sur le contenu du stage :
"Les cours sont clairs et les supports complets !"
Mon avis sur le formateur :
"Le formateur est pédagogue et patient !"
Mon avis sur la salle de formation :
"Environnement de travail agréable et clair !"
Ce que j'ai le plus apprécié :
"outils informatiques de qualité !"
Ce que j'ai le moins apprécié :
"rien. tout était parfait !"
FJ
4/5
Mon avis sur le contenu du stage :
"Excellente formation mais mon niveau de connaissances en programmation n'était pas suffisante."
Ce que j'ai le plus apprécié :
"Une très bonne pédagogie du formateur et un sujet très intéressant."
Ce que j'ai le moins apprécié :
"Trop court en 3 jours (lié à mes connaissances initiales)."
PERNOUD -HERMANN Carole
4/5
Mon avis sur le contenu du stage :
"utilisation JS sur adobe (Neolane) qui a son propre langage, je dois donc réadapter tout ce que j'ai appris."
Ce que j'ai le plus apprécié :
"interactivités avec les stagiaires"
Ce que j'ai le moins apprécié :
"les niveaux et métiers disparates entre les éleves"
LOUVET Romain
5/5
Mon avis sur le contenu du stage :
"Bon diversité des sujets abordés. Bon ratio théorie / exercices."
Ce que j'ai le plus apprécié :
"Disponibilité du formateur. Qualité du support de cours (doc PDF) qui sera réutilisable par la suite."
Ce que j'ai le moins apprécié :
"RAS"
THALER Pascal
5/5
Mon avis sur le contenu du stage :
"Très bien rythmé"
Mon avis sur le formateur :
"Très bon pédagogue, compétent et très bon exemples terrains !!!!"
DC
5/5
Mon avis sur le contenu du stage :
"Contenu très interessant et complet."
Mon avis sur le formateur :
"Formateur très compétent, pédagogue et chaleureux."
Damien
4/5
Mon avis sur le contenu du stage :
"Mon niveau en dév étant légèrement trop faible. Exercice parfois complexe"
Mon avis sur le formateur :
"Top"
JG
5/5
Mon avis sur le formateur :
"formation dense, dommage qu'elle ne s'étale pas sur plus de jours"
Ce que j'ai le moins apprécié :
"bugs de teams "
NB
5/5
Mon avis sur le contenu du stage :
"Formation très interessante. "
Mon avis sur le formateur :
"Formateur très compétent et disponible."
BS
5/5
Mon avis sur le formateur :
"Très bon pédagogue sur tous les plans ; humain, partage, connaissance ........................ "
SC
4/5
Ce que j'ai le plus apprécié :
"tranquilité des locaux"
HT
5/5
Mon avis sur le formateur :
"Très Sympathique et pédagogue"
Fabienne
4/5
Mon avis sur le formateur :
"Bonne animation, convivialité."
undefined
5/5
Mon avis sur le formateur :
"Le formateur toujours au top !!!"
AGNIEL Céline
5/5
KM
4/5
CP
5/5
BJ
4/5
CG
5/5
AS
5/5
AC
4/5
PC
5/5
MOLINA Guillaume
4/5
PP
5/5
RM
4/5
LELONG Yvan
5/5
DV
5/5
TS
4/5
SR
4/5
WRAF
5/5
DC
5/5
MILLET Benjamin
5/5
DB
5/5
LK
5/5
LAMBERT Thibault
5/5
Ces formations peuvent aussi vous intéresser :
Objet, Fonctionnalités Avancées, Ajax, Web Services, Bonnes pratiques, performances, tests, industrialisation, EcmaScript, Typescript
- Niveau : Avancé
- Référence : IJDA
Maîtriser JavaScript
- 4 jrsHTML dynamique, Formulaires, Jquery, DOM, JSON, XML, Ajax, EcmaScript 6
- Niveau : Intermédiaire
- Référence : IJSO
La nouvelle génération du langage JavaScript, EcmaScript 2015, ES2016, ES6, ES7, ES8, ESNext
- Niveau : Intermédiaire
- Référence : JSES
Découvrir les nouvelles fonctionnalités d'ECMAScript et apprendre à développer une application en TypeScript
- Niveau : Intermédiaire
- Référence : JTPS
Formations Informatique
et Management
en ligne à ce jour
+
Stagiaires dans nos salles
de cours sur
l'année
4,7/5
94% de nos participants
sont satisfaits ou
très satisfaits
Formateurs experts
validés par
PLB
%
Des participants
recommandent
nos formations
