Comprenez enfin JavaScript

Apprenez ou ré-apprenez à vous servir de JavaScript. Scrapez votre premier site, et déployez vos scripts Node.js sur Heroku.

A propos de ce cours

Que vous débutiez ou que vous ayiez déjà copié/collé des bouts de code jQuery sur Internet, reprenez les bases pour être serein face à votre code.

Vous réviserez les bases du langage et comprendrez mieux le rôle que joue JavaScript dans le front-end development, quelle est sa place dans le trio HTML/CSS/JS.

Levez (enfin) le doute sur les notions de AJAX, prototype, callback et this,.

Décodez la documentation d'un plug-in jQuery pour l'utiliser correctement sur votre site.

Finissez en beauté avec une première utilisation de Node.JS, la technologie JavaScript côté back-end. Scrapez votre premier site, et déployez sur Heroku pour que votre scraper tourne chaque jour afin de récupérer les nouvelles données.

A qui ce cours est-il destiné ?

  • Débutants et faux-débutants
  • Web Designers
  • Back-end Developers
  • Entrepreneurs Tech
  • Growth Hackers

Formule tout compris

  • 12 cours vidéos & leur quiz
  • 5 heures d'explication
  • 138 objectifs à accomplir
  • Des réponses à vos questions par les profs du Wagon

Ce que vous allez apprendre

  • Fondamentaux du langage JavaScript
  • Librairie jQuery & Plugins
  • AJAX & JSON
  • Expressions Régulières (Regex)
  • Scraping NodeJS / NightmareJS
Forum comprenez enfin javascript

Bien plus qu'un cours en ligne, une communauté tech

Pose tes questions à des professionnels qui te répondront chaque semaine: Sébastien (ex-Google et CTO du Wagon), Martin (data-scientist chez Airbnb), Boris (CEO-fondateur du Wagon).

Bien mieux que StackOverflow ou que n'importe quel cours de code en ligne, on te donnera des explications simples, des morceaux de code et des liens vers les dernières ressources pour rester à la page.

Rejoins une communauté tech d'une grande qualité pour apprendre dix fois plus vite.

Profs pédagogues et sympas, interface agréable. Que du plaisir en plus d'être hyper efficace ! Tout est expliqué de A à Z, contrairement à Codecademy ou à des tutos youtube.
11291089?v=3
Après un an de césure à San Francisco, mes amis m’ont recommandé chaudement Le Wagon et je suis impressionnée de la vitesse à laquelle j'arrive à des résultats qui ont de la forme
13040488?v=3
Impressionné par la qualité des contenus. Ce qui semblait rébarbatif auparavant est un vrai plaisir à apprendre maintenant. Bravo ! Beau boulot .
13500365?v=3
J'apprécie le style clair et direct des vidéos. Je suis très impressionnée par le progrès que j'ai fait en quelques jours par rapport à ce que j'ai appris ailleurs pendant plusieurs semaines.
12845838?v=3

Le Programme

1 Présentation de JavaScript

Le code JavaScript, ça va où ? Est-ce que j’ai besoin d’installer un logiciel / un programme ?

  • Requête et Réponse HTTP

    00:09
  • Exemple avec le Site du Wagon

    01:08
  • Console JavaScript dans Chrome

    01:30
  • Simulation de clic par JavaScript

    02:30
  • Node.js, à quoi ça sert ?

    03:00
  • Présentation de JS Bin

    04:02

2 Variables et Types

Commençons par la première chose que permet un langage : stocker des données en mémoire et les manipuler.

  • La mémoire vive (RAM)

    00:26
  • Les variables, visualisées par des boites

    00:39
  • Déclaration et affectation d’une variable

    02:03
  • Utiliser la valeur stockée dans une variable

    03:10
  • La syntaxe camelCase des variables

    05:16
  • Ré-affectation d’une variable

    05:36
  • Opérateur d’affectation =

    07:14
  • Addition, Soustraction, Multiplication et Division

    07:34
  • Types de données de base

    09:50
  • Opérateur de concaténation +

    14:26

