Dynamisez vos sites internet avec JavaScript

Découvrez le langage de programmation incontournable de tout développeur web !

Dynamisez vos sites internet avec JavaScript
14 heures
Tous les niveaux

Présentation

JavaScript est vraiment LE langage de programmation que vous devez connaître si vous voulez vous lancer dans le développement web. Et ça tombe bien : avec ce cours, vous êtes sûr de ne pas passer à côté d’une notion importante, car il est complet ! En plus de ça, ce cours vous permettra de réaliser 8 projets, des dizaines d’exercices et une cinquantaine de challenges en cours de vidéo !

Vous êtes sur le cours le plus complet, le plus pédagogique et le plus clair concernant JavaScript, et en plus : il est continuellement mis à jour ! Le plan de ce cours a été réalisé après des semaines de travail, en concordance avec ce qu’il y a de mieux en terme de pédagogie pour apprendre et surtout retenir chaque concept évoqué.

Ce n’est pas un cours dans lequel vous êtes jeté dans la jungle : vous serez continuellement suivi avec la possibilité de poser des questions à n’importe quel moment pour avoir une réponse précise de notre équipe.

Que vous soyez débutant ou déjà bien avancé avec le JavaScript, ce cours vous apprendra de nouvelles choses et de nouvelles façons de programmer, tant il est complet.

Si vous êtes motivé, intéressé par JavaScript, et que vous recherchez un cours dans lequel vous ne serez pas déçu : arrêtez-vous. Vous êtes à la bonne porte !

J'aurai plaisir à vous aider à atteindre vos objectifs.

Prérequis

Vous devez avoir quelques notions de base en HTML pour profiter à 100% de votre cours.

Plan du cours

