JavaScript: Skripte in HTML einbetten

Einführung

Willkommen zu Ihrem ersten JavaScript-Labor! JavaScript ist eine leistungsstarke Skriptsprache, mit der Sie dynamische und interaktive Inhalte auf Webseiten erstellen können. Ohne sie wären Webseiten statisch und weitaus weniger ansprechend.

In diesem Labor lernen Sie die beiden grundlegenden Möglichkeiten kennen, JavaScript in eine Webseite einzubinden:

Internes JavaScript: Code direkt innerhalb von <script>-Tags in einer HTML-Datei schreiben.
Externes JavaScript: Code in eine separate .js-Datei legen und diese mit der HTML-Datei verknüpfen.

Wir beginnen mit einer einfachen HTML-Seite und fügen schrittweise JavaScript-Funktionalität hinzu. Sie verwenden die integrierte WebIDE, um Ihre Dateien zu bearbeiten und Ihre Änderungen in Echtzeit über den Tab "Web 8080" in der Vorschau anzuzeigen. Los geht's!

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Fortgeschrittener mit einer Abschlussquote von 68% ist. Es hat eine positive Bewertungsrate von 98% von den Lernenden erhalten.

Erstellen einer HTML-Datei mit Script-Tag

In diesem Schritt fügen Sie Ihrer HTML-Datei einen internen JavaScript-Block hinzu. Der Einrichtungsprozess hat bereits eine index.html-Datei für Sie im Verzeichnis ~/project erstellt. Wir werden nun das <script>-Tag hinzufügen, was die Standardmethode zur Deklaration eines JavaScript-Codeblocks ist.

Suchen Sie zuerst die Datei index.html im Dateiexplorer auf der linken Seite der WebIDE und doppelklicken Sie darauf, um sie zu öffnen.

Fügen Sie nun ein leeres <script>-Tag direkt vor dem schließenden </body>-Tag ein. Dies ist die empfohlene Vorgehensweise, da sie sicherstellt, dass der HTML-Inhalt vom Browser analysiert und dem Benutzer angezeigt wird, bevor mit der Ausführung von JavaScript begonnen wird, was die wahrgenommene Ladezeit der Seite verbessert.

Ihre index.html-Datei sollte wie folgt aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script></script>
  </body>
</html>

Stellen Sie sicher, dass Sie die Datei nach den Änderungen speichern (Sie können Strg+S oder Cmd+S verwenden).

console.log schreiben, um Hello World auszugeben

Jetzt, da Sie einen Ort haben, an dem Sie Ihr JavaScript schreiben können, fügen wir Ihre erste Codezeile hinzu. Wir werden die Funktion console.log() verwenden. Dies ist ein grundlegendes Werkzeug für jeden JavaScript-Entwickler, da es Ihnen ermöglicht, Nachrichten in der Entwicklerkonsole des Browsers auszugeben. Es ist unglaublich nützlich zum Debuggen und zum Verständnis der Ausführung Ihres Codes.

Fügen Sie in Ihrer index.html-Datei console.log('Hello World'); innerhalb der <script>-Tags ein, die Sie im vorherigen Schritt erstellt haben.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

Nachdem Sie die Datei gespeichert haben, sehen wir uns das Ergebnis an.

Klicken Sie auf den Tab Web 8080 oben in der LabEx-Oberfläche.
Sie sehen die <h1>-Überschrift. Um die Konsolenausgabe zu sehen, klicken Sie mit der rechten Maustaste irgendwo auf die Seite und wählen Sie "Untersuchen" (Inspect).
Ein neues Panel wird geöffnet. Klicken Sie in diesem Panel auf den Tab "Konsole" (Console).
Sie sollten die Nachricht Hello World in der Konsole sehen.

Konsolenausgabe, die Hello World anzeigt

Externe JavaScript-Datei mit dem src-Attribut verknüpfen

Während interne Skripte für kleine Aufgaben in Ordnung sind, ist es bewährte Praxis, Ihr JavaScript in separaten Dateien zu halten. Dies macht Ihren Code sauberer, einfacher zu verwalten und auf verschiedenen HTML-Seiten wiederverwendbar.

In diesem Schritt werden wir unseren Code in eine externe Datei namens script.js (die bereits für Sie erstellt wurde) verschieben und sie mit index.html verknüpfen.

Ändern Sie zuerst Ihre index.html-Datei. Entfernen Sie die console.log-Zeile aus den <script>-Tags und fügen Sie das src-Attribut zum öffnenden <script>-Tag hinzu, um auf Ihre externe Datei zu verweisen.

Ihre index.html sollte nun wie folgt aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script src="script.js"></script>
  </body>
</html>

Öffnen Sie als Nächstes die Datei script.js aus dem Dateiexplorer. Sie ist derzeit leer. Fügen Sie dieselbe console.log-Anweisung zu dieser Datei hinzu.

Ihre script.js-Datei sollte nur diese Zeile enthalten:

console.log("Hello World");

Speichern Sie beide Dateien. Wenn Sie zum Tab Web 8080 zurückkehren und die Seite aktualisieren, sehen Sie dasselbe Ergebnis in der Konsole. Der Browser lädt nun index.html, sieht das <script src="script.js">-Tag und ruft dann den Inhalt von script.js ab und führt ihn aus.

Neben der Ausgabe in der Konsole kann JavaScript direkter mit dem Benutzer interagieren. Eine der einfachsten Möglichkeiten hierfür ist die Funktion alert(), die dem Benutzer eine Popup-Nachrichtenbox anzeigt.

Fügen wir unserem Skript einen Alert hinzu. Öffnen Sie die Datei script.js und fügen Sie eine neue Codezeile hinzu, um einen Willkommens-Alert zu erstellen.

Ihre script.js-Datei sollte nun wie folgt aussehen:

console.log("Hello World");
alert("Welcome to JavaScript!");

Die Funktion alert() pausiert die Ausführung des Skripts und das Rendern der Seite, bis der Benutzer auf "OK" in der Popup-Box klickt. Dies macht sie zu einer sehr direkten Möglichkeit, wichtige Informationen zu kommunizieren.

Speichern Sie die Datei script.js. Wir werden die Auswirkung im nächsten Schritt sehen.

Browser aktualisieren, um Skript auszuführen

Sie haben nun sowohl einen Konsolen-Log als auch einen Alert zu Ihrer externen JavaScript-Datei hinzugefügt. Es ist Zeit, das Endergebnis zu sehen.

Navigieren Sie zurück zum Tab Web 8080.

Um die Änderungen zu sehen, die Sie an der Datei script.js vorgenommen haben, müssen Sie den Browser-Tab aktualisieren. Dies weist den Browser an, die HTML-Datei und alle verknüpften Dateien, einschließlich Ihres aktualisierten Skripts, erneut herunterzuladen.

Nach dem Aktualisieren sollten Sie sofort eine Popup-Box mit der Nachricht "Welcome to JavaScript!" sehen.

Nachdem Sie auf "OK" geklickt haben, verschwindet das Popup und der Rest der Seite wird geladen. Wenn Sie die Entwicklerkonsole erneut öffnen (Rechtsklick -> Untersuchen -> Konsole), sehen Sie immer noch die Nachricht "Hello World" dort protokolliert. Dies zeigt die Ausführungsreihenfolge in Ihrem Skript.

Herzlichen Glückwunsch, Sie haben erfolgreich JavaScript mit internen und externen Methoden in eine Webseite eingebettet!

Zusammenfassung

In diesem Lab haben Sie Ihre ersten Schritte in der Welt des Web-Scriptings mit JavaScript unternommen. Sie haben praktische Erfahrungen mit den Kernkonzepten der Einbindung von JavaScript in ein Webprojekt gesammelt.

Sie haben gelernt:

Wie man JavaScript mit dem <script>-Tag direkt in eine HTML-Datei einfügt.
Wie man console.log() verwendet, um Nachrichten zur Fehlersuche in die Entwicklerkonsole des Browsers auszugeben.
Die Vorteile der Trennung Ihres Codes in externe .js-Dateien.
Wie man eine externe JavaScript-Datei mit dem src-Attribut des <script>-Tags mit Ihrer HTML-Datei verknüpft.
Wie man eine benutzerorientierte Popup-Nachricht mit der Funktion alert() erstellt.

Diese Grundlage ist entscheidend für den Aufbau komplexerer und interaktiverer Webanwendungen. Experimentieren Sie weiter und bauen Sie auf dem auf, was Sie gelernt haben!

JavaScript Einführung und Einbettung