3 Conditions

Après les variables, voyons ensemble le deuxième pilier d’un langage informatique qu’est le mot-clé if.

  • Le type de donnée boolean

    00:03
  • Exemple : je peux voter si j’ai 18 ans

    00:20
  • Syntaxe de base de if

    00:44
  • Un opérateur de comparaison : <

    00:58
  • Le mot-clé cousin de if : else

    01:40
  • Opérateur d’égalité : ===

    02:26
  • Opérateur de différence : !==

    03:35
  • Test d’une condition négative

    04:57
  • Troisième branche avec else if

    05:37
  • Syntaxe alternative avec un switch

    07:03
  • Combiner les booléens avec && et ||

    09:05
  • Imbrication de conditions if

    19:02
  • Opérateur ternaire : ?

    24:32

4 Tableaux et Boucles

Après les trois types de base number, boolean et string, interessons-nous aux tableaux et au moyen de les parcourir avec les boucles for ou while.

  • Exemple : calcul de moyenne

    00:07
  • Un nouveau type d’objet, le tableau

    01:38
  • La propriété .length

    02:07
  • Récap - opérations sur les tableaux

    03:43
  • La méthode .push()

    04:27
  • Accéder à un élément avec [i]

    04:56
  • Live-Code : la boucle for

    06:02
  • Cours : la boucle for

    11:52
  • Boucles for imbriquées

    15:22
  • La boucle while

    20:41

5 Fonctions

Éliminez les copier/coller de code avec la factorisation par fonction

  • Live-Code : ma première fonction

    00:37
  • Modification du flux d’exécution

    02:28
  • Définition d’une fonction

    03:17
  • Fonction anonyme

    04:21
  • Appel de fonction

    04:36
  • Paramètres de fonction

    04:48
  • Passage d’argument à l’appel

    06:42
  • Visibilité d’une variable

    07:14
  • Live-Code : calcul de moyenne

    08:48
  • Le mot-clé return

    13:15
  • Syntaxe camelCase

    14:13
  • Résumé

    14:27

6 Objets et Prototype

Introduction à la programmation orientée objet en JavaScript

  • Création d’un objet vide

    00:18
  • Propriétés initiales

    00:32
  • Lecture d’une propriété

    01:01
  • Fonction en tant que propriété

    02:58
  • Programmation orientée objet

    06:02
  • Définir un nouveau type

    06:24
  • Convention en UpperCamelCase

    06:39
  • Créer des instances

    06:51
  • Le mot-clé prototype

    11:06

7 jQuery et le DOM

Organisez un projet web et son code Javascript. Manipuler le DOM avec jQuery en utilisant les sélecteurs CSS.

  • Démarrer un projet avec Sublime Text

    00:25
  • Squelette d’un document web

    01:41
  • Head et meta-données

    02:29
  • Body et contenu

    03:37
  • L’arbre HTML

    04:12
  • Requête HTTP & construction du DOM

    05:42
  • Visualiser le DOM dans son navigateur

    06:13
  • Manipuler le DOM avec javascript

    06:23
  • La console javascript

    06:49
  • Ajouter un élément dans le DOM

    07:39
  • Documentation Mozilla

    10:18
  • Supprimer un élément du DOM

    10:42
  • Ecrire du Javascript dans son HTML

    11:09
  • Fichier Javascript séparé

    13:14
  • L’onglet Network des outils pour développeur

    16:53
  • Organiser ses fichier Javascript

    18:06
  • Compatibilité des navigateurs / Naissance de jQuery

    19:53
  • Intégrer jQuery avec le code source

    21:11
  • L’ordre de vos balises <script>

    26:05
  • Intégrer jQuery avec un CDN

    27:10
  • Exemple de la méthode hide()

    30:08
  • La fonction $()

    30:36
  • Rappels sur les sélecteurs CSS

    30:53
  • Live-code - sélection d’élément

    31:56
  • $(document).ready() & chargement du DOM

    36:50
  • Les fonctions addClass() & removeClass()

    39:52
  • Les fonctions html(), text(), val()

    40:47

