Créer et exécuter un fichier JavaScript dans Chrome

1. Créer et exécuter un fichier JavaScript dans Chrome à l’aide des outils de développement
2. Créer et exécuter un fichier JavaScript dans Chrome à l’aide de node.js

En tant que développeur Web, peu importe ce que vous faites, que ce soit en front-end ou en back-end, vous devez toujours travailler avec JavaScript d’une manière ou d’une autre.

L’écriture, la modification et l’exécution du code JavaScript dans le navigateur Chrome sont toujours effectuées au cours de notre développement. Généralement, nous exécutons des fichiers JavaScript dans le navigateur en connectant le fichier JavaScript au document HTML.

Mais ce n’est pas toujours le cas. Parfois, nous devons exécuter les fichiers JS dans le navigateur sans l’aide d’un document HTML.

Donc, pour exécuter les fichiers JavaScript dans le navigateur Chrome, il existe deux façons. Une façon consiste à créer un fichier JavaScript dans les outils de développement Chrome ou sur le système local, puis à exécuter le fichier dans le navigateur Chrome.

Nous verrons pratiquement ces deux manières ci-dessous.

Créer et exécuter un fichier JavaScript dans Chrome à l’aide des outils de développement

Le moyen le plus simple de créer et d’exécuter un fichier JavaScript consiste à utiliser les outils de développement Chrome.

Étapes pour créer et exécuter des fichiers JavaScript dans les outils de développement :

• Ouvrez un navigateur Chrome et appuyez sur F12 sur votre clavier pour ouvrir les outils de développement Chrome. Alternativement, vous pouvez également cliquer avec le bouton droit n’importe où dans le navigateur et sélectionner Inspect dans la liste pour ouvrir les outils de développement, comme indiqué ci-dessous.

• Une fois les outils de développement Chrome ouverts, cliquez sur l’onglet Sources, puis sélectionnez l’onglet Snippets. Si vous ne voyez pas l’onglet des extraits, cliquez sur la flèche en haut pour y accéder.

• Pour créer un fichier JavaScript, cliquez sur Nouvel extrait pour créer et donner un nom à ce fichier. Ici, nous avons donné myFile comme nom de fichier.

• À l’intérieur, vous pouvez écrire ou coller votre code JavaScript en utilisant la combinaison de touches Ctrl + V.

Vous trouverez ci-dessous le code que nous avons écrit dans les outils de développement.

Ici, nous venons de créer un élément h1 et d’ajouter une phrase à l’intérieur. Ensuite, nous affichons ce texte en haut à l’intérieur de la balise body en utilisant la méthode prepend.

var text = document.createElement('h1');
text.innerHTML = 'This is Google\'s webpage';

document.body.prepend(text);

Vous pouvez également actualiser la page pendant que vous apportez des modifications dans le fichier.

Cela ne videra pas le code à l’intérieur du fichier. Pour exécuter le code JavaScript que vous avez écrit, vous pouvez appuyer sur Ctrl + Enter sur le mot clé.

Si vous avez des instructions de console dans votre code, ces éléments seront affichés dans la fenêtre de la console en bas de l’écran, comme indiqué dans l’image ci-dessus. Notez que le code que vous écrivez dans ce fichier ne sera disponible que jusqu’à ce que le navigateur soit ouvert.

Dès que vous fermez le navigateur Chrome, toutes vos modifications seront perdues. Il est donc toujours préférable de créer un fichier séparé, puis de l’exécuter dans le navigateur Chrome.

C’est ce que nous verrons dans la section suivante.

Créer et exécuter un fichier JavaScript dans Chrome à l’aide de node.js

Stocker le code JavaScript dans un fichier séparé est toujours préférable. C’est ainsi que nous procédons normalement lorsque nous créons des sites Web prêts pour la production.

La création d’un fichier JavaScript est simple et tout le monde sait comment le faire. Ajoutez simplement l’extension .js à la fin du nom de fichier, et boum, le fichier est maintenant un fichier JavaScript.

Cependant, la partie la plus difficile pour la plupart des gens est de savoir comment exécuter ce fichier JavaScript dans le navigateur. Les gens connectent généralement JavaScript à un document HTML, puis l’exécutent dans le navigateur Chrome.

Mais ici, cela ne nous intéresse pas. Ici, nous nous concentrerons sur l’exécution directe du fichier JavaScript dans le navigateur.

Cela devient possible avec l’aide de node.js, qui est un framework JavaScript. Vous pouvez télécharger le framework node.js depuis le site officiel.

Après avoir installé le node.js sur votre système, vous devez ouvrir la fenêtre du terminal et naviguer jusqu’à l’emplacement où le fichier JavaScript est stocké. Ici, nous aurons également besoin d’une bibliothèque appelée express.js.

Pour installer express en utilisant la commande ci-dessous.

npm i express

Ensuite, dans le fichier JavaScript, importez la bibliothèque express et initialisez une application express comme indiqué ci-dessous.

const express = require('express');
const app = express();

app.get('/', (req, res) => {res.send('<h1>This is Google\'s webpage</h1>')})

app.listen(4000, () => {
  console.log(`Server is running on port 4000`);
});

Ici, nous devons également spécifier le port que notre serveur exécutera. Nous avons utilisé 4000 comme numéro de port dans ce cas.

Vous pouvez spécifier n’importe quel nombre comme numéro de port, puis en utilisant la requête get sur la route /, vous pouvez envoyer le code JavaScript. Ce code sera affiché sur le navigateur Chrome.

Ici, nous allons imprimer un texte dans la fenêtre de la console du navigateur en écrivant le code ci-dessus dans un fichier appelé index.js, puis nous exécuterons ce fichier en utilisant node.js.

Pour exécuter le fichier JavaScript, exécutez la commande node filename.js. Assurez-vous de remplacer le filename par le nom de fichier JavaScript que vous souhaitez exécuter, comme indiqué ci-dessous.

node index.js

Dirigez-vous maintenant vers l’URL localhost:4000, que vous verrez comme sortie sur le navigateur.

Le contenu que nous avons envoyé à l’aide de la méthode send() sera affiché à l’écran. C’est ainsi que nous créons et exécutons un fichier JavaScript dans le navigateur Chrome en utilisant node.js et express.js.