Description de la formation
Cette formation vous initie aux fondamentaux de JavaScript, le langage incontournable pour dynamiser les pages web. Vous apprendrez à manipuler le DOM, à utiliser les événements et les fonctions, et à travailler avec des frameworks. Le programme inclut plusieurs projets pratiques, comme la création d'une calculatrice, d'un générateur de citations, et d'une application météo. En maîtrisant ces compétences, vous serez capable de rendre vos sites interactifs et réactifs, améliorant ainsi votre employabilité dans le domaine du développement web.
Que vais-je apprendre ?
- Comprendre les notions de base de JavaScript.
- Manipuler le DOM pour dynamiser les pages web.
- Utiliser les variables, opérateurs, fonctions, et événements en JavaScript.
- Développer des projets pratiques, tels qu'une calculatrice, un générateur de citations, et une application météo.
- Exploiter les API et jQuery pour enrichir les fonctionnalités web.
- Appliquer la programmation orientée objet dans des projets JavaScript.
Pré-requis
- Connaissance de base en HTML et CSS
- Intérêt pour le développement web et l'interactivité des pages web
FAQ générales
Cette formation est destinée aux débutants en développement web souhaitant apprendre JavaScript, ainsi qu'aux développeurs souhaitant renforcer leurs compétences en dynamisation de sites web.
Oui, la formation inclut de nombreux projets pratiques, comme la création d'une calculatrice, d'une application météo, et d'un générateur de citations, vous permettant d'appliquer directement les concepts appris.
- Qu’est-ce qu’une fonction ?
- Ecrivons notre première fonction
- Ajoutons des paramètres à notre fonction
- Note concernant la portée des variables
- Parlons des variables globales et des variables locales
- Les fonctions qui retournent quelque chose
- Les paramètres par défaut
- Utiliser une fonction déjà existante
- Convertissons nos données
- Les fonctions anonymes
- Qu'est-ce qu'une condition ?
- Les conditions (if / else)
- Fiche technique sur les opérateurs de comparaison
- Les conditions (switch)
- Vérifier plusieurs conditions d'un coup (OR / AND)
- Vérifier le contraire d'une condition (NOT)
- Les conditions ternaires
- Les boucles (while)
- Les boucles (do...while)
- Les boucles (for)
- Qu'en est-il des autres boucles ?
- Casser la boucle : break et continue
- Gérer les exceptions
- Qu'allons-nous faire dans ce projet ?
- Partons sur de bonnes bases
- Etape 1 : Demander un mode de calcul
- Etape 2 : Demander deux nombres à utiliser
- Etape 3 : Créer les 4 fonctions
- Etape 4 : Appeler la fonction à utiliser
- Etape 5 : Afficher le résultat
- Etape 6 : Gérer les exceptions
- Correction
- (Facultatif) Proposer de refaire un calcul
- Qu’est-ce qu’un tableau ?
- Créer un tableau simple
- Créer un tableau à plusieurs dimensions
- Créer un tableau associatif
- Accéder à un élément (index / length)
- Ajouter un élément (push / unshift)
- Retirer un élément (pop / shift)
- Retrouver un élément grâce à sa valeur (indexOf)
- Concaténer pour afficher (join)
- La fonction ultime (splice)
- Les boucles (for...in)
- Les boucles (for...of)
- Les boucles (foreach)
- Notes sur les fonctions fléchées
- Concaténer un tableau associatif
- Fiche technique sur les principales fonctions des tableaux
- Qu'est-ce qu'un objet ?
- Créer un objet
- L'affectation par décomposition (destructuring)
- Précisions sur les prochains objets : à quoi servent-ils ?
- L'objet Set
- L'objet Map
- L'objet WeakSet
- L'objet WeakMap
- Fiche technique sur les objets Set, Map, WeakSet et WeakMap
- Ajouter un nombre infini d'arguments (le REST parameter)
- L'opérateur de décomposition (le spread operator)
- Quiz du module 2
- 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)
- Générateur de citationsQu'allons - nous faire dans ce projet ?
- Générateur de citations - Etape 1 : Partir sur de bonnes bases
- Générateur de citationsQu'allons - Etape 2 : Récupérer les éléments nécessaires
- Générateur de citationsQu'allons - Etape 3 : Créer les variables utiles
- Générateur de citationsQu'allons - Etape 4 : Détecter le clic du bouton "Nouvelle Citation"
- Générateur de citationsQu'allons - Etape 5 : Générer un nombre aléatoire
- Générateur de citationsQu'allons - Correction
- Qu'allons-nous faire dans ce projet ?
- Partons sur de bonnes bases
- Etape 1 : Sélectionner les éléments
- Etape 2 : Cacher l'erreur
- Etape 3 : Générer un nombre aléatoire
- Etape 4 : Vérifier que l'utilisateur donne bien un nombre
- Etape 5 : Agir à l'envoi du formulaire
- Etape 6 : Créer la fonction vérifier
- Quiz du mdule 4
- Qu’est-ce que la programmation orientée objet ?
- Créer un objet littéral
- Créer un objet avec un constructeur personnalisé
- Les prototypes (chaîne des prototypes)
- Créer un objet avec le constructeur Object
- Comprendre l'héritage
- Bind, Call et Apply
- Créer un objet avec une classe et un constructeur
- Les Getter et les Setter
- Qu'allons-nous faire dans ce projet ?
- Fight Simulator - Etape 1 : Partir sur de bonnes bases
- Fight SimulatorEtape 2 : Comprendre la structure des classes
- Fight Simulator - Etape 3 : Créer la classe Personnage
- Fight Simulator - Etape 4 : Créer la classe Magicien
- Fight Simulator - Etape 5 : Créer la classe Guerrier
- Fight Simulator - Etape 6 : Initialiser nos personnages et les faire combattre
- Une application météoQu'allons-nous faire dans ce projet ?
- Une application météo - Etape 1 : Comprendre le fonctionnement de l'API
- Une application météo - Etape 3 : Mettre à jour l'interface
- Une application météo - Etape 4 : Détecter le clic du bouton "Changer de ville"
- Une application météo - Etape 5 : Appeler la fonction recevoir Température(ville)
- Une application météo - Correction
- Que devez-vous faire ?
- Etape 1 : Comprendre le fonctionnement du programme
- Etape 2 : Sélectionner les éléments nécessaires
- Etape 3 : Rendre notre bouton fonctionnel
- Etape 4 : Changer les classes au clic
- Etape 5 : Créer la fonction mode Sombre()
- Etape 6 : Regarder si la préférence de l'utilisateur existe déjà
- Correction
- Quiz du module 6
- Qu’est-ce que jQuery ?
- Comment utiliser jQuery ?
- Sélectionner un élément
- Modifier le contenu d'un élément
- Modifier le style d'un élément
- Ajouter et supprimer un élément
- Modifier les attributs d'un élément
- Ajouter des évènements
- Faire une requête AJAX
- Ajouter des animations
- Quiz du module 7
- N'oubliez pas de réviser!
- Géolocaliser un utilisateur
- Créer des modules (import, export)
- Utiliser le mode strict
- Développer avec les normes EcmaScript
- Que devez-vous faire ?
- Etape 1 : Isoler la variable qui contient la ville à utiliser
- Etape 2 : Vérifier que la géolocalisation est disponible
- Etape 3 : Récupérer la position actuelle
- Etape 4 : Utiliser une nouvelle API proposée par OpenWeatherMap
- Etape 5 : Prévoir le cas où la géolocalisation ne peut pas se faire
- Utiliser leafletjs une solution open-source de map interactive
- Apprendre à intégrer la map
- Apprendre à utiliser la documentation
- Que devez-vous faire ?
- Etape 1 : Créer un formulaire d’adresse
- Etape 2 : Convertir l’adresse en coordonnées GPS
- Etape 3 : Centrer la map sur l’adresse
- Etape 4 : Créer un Marker à cette adresse
- Quiz du module 8
- Bravo !
- Evaluation Finale
249 €
Vidéos
214
Questionnaires de positionnement
10
Niveau de compétence
Les fondamentaux
