Construire des mini-projets en JavaScript

Construire des mini-projets en JavaScript

Ce cours fait partie de plusieurs programmes.

Instructeur : Tom Chant

Inclus avec

4 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

4 modules

Obtenez un aperçu d'un sujet et apprenez les principes fondamentaux.

niveau Intermédiaire

Expérience recommandée

1 semaine à compléter

à 10 heures par semaine

Planning flexible

Apprenez à votre propre rythme

Ce que vous apprendrez

Créer des fonctions efficaces en utilisant la syntaxe fléchée et les expressions.
Appliquer des méthodes de tableau comme .map() et .reduce() pour traiter les données.
Déboguer les applications JavaScript en utilisant des techniques courantes de traitement des erreurs.

Compétences que vous acquerrez

Catégorie : Data Validation
Catégorie : Javascript
Catégorie : Event-Driven Programming
Catégorie : User Interface (UI)
Catégorie : Data Management
Catégorie : Web Development
Catégorie : Data Import/Export
Catégorie : Debugging

Outils que vous découvrirez

Catégorie : Web Development Tools
Catégorie : Web Applications

Détails à connaître

Certificat partageable

Ajouter à votre profil LinkedIn

Évaluations

4 devoirs

Enseigné en Anglais

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires

logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

Élaborez votre expertise du sujet

Ce cours est disponible dans le cadre de

Lorsque vous vous inscrivez à ce cours, vous devez également sélectionner un programme spécifique.

Apprenez de nouveaux concepts auprès d'experts du secteur
Acquérez une compréhension de base d'un sujet ou d'un outil
Développez des compétences professionnelles avec des projets pratiques
Obtenez un certificat professionnel partageable

Il y a 4 modules dans ce cours

Êtes-vous prêt à améliorer vos compétences en JavaScript grâce à une approche basée sur des projets ? Ce cours est conçu pour vous guider à travers les concepts fondamentaux et avancés de JavaScript en utilisant des défis pratiques et réels.

Grâce à des projets pratiques, vous explorerez des méthodes fonctionnelles telles que .map() et .reduce(), des opérations logiques clés telles que l'opérateur ternaire et le court-circuitage, la soumission de formulaires, et bien plus encore. Ensuite, vous explorerez des concepts JavaScript de plus en plus avancés, notamment les boucles, filter(), les importations et la déstructuration d'objets, en construisant trois projets complets : un sélecteur de mèmes, une bannière de consentement aux cookies et un clone de X/Twitter. Vous apprendrez à écrire un code plus propre et plus efficace et à relever des défis qui consolideront votre compréhension de JavaScript. À la fin de ce cours, vous aurez une solide compréhension des méthodes et techniques JavaScript puissantes, prêtes à être appliquées directement dans vos projets de codage et dans votre carrière de codage.

Développez vos compétences en JavaScript grâce à des défis pratiques qui couvrent les méthodes, les tableaux, la déstructuration et bien plus encore.

Inclus

1 devoir49 plugins

1 devoir Total 30 minutes

Quiz sur l'essentiel de JavaScript 30 minutes

49 plugins Total 201 minutes

Introduction aux mini-projets 1 minute
Bienvenue aux leçons interactives ! 1 minute
Déstructuration des objets 3 minutes
Défi de la déstructuration d'objets 2 minutes
La méthode .map() 7 minutes
Le défi de la méthode .map() 4 minutes
La méthode .join() 3 minutes
Le défi de la méthode .join() 2 minutes
.map() vs .forEach() 5 minutes
Pour la boucle Interrompre et continuer 5 minutes
Les dangers du innerHTML 5 minutes
Au-delà des déclarations de fonctions 1 : Expressions de fonctions 3 minutes
Au-delà des déclarations de fonction 2 : défi de l'expression de fonction 2 minutes
Au-delà des déclarations de fonction 3 : les fonctions fléchées 6 minutes
Défi des fonctions fléchées 4 minutes
Défi des fonctions fléchées en ligne 2 minutes
Importation Exportation (nommée) 4 minutes
Importer Exporter (par défaut) 4 minutes
La méthode .reduce() 6 minutes
Le défi de la méthode .reduce() 4 minutes
La méthode .reduce() avec les objets 8 minutes
La méthode .reduce() avec les objets Défi 3 minutes
Paramètres par défaut 3 minutes
Mise en place du Super Challenge 3 minutes
Solution Super Challenge 9 minutes
L'opérateur ternaire 4 minutes
L'opérateur ternaire pour les conditionnels complexes 3 minutes
Défi de l'opérateur ternaire 4 minutes
Twimba Ternary Refactor 5 minutes
Le paramètre REST 5 minutes
Le défi du paramètre REST 7 minutes
Syntaxe de diffusion (...) 4 minutes
Défi de la syntaxe de diffusion (...) 5 minutes
Court-circuitage avec OR (||) 5 minutes
Court-circuitage avec OR (||) Défi 2 minutes
Court-circuit avec AND (&&) 3 minutes
Court-circuitage avec AND (&&) Challenge 4 minutes
Déclarations de changement 5 minutes
Constructeurs : Date() 5 minutes
Le constructeur Error() 3 minutes
Objets avec méthodes et "this 5 minutes
Des objets aux fonctions de construction 5 minutes
Défi de la fonction constructeur 5 minutes
Fonctions de construction pour les classes 5 minutes
Fonctions de constructeur pour les classes Défi 2 minutes
Débogage : Erreurs (nouveau) 7 minutes
Débogage : console.error 2 minutes
Débogage : try...catch 5 minutes
Récapitulation 2 minutes

