Apprendre le JavaScript pour être développeur web – mes vidéos sur le sujet

Je suis en train d‘apprendre le JavaScript (j’ai commencé début juillet 2020) pour être développeur web, pour être développeur front-end dans un premier temps.

Pour être développeur web il faut apprendre et un avoir un certain niveau de maîtrise dans le HTML, CSS et le JavaScript et  il faut maîtriser un framework front end comme VUE.JS par exemple (il y a aussi ANGULAR et REACT pour les plus utilisés) à minima pour être employable en entreprise.

Le JavaScript est un langage de programmation que je trouve difficile et long à apprendre, car il y a énormément de chose à apprendre  et à retenir. Tu n’apprends pas le JavaScript en 3 semaines, et l’utiliser quand on débute n’est pas évident. 

C’est ce qui m’a motivé à créer ces vidéos sur le JavaScript, ces vidéos me servent à réviser.

ça fait plus de 10 ans que je fais des vidéos sur les sujets qui m’intéressent techniquement et ces vidéos me font progresser sur le plan professionnel, ça me permet de fixer les choses.

Apprendre le JavaScript

La playlist sur mes vidéos JavaScript que j’ai nommée : 

JavaScript-Exercices-Débutant-J’apprends le JavaScript

 

Mes vidéos sur le JavaScript :

JavaScript01-DOM-Exercice-Faire apparaître des paragraphe en cliquant sur un lien-Débutant 

JavaScript02-Exercice -Transformer une fonction nommée en une expression fonction fléchée-Débutant

JavaScript03-DOM-Exercice-Ajouter du texte dans un paragraphe en appuyant sur un bouton-Débutant

JavaScript04-Exercice-Mettre la fonction nommée dans le addEventListener-Débutant

JavaScript09-DOM-Exercice-utilisation de la méthode removeChild( )-débutant

JavaScript10-DOM-Exercice-Utilisation de la méthode replaceChild( ) -débutant

JavaScript11-DOM-Exercice-Utilisation de la méthode cloneNode( )-débutant

JavaScript12-DOM-Exercice-Utilisation de la méthode insertBefore( )-débutant

JavaScript13-DOM-Exercice-Utilisation de la méthode hasChildNode( )-débutant

JavaScript14-DOM-Exercice-utilisation de la propriété onclick et de la méthode addEventListener( )

JavaScript15-DOM-Utilisation de l’événement mouseover et mouseout sur un élément html-débutant

JavaScript16-DOM-Exercice-Utilisation de l’événement onblur dans l’input d’un formulaire-débutant

JavaScript17-DOM-Exercice-manipuler les styles css avec la propriété style du javascript-débutant

JavaScript18-DOM-Exercice-utilisation de la propriété className pour modifier le style CSS page web

JavaScript19-Découverte du local storage et de la méthode setItem( )-débutant

JavaScript20-Découverte du Web Storage et de la méthode getItem( )-débutant

JavaScript21-Découverte du Web Storage et de la méthode removeItem( )-débutant

JavaScript22-Découverte du Web Storage et de la méthode clear( )-débutant

JavaScript23-Présentation exercice-faire un formulaire et stocker les données dans le local storage

JavaScript24-le code HTML de l’exercice-faire un formulaire et stocker les données local storage

JavaScript25-le code JavaScript de l’exercice-faire formulaire et stocker les données local storage

JavaScript26-Exercice-découverte des fonctions setTimeout( ) et setInterval( )-débutant

JavaScript27-Découverte de l’objet Promise (promesse) et de la méthode then( ) et catch( )-débutant

JavaScript28-Exercice-Ajout d’une temporisation à la promesse-promise-Débutant

JavaScript29-fonction de callback (fonction de rappel) complément information vidéo JavaScript05

JavaScript30-Fonction de callback avec des paramètres que je rajoute-débutant

JavaScript31-Méthode fetch()-Première requête-Découverte-Débutant

JavaScript32-Méthode fetch()-Première récupération de donnée sur la web API JSONPlaceholder-Débutant

