Erstellen und Ausführen einer JavaScript-Datei in Chrome

1. Erstellen und Ausführen einer JavaScript-Datei in Chrome mit den Entwicklertools
2. JavaScript-Datei in Chrome mit node.js erstellen und ausführen

Als Webentwickler müssen Sie, egal was Sie tun, ob Frontend oder Backend, immer auf die eine oder andere Weise mit JavaScript arbeiten.

Das Schreiben, Optimieren und Ausführen des JavaScript-Codes im Chrome-Browser wird immer während unserer Entwicklung durchgeführt. Im Allgemeinen führen wir JavaScript-Dateien im Browser aus, indem wir die JavaScript-Datei mit dem HTML-Dokument verbinden.

Aber das ist nicht immer der Fall. Manchmal müssen wir die JS-Dateien im Browser ohne die Hilfe eines HTML-Dokuments ausführen.

Um die JavaScript-Dateien im Chrome-Browser auszuführen, gibt es also zwei Möglichkeiten. Eine Möglichkeit besteht darin, eine JavaScript-Datei in den Chrome-Entwicklungstools oder auf dem lokalen System zu erstellen und die Datei dann im Chrome-Browser auszuführen.

Wir werden diese beiden Möglichkeiten unten praktisch sehen.

Erstellen und Ausführen einer JavaScript-Datei in Chrome mit den Entwicklertools

Der einfachste Weg, eine JavaScript-Datei zu erstellen und auszuführen, ist die Verwendung der Chrome-Entwicklertools.

Schritte zum Erstellen und Ausführen von JavaScript-Dateien in Entwicklungstools:

• Öffnen Sie einen Chrome-Browser und drücken Sie F12 auf Ihrer Tastatur, um die Chrome-Entwicklertools zu öffnen. Alternativ können Sie auch mit der rechten Maustaste auf eine beliebige Stelle im Browser klicken und Inspect aus der Liste auswählen, um die Entwicklungstools zu öffnen, wie unten gezeigt.

• Nachdem die Chrome-Entwicklertools geöffnet sind, klicken Sie auf die Registerkarte Quellen und wählen Sie dann die Registerkarte Snippets aus. Wenn Sie den Snippets-Tab nicht sehen können, klicken Sie oben auf den Pfeil, um darauf zuzugreifen.

• Um eine JavaScript-Datei zu erstellen, klicken Sie auf Neues Snippet, um diese Datei zu erstellen und einen beliebigen Namen zu vergeben. Als Dateinamen haben wir hier myFile angegeben.

• Hier können Sie mit der Tastenkombination Ctrl + V Ihren JavaScript-Code schreiben oder einfügen.

Unten ist der Code, den wir in den Entwicklungstools geschrieben haben.

Hier haben wir gerade ein h1-Element erstellt und einen Satz darin eingefügt. Dann zeigen wir diesen Text mit der Präpend-Methode oben im body-Tag an.

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

document.body.prepend(text);

Sie können die Seite auch aktualisieren, während Sie Änderungen in der Datei vornehmen.

Dadurch wird der Code in der Datei nicht geleert. Um den von Ihnen geschriebenen JavaScript-Code auszuführen, können Sie beim Schlüsselwort Ctrl + Enter drücken.

Wenn Sie einige Konsolenanweisungen in Ihrem Code haben, werden diese Dinge im Konsolenfenster unten auf dem Bildschirm angezeigt, wie in der obigen Abbildung gezeigt. Beachten Sie, dass der Code, den Sie in diese Datei schreiben, nur für Sie verfügbar ist, bis der Browser geöffnet ist.

Sobald Sie den Chrome-Browser schließen, gehen alle Ihre Änderungen verloren. Daher ist es immer besser, eine separate Datei zu erstellen und sie dann im Chrome-Browser auszuführen.

Dies werden wir im nächsten Abschnitt sehen.

JavaScript-Datei in Chrome mit node.js erstellen und ausführen

Es ist immer besser, JavaScript-Code in einer separaten Datei zu speichern. So machen wir es normalerweise, wenn wir produktionsreife Websites erstellen.

Das Erstellen einer JavaScript-Datei ist einfach und jeder weiß, wie es geht. Fügen Sie einfach die Erweiterung .js am Ende des Dateinamens hinzu, und Boom, die Datei ist jetzt eine JavaScript-Datei.

Der schwierigste Teil für die meisten Menschen ist jedoch, wie diese JavaScript-Datei im Browser ausgeführt wird. Normalerweise verbinden die Leute JavaScript mit einem HTML-Dokument und führen es dann im Chrome-Browser aus.

Aber das interessiert uns hier nicht. Hier konzentrieren wir uns darauf, die JavaScript-Datei direkt im Browser auszuführen.

Möglich wird dies mit Hilfe von node.js, einem JavaScript-Framework. Sie können das Framework node.js von der offiziellen Website herunterladen.

Nach der Installation der node.js auf Ihrem System müssen Sie das Terminalfenster öffnen und zum Speicherort der JavaScript-Datei navigieren. Auch hier benötigen wir eine Bibliothek namens express.js.

Express mit dem folgenden Befehl installieren.

npm i express

Importieren Sie dann in der JavaScript-Datei die Express-Bibliothek und initialisieren Sie eine Express-App wie unten gezeigt.

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`);
});

Hier müssen wir auch den Port angeben, auf dem unser Server ausgeführt wird. Als Portnummer haben wir in diesem Fall 4000 verwendet.

Sie können eine beliebige Nummer als Portnummer angeben und dann den JavaScript-Code mit der Get-Anforderung auf der Route / senden. Dieser Code wird im Chrome-Browser angezeigt.

Hier drucken wir einen Text in das Konsolenfenster des Browsers, indem wir den obigen Code in eine Datei namens index.js schreiben, und dann führen wir diese Datei mit node.js aus.

Um die JavaScript-Datei auszuführen, führen Sie den Befehl node filename.js aus. Stellen Sie sicher, dass Sie den filename durch den JavaScript-Dateinamen ersetzen, den Sie ausführen möchten, wie unten gezeigt.

node index.js

Gehen Sie nun zur URL localhost:4000, die Sie als Ausgabe im Browser sehen.

Der Inhalt, den wir mit der Methode send() gesendet haben, wird auf dem Bildschirm angezeigt. So erstellen und führen wir eine JavaScript-Datei im Chrome-Browser mit node.js und express.js aus.