Name: JavaScript — Les fondamentaux pour dynamiser le web
Availability: InStock

Objectifs pédagogiques

Ce que vos stagiaires apprendront

1. Avant de commencer ce cours
2. Orientation
3. Reprenons par la base
4. Les variables et les opérateurs
5. Demander des informations
6. Tout sur les fonctions
7. Exeréons-nous sur les fonctions
8. La logique avec JavaScript
9. Projet #1 - Calculatrice
10. Les fonctions et la logique
11. Exercice sur les fonctions récursives
12. Tout savoir sur les tableaux
13. Notions avancées
14. Utilisons le potentiel de JavaScript
15. Parlons du BOM (Browser Object Model)
16. Communiquons avec un site internet
17. Modifions le style de nos éléments
18. Projet #2 - Cas pratique
19. Les événements
20. Exercices sur les événements
21. Projet #3 - Générateur de citations
22. Projet #4 : Les formulaires et JavaScript
23. La programmation orientée objet
24. Projet #5 - Fight Simulator
25. Devenez maétre du temps
26. Utiliser les API
27. Projet #6 - Une application météo
28. Utilisons les requétes asynchrones
29. Stocker des données dans le navigateur
30. Projet #7 : Créer un théme qui se souvient de nous
31. Et si on écrivait plus vite avec jQuery ?
32. Les inclassables
33. Projet #8 guidé - Application de météo géolocalisée
34. Conclusion

Contenu

Programme de la formation

224 leçons • Durée totale: 07:59:10 Développer toutes les sections

Section 1: Leçons 1 à 10

10 leçons 27 min

Bienvenue dans la formation "Javascript - Les fondamentaux "

2 min
Test de positionnement

3 min
Quelques conseils avant de commencer

2 min
Avant de commencer ce cours - Qu’allons-nous faire dans cette formation ?

2 min
Avant de commencer ce cours - Prérequis

1 min
Avant de commencer ce cours - Comment réussir cette formation ?

2 min
Avant de commencer ce cours - Comment poser mes questions ?

2 min
Reprenons par la base - Qu'est-ce que JavaScript

8 min
Reprenons par la base - Quels logiciels utiliser ?

4 min
Reprenons par la base - Quelles extensions installer ?

6 min

Section 2: Leçons 11 à 20

10 leçons 34 min

Reprenons par la base - Où allons-nous placer notre code Javascript ?

4 min
Reprenons par la base - Comment fonctionne VS Code ?

7 min
Les variables et les opérateurs - Qu'est-ce qu'une variable ?

5 min
Les variables et les opérateurs - Déclarons nos premières variables (Let, Const et Var)

5 min
Les variables et les opérateurs - Découvrons la concaténation

4 min
Les variables et les opérateurs - Le débogueur

5 min
Les variables et les opérateurs - Faisons des opérations mathématiques

3 min
Demander des informations aux utilisateurs - Qu'est-ce qu'une boîte de dialogue ?

1 min
Demander des informations aux utilisateurs - Afficher une information

1 min
Demander des informations aux utilisateurs - Demander une confirmation

2 min

Section 3: Leçons 21 à 30

10 leçons 19 min

Demander des informations aux utilisateurs - Demander des renseignements

1 min
Tout sur les fonctions - Qu’est-ce qu’une fonction ?

2 min
Tout sur les fonctions - Ecrivons notre première fonction

3 min
Tout sur les fonctions - Ajoutons des paramètres à notre fonction

3 min
Tout sur les fonctions - Note concernant la portée des variables

2 min
Tout sur les fonctions - Parlons des variables globales et des variables locales

2 min
Tout sur les fonctions - Les fonctions qui retournent quelque chose

2 min
Tout sur les fonctions - Les paramètres par défaut

2 min
Tout sur les fonctions - Utiliser une fonction déjà existante

2 min
Tout sur les fonctions - Convertissons nos données

3 min

Section 4: Leçons 31 à 40

10 leçons 23 min

Tout sur les fonctions - Les fonctions anonymes

3 min
Exerçons-nous sur les fonctions - Exercice #1 : Débutant

1 min
Exerçons-nous sur les fonctions - Correction de l’exercice 1

