Javascript Training Series :  Compter les caractères restants
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
39m21
de formation
5
leçons vidéo
2
chapitres
Débutant
niveau requis
Sébastien Imbert
Sébastien Imbert
Formateur

Javascript Training Series : Compter les caractères restants

4.8/5 Trustpilot (1392 avis) Satisfait ou remboursé
39m21
de formation
5
leçons vidéo
2
chapitres

Au cours de ce tutoriel 100% Javascript "compter les caractères restants en Javascript", nous réaliserons un script qui permet d'afficher le nombre de caractères restants autorisés lorsqu'un utilisateur remplit un champ (input, textarea).
Le compteur se mettra à jour lorsque l'utilisateur ajoutera ou retirera du texte dans le champ. Et si le nombre de caractère restants est inférieur à 10, on passera sa couleur en orange, et si il est inférieur à 0 on le passera en rouge.

Au cours de ce tuto Javascript "compter les caractères restants" nous verrons :

  • comment travailler avec la console du navigateur,
  • les événements keydown, et keyup,
  • les propriétés value, length, nextElementSibling, innerHTML, textContent et style,
  • l'opérateur this,
  • les méthodes querySelectorAll et addEventListener,
  • la boucle for,
  • la condition en if, else if, et else

Je reste disponible dans le salon d'entraide et les fichiers sources sont fournies.
 

Quelques mots sur Javascript Training Series : 

Javascript Training Serie est une série de tutoriels entièrement consacrée au Javascript. L'objectif est de vous aider à progresser en réalisant des exercices concrets. 
Vous apprendrez à utiliser les propriétés et méthodes Javascript, à créer des fonctions, des conditions, des boucles, écouter des événements, à réaliser vos scripts étape par étape à l'aide de la console du navigateur, et à commenter votre code.
Pour que vous puissiez aussi participer à la réalisation du script, je ne donne pas la solution de manière brutale, j'essaie de vous mettre sur la voie à chaque vidéo.
Dans ces tutos, je n'utilise pas de framework ou librairie, tous les scripts sont réalisés en Vanilla Javascript (Javascript pur).
Pourquoi faire du vanilla Javascript ? Car une bonne maîtrise du Javascript entraînera une meilleure assimilation des frameworks et librairies (jQuery, Angular, React, Vue ...).
Pour résumer, Javascript Training Serie à pour but de vous rendre meilleur et plus autonome en Javascript.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
On réalise le script pour un seul champ
Chapitre 2
On réalise le script pour plusieurs champs

Table des matières

Chapitre 1 : On réalise le script pour un seul champ

14m01
 
Leçon 1On compte le nombre de caractères saisis dans le champ
Leçon 2On écoute les événements keydown et keyup

Chapitre 2 : On réalise le script pour plusieurs champs

25m20
 
Leçon 1On crée une boucle for pour parcourir un tableau
Leçon 2On récupère les span et on utilise l'opérateur this
Leçon 3On crée une condition pour changer la couleur des chiffres du compteur

Aperçus

Avis des apprenants

Détail des avis
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 08/04/2024
Merci beaucoup pour ce tuto qui est très utile. Vos explications sont toujours très claires et il n'y a pas un point qui n'est pas expliqué. Je ne raffole pas de la console mais pour le cours ça sert bien. J'ai pris beaucoup de notes en commentaires. A bientôt.
Teddy Marchand
Teddy Marchand
Publié le 29/07/2019
très bon cas pratique en Js. Très clair et bien expliqué. Merci :)
Pascal Aulagner
Pascal Aulagner
Publié le 16/05/2019
Tuto extremement clair et precis sur un sujet vraiment utile, Merci a vous, la pedagogie coule dans vos veines. Bravo. Je vais clairement suivre les huit volets a suivre.

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le fichier source contient un dossier "start", qui contient les fichiers html et css, sans le fichier javascript pour que vous puissiez réaliser le script en suivant le tutoriel, ainsi qu'un dossier "end" qui contient tous les fichiers html, css et js.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
5,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
39m21 de vidéo • 2 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 784 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données