Comment créer un générateur de devis aléatoires avec JavaScript et HTML, pour les débutants absolus

Ce didacticiel est destiné aux débutants qui souhaitent apprendre à créer une application Web simple à l'aide de JavaScript. Cela vous aidera à comprendre l'interaction entre JavaScript et un document HTML, et comment ils fonctionnent ensemble pour afficher des éléments sur le navigateur Web pour que les gens puissent les voir.

Si vous n'avez absolument aucune expérience en HTML et JavaScript, pas de soucis. Je vais vous expliquer chaque ligne de code et tout expliquer en détail. À la fin de cette leçon, vous devriez avoir une bien meilleure compréhension de la façon dont JavaScript fonctionne avec HTML pour rendre les pages Web interactives.

Dans ce projet, nous allons créer un générateur de devis aléatoires qui affiche un devis aléatoire à l'utilisateur chaque fois qu'il appuie sur un bouton. Pour commencer, vous aurez besoin de trois éléments essentiels qui sont presque toujours utilisés pour chaque projet Web:

  • un navigateur Web
  • un éditeur de texte
  • une envie de construire des choses

Pour ce didacticiel, j'utiliserai le navigateur Web Google Chrome, l'éditeur Sublime Text 3 et, bien sûr, mon propre désir de créer et d'enseigner. Vous pouvez utiliser tous les outils avec lesquels vous vous sentez à l'aise.

Commençons!

La première chose que nous ferons est de créer le dossier qui contiendra tous nos fichiers qui composent le projet. Créez un dossier vide sur votre bureau et nommez-le «générateur de devis». Ouvrez Sublime Text et faites glisser le fichier dans sublime . Maintenant, nous devrions avoir le dossier accessible via la barre latérale.

La plupart des projets Web se composent d'au moins un fichier HTML, JavaScript et CSS. Créons ces fichiers dans le dossier «générateur de devis».

Dans Sublime Text,faites un clic droit sur le dossier «générateur de devis» dans la barre latérale et cliquez sur créer un nouveau fichier . Une barre de saisie apparaîtra en bas pour nommer le fichier. Tapez «index.html» et appuyez sur Entrée. Vous avez maintenant créé le fichier index.html. Répétez cette étape deux fois de plus , mais créez un fichier nommé «javascript.js» et «style.css» (sans les guillemets) . Il est important de s'assurer que lorsque vous nommez un fichier, les lettres sont toujours en minuscules pour éviter toute complication.

Maintenant que nous avons tous nos fichiers configurés, créons notre fichier HTML qui servira de base à notre projet Web. Nous allons commencer avec un code HTML simple dans notre fichier index.html avant de pouvoir ajouter quoi que ce soit.

Vous trouverez ci-dessous notre fichier HTML sans rien dedans. Vous pouvez considérer cela comme notre squelette HTML qui contiendra toute la viande (contenu), que nous ajouterons plus tard.

Maintenant, nous devrons lier notre fichier JavaScript à notre document HTML afin que notre code JavaScript puisse interagir avec le document HTML. Nous ajouterons également du texte dans le balises, ajoutez un

élément, créez un élément avec un nom d' identifiant «quoteDisplay», ainsi qu'unélément avec un attribut onclick avec "newQuote ()" passé dedans.

Le décomposer

Si vous ne savez pas comment chaque partie du code HTML remplit son rôle, je vais vous l'expliquer ici. Si vous savez exactement ce que fait chaque élément et pourquoi il est là, vous pouvez passer à la section suivante pour continuer.

Tout d'abord, nous avons ajouté "Quote Gen" entre les Mots clés. La balise de titre prend le texte entre elle et l'affiche sur l'onglet de votre navigateur Web lorsqu'elle est ouverte.

Lors de la première étape, nous devons également nous assurer de lier le fichier javascript.js en bas du document HTML juste avant la fermeture marque.

Deuxièmement, nous avons créé un