2 min
Exerçons-nous sur les fonctions - Exercice #2 : Avancé

2 min
Exerçons-nous sur les fonctions - Correction de l’exercice 2

5 min
La logique avec JavaScript - Qu'est-ce qu'une condition ?

3 min
La logique avec JavaScript - Les conditions (if / else)

3 min
La logique avec JavaScript - Fiche technique sur les opérateurs de comparaison

2 min
La logique avec JavaScript - Les conditions (switch)

3 min
La logique avec JavaScript - Vérifier plusieurs conditions d'un coup (OR / AND)

4 min

Section 5: Leçons 41 à 50

10 leçons 22 min

La logique avec JavaScript - Vérifier le contraire d'une condition (NOT)

3 min
La logique avec JavaScript - Les conditions ternaires

2 min
La logique avec JavaScript - Les boucles (while)

3 min
La logique avec JavaScript - Les boucles (do...while)

1 min
La logique avec JavaScript - Les boucles (for)

4 min
La logique avec JavaScript - Qu'en est-il des autres boucles ?

4 min
La logique avec JavaScript - Casser la boucle : break et continue

3 min
La logique avec JavaScript - Gérer les exceptions

2 min
Projet #1 – Calculatrice - Qu'allons-nous faire dans ce projet ?

2 min
Projet #1 – Calculatrice - Partons sur de bonnes bases

2 min

Section 6: Leçons 51 à 60

10 leçons 18 min

Projet #1 – Calculatrice - Etape 1 : Demander un mode de calcul

2 min
Projet #1 – Calculatrice - Etape 2 : Demander deux nombres à utiliser

2 min
Projet #1 – Calculatrice - Etape 3 : Créer les 4 fonctions

1 min
Projet #1 – Calculatrice - Etape 4 : Appeler la fonction à utiliser

2 min
Projet #1 – Calculatrice - Etape 5 : Afficher le résultat

2 min
Projet #1 – Calculatrice - Etape 6 : Gérer les exceptions

2 min
Projet #1 – Calculatrice - Correction

3 min
Projet #1 – Calculatrice - (Facultatif) Proposer de refaire un calcul

2 min
Les fonctions et la logique - La portée des variables

4 min
Les fonctions et la logique - Parlons de la récursivité - Partie 1

3 min

Section 7: Leçons 61 à 70

10 leçons 25 min

Les fonctions et la logique - Parlons de la récursivité - Partie 2

1 min
Exercice sur les fonctions récursives - Que devez-vous faire ?

3 min
Exercice sur les fonctions récursives - Correction

3 min
Quiz du module 1

3 min
Tout savoir sur les tableaux - Qu’est-ce qu’un tableau ?

2 min
Tout savoir sur les tableaux - Créer un tableau simple

3 min
Tout savoir sur les tableaux - Créer un tableau à plusieurs dimensions

2 min
Tout savoir sur les tableaux - Créer un tableau associatif

4 min
Tout savoir sur les tableaux - Accéder à un élément (index / length)

3 min
Tout savoir sur les tableaux - Ajouter un élément (push / unshift)

4 min

Section 8: Leçons 71 à 80

10 leçons 19 min

Tout savoir sur les tableaux - Retirer un élément (pop / shift)

2 min
Tout savoir sur les tableaux - Retrouver un élément grâce à sa valeur (indexOf)

3 min
Tout savoir sur les tableaux - Concaténer pour afficher (join)

2 min
Tout savoir sur les tableaux - La fonction ultime (splice)

3 min
Tout savoir sur les tableaux - Les boucles (for...in)

2 min
Tout savoir sur les tableaux - Les boucles (for...of)

2 min
Tout savoir sur les tableaux - Les boucles (foreach)

2 min
Tout savoir sur les tableaux - Notes sur les fonctions fléchées

3 min
Tout savoir sur les tableaux - Concaténer un tableau associatif

1 min
Tout savoir sur les tableaux - Fiche technique sur les principales fonctions des tableaux

4 min

Section 9: Leçons 81 à 90

10 leçons 23 min

Notions avancées sur les fonctions JavaScript - Les fonctions fléchées