Cette section vous apprend à créer une fenêtre modale interactive de consentement aux cookies à l'aide de JavaScript, en couvrant l'affichage temporisé, le style, les formulaires, la validation, l'accessibilité et la gestion de l'interaction avec l'utilisateur.

Inclus

1 devoir31 plugins

1 devoir Total 80 minutes

Construire un cookie ennuyeux Consentement à la notation 80 minutes

31 plugins Total 111 minutes

Consentement aux cookies - Intro 3 minutes
Positionner la fenêtre modale 3 minutes
Aside : setTimeout 4 minutes
Régler la minuterie 2 minutes
Aside : element.style 6 minutes
Faire réapparaître la fenêtre modale 2 minutes
Fermer la fenêtre modale 3 minutes
Aside : Formulaires 7 minutes
Ajouter un formulaire 1 2 minutes
Aside : Formulaires - soumission 5 minutes
Aside : Formulaires - défi 3 minutes
Aside : Attributs de validation 8 minutes
Soumettre le formulaire 3 minutes
Aside : preventDefault 4 minutes
preventDefault Challenge 3 minutes
Boutons dans les formulaires - comportement bizarre 3 minutes
Ajouter un message modal 2 minutes
Ajouter des messages modaux 2 6 minutes
Ajouter des messages modaux 3 3 minutes
Aside : FormData 4 minutes
Formulaire Données 1 2 minutes
Aside : Méthodes FormData 3 minutes
Formulaire Données 2 3 minutes
Aside : Éléments de désactivation 6 minutes
Désactiver le bouton de fermeture 3 minutes
Il n'y a pas de choix 1 4 minutes
Aside : classlist.toggle 4 minutes
Aside : Défi de la bascule de la liste de classe 3 minutes
Il n'y a pas de choix 2 3 minutes
Questions d'accessibilité 2 minutes
Récapitulation 2 minutes

Cette section vous guide à travers le bouclage, la manipulation de données, la manipulation du DOM et la programmation événementielle en JavaScript, pour aboutir à la création d'une fonction interactive qui filtre et affiche les chats en fonction des émotions sélectionnées par l'utilisateur.

Inclus

1 devoir37 plugins

1 devoir Total 30 minutes

Construire un sélecteur de mèmes Devoir noté 30 minutes

37 plugins Total 166 minutes

Intro 4 minutes
Quelle horrible boucle ! 3 minutes
En marge : pour de 5 minutes
Utiliser une forme de 2 minutes
Nid la pour de 5 minutes
Rendre les émotions 1 4 minutes
Rendu des émotions 2 6 minutes
En marge : importation des données 6 minutes
Importer les données 2 minutes
Aside : Entrées radio 6 minutes
Rendre les entrées des radios 6 minutes
En marge : .includes() 6 minutes
supprimer les doublons 3 minutes
En marge : e.target 6 minutes
Obtenir l'identifiant de l'option cliquée 3 minutes
Aside : parentElement 3 minutes
Aside : classlist add/remove 7 minutes
Ajouter de la couleur à l'émotion sélectionnée 6 minutes
Aside : getElementsByClassName 5 minutes
Supprimer la classe de surbrillance 2 minutes
En marge : querySelector et son utilité 5 minutes
Connecter le bouton 5 minutes
Une émotion a-t-elle été choisie ? 3 minutes
En marge : case à cocher 6 minutes
isGif 4 minutes
En marge : filter() 6 minutes
En marge : filter() 2 5 minutes
Trouver des correspondances avec .filter() 4 minutes
GIFs animés uniquement 4 minutes
Introduction de deux fonctions importantes 5 minutes
S'il n'y a qu'un seul chat... 5 minutes
S'il y a plus d'un chat... 4 minutes
renderCat() 5 minutes
Fermer la fenêtre modale 2 minutes
L'ordre des choses 3 minutes
Aside : SELECT INTO 7 minutes
Récapitulation 3 minutes