JavaScript33-Exercice-Afficher sur une page web des données récupérées sur une web API-Débutant

JavaScript34-Utilisation de async et await et de try{ } et catch{ }-fonction asynchrone-débutant

JavaScript35-Utilisation de response.text() et de la méthode JSON.parse() – débutant

JavaScript36-Utilisation de la méthode POST dans une requête HTTP avec fetch( )-Débutant

JavaScript37-Complément d’information sur fetch( ) et la vidéo JavaScript36

JavaScript38-Création d’un objet et différentes informations du MDN

JavaScript39-Découverte de quelques méthodes de Object-Débutant

JavaScript40-La création d’une classe et l’instance d’une classe-découverte-débutant

JavaScript41-Complément d’information MDN-class, constructor, this, new, instance-Débutant

JavaScript42-Création de plusieurs méthodes dans une classe et invoquer ces méthodes-Débutant

JavaScript43-Expression de classe-Déclaration de classe-Découverte-Débutant

JavaScript44-Découverte du getter-accesseur-dans une classe-Débutant

JavaScript45-Découverte du setter-mutateur-dans une classe-Débutant

JavaScript46-Découverte des méthodes statiques-static-d’une classe-Débutant

JavaScript47-Création de sous classe ou classe fille avec extends et super( )-Découverte-Débutant

JavaScript48-Découverte de l’utilisation des mixins avec les classes-Débutant

JavaScript49-Découverte et utilisation de la boucle for-Débutant

JavaScript50-La boucle for…in-Découverte et utilisation-Débutant

JavaScript51-La boucle for of-Découverte et utilisation-Débutant

JavaScript52-Méthode forEach( )-Découverte et Utilisation-Débutant

JavaScript53-La méthode map( )-Découverte et Utilisation-Débutant

JavaScript54Comment sélectionner une valeur d’un OBJET qui est dans un TABLEAU-Débutant

JavaScript55Mettre du code HTML dans une variable et l’utiliser avec inserAdjacentHTML( )-Débutant

JavaScript56Mettre insertAdjacentHTML( ) dans une fonction-Débutant

JavaScript57Utilisation fonction de callback pour calculer la circonférence et l’aire du cercle

JavaScript58Utilisation des fonctions de callback pour faire des calculs d’addition sous traction..

JavaScript59Aller chercher la value d’une key dans un objet qui est déjà dans un objet-Débutant

JavaScript60Découverte de l’opérateur spread ou de décomposition utilisé sur les tableaux

JavaScript61Utilisation de l’opérateur SPREAD pour faire une copie d’un objet simple

JavaScript62Utilisation de l’opérateur SPREAD pour faire une fusions de deux objets simples

JavaScript63Découverte de l’opérateur REST

JavaScript64Découverte de l’affectation par décomposition-Débutant

Vidéos qui sortiront en 2021

JavaScript65Découverte de la méthode splice( ) Modifier les valeurs d’un tableau-Débutant

JavaScript66Découverte de la méthode slice( ) appliquée sur un tableau-Débutant

JavaScript67Découverte de la méthode slice( ) appliquée sur une chaîne de caractère-Débutant

JavaScript68Télécharger le code d’un serveur node.js-backend-et le faire fonctionner en local

JavaScript69Installation du préprocesseur Sass dans le répertoire du backend (mauvaise idée)

JavaScript70Installer le préprocesseur Sass dans un dossier de travail avec Visual Studio Code

JavaScript71Insérer des images d’une API web sur une page web html avec insertAdjacentHTML

JavaScript72La pose d’une grille pour ordonnée les données-présentation de produit e-commerce

JavaScript73Le site e-commerce prend doucement forme

JavaScript74Modification de quelques erreurs scss et key value pour url photo produit

JavaScript75Génération dynamique automatique de la page web à partir des données d’une variable

JavaScript76le transfert de l’id du produit par l’url-Transmettre des données avec l’URL