4 min
Notions avancées sur les fonctions JavaScript - Les fermetures (closures)

3 min
Utilisons le potentiel de JavaScript - Qu'est-ce qu'un objet ?

2 min
Utilisons le potentiel de JavaScript - Créer un objet

2 min
Utilisons le potentiel de JavaScript - L'affectation par décomposition (destructuring)

3 min
Utilisons le potentiel de JavaScript - Précisions sur les prochains objets : à quoi servent-ils ?

3 min
Utilisons le potentiel de JavaScript - L'objet Set

3 min
Utilisons le potentiel de JavaScript - L'objet Map

3 min
Utilisons le potentiel de JavaScript - L'objet WeakSet

2 min
Utilisons le potentiel de JavaScript - L'objet WeakMap

2 min

Section 10: Leçons 91 à 100

10 leçons 23 min

Utilisons le potentiel de JavaScript - Fiche technique sur les objets Set, Map, WeakSet et WeakMap

4 min
Utilisons le potentiel de JavaScript - Ajouter un nombre infini d'arguments (le REST parameter)

2 min
Utilisons le potentiel de JavaScript - L'opérateur de décomposition (le spread operator)

2 min
Quiz du module 2

3 min
Parlons du BOM (Browser Object Model) - Qu'est-ce que le BOM ?

4 min
Parlons du BOM (Browser Object Model) - Voici comment aborder cette section

1 min
Parlons du BOM (Browser Object Model) - L'objet principal : Window

4 min
Parlons du BOM (Browser Object Model) - L'objet Navigator

4 min
Parlons du BOM (Browser Object Model) - L'objet History

2 min
Parlons du BOM (Browser Object Model) - L'objet Location

2 min

Section 11: Leçons 101 à 110

10 leçons 25 min

Parlons du BOM (Browser Object Model) - L'objet Screen

2 min
Parlons du BOM (Browser Object Model) - Et enfin : l'objet Document

4 min
Communiquons avec un site internet - Qu'est-ce que le DOM ?

3 min
Communiquons avec un site internet - Attention à votre balise

3 min
Communiquons avec un site internet - Accéder aux éléments du DOM

4 min
Communiquons avec un site internet - Modifier des éléments du DOM (textContent, innerHTML)

3 min
Communiquons avec un site internet - Ajouter des éléments au DOM (append, prepend, insertBefore)

4 min
Communiquons avec un site internet - Supprimer des éléments du DOM

1 min
Modifions le style de nos éléments - Quelles sont les étapes pour modifier le style d’un élément ?

3 min
Modifions le style de nos éléments - Modifier le style des éléments

2 min

Section 12: Leçons 111 à 120

10 leçons 23 min

Modifions le style de nos éléments - Fiche technique sur les fonctions intéressantes liées au DOM

3 min
Projet #2 - Pratiquons tout ce que nous venons de voir ! - Que devez-vous faire ?

3 min
Projet #2 - Pratiquons tout ce que nous venons de voir ! - Correction

3 min
Quiz du module 3

3 min
Restez organiser pour un meilleur apprentissage!

1 min
Les évènements (le clic, le double-clic, etc) - Qu'est-ce qu'un évènement ?

3 min
Les évènements (le clic, le double-clic, etc) -Les écouteurs : onclick, ...

3 min
Les évènements (le clic, le double-clic, etc) -Les écouteurs via les propriétés JavaScript

4 min
Les évènements (le clic, le double-clic, etc) -Les écouteurs via le gestionnaire d'évènements

1 min
Les évènements (le clic, le double-clic, etc) -Gérer la propagation des évènements et stopPropagation

3 min

Section 13: Leçons 121 à 130

10 leçons 12 min

Les évènements (le clic, le double-clic, etc) -Planifier l'exécution d'un script (setTimeout, setInterval)

3 min
Exercices sur les évènements - Exercice 1 : Faire un timer

1 min
Exercices sur les évènements - Exercice 1 : Correction

1 min
Exercices sur les évènements - Exercice 2 : Faire un bouton « de remise à zéro »

1 min
Exercices sur les évènements - Exercice 2 : Correction

