JavaScript est un langage incontournable du développement web moderne, indispensable pour ceux qui souhaitent donner vie aux sites Internet. En se combinant parfaitement avec le HTML pour la structure et le CSS pour le style, JavaScript permet de créer des pages web interactives et réactives. Que vous soyez débutant dans le domaine ou déjà initié, cette formation vous offrira les compétences fondamentales pour manipuler et transformer le contenu de vos pages web.

Grâce à des modules progressifs et adaptés aux débutants, ce parcours vous accompagnera pas à pas dans l’acquisition de concepts essentiels : les variables, les fonctions, les événements, les boucles, et bien d'autres aspects clés du langage JavaScript.

79 € TTC

Accès immédiat et illimité

100% en ligne

A votre rythme

Financement possible

Assistance technique 7 jours sur 7

Attestation de fin de formation

Acheter

Objectifs

Acquérir les notions de base de JavaScript
Exploiter les principaux frameworks
Etre capable d’exploiter Javascript pour dynamiser un site web

Niveau : Intermédiaire

Public : Tout le monde

Prérequis : Une bonne connaissance de base en HTML et CSS est recommandée pour tirer pleinement profit de cette formation en JavaScript.

Sans audio description ni sous-titrage

Matériel nécessaire

Disposer d’un ordinateur, d’une tablette ou d’un smartphone
Une connexion internet

Modalités d’évaluation des acquis

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

Moyens pédagogiques et techniques

Accès au cours en ligne
Cours théorique au format vidéo
Assistance par téléphone, mail ou par tchat

Contenu du cours

Bienvenue dans la formation "Javascript - Les fondamentaux "

Test de positionnement

Quelques conseils avant de commencer

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

Avant de commencer ce cours - Prérequis

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

Avant de commencer ce cours - Comment poser mes questions ?

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

Reprenons par la base - Quels logiciels utiliser ?

Reprenons par la base - Quelles extensions installer ?

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

Reprenons par la base - Comment fonctionne VS Code ?

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

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

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

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

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

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

Demander des informations aux utilisateurs - Afficher une information

Demander des informations aux utilisateurs - Demander une confirmation

Demander des informations aux utilisateurs - Demander des renseignements

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

Tout sur les fonctions - Ecrivons notre première fonction

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

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

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

Tout sur les fonctions - Les fonctions qui retournent quelque chose

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

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

Tout sur les fonctions - Convertissons nos données

Tout sur les fonctions - Les fonctions anonymes

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

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

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

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

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

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

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

La logique avec JavaScript - Les conditions (switch)

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

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

La logique avec JavaScript - Les conditions ternaires

La logique avec JavaScript - Les boucles (while)

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

La logique avec JavaScript - Les boucles (for)

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

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

La logique avec JavaScript - Gérer les exceptions

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

Projet #1 – Calculatrice - Partons sur de bonnes bases

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

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

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

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

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

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

Projet #1 – Calculatrice - Correction

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

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

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

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

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

Exercice sur les fonctions récursives - Correction

Quiz du module 1

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

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

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

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

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

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

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

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

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

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

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

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

Tout savoir sur les tableaux - Les boucles (foreach)

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

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

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

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

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

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

Utilisons le potentiel de JavaScript - Créer un objet

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

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

Utilisons le potentiel de JavaScript - L'objet Set

Utilisons le potentiel de JavaScript - L'objet Map

Utilisons le potentiel de JavaScript - L'objet WeakSet

Utilisons le potentiel de JavaScript - L'objet WeakMap

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

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

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

Quiz du module 2

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

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

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

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

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

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

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

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

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

Communiquons avec un site internet - Attention à votre balise

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

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

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

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

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

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

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

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

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

Quiz du module 3

Restez organiser pour un meilleur apprentissage!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Quiz du mdule 4

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

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

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

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

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

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

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

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

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

Qu'allons-nous faire dans ce projet ?

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

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

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

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

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

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

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

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

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

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

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

Quiz du module 5

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

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

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

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

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

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

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

Projet #6 - Une application météo - Etape 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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à

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

Quiz du module 6

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

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

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

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

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

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

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

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

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

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

Quiz du module 7

N'oubliez pas de réviser!

Les inclassables - Géolocaliser un utilisateur

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

Les inclassables - Utiliser le mode strict

Les inclassables - Développer avec les normes EcmaScript

Les inclassables - Que devez-vous faire ?

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

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

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

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

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

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

Actualités