élément avec "Simple Quote Generator" à l'intérieur. Cela servira à afficher un titre dans notre page Web.

Ensuite, nous avons créé un élément avec un attribut id défini sur «quoteDisplay». UNE L'élément fonctionne comme un diviseur pour les documents HTML. Les éléments aident à organiser le contenu dans une page Web. L' attribut id fonctionne comme un identifiant afin que JavaScript puisse facilement le saisir et le manipuler. Dans ce cas, nous utiliserons JavaScript pour récupérer l'élément avec l' ID «quoteDisplay» pour placer des guillemets dans le élément.

Après cela, nous créons un élément avec un attribut onclick avec «newQuote ()» passé en paramètre. leélément comme vous l'avez deviné, est un bouton qui fera quelque chose lorsque vous cliquez dessus. L' attribut onclick est utilisé pour définir une fonction sur le bouton, de sorte que chaque fois que vous cliquez sur le bouton, il exécute la fonction qui a été passée dans lel ' attribut onclick .

Dans ce cas, à chaque fois que vous cliquez sur le bouton, il exécutera la fonction newQuote (), bien sûr, nous n'avons pas encore défini la fonction newQuote (). Si vous ouvrez le projet dans un navigateur et appuyez sur le bouton, une erreur se produira dans la console car la fonction n'existe pas actuellement.

Enfin, voici un rappel pour montrer à quoi ressemble actuellement notre fichier index.html complet et ce qu'il produit dans le navigateur Web. Pour ouvrir le projet, utilisez un navigateur Web pour ouvrir le fichier index.html.

Penser logiquement à l'aide du code

Il est enfin temps de commencer à travailler sur le JavaScript dans notre fichier javascript.js afin que nous puissions développer notre propre fonctionnalité de génération de devis.

Maintenant, avant de commencer à coder, réfléchissons logiquement à la façon dont nous pouvons créer une machine génératrice de devis avec du code. Nous ne pouvons pas simplement commencer à coder sans réfléchir.

Nous devons déterminer ce que nous voulons et quand nous le voulons. Pour ce projet, nous voulons des devis! Quand est-ce que nous le voulons? Nous le voulons maintenant! Oh, euh… Je veux dire que nous le voulons chaque fois que l'utilisateur appuie sur le bouton.

Maintenant que nous avons résolu la première question, nous devons poser la seconde. Que sont les citations? Je veux dire vraiment, que sont-ils?

Merci Jaden! Oui! Les citations sont constituées de lettres, qui composent des mots. Dans le monde de la programmation, les mots sont classés comme des chaînes, par conséquent, nos guillemets devront être des chaînes !

Puisque nous savons que nous aurons plusieurs guillemets et que chacun sera choisi au hasard, le meilleur choix serait de stocker plusieurs chaînes dans un tableau .

Si vous ne le saviez pas déjà, les éléments d'un tableau sont récupérés en appelant son numéro d'index de tableau . Les détails techniques sont hors de la portée de ce didacticiel, mais en termes simples, chaque élément d'un tableau est représenté par un nombre entier dans l'ordre chronologique. Le premier élément d'un tableau a un numéro d'index de 0, chaque élément suivant augmente de un.

Afin de récupérer un devis aléatoire à partir d'un tableau, nous savons maintenant que nous devons produire un nombre aléatoire à chaque fois que l'utilisateur clique sur le bouton. Ensuite, nous utiliserions ce nombre aléatoire pour récupérer une citation du tableau et placer cette citation sur le document HTML, qui à son tour afficherait la citation sur le navigateur à l'utilisateur.