2 min
Projet #3 - Générateur de citationsQu'allons - nous faire dans ce projet ?

1 min
Projet #3 - Générateur de citations - Etape 1 : Partir sur de bonnes bases

1 min
Projet #3 - Générateur de citationsQu'allons - Etape 2 : Récupérer les éléments nécessaires

2 min
Projet #3 - Générateur de citationsQu'allons - Etape 3 : Créer les variables utiles

1 min
Projet #3 - Générateur de citationsQu'allons - Etape 4 : Détecter le clic du bouton "Nouvelle Citation"

3 min

Section 14: Leçons 131 à 140

10 leçons 17 min

Projet #3 - Générateur de citationsQu'allons - Etape 5 : Générer un nombre aléatoire

1 min
Projet #3 - Générateur de citationsQu'allons - Correction

1 min
Projet #4 guidé : Les formulaires et JavaScript - Qu'allons-nous faire dans ce projet ?

3 min
Projet #4 guidé : Les formulaires et JavaScript - Partons sur de bonnes bases

2 min
Projet #4 guidé : Les formulaires et JavaScript - Etape 1 : Sélectionner les éléments

1 min
Projet #4 guidé : Les formulaires et JavaScript - Etape 2 : Cacher l'erreur

3 min
Projet #4 guidé : Les formulaires et JavaScript - Etape 3 : Générer un nombre aléatoire

1 min
Projet #4 guidé : Les formulaires et JavaScript - Etape 4 : Vérifier que l'utilisateur donne bien un nombre

2 min
Projet #4 guidé : Les formulaires et JavaScript - Etape 5 : Agir à l'envoi du formulaire

3 min
Projet #4 guidé : Les formulaires et JavaScript - Etape 6 : Créer la fonction vérifier

3 min

Section 15: Leçons 141 à 150

10 leçons 29 min

Quiz du mdule 4

3 min
La programmation orientée objet - Qu’est-ce que la programmation orientée objet ?

3 min
La programmation orientée objet - Créer un objet littéral

3 min
La programmation orientée objet - Créer un objet avec un constructeur personnalisé

4 min
La programmation orientée objet - Les prototypes (chaîne des prototypes)

3 min
La programmation orientée objet - Créer un objet avec le constructeur Object

2 min
La programmation orientée objet - Comprendre l'héritage

5 min
La programmation orientée objet - Bind, Call et Apply

5 min
La programmation orientée objet - Créer un objet avec une classe et un constructeur

2 min
La programmation orientée objet - Les Getter et les Setter

3 min

Section 16: Leçons 151 à 160

10 leçons 18 min

Qu'allons-nous faire dans ce projet ?

3 min
Projet #5 - Fight Simulator - Etape 1 : Partir sur de bonnes bases

2 min
Projet #5 - Fight SimulatorEtape 2 : Comprendre la structure des classes

3 min
Projet #5 - Fight Simulator - Etape 3 : Créer la classe Personnage

2 min
Projet #5 - Fight Simulator - Etape 4 : Créer la classe Magicien

1 min
Projet #5 - Fight Simulator - Etape 5 : Créer la classe Guerrier

4 min
Projet #5 - Fight Simulator - Etape 6 : Initialiser nos personnages et les faire combattre

3 min
Devenez maître du temps - Récupérer la date actuelle

2 min
Devenez maître du temps - Utiliser l'objet Date

1 min
Devenez maître du temps - Les Getter et Setter disponibles de l'objet Date

2 min

Section 17: Leçons 161 à 170

10 leçons 26 min

Devenez maître du temps - Transformer une date au format local

2 min
Devenez maître du temps - Utiliser les "templates string" avec les dates

3 min
Quiz du module 5

3 min
Utiliser les API - Qu’est-ce qu’une API et comment ça fonctionne ?

5 min
Utiliser les API - L'extension à utiliser pour faciliter votre apprentissage

2 min
Utiliser les API - Récupérez le code pour la prochaine session

3 min
Utiliser les API - Utiliser une API : récupérer le prix du bitcoin (XMLHttpRequest)

2 min
Utiliser les API - Utiliser une API : envoyer des données