8 Événements et Callbacks

Reliez votre code jQuery à des évènements utilisateur: clic, survol de souris, frappe sur le clavier ! Apprenez la notion fondamentale de callback en javascript.

  • Evènement et callback

    00:14
  • Live-code : évènement click en jQuery

    05:28
  • Vie d’un évènement & bubbling

    11:35
  • Evènements clavier & callback avec arguments

    17:58
  • blur, focus & validation de formulaire

    27:28
  • Un monde d’évènements imprévisibles !

    31:44

9 Bien utiliser un plug-in jQuery

Apprenez à bien intégrer un plugin jQuery !

  • Intégrer le plugin Chosen

    00:31
  • Les composants jQuery de Bootstrap

    10:55
  • Intégrer le CSS/JS de Bootstrap

    11:29
  • Modale Bootstrap

    12:22
  • Tooltip Bootstrap

    15:49
  • Autres fonctionnalités Javascript de Bootstrap

    19:22
  • Le plugin Bootstrap datepicker

    20:25

10 AJAX

Transformez vos sites en véritables applications à la Gmail ou Twitter grâce à AJAX !

  • AJAX en 2 mots

    00:04
  • Comment fonctionne le Web

    00:19
  • L’exemple de Gmail

    00:50
  • L’exemple de Twitter

    01:02
  • L’intérêt d’AJAX

    01:13
  • Observation de requêtes AJAX

    01:25
  • Le format de données XML

    04:10
  • Le format de données JSON

    04:30
  • Live-Code : AJAX & Google Spreadsheet

    04:49
  • Syntaxe de $.ajax()

    23:16
  • Fonction de callback AJAX

    24:03
  • Syntaxe abbrégée avec $.get()

    24:38
  • Live-Code : AJAX & les formulaires

    25:13
  • Conclusion

    39:33

11 Expressions Régulières (Regex)

Partez à la conquête de la reconnaissance de motifs dans un texte (téléphone, email, code postal, etc.) et affutez-vous en préparation du dernier gros morceau, le scraping.

  • Vous connaissez déjà les Regex !

    00:22
  • Les Regex sont universelles

    00:45
  • Prise en main de Rubular

    00:59
  • Syntaxe de base d’une Regex : //

    03:27
  • Live-Code : Une Regex pour le et les

    03:52
  • Zéro ou une fois avec ?

    05:21
  • Zéro ou une infinité avec *

    05:31
  • Un ou une infinité avec +

    05:45
  • Les accolades {}

    05:57
  • Tout sauf… avec ^

    06:22
  • Le joker avec .

    06:38
  • Pas de panique, Rubular est là

    06:56
  • Live-Code : Regex & JavaScript

    07:22
  • La fonction .test()

    07:46
  • La fonction .match()

    08:52
  • Validation de code postal

    10:35
  • Devenez le Maître Yoda des Regex !

    23:23

12 Web Scraping / Growth Hacking avec Node.js et Nightmare.js

Sortez du navigateur pour exécuter du JavaScript dans votre Terminal. Et mettez enfin en prod sur Heroku !

  • Installation de Node.js

    00:07
  • Utiliser une librairie externe en Node.js

    03:35
  • Ajouter le paquet nightmare au projet

    06:55
  • Installation de PhantomJS

    08:51
  • Live-Code : Scraper Wikipedia

    09:43
  • Live-Code : Scraper Leboncoin

    31:58
  • Déployer un script nightmare sur Heroku

    51:09
Comprenez enfin JavaScript
149 € accès à vie
  • 12 cours vidéos & leur quiz
  • 5 heures d'explication
  • 138 objectifs à accomplir
  • Des réponses à vos questions par les profs du Wagon
Déjà un compte GitHub ? Connectez-vous
ou regarder la première vidéo gratuitement.

Merci !

Paiement en cours