introduction
Le programme «Hello, World!» Est une tradition classique et consacrée de la programmation informatique. Il s’agit d’un premier programme court et complet pour les débutants. Il s’agit d’un bon moyen de s’assurer que votre environnement est correctement configuré.
Ce tutoriel vous guidera dans la création de ce programme en JavaScript. Toutefois, pour rendre le programme plus intéressant, nous allons modifier le programme traditionnel «Hello, World!» Afin qu’il demande à l’utilisateur son nom. Nous allons ensuite utiliser le nom dans un message d’accueil. Une fois ce didacticiel terminé, vous aurez un programme interactif «Hello, World!».
Conditions préalables
Vous pouvez compléter ce didacticiel en utilisant la console de développement JavaScript dans votre navigateur Web. Avant de commencer ce didacticiel, vous devez vous familiariser avec l’utilisation de cet outil. Pour en savoir plus à ce sujet, vous pouvez lire notre tutoriel “https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console[Comment utiliser la console de développeur JavaScript].”
[[creating-the-“hello-world-”-program]] === Création du programme «Hello, World!»
Pour écrire le programme «Hello, World!», Ouvrez d’abord la console JavaScript de votre navigateur Web préféré.
Il existe deux manières principales de créer le programme «Hello, World!» En JavaScript, avec la méthode + alert () + et avec la méthode + console.log () +.
Utiliser + alert () +
Le premier moyen d’écrire ce programme est d’utiliser la méthode + alert () +, qui affichera un message d’alerte sur votre fenêtre actuelle avec un message spécifié (dans ce cas, ce sera «Hello, World!». ) et un bouton + OK + qui permettra à l’utilisateur de fermer l’alerte.
Dans la méthode, nous allons passer le type de données string en tant que paramètre. Cette chaîne sera définie sur la valeur + Hello, World! + Afin que cette valeur soit imprimée dans la zone d’alerte.
Pour écrire ce premier style du programme “Hello, World!”, Nous encapsulons la chaîne entre parenthèses de la méthode + alert () +. Notre déclaration JavaScript se terminera par semicolon.
alert("Hello, World!");Une fois que vous avez appuyé sur la touche + ENTER + suivant votre ligne de JavaScript, vous devriez voir l’alerte suivante s’ouvrir dans votre navigateur:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [Exemple d’alerte JavaScript par la console]
La console affichera également le résultat de l’évaluation d’une expression, qui se lira comme suit: «+ undefined +» lorsque l’expression ne renvoie pas explicitement quelque chose.
Il peut être fastidieux de continuer à cliquer sur les alertes contextuelles. Voyons comment créer le même programme en le connectant à la console avec + console.log () +.
Utiliser + console.log () +
Nous pouvons imprimer la même chaîne, sauf cette fois sur la console JavaScript, en utilisant la méthode + console.log () +. L’utilisation de cette option revient à travailler avec un langage de programmation dans l’environnement terminal de votre ordinateur.
Comme nous le faisions avec + alert () +, nous allons passer la chaîne " Hello, World! " À la méthode + console.log () +, entre ses parenthèses. Nous terminerons notre déclaration par un point-virgule, comme dans les conventions de syntaxe JavaScript.
console.log("Hello, World!");Une fois que vous avez appuyé sur + ENTER +, le message + Hello, World! + Sera imprimé sur la console:
OutputHello, World!Dans la section suivante, nous verrons comment rendre ce programme plus interactif pour l’utilisateur.
Demander une entrée
Chaque fois que nous exécutons notre programme existant «Hello, World!», Il produit le même résultat. Invitons la personne qui exécute notre programme à donner son nom. Nous pouvons ensuite utiliser ce nom pour personnaliser la sortie.
Pour chacune des méthodes JavaScript que nous avons utilisées ci-dessus, nous pouvons commencer par une ligne demandant une saisie. Nous allons utiliser la méthode JavaScript + prompt () +, et lui transmettre la chaîne " Quel est votre nom? " Pour demander à l’utilisateur son nom. L’entrée saisie par l’utilisateur sera alors stockée dans la variable + nom +. Nous terminerons notre expression par un point-virgule.
let name = prompt("What is your name?");Lorsque vous appuyez sur + ENTER + pour exécuter cette ligne de code, une invite s’affiche:
image: https: //assets.digitalocean.com/articles/eng_javascript/hello-world/js-prompt.png [Exemple d’invite JavaScript]
La boîte de dialogue qui apparaît sur la fenêtre de votre navigateur Web comprend un champ de texte que l’utilisateur peut saisir. Une fois que l’utilisateur a saisi une valeur dans le champ de texte, il doit cliquer sur + OK + pour que la valeur soit stockée. L’utilisateur peut également empêcher l’enregistrement d’une valeur en cliquant sur le bouton + Annuler +.
Il est important d’utiliser la méthode prompt prompt () + de JavaScript uniquement lorsque cela a du sens dans le contexte du programme, car son utilisation excessive peut devenir fastidieuse pour l’utilisateur.
À ce stade, entrez le nom que vous souhaitez que le programme salue. Pour cet exemple, nous utiliserons le nom + Sammy +.
Maintenant que nous avons collecté la valeur du nom de l’utilisateur, nous pouvons passer à l’utilisation de cette valeur pour saluer l’utilisateur.
Saluer l’utilisateur avec + alert () +
Comme indiqué ci-dessus, la méthode + alert () + crée une boîte de dialogue par dessus la fenêtre du navigateur. Nous pouvons utiliser cette méthode pour saluer l’utilisateur en utilisant la variable + nom +.
Nous utiliserons la string concaténation pour écrire une salutation de «Bonjour! s’adresse directement à l’utilisateur. Donc, concaténons la chaîne + Hello + avec la variable pour nom:
"Hello, " + name + "!"Nous avons combiné deux chaînes, " Hello, " et "! " Avec la variable + nom + entre les deux. Maintenant, nous pouvons passer cette expression à la méthode + alert () +.
alert("Hello, " + name + "!");Une fois que vous avez appuyé sur + ENTER + ici, la boîte de dialogue suivante s’affichera à l’écran:
image: https: //assets.digitalocean.com/articles/eng_javascript/hello-world/prompt-output.png [Sortie d’invite JavaScript]
Dans ce cas, le nom de l’utilisateur est Sammy. La sortie a donc accueilli Sammy.
Maintenant, réécrivons cela pour que le résultat soit imprimé sur la console.
Saluer l’utilisateur avec + console.log () +
Comme nous l’avons vu dans une section précédente, la méthode + console.log () + imprime la sortie sur la console, un peu comme la fonction + print () + peut imprimer une sortie sur le terminal en Python.
Nous utiliserons la même chaîne concaténée que celle que nous avons utilisée avec la méthode + alert () +, qui combine les chaînes " Hello, " et "! " Avec la variable + nom + :
"Hello, " + name + "!"Toute cette expression sera placée entre les parenthèses de la méthode + console.log () + afin que nous puissions recevoir un message d’accueil en sortie.
console.log("Hello, " + name + "!");Pour un utilisateur nommé Sammy, la sortie sur la console sera la suivante:
OutputHello, Sammy!Vous avez maintenant un programme JavaScript qui prend les entrées d’un utilisateur et les affiche à l’écran.
Conclusion
Maintenant que vous savez comment écrire le programme classique «Hello, World!», Ainsi que demander à l’utilisateur d’entrer et l’afficher en sortie, vous pouvez continuer à développer votre programme. Par exemple, demandez la couleur préférée de l’utilisateur et demandez au programme de dire que sa couleur préférée est le rouge. Vous pourriez même essayer d’utiliser cette même technique pour créer un programme Mad Lib.