4 min
Projet #6 - Une application météoQu'allons-nous faire dans ce projet ?

3 min
Projet #6 - Une application météo - Etape 1 : Comprendre le fonctionnement de l'API

3 min

Section 18: Leçons 171 à 180

10 leçons 21 min

Projet #6 - Une application météo - Etape 3 : Mettre à jour l'interface

2 min
Projet #6 - Une application météo - Etape 4 : Détecter le clic du bouton "Changer de ville"

2 min
Projet #6 - Une application météo - Etape 5 : Appeler la fonction recevoir Température(ville)

2 min
Projet #6 - Une application météo - Correction

2 min
Utilisons les requêtes asynchrones, Callbacks & Promises - Qu'est-ce qu'un programme asynchrone ?

1 min
Utilisons les requêtes asynchrones, Callbacks & Promises - Nous avons déjà utilisé des requêtes asynchrones !

1 min
Utilisons les requêtes asynchrones, Callbacks & Promises - Les promesses

3 min
Utilisons les requêtes asynchrones, Callbacks & Promises - Async et Await

3 min
Stocker des données dans le navigateur avec JavaScript - Les cookies

5 min
Stocker des données dans le navigateur avec JavaScript - Les cookies

5 min

Section 19: Leçons 181 à 190

10 leçons 13 min

Stocker des données dans le navigateur avec JavaScript - Fiche technique sur les cookies et HttpOnly

2 min
Stocker des données dans le navigateur avec JavaScript - Local Storage et Session Storage

2 min
Projet #7 : Créer un thème qui se souvient de nous - Que devez-vous faire ?

1 min
Projet #7 : Créer un thème qui se souvient de nous - Etape 1 : Comprendre le fonctionnement du programme

2 min
Projet #7 : Créer un thème qui se souvient de nous - Etape 2 : Sélectionner les éléments nécessaires

2 min
Projet #7 : Créer un thème qui se souvient de nous - Etape 3 : Rendre notre bouton fonctionnel

1 min
Projet #7 : Créer un thème qui se souvient de nous - Etape 4 : Changer les classes au clic

1 min
Projet #7 : Créer un thème qui se souvient de nous - Etape 5 : Créer la fonction mode Sombre()

1 min
Projet #7 : Créer un thème qui se souvient de nous - Etape 6 : Regarder si la préférence de l'utilisateur existe déjà

3 min
Projet #7 : Créer un thème qui se souvient de nous - Correction

2 min

Section 20: Leçons 191 à 200

10 leçons 19 min

Quiz du module 6

3 min
Et si on écrivait plus vite avec jQuery ? - Qu’est-ce que jQuery ?

5 min
Et si on écrivait plus vite avec jQuery ? - Comment utiliser jQuery ?

2 min
Et si on écrivait plus vite avec jQuery ? - Sélectionner un élément

2 min
Et si on écrivait plus vite avec jQuery ? - Modifier le contenu d'un élément

1 min
Et si on écrivait plus vite avec jQuery ? - Modifier le style d'un élément

1 min
Et si on écrivait plus vite avec jQuery ? - Ajouter et supprimer un élément

2 min
Et si on écrivait plus vite avec jQuery ? - Modifier les attributs d'un élément

2 min
Et si on écrivait plus vite avec jQuery ? - Ajouter des évènements

1 min
Et si on écrivait plus vite avec jQuery ? - Faire une requête AJAX

2 min

Section 21: Leçons 201 à 210

10 leçons 17 min

Et si on écrivait plus vite avec jQuery ? - Ajouter des animations

2 min
Quiz du module 7

3 min
N'oubliez pas de réviser!

1 min
Les inclassables - Géolocaliser un utilisateur

3 min
Les inclassables - Créer des modules (import, export)

2 min
Les inclassables - Utiliser le mode strict

2 min
Les inclassables - Développer avec les normes EcmaScript

2 min
Les inclassables - Que devez-vous faire ?

1 min
Les inclassables - Etape 1 : Isoler la variable qui contient la ville à utiliser

2 min
Les inclassables - Etape 2 : Vérifier que la géolocalisation est disponible

1 min

Section 22: Leçons 211 à 220