JavaScript77Récupération id depuis l’url-extraction id depuis la chaîne de requête-query string

JavaScript78La sélection de l’objet qui est dans le tableau par son id- 2 méthodes

JavaScript79L’affichage du produit sélectionné depuis la page d’accueil dans la page produit

JavaScript80La récupération des valeurs du produit et du formulaire pour le panier

JavaScript81Génération automatique du code html des options du produit suivant le nombre d’options

JavaScript82Mettre l’objet de la variable du panier dans le local storage pour le sauvegarder

JavaScript83-Une petite factorisation du code du coté du localStorage

JavaScript84Création de la page panier.html et du fichier panier.js

JavaScript85Le code HTML statique et le SCSS de la page panier

JavaScript86Modification pour que la page panier.html devienne dynamique

JavaScript87Correction erreur pour afficher le nom complet de l’option du produit dans le panier

JavaScript88Le bouton supprimer le produit avec la méthode filter et axe d’amélioration possible

JavaScript89Ajout du bouton pour vider entièrement le panier dans la page panier

JavaScript90Le calcul du prix total du panier et son affichage sur la page web

JavaScript91Le début du formulaire-La partie HTML

JavaScript92Récupérer les valeurs du formulaire et les mettre dans le local Storage

JavaScript93Je mets les values du formulaire dans un objet que j’envoie dans le local storage

JavaScript94Créer l’objet pour le formulaire avec une classe-Est ce que c’est utile dans ce cas là ?

JavaScript95Remplir les champs du formulaire automatiquement avec les valeurs du local storage

JavaScript96Remplir les champs du formulaire automatiquement avec une fonction et le localStorage

JavaScript97Controle validation formulaire du champ nom et prénom avant envoi dans local storage

JavaScript98RegEx code postal du formulaire pour la validation du champ avant envoi

JavaScript99RegEx pour l’email du formulaire pour la validation du champ avant envoi

JavaScript100RegEx pour l’adresse du formulaire pour la validation du champ avant envoi

JavaScript101Mettre un texte d’avertissement à coté du champ du formulaire qui pose problème

JavaScript102Ajout du texte d’avertissement à coté des autres champs du formulaire

JavaScript103Controle du champ ville avant validation du formulaire

JavaScript104Ajout de la possibilité de choisir la quantité de produit dans la sélection du produit

JavaScript105Correction erreur du local storage qui apparait dans la console-can’t access property

JavaScript106Modification de l’expression régulière prénom pour prendre en compte le tiret

JavaScript107Envoie des données du panier et du formulaire vers un serveur avec fetch( ) et POST

JavaScript108Cette WEB API de TEST me permet de mettre mes données et me créer un id en retour

JavaScript109Gestion des erreurs avec try{ } catch(){ } et response.ok , response.status, promise

JavaScript110Problème à corriger-La promesse est exécutée alors que le formulaire n’est pas valide

JavaScript111La création de la fonction envoieVersServeur, le code semble plus lisible

JavaScript112Récupération de l’id de la response du serveur et changement de page après validation

JavaScript113Création de la structure de la page web confirmation-commande.html

JavaScript114Mise en place du javascript dans la page web confirmation-commande.html

JavaScript115Supprimer l’espace vide qu’il y a entre l’image et la bordure de la div

JavaScript116Retour automatique à la page d’accueil si actualisation confirmation-commande.html

JavaScript117La suppression de l’erreur “uncaught TypeError can’t access property length x is null”

JavaScript118Ne pas afficher le formulaire de validation de commande lorsque le panier est vide

JavaScript119Rajouter le favicon pour ne plus voir l’erreur du favicon dans la console

Le pearltree du blog :

 
Apprendre le JavaScript pour être développeur web, par jp0065

À propos de Jean-Pierre MAZEL

Technicien de Maintenance en Génie Climatique et Technicien Frigoriste
Cette entrée a été publiée dans Automatisme-programmation, avec comme mot(s)-clef(s) , . Vous pouvez la mettre en favoris avec ce permalien.