Dynamisez vos sites internet avec JavaScript

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.

Partie 1 : Avant de commencer ce cours
1. Qu’allons-nous faire dans cette formation ?
Extrait
Qu’allons-nous faire dans cette formation ?
2. Prérequis
Extrait
Prérequis
3. Comment réussir cette formation ?
Extrait
Comment réussir cette formation ?
4. Comment poser mes questions ?
Extrait
Comment poser mes questions ?
Partie 2 : Orientation
5. Commencez la formation selon votre niveau
Partie 3 : Reprenons par la base
6. Qu'est-ce que JavaScript
Extrait
Qu'est-ce que JavaScript
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
Ecrivons notre première fonction
https://codepen.io/believemy/pen/ZEYpKrp
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
Les paramètres par défaut
https://codepen.io/believemy/pen/XWJjRYR
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

Gérer les exceptions

https://codepen.io/believemy/pen/ZEYpeZz

Partie 9 : Projet #1 - Calculatrice
48. Qu'allons-nous faire dans ce projet ?
Extrait
Qu'allons-nous faire dans ce projet ?
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

Parlons de la récursivité

https://codepen.io/believemy/pen/abzbWyd

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
Qu'allons-nous faire dans ce projet ?
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
Qu'allons-nous faire dans ce projet ?
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
Qu'allons-nous faire dans ce projet ?
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 : Améliorons nos requêtes avec Fetch et Axios
176. Qu'est-ce que Fetch ?
177. Récupérer des données avec Fetch
178. Envoyer des données avec Fetch
179. Et la librairie Axios dans tout ça ?
180. Utilisons Axios pour récupérer des données
181. Utilisons Axios pour envoyer des données
Partie 30 : Stocker des données dans le navigateur avec JavaScript
182. Les cookies
183. Fiche technique sur les cookies et HttpOnly
184. LocalStorage et SessionStorage
Partie 31 : Projet #7 : Créer un thème qui se souvient de nous
185. Que devez-vous faire ?
186. Etape 1 : Comprendre le fonctionnement du programme
187. Etape 2 : Sélectionner les éléments nécessaires
188. Etape 3 : Rendre notre bouton fonctionnel
189. Etape 4 : Changer les classes au clic
190. Etape 5 : Créer la fonction modeSombre()
191. Etape 6 : Regarder si la préférence de l'utilisateur existe déjà
192. Correction
Partie 32 : Et si on écrivait plus vite avec jQuery ?
193. Qu’est-ce que jQuery ?
194. Comment utiliser jQuery ?
195. Sélectionner un élément
196. Modifier le contenu d'un élément
197. Modifier le style d'un élément
198. Ajouter et supprimer un élément
199. Modifier les attributs d'un élément
200. Ajouter des évènements
201. Faire une requête AJAX
202. Ajouter des animations
Partie 33 : Les inclassables
203. Géolocaliser un utilisateur
204. Créer des modules (import, export)
205. Utiliser le mode strict
Partie 34 : Projet #8 guidé - Application de météo géolocalisée
206. Que devez-vous faire ?
207. Etape 1 : Isoler la variable qui contient la ville à utiliser
208. Etape 2 : Vérifier que la géolocalisation est disponible
209. Etape 3 : Récupérer la position actuelle
210. Etape 4 : Utiliser une nouvelle API proposée par OpenWeatherMap
211. Etape 5 : Prévoir le cas où la géolocalisation ne peut pas se faire
212. Etape 6 : Définir les options
Partie 35 : Conclusion
213. Félicitations ! Vous avez terminé cette formation !