10 leçons 15 min

Les inclassables - Etape 3 : Récupérer la position actuelle

1 min
Les inclassables - Etape 4 : Utiliser une nouvelle API proposée par OpenWeatherMap

2 min
Les inclassables - Etape 5 : Prévoir le cas où la géolocalisation ne peut pas se faire

2 min
Les inclassables - Utiliser leafletjs une solution open-source de map interactive

2 min
Les inclassables - Apprendre à intégrer la map

4 min
Les inclassables - Apprendre à utiliser la documentation

2 min
Les inclassables - Que devez-vous faire ?

1 min
Les inclassables - Etape 1 : Créer un formulaire d’adresse

1 min
Les inclassables - Etape 2 : Convertir l’adresse en coordonnées GPS

3 min
Les inclassables - Etape 3 : Centrer la map sur l’adresse

3 min

Section 23: Leçons 221 à 224

4 leçons 9 min

Les inclassables - Etape 4 : Créer un Marker à cette adresse

2 min
Quiz du module 8

3 min
Bravo !

1 min
Evaluation Finale

3 min

Détails

Description

Niveau Initiation

Public cible Tous publics

Format SCORM

Durée 7h 59m

Contenu 224 leçons

JavaScript est un langage informatique qui permet de dynamiser les sites Internet. Il s'associe donc à l'HTML et au CSS dans la création des pages web. Avec Javascript, vous pourrez par exemple modifier l'apparence d'un contenu sans repasser par le serveur, animer des images, contrôler du contenu multimédia. Avec cette formation, faites l'acquisition des notions de base de JavaScript et améliorer votre employabilité.

Parcours et prérequis

Prérequis

Aucun prérequis

Modalités pratiques

Matériel nécessaire

Disposer d'un ordinateur ou d'une tablette
Une connexion Internet

Évaluation

Auto-évaluation sous forme de questionnaires
Exercices sous formes d'ateliers pratiques
Questionnaire de positionnement & Evaluation é chaud

Moyens pédagogiques

Accés au cours en ligne
Cours théorique au format vidéo
Accessible via un ordinateur ou une tablette
Assistance par téléphone et/ou email

Accompagnement

Formateur

Disposant de plusieurs années d'expérience dans l'enseignement de cette discipline.

Accessibilité

Formations en distanciel accessibles aux personnes é mobilité réduite. Audiodescription et sous titrage non disponibles.

Équipe

Expert pédagogique

Découvrez qui conçoit et anime cette formation sur le catalogue Learnifi.

Formateur catalogue

Wiki form

Expert catalogue

alert(1)

Référencé catalogue Learnifi
Contenu SCORM
Accompagnement OF

6 Formations catalogue

2 Inscrits ici

224 Leçons animées

Voir le profil formateur

Conformité

Modalités & conformité

Tout ce dont votre OF a besoin pour inscrire sereinement — sans montage pédagogique supplémentaire.

100 % en ligne Accessible 24h/24 — vos stagiaires progressent à leur rythme.

Suivi SCORM & progression Temps passé, scores et complétion exportables pour votre BPF.

Évaluations intégrées Quiz et examens pour valider les acquis des apprenants.

Certificat de fin Attestation délivrée automatiquement à l'issue de la formation.

Compatible Qualiopi Traçabilité pédagogique, émargements et exports pour vos audits.

Support Learnifi Accompagnement technique pour vos équipes et vos stagiaires.

Ce que vos stagiaires apprendront

Programme de la formation

Description

Parcours et prérequis

Prérequis

Modalités pratiques

Matériel nécessaire

Évaluation

Moyens pédagogiques

Accompagnement

Formateur

Accessibilité

Expert pédagogique

Wiki form

Modalités & conformité

Inscrivez vos stagiaires sur cette formation

Formations similaires

HTML5 et CSS3 — De débutant à expert web front

Langage C — Devenir développeur avec les fondamentaux

Python — Devenir développeur avec les bases solides

React et Redux — Créer des sites web interactifs

WooCommerce — Créer et gérer une boutique en ligne

WordPress 5 — Les essentiels pour créer un site

Es-tu sûr ?