Tout ouvrir
    Partie 1 : Avant de commencer ce cours
  • 1. Qu’allons-nous faire dans cette formation ?
    Extrait
  • 2. Prérequis
    Extrait
  • 3. Comment réussir cette formation ?
    Extrait
  • 4. Comment poser mes questions ?
    Extrait
  • Partie 2 : Orientation
  • 5. Commencez la formation selon votre niveau
  • Partie 3 : Reprenons par la base
  • 6. Qu'est-ce que JavaScript
    Extrait
  • 7. Quels logiciels utiliser ?
  • 8. Quelles extensions installer ?
  • 9. Où allons-nous placer notre code Javascript ?
  • 10. Comment fonctionne VS Code ?
  • Partie 4 : Les variables et les opérateurs
  • 11. Qu'est-ce qu'une variable ?
  • 12. Déclarons nos premières variables (Let, Const et Var)
  • 13. Découvrons la concaténation
  • 14. Le débogueur
  • 15. Faisons des opérations mathématiques
  • Partie 5 : Demander des informations aux utilisateurs
  • 16. Qu'est-ce qu'une boîte de dialogue ?
  • 17. Afficher une information
  • 18. Demander une confirmation
  • 19. Demander des renseignements
  • Partie 6 : Tout sur les fonctions
  • 20. Qu’est-ce qu’une fonction ?
  • 21. Ecrivons notre première fonction
    Extrait
  • 22. Ajoutons des paramètres à notre fonction
  • 23. Note concernant la portée des variables
  • 24. Parlons des variables globales et des variables locales
  • 25. Les fonctions qui retournent quelque chose
  • 26. Les paramètres par défaut
    Extrait
  • 27. Utiliser une fonction déjà existante
  • 28. Convertissons nos données
  • 29. Les fonctions anonymes
  • Partie 7 : Exerçons-nous sur les fonctions
  • 30. Exercice #1 : Débutant
  • 31. Correction de l’exercice 1
  • 32. Exercice #2 : Avancé
  • 33. Correction de l’exercice 2
  • Partie 8 : La logique avec JavaScript
  • 34. Qu'est-ce qu'une condition ?
  • 35. Les conditions (if / else)
  • 36. Fiche technique sur les opérateurs de comparaison
  • 37. Les conditions (switch)
  • 38. Vérifier plusieurs conditions d'un coup (OR / AND)
  • 39. Vérifier le contraire d'une condition (NOT)
  • 40. Les conditions ternaires
  • 41. Qu'est-ce qu'une boucle ?
  • 42. Les boucles (while)
  • 43. Les boucles (do...while)
  • 44. Les boucles (for)
  • 45. Qu'en est-il des autres boucles ?
  • 46. Casser la boucle : break et continue
  • 47. Gérer les exceptions
    Extrait
  • Partie 9 : Projet #1 - Calculatrice
  • 48. Qu'allons-nous faire dans ce projet ?
    Extrait
  • 49. Partons sur de bonnes bases
  • 50. Etape 1 : Demander un mode de calcul
  • 51. Etape 2 : Demander deux nombres à utiliser
  • 52. Etape 3 : Créer les 4 fonctions
  • 53. Etape 4 : Appeler la fonction à utiliser
  • 54. Etape 5 : Afficher le résultat
  • 55. Etape 6 : Gérer les exceptions
  • 56. Correction
  • 57. (Facultatif) Proposer de refaire un calcul
  • Partie 10 : Les fonctions et la logique
  • 58. La portée des variables
  • 59. Parlons de la récursivité
    Extrait
  • Partie 11 : Exercice sur les fonctions récursives
  • 60. Que devez-vous faire ?
  • 61. Correction
  • Partie 12 : Tout savoir sur les tableaux
  • 62. Qu’est-ce qu’un tableau ?
  • 63. Créer un tableau simple
  • 64. Créer un tableau à plusieurs dimensions
  • 65. Créer un tableau associatif
  • 66. Accéder à un élément (index / length)
  • 67. Ajouter un élément (push / unshift)
  • 68. Retirer un élément (pop / shift)
  • 69. Retrouver un élément grâce à sa valeur (indexOf)
  • 70. Concaténer pour afficher (join)
  • 71. La fonction ultime (splice)
  • 72. Les boucles (for...in)
  • 73. Les boucles (for...of)
  • 74. Les boucles (foreach)
  • 75. Notes sur les fonctions fléchées
  • 76. Concaténer un tableau associatif
  • 77. Fiche technique sur les principales fonctions des tableaux
  • Partie 13 : Notions avancées sur les fonctions JavaScript
  • 78. Les fonctions fléchées
  • 79. Les fermetures (closures)
  • Partie 14 : Utilisons le potentiel de JavaScript
  • 80. Qu'est-ce qu'un objet ?
  • 81. Créer un objet
  • 82. L'affectation par décomposition (destructuring)
  • 83. Précisions sur les prochains objets : à quoi servent-ils ?
  • 84. L'objet Set
  • 85. L'objet Map
  • 86. L'objet WeakSet
  • 87. L'objet WeakMap
  • 88. Fiche technique sur les objets Set, Map, WeakSet et WeakMap
  • 89. Ajouter un nombre infini d'arguments (le REST parameter)
  • 90. L'opérateur de décomposition (le spread operator)
  • Partie 15 : Parlons du BOM (Browser Object Model)
  • 91. Qu'est-ce que le BOM ?
  • 92. Voici comment aborder cette section
  • 93. L'objet principal : Window
  • 94. L'objet Navigator
  • 95. L'objet History
  • 96. L'objet Location
  • 97. L'objet Screen
  • 98. Et enfin : l'objet Document
  • Partie 16 : Communiquons avec un site internet
  • 99. Qu'est-ce que le DOM ?
  • 100. [NOTE] Attention à votre balise <script></script>
  • 101. [Magazine Offert] Le petit guide du voyageur sur CodePen
  • 102. Accéder aux éléments du DOM
  • 103. Modifier des éléments du DOM (textContent, innerHTML)
  • 104. Ajouter des éléments au DOM (append, prepend, insertBefore)
  • 105. Supprimer des éléments du DOM
  • Partie 17 : Modifions le style de nos éléments
  • 106. Quelles sont les étapes pour modifier le style d’un élément ?
  • 107. Modifier le style des éléments
  • 108. Fiche technique sur les fonctions intéressantes liées au DOM
  • Partie 18 : Projet #2 - Pratiquons tout ce que nous venons de voir !
  • 109. Que devez-vous faire ?
  • 110. Correction
  • Partie 19 : Les évènements (le clic, le double-clic, etc)
  • 111. Qu'est-ce qu'un évènement ?
  • 112. Les écouteurs : onclick, ...
  • 113. Les écouteurs via les propriétés JavaScript
  • 114. Les écouteurs via le gestionnaire d'évènements
  • 115. Gérer la propagation des évènements et stopPropagation
  • 116. Planifier l'exécution d'un script (setTimeout, setInterval)
  • 117. Fiche technique sur les principaux évènements
  • Partie 20 : Exercices sur les évènements
  • 118. Exercice 1 : Faire un timer
  • 119. Exercice 1 : Correction
  • 120. Exercice 2 : Faire un bouton "spoiler"
  • 121. Exercice 2 : Correction
  • Partie 21 : Projet #3 - Générateur de citations
  • 122. Qu'allons-nous faire dans ce projet ?
    Extrait
  • 123. Etape 1 : Partir sur de bonnes bases
  • 124. Etape 2 : Récupérer les éléments nécessaires
  • 125. Etape 3 : Créer les variables utiles
  • 126. Etape 4 : Détecter le clic du bouton "Nouvelle Citation"
  • 127. Etape 5 : Générer un nombre aléatoire
  • 128. Etape 6 : Mettre à jour le contenu
  • 129. Correction
  • Partie 22 : Projet #4 guidé : Les formulaires et JavaScript
  • 130. Qu'allons-nous faire dans ce projet ?
    Extrait
  • 131. Partons sur de bonnes bases
  • 132. Etape 1 : Sélectionner les éléments
  • 133. Etape 2 : Cacher l'erreur
  • 134. Etape 3 : Générer un nombre aléatoire
  • 135. Etape 4 : Vérifier que l'utilisateur donne bien un nombre
  • 136. Etape 5 : Agir à l'envoi du formulaire
  • 137. Etape 6 : Créer la fonction vérifier
  • Partie 23 : La programmation orientée objet
  • 138. Qu’est-ce que la programmation orientée objet ?
  • 139. Créer un objet littéral
  • 140. Créer un objet avec un constructeur personnalisé
  • 141. Les prototypes (chaîne des prototypes)
  • 142. Créer un objet avec le constructeur Object
  • 143. Comprendre l'héritage
  • 144. Bind, Call et Apply
  • 145. Créer un objet avec une classe et un constructeur
  • 146. Les Getter et les Setter
  • Partie 24 : Projet #5 - Fight Simulator
  • 147. Qu'allons-nous faire dans ce projet ?
  • 148. Etape 1 : Partir sur de bonnes bases
  • 149. Etape 2 : Comprendre la structure des classes
  • 150. Etape 3 : Créer la classe Personnage
  • 151. Etape 4 : Créer la classe Magicien
  • 152. Etape 5 : Créer la classe Guerrier
  • 153. Etape 6 : Initialiser nos personnages et les faire combattre
  • 154. Correction
  • Partie 25 : Devenez maître du temps
  • 155. Récupérer la date actuelle
  • 156. Utiliser l'objet Date
  • 157. Les Getter et Setter disponibles de l'objet Date
  • 158. Transformer une date au format local
  • 159. Utiliser les "templates string" avec les dates
  • Partie 26 : Utiliser les API
  • 160. Qu’est-ce qu’une API et comment ça fonctionne ?
  • 161. L'extension à utiliser pour faciliter votre apprentissage
  • 162. Récupérez le code pour la prochaine session
  • 163. Utiliser une API : récupérer le prix du bitcoin (XMLHttpRequest)
  • 164. Utiliser une API : envoyer des données
  • Partie 27 : Projet #6 - Une application météo
  • 165. Qu'allons-nous faire dans ce projet ?
    Extrait
  • 166. Etape 1 : Comprendre le fonctionnement de l'API
  • 167. Etape 2 : Construire la requête AJAX
  • 168. Etape 3 : Mettre à jour l'interface
  • 169. Etape 4 : Détecter le clic du bouton "Changer de ville"
  • 170. Etape 5 : Appeler la fonction recevoirTemperature(ville)
  • 171. Correction
  • Partie 28 : Utilisons les requêtes asynchrones, Callbacks & Promises
  • 172. Qu'est-ce qu'un programme asynchrone ?
  • 173. Nous avons déjà utilisé des requêtes asynchrones !
  • 174. Les promesses
  • 175. Async et Await
  • Partie 29 : Stocker des données dans le navigateur avec JavaScript
  • 176. Les cookies
  • 177. Fiche technique sur les cookies et HttpOnly
  • 178. LocalStorage et SessionStorage
  • Partie 30 : Projet #7 : Créer un thème qui se souvient de nous
  • 179. Que devez-vous faire ?
  • 180. Etape 1 : Comprendre le fonctionnement du programme
  • 181. Etape 2 : Sélectionner les éléments nécessaires
  • 182. Etape 3 : Rendre notre bouton fonctionnel
  • 183. Etape 4 : Changer les classes au clic
  • 184. Etape 5 : Créer la fonction modeSombre()
  • 185. Etape 6 : Regarder si la préférence de l'utilisateur existe déjà
  • 186. Correction
  • Partie 31 : Et si on écrivait plus vite avec jQuery ?
  • 187. Qu’est-ce que jQuery ?
  • 188. Comment utiliser jQuery ?
  • 189. Sélectionner un élément
  • 190. Modifier le contenu d'un élément
  • 191. Modifier le style d'un élément
  • 192. Ajouter et supprimer un élément
  • 193. Modifier les attributs d'un élément
  • 194. Ajouter des évènements
  • 195. Faire une requête AJAX
  • 196. Ajouter des animations
  • Partie 32 : Les inclassables
  • 197. Géolocaliser un utilisateur
  • 198. Créer des modules (import, export)
  • 199. Utiliser le mode strict
  • Partie 33 : Projet #8 guidé - Application de météo géolocalisée
  • 200. Que devez-vous faire ?
  • 201. Etape 1 : Isoler la variable qui contient la ville à utiliser
  • 202. Etape 2 : Vérifier que la géolocalisation est disponible
  • 203. Etape 3 : Récupérer la position actuelle
  • 204. Etape 4 : Utiliser une nouvelle API proposée par OpenWeatherMap
  • 205. Etape 5 : Prévoir le cas où la géolocalisation ne peut pas se faire
  • 206. Etape 6 : Définir les options
  • Partie 34 : Conclusion
  • 207. Félicitations ! Vous avez terminé cette formation !
Proposé par Believemy

Gratuit

Disponible depuis partout : ordinateur, smartphone, tablette
Contenus vidéos en Full HD
Certificat de fin de formation
OU