Dans ce module, vous apprendrez à construire un clone interactif de Twitter ("Twimba") en travaillant avec la manipulation du DOM, la gestion des événements, les attributs de données et le rendu conditionnel en JavaScript.

Inclus

1 devoir36 plugins

1 devoir Total 30 minutes

Construire un clone de X Travail noté 30 minutes

36 plugins Total 143 minutes

Intro 5 minutes
Importer les données 4 minutes
Aside : Zone de texte 3 minutes
Ajouter une zone de texte 4 minutes
Tweet Boilerplate 3 minutes
Défi "Tweet Boilerplate" (en anglais) 4 minutes
Aside : forEach() 5 minutes
Utiliser forEach pour construire le code HTML 2 minutes
Rendre les tweets dans le flux 4 minutes
Aside : CDN Font Awesome 6 minutes
Ajouter des icônes impressionnantes 5 minutes
Comme un tweet partie 1 : explication 2 minutes
Aside : Attributs des données 4 minutes
Aside : Data Attr JS et Challenge 6 minutes
Aside : Questions relatives à la dénomination des attributs de données 3 minutes
Comme un tweet partie 2 : attributs des données 2 minutes
Comme un tweet partie 3 : eventListener 0 minutes
Comme un tweet partie 4 : handleLikeClick() 4 minutes
Comme un tweet partie 5 : trouver l'objet tweet 6 minutes
Aidemémoire : Copier des objets et des tableaux 4 minutes
Comme un tweet partie 6 : rendre l'incrément 1 minute
Contrairement à un tweet 3 minutes
Retourner un booléen 2 minutes
Retweeter un tweet 8 minutes
Aside : Rendre conditionnellement une classe CSS 7 minutes
Colorier les icônes 6 minutes
Réponses 1 : obtenir les UUID des tweets avec des réponses 3 minutes
Réponses 2 : Chaîne HTML pour les réponses et ajout à la div parentale 6 minutes
Réponses 3 : basculer en mode caché 5 minutes
Refonte du tweet btn 4 minutes
Aside : UUID 7 minutes
Construire le nouvel objet Tweet 4 minutes
Rendre un nouveau tweet 2 minutes
Corrections UX 5 minutes
Récapitulation 3 minutes
Déployer Twimba 1 minute

Obtenez un certificat professionnel

Ajoutez ce titre à votre profil LinkedIn, à votre curriculum vitae ou à votre CV. Partagez-le sur les médias sociaux et dans votre évaluation des performances.

Instructeur

Tom Chant

Scrimba

11 Cours 336 884 apprenants

Offert par

Scrimba

En savoir plus sur Développement de logiciels

Packt
Modern JavaScript Tooling, Modules, and Backend Integration
Cours
Scrimba
Advanced JavaScript 3: Objects, Collections, Functions
Cours
Packt
Introduction to AJAX and Mini-Projects
Cours
Packt
JavaScript Masterclass - Zero To Job Ready With 10 Projects
Spécialisation

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.

Étudiant(e) depuis 2018

’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’

Jennifer J.

Étudiant(e) depuis 2020

’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’

Larry W.

Étudiant(e) depuis 2021

’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’

Chaitanya A.

’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’

Ouvrez de nouvelles portes avec Coursera Plus

Accès illimité à 10,000+ cours de niveau international, projets pratiques et programmes de certification prêts à l'emploi - tous inclus dans votre abonnement.

Faites progresser votre carrière avec un diplôme en ligne

Obtenez un diplôme auprès d’universités de renommée mondiale - 100 % en ligne

Découvrir les diplômes

Rejoignez plus de 3 400 entreprises mondiales qui ont choisi Coursera pour les affaires

Améliorez les compétences de vos employés pour exceller dans l’économie numérique

Foire Aux Questions

Pour accéder aux supports de cours, aux devoirs et pour obtenir un certificat, vous devez acheter l'expérience de certificat lorsque vous vous inscrivez à un cours. Vous pouvez essayer un essai gratuit ou demander une aide financière. Le cours peut proposer l'option "Cours complet, pas de certificat". Cette option vous permet de consulter tous les supports de cours, de soumettre les évaluations requises et d'obtenir une note finale. Cela signifie également que vous ne pourrez pas acheter un certificat d'expérience.

Lorsque vous vous inscrivez au cours, vous avez accès à tous les cours de la spécialisation et vous obtenez un certificat lorsque vous terminez le travail. Votre certificat électronique sera ajouté à votre page Réalisations - de là, vous pouvez imprimer votre certificat ou l'ajouter à votre profil LinkedIn.

Oui, pour certains programmes de formation, vous pouvez demander une aide financière ou une bourse si vous n'avez pas les moyens de payer les frais d'inscription. Si une aide financière ou une bourse est disponible pour votre programme de formation, vous trouverez un lien de demande sur la page de description.