Se connecter
JavaScript de Zéro/Module intermédiaire
Acheter maintenant

  • 199 € ou 5 paiements mensuels de 39,80 €

Module intermédiaire

Accéder aux vidéos

Le mix parfait entre théorie et pratique

Tu apprends, tu appliques.

1er projet : le compteur de clics

Réalisé en pur HTML / CSS / JavaScript, ce compteur de clics te permettra de faire tes premiers pas dans la manipulation du DOM.

Des bogues et leurs solutions

J'ai laissé volontairement les bogues rencontrés pour t'enseigner comment les corriger.

2ème projet : une liste de courses avancée

L'accent sera mis sur le design et l'expérience utilisateur (UX).

Avec ce module vous serez capable de...

✅ Créer et déboguer un site web à partir de zéro depuis Visual Studio Code
✅ Modifier le DOM d'une page web en JavaScript pour rendre le site dynamique
✅ Exécuter du code spécifique lors d'un évènement (clic, frappe clavier etc.)
✅ Comprendre les notions d'objets, callbacks et évènements qui sont au cœur de l'interactivité d'un site web
✅ Chercher dans la documentation, par vous-même, les informations manquantes pour compléter votre code
✅ Comprendre le code d'autrui pour le modifier et ajouter des fonctionnalités à un projet existant
Accéder aux vidéos

Fiche de synthèse

Parfois il faut mettre en pause sa formation à cause des aléas de la vie. Pas de soucis ! Grâce aux fiches de synthèses vous pouvez vous remémorer toutes les leçons vidéos en un clin d'œil !

Une garantie satisfait ou remboursé

La formation JavaScript de Zéro est disponible avec une garantie "satisfait ou remboursé" de 14 jours, qui vous permet d’obtenir un remboursement si vous n’êtes pas satisfait de la qualité de la formation ou de son contenu. Vous ne prenez donc aucun risque à l'acheter dès maintenant.

Liste des leçons

Accéder aux vidéos

Fiche de synthèse

Pour faciliter votre apprentissage j'ai créé une fiche de synthèse des notions importantes à retenir pour ce module.

Notez que cette fiche ne vous dispense pas de regarder les leçons en vidéo qui possèdent beaucoup plus d'informations !

Une bonne façon de l'utiliser est de regarder une leçon en vidéo puis de lire immédiatement la synthèse de celle-ci.
Fiche de synthèse

Les bases du JavaScript (suite)

Les littéraux de gabarits (template strings) : interpolation d'expressions
Raccourcis d'opérateurs, opérateurs puissance et modulo
Les types primitifs
Aperçu
La conversion de types
Quiz #1
Structures conditionnelles else if et switch
L'opérateur conditionnel '?'
Déclarer des variables avec const, let et var
La portée des variables avec let et const
Aperçu
La portée des variables avec var
Quiz final

Les objets

Pilier de la programmation moderne, l'objet est la structure de données idéale pour représenter ses données au sein d'un programme.
Introduction
Aperçu
Différences entre classes et prototypes
Que se passe-t-il dans la mémoire de l'ordinateur ?
Aperçu
Imbrication d'objets, exemple avec l'API de Twitter
Quiz final

La POO : Programmation Orientée Objet

Les fonctions de première classe
Les méthodes : des fonctions dans des objets
Pourquoi apprendre la POO ?
Quiz final

Les projets : objectifs et fonctionnement

Objectifs des projets
Aperçu
Créer un site web de zéro depuis Visual Studio Code

Lien entre HTML et JavaScript

Introduction au DOM et différences entre NodeJS et Chrome
Qu'est-ce que le DOM ? Que contient-il ?
Sélection d'éléments du DOM
Modification d'éléments du DOM
Création et insertion d'éléments dans le DOM
Déplacer et supprimer des éléments du DOM
Traverser les éléments du DOM

Projet #1 : Compteur de clics

