Javascript Training Series : Générateur de citations
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Javascript Training Series : Générateur de citations

Sébastien Imbert
9,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Au cours de ce tutoriel 100% Javascript, nous réaliserons un script qui permet de générer une citation aléatoire au clic d'un bouton, mais aussi au chargement de la page. Les citations générées seront toutes accompagnées du nom et d'informations sur l'auteur.

On créera également un bouton qui permet de tweeter la citation sur Twitter, avec un hashtag qui reprend le nom de l'auteur.

Et comme il y a sur Twitter une limite de caractères autorisés, on créera une fonction qui coupera la citation si cette dernière dépasse la limite autorisée.

Au cours de ce tuto Générateur de citations en Javascript, nous verrons :

  • comment travailler avec la console du navigateur,
  • comment travailler avec les tableaux (simples et multidimensionnels
  • comment générer une valeur de type number aléatoire avec l'objet Math, et les méthodes random(), round() et floor()
  • la méthode addEventListener() et l'événement click
  • les méthodes replace(), slice(), et concat()
  • les propriétés length et innerHTML
  • la condition en if, else if, et else
  • comment créer une fonction avec nos propres paramètres

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 crée le générateur de citations
Chapitre 2
On crée une fonction pour partager la citation sur Twitter

Plan détaillé du cours

Chapitre 1 : On crée le générateur de citations
33m21
 
Leçon 1On se pose les bonnes questions et on crée un tableau simple
Leçon 2On crée un tableau multidimensionnel
Leçon 3On génère une citation aléatoire au chargement de la page
Leçon 4On génère une citation aléatoire au clic du bouton
Chapitre 2 : On crée une fonction pour partager la citation sur Twitter
29m16
 
Leçon 1On crée une fonction pour tweeter la citation
Leçon 2On crée une fonction qui coupe une partie de la citation 1/2
Leçon 3On crée une fonction qui coupe une partie de la citation 2/2

Aperçus

Avis des apprenants

Détail des avis
93
Apprenants
4
Commentaires
4,8/5
Note moyenne
5/5
3
4/5
1
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 09/04/2024
Intéressant de pouvoir afficher des citations aléatoirement aussi bien à l'ouverture de la page qu'en cliquant sur un bouton. Cette partie ne m'a pas posée trop de soucis de compréhension (hormis les maths que je fuis). Par contre le partage sur Twitter j'ai lâché en cours de route. Je n'ai pas compris d'où sort le chars. On jongle dans le code. Je préfère quand chaque partie est unique et savoir où elle commence et où elle se termine (comme la première moitié du cours). De toute façon je n'ai pas de compte Twitter, je ne sais même pas à quoi ça sert. De plus l'écriture de vos codes est trop petite, je pense que ça m'a démotivé. Ceci étant c'est un tuto intéressant pour les plus expérimentés en javaScript.
Jef Brunet
Jef Brunet
Publié le 04/08/2019
Merci beaucoup pour ce tuto cela m'a énormément aidé a comprendre des notion de javascript sur lesquelles j'avais de grosses difficultés , ce qui m’empêchait de progresser . Explications détaillées en pas a pas c'est vraiment une bonne idée afin de mieux assimiler et donc de comprendre ce que l'on fait . super tuto a consommer sans modération . Merci .
Audrey Harbonnier
Audrey Harbonnier
Publié le 09/04/2019
Ce tuto est génial, tout est très bien expliqué. J'ai tout compris. Merci.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript

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.

Payer plus tard

Prix d'achat : 9,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données