C'est ça! Nous avons résolu comment créer un générateur de devis aléatoire en pensant logiquement dans le code! Voici un résumé de la logique que nous avons élaborée pour notre projet:

  1. Les guillemets sont plusieurs chaînes qui doivent être stockées dans un tableau.
  2. Chaque fois que vous appuyez sur le bouton, un nombre entier aléatoire doit être généré.
  3. Le nombre sera utilisé comme représentation du numéro d'index du tableau pour le tableau de guillemets.
  4. Une fois que nous avons récupéré le devis choisi au hasard dans le tableau en utilisant notre nombre entier généré de manière aléatoire, nous le placerons dans le document HTML.

Temps de codage!

Hou la la! Nous sommes arrivés jusqu'ici et n'avons pas encore commencé la programmation! Bienvenue dans le monde de la programmation!

Je rigole.

Pas vraiment.

Vous allez passer beaucoup de temps à coder dans cette carrière (ou passe-temps). Mais ce que je veux dire, c'est que vous allez passer encore plus de temps à réfléchir à la logique de programmation et à la résolution des problèmes. La programmation ne consiste pas à pirater 100 mots par minute pendant 20 minutes sur le clavier. Ça ne va pas arriver.

Maintenant que nous avons toute la logique hors du chemin. Commençons à coder. Nous allons maintenant travailler dans le fichier javascript.js .

Nous devons créer nos propres devis ou les copier à partir d'une source en ligne.

J'ai googlé «Best Quotes» et copié les 10 premiers à partir d'un site Web , puis les ai placés dans un tableau séparé par des virgules. Assurez-vous de placer vos guillemets entre guillemets simples ou doubles. Si votre citation se compose d'apostrophes, de guillemets simples ou doubles, vous devrez peut-être utiliser des barres obliques inverses pour échapper ces caractères afin que JavaScript sache que les symboles font partie de la chaîne et non de la syntaxe de codage.

Comme vous pouvez le voir sur l'image ci-dessous, j'ai défini une variable appelée «quotes» et l'ai définie égale à un tableau plein des citations que j'ai choisies sur Internet.

Nous devons maintenant créer notre fonction newQuote () que j'ai mentionnée plus tôt dans la section HTML de ce tutoriel. Pour notre fonction newQuote (), nous devons générer un nombre entier aléatoire compris entre 0 et la longueur de notre tableau de guillemets . J'expliquerai plus loin ci-dessous.

Tout d'abord, nous appelons la fonction Math.floor (). La fonction Math.floor () prend un paramètre et arrondit le nombre vers le bas à l'entier le plus proche. Par exemple, si nous appelons Math.floor (5.7), il retournera 5.

Deuxièmement, nous passerons Math.random () comme paramètre à Math.floor (). La fonction Math.random () générera un nombre décimal aléatoire entre 0 et 1.

Alors disons que nous avons ceci:

Si nous consignons notre randomNumber à cet état, il retournera toujours 0. C'est parce que Math.random () sera toujours un nombre décimal entre 0 et 1 tel que 0,4, 0,721, 0,98, et ainsi de suite. Parce que nous passons Math.random () dans Math.floor () en tant que paramètre, Math.floor () est toujours arrondi à la décimale la plus proche, par conséquent, chaque décimale entre 0 et 1 reviendra toujours à 0.

Alors, quel est l'intérêt de faire ça? Eh bien, pour créer nos numéros d'index de tableau, nous avons besoin de nombres entiers, mais nous avons besoin de nombres entiers aléatoires. Pour générer des nombres entiers aléatoires et éviter de renvoyer uniquement 0, nous devrons prendre notre décimal aléatoire et le multiplier par un nombre entier.

Maintenant, essayons quelque chose comme ceci:

Si nous consignons randomNumber, les résultats seront compris entre 1 et 19. Maintenant, je pourrais utiliser cet état actuel de randomNumber pour extraire une citation du tableau de guillemets, mais cela ne fonctionnera que si le numéro d'index du tableau existe dans le tableau, sinon, une erreur sera générée.

Par exemple:

Je n'ai actuellement que 10 chaînes dans mon tableau de guillemets, donc tout nombre supérieur à 9 retournera undefined car il n'existe pas dans le tableau.

Pour résoudre ce problème, nous devons uniquement multiplier Math.random () par la longueur de notre tableau de guillemets. En faisant cela, nous pouvons ajouter ou supprimer autant de chaînes du tableau que nous le souhaitons et notre variable randomNumber retournera toujours un nombre valide puisque nous utilisons la méthode quotes.length pour toujours obtenir la longueur actuelle de notre tableau.

Nous avons maintenant besoin d'un moyen d'utiliser la valeur de randomNumber pour récupérer de manière aléatoire un devis à partir du tableau de citations et placer le devis dans notre document HTML et l'afficher à nos utilisateurs.

Rappelez-vous comment j'ai mentionné que nous utilisons HTMLID pour permettre à JavaScript de saisir et de manipuler facilement des éléments HTML? Eh bien, c'est ce que nous faisons maintenant avec l' identifiant HTML quoteDisplay que nous avons créé plus tôt.

En utilisant document.getElementById (), nous pouvons transmettre n'importe quelle chaîne et JavaScript examinera notre document HTML et le récupérera pour en faire ce que nous voulons. Nous passerons dans 'quoteDisplay' comme paramètre pour récupérer l'élément HTML avec l'id de “quoteDisplay”.

Nous allons maintenant utiliser la méthode .innerHTML pour passer un devis récupéré au hasard de notre tableau comme valeur qui sera ajoutée dans notre élément HTML quoteDisplay.

Nous définissons innerHTML égal à notre tableau de guillemets avec notre variable randomNumber passée comme numéro d'index du tableau. Maintenant, notre fonction newQuote () est terminée!

Mission accomplie!

Si vous avez atteint cette partie du didacticiel, vous avez terminé le projet! Toutes nos félicitations! Vous avez pratiquement terminé la construction du générateur de devis aléatoires.

Il ne vous reste plus qu'à ouvrir le projet dans votre navigateur et voir s'il fonctionne! Pour ce faire, faites glisser votre fichier index.html dans la fenêtre de votre navigateur.

Appuyez sur le bouton et il devrait afficher un devis aléatoire sur votre écran. Appuyez sur le bouton autant de fois que vous le souhaitez. À chaque fois, un nouveau devis doit remplacer celui actuel à l'écran.

Vous pouvez ajouter autant de guillemets que vous le souhaitez dans le tableau de guillemets.

Jetez un œil à un aperçu de l'ensemble de nos fichiers de projet côte à côte qui composent ce générateur de devis aléatoire.

Et maintenant?

Vous avez créé un générateur de devis aléatoire entièrement fonctionnel et vous vous demandez probablement où allez-vous à partir d'ici.

Vous pensez probablement que ce générateur de devis aléatoires a l'air très ennuyeux et que personne ne l'utilisera probablement. Et vous avez absolument raison. Ce projet a l'air assez simple, et c'est à vous de changer cela.

Vous pouvez améliorer ce projet en y ajoutant vos propres fonctionnalités et en le stylisant.

Au début de ce didacticiel, nous avons créé un fichier style.css que nous n'avons pas utilisé. CSS est utilisé pour rendre les pages Web jolies et colorées. C'est à vous d'ajouter au fichier CSS pour le style si vous le souhaitez.

Vous pouvez rechercher des didacticiels CSS pour obtenir des conseils supplémentaires. Laissez libre cours à votre imagination et personnalisez ce projet! Fais ce que tu veux! Le codage est magique et tu es un sorcier, Harry!

Si vous êtes curieux de voir à quel point un projet peut changer avec CSS et quelques lignes de code JavaScript supplémentaires, consultez ma propre version de ce générateur de devis aléatoire que j'ai intitulé «Epiphany Clock»ici .

Si vous avez apprécié ce tutoriel, cliquez sur le bouton en forme de cœur et partagez-le! N'hésitez pas à laisser vos commentaires, questions ou commentaires. Merci et bon codage!