Dans ce projet très simple, vous verrez de nombreux concepts fondamentaux mis en application pour manipuler une page web et la rendre dynamique.
Présentation du compteur de clics
Aperçu
Les évènements (+ énoncé exercice incrémentation)
Solution incrémentation et comment déboguer dans Chrome (instruction debugger)
Solution décrémentation et bouton reset
Détecter un clic droit
Solution zone de clic
Lire la valeur d'un élément input
Aperçu
Solution incrémenter et décrémenter le compteur des valeurs des inputs
Comment afficher temporairement une notification ?
Solution gestion des limites et notifications
Conclusion et conseils

Les tableaux

Introduction
Lecture et itération via une boucle
Modifier un élément et rappels
Documentation du MDN : l'exploiter efficacement
Tableaux multidimensionnels
Quiz final

Les types d'objets standards en JavaScript

String et les objets "enveloppeurs" (wrappers)
Number
Boolean
Date
RegExp (expression régulières)
Object
La librairie Math

BONUS Projet #2 : Animation changement d'ordre

Démo de l'animation et explications
Phase de décollage
Phase de déplacement 1/6
Phase de déplacement 2/6
Phase de déplacement 3/6
Phase de déplacement 4/6
Phase de déplacement 5/6
Phase de déplacement 6/6
Déplacement des items de la liste 1/4
Déplacement des items de la liste 2/4
Déplacement des items de la liste 3/4
Déplacement des items de la liste 4/4
Remaniement du code
Mise à jour du DOM 1/4
Mise à jour du DOM 2/4
Mise à jour du DOM 3/4
Mise à jour du DOM 4/4
Sauvegarde et remaniement

Projet #2 : Liste de courses

Dans ce projet simple, vous apprendrez à manipuler les tableaux pour réaliser un gestionnaire de liste de courses en ligne sous la forme d'un site web dynamique.
Présentation du projet
Aperçu
Fonctionnement des exercices
Ajout d'un nouvel item
Template nouvel item
Template nouvel item (fin)
Correction des espaces
Majuscule première lettre
Validation valeur filtrée
Messages d'erreurs 1/2
Messages d'erreurs 2/2
Minimum 2 lettres 1/2
Minimum 2 lettres 2/2
Insertion intelligente 1/5
Insertion intelligente 2/5
Insertion intelligente 3/5
Insertion intelligente 4/5
Insertion intelligente 5/5
Refactoring
Réduire la maintenance
Sauvegarder les données 1/2
Sauvegarder les données 2/2
Chargement des données 1/2
Chargement des données 2/2
Modification du nom de l'item 1/4
Modification du nom de l'item 2/4
Modification du nom de l'item 3/4
Modification du nom de l'item 4/4
Modification de la quantité de l'item
Sauvegarde automatique des données 1/4
Sauvegarde automatique des données 2/4
Sauvegarde automatique des données 3/4
Sauvegarde automatique des données 4/4
target VS currentTarget
Supprimer un item 1/2
Supprimer un item 2/2
Exportation des données
Changement de l'ordre des items 1/5
Changement de l'ordre des items 2/5
Changement de l'ordre des items 3/5
Changement de l'ordre des items 4/5
Changement de l'ordre des items 5/5
Affichage de l'indicateur 1/11
Affichage de l'indicateur 2/11
Affichage de l'indicateur 3/11
Affichage de l'indicateur 4/11
Affichage de l'indicateur 5/11
Affichage de l'indicateur 6/11
Affichage de l'indicateur 7/11
Affichage de l'indicateur 8/11
Affichage de l'indicateur 9/11
Affichage de l'indicateur 10/11
Affichage de l'indicateur 11/11

Module algorithmique

Que faire après le module intermédiaire ?

Une question ? Contactez-moi !

➡️ Par téléphone ou WhatsApp : 06 67 40 56 09
➡️ Par email : jeremy@javascriptdezero.com