w3docs logo

Beginnen Sie mit Javascript

Schreiben Sie Ihr erstes JavaScript-Programm

HTML kann nicht rechnen, es kann nicht herausfinden, ob jemand ein Formular korrekt ausgefüllt hat. HTML lässt die Menschen nur den Text lesen, Videos ansehen, Bilder betrachten und Links anklicken. Sie benötigen JavaScript, um Ihrer Webseite Intelligenz hinzuzufügen, damit sie auf die Besuche Ihrer Seite reagieren kann. JavaScript ermöglicht es also, Ihre Webseiten attraktiver, effektiver und nützlicher zu gestalten.

JavaScript ist komplexer als HTML oder CSS, das Hauptziel dieses Buches ist es, Ihnen zu helfen, mehr wie ein Programmierer zu denken. Ein JavaScript-Programm enthält solche Symbole ({ } [ ] ; , () !=) und viele unbekannte Wörter (var, null, else if). Man kann sagen, dass das Erlernen einer Programmiersprache viel mit dem Erlernen einer anderen Sprache zu tun hat. Sie müssen neue Wörter lernen und verstehen, wie man sie zusammenfügt.

Über Computerprogramm?

Wenn Sie JavaScript zu einer Webseite hinzufügen, bedeutet das, dass Sie ein Computerprogramm schreiben. Viele JavaScript-Programme sind viel einfacher als die Programme, die Sie verwenden, um E-Mails zu lesen oder Webseiten zu erstellen. Aber auch wenn JavaScript-Programme, die auch Skripte genannt werden, einfacher und kürzer sind, teilen sie viele Eigenschaften von komplexeren Programmen.

Wenn Sie eine Willkommensnachricht anzeigen möchten, die den Namen des Besuchers der Webseite verwendet: "Willkommen, John Doe!", müssen Sie mehrere Dinge tun:

  • Den Namen des Besuchers erfragen;
  • Die Antwort des Besuchers erhalten;
  • Die Nachricht auf der Webseite anzeigen.

Wenn Sie ein JavaScript-Programm erstellen möchten, müssen Sie die Schritte bestimmen, die benötigt werden, um Ihr Ziel zu erreichen. Nachdem Sie die Schritte kennen, übersetzen Sie Ihre Ideen in Programmcode - die Wörter und Zeichen, die das Verhalten des Webbrowsers so steuern, wie Sie es möchten.

So fügen Sie JavaScript zu einer Seite hinzu

Webbrowser können HTML und CSS verstehen und diese Sprachen in eine visuelle Anzeige auf dem Bildschirm umwandeln. Der Webbrowser erwartet HTML, daher müssen Sie den Browser klar darauf hinweisen, wenn JavaScript kommt, indem Sie das <script>-Tag verwenden.

Nachdem Sie Ihre bevorzugte Konsole (wie Node.js) geöffnet haben, müssen Sie nur noch ein Skript an eine Webseite anhängen. Um Javascript mit einer HTML-Seite zu verlinken, müssen Sie das <script>-Element verwenden, welches uns hilft, Javascript-Programme in jeden Teil des HTML-Dokuments einzufügen. Zum Beispiel:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>

Lassen Sie uns die öffnenden und schließenden <script>-Tags besprechen. Wenn Sie ein Skript zu Ihrer Seite hinzufügen möchten, sollten Sie durch das Einfügen von Tags beginnen, die das Skript selbst beinhalten oder einen Link zu einer externen Datei, die Skripte enthält. In vielen Fällen setzen Sie die <script>-Tags in den <head> der Seite, um Ihren JavaScript-Code übersichtlich in einem Teil der Webseite zu organisieren.

Das <script>-Element hat einige Attribute, die wir heutzutage nicht so oft verwenden. Aber wir können sie immer noch in altem Code treffen:

Das type-Attribut: <script type=…>

Um einen Typ im alten HTML - HTML4, zu haben, war ein Skript erforderlich. Früher war es type="text/javascript", was heute nicht mehr erforderlich ist. Abgesehen davon hat der moderne HTML-Standard die Bedeutung dieses Attributs komplett verändert. Heutzutage können wir es für JavaScript-Module verwenden. Aber wir werden später über Module sprechen, da es ein fortgeschrittenes Thema ist.

Das language-Attribut: <script language=…>

Das oben präsentierte Attribut sollte die Sprache des Skripts anzeigen. Aber da JavaScript die Standardsprache ist, besteht keine Notwendigkeit, es zu verwenden.

Externe JavaScript-Dateien

Wie wir bereits erwähnt haben, ermöglicht Ihnen das <script>-Tag, JavaScript zu einer einzigen Webseite hinzuzufügen. Aber Sie müssen auch Skripte erstellen, die Sie mit allen Seiten Ihrer Website teilen möchten. Aber einfach den gleichen JavaScript-Code auf jede Seite zu kopieren und einzufügen, ist keine gute Idee, besonders wenn Sie eine Website mit Hunderten von Seiten haben.

Kurz gesagt, wir verwenden externe Skripte, wenn wir viel JavaScript-Code haben. Auf diese Weise erhalten wir Code-Wiederverwendbarkeit, da eine einzelne JavaScript-Datei auf mehreren HTML-Seiten verwendet werden kann. Die Erweiterung für eine JavaScript-Datei ist .js. Wenn wir ein externes Skript verwenden möchten, sollten wir den Namen der Skriptdatei im src-Attribut eines <script>-Tags angeben:

<script src="W3DocsScript.js"></script>

Mit Hilfe des src-Attributs können wir Skriptdateien an HTML anhängen.

<script src="/path/W3DocsScript.js"></script>

In diesem Beispiel ist /path/W3DocsScript.js ein absoluter Pfad für das Skript, es kann auch einen relativen Pfad von der gleichen Seite zur Verfügung stellen. Zum Beispiel bedeutet src="W3DocsScript.js" die Datei "W3DocsScript.js".

Wir können auch eine vollständige URL angeben, die dann so aussehen würde:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Wenn wir mehrere Skripte anhängen wollen, sollten wir mehrere Tags verwenden:

<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>
...

Wenn src gesetzt ist, wird der Skriptinhalt ignoriert. Das bedeutet, dass ein einzelnes <script>-Tag nicht gleichzeitig das src-Attribut und Code im Inneren haben kann. Es wird einfach nicht funktionieren:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>

Wir müssen uns entweder für ein externes <script src="…"> oder ein reguläres <script> mit Code entscheiden. Erst danach können wir dieses Beispiel in zwei Skripte aufteilen, damit es funktioniert:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>

Ihr erstes JavaScript-Programm

Beginnen wir mit der Programmierung, Ihr erstes Programm wird sehr einfach sein:

  • Öffnen Sie eine einfache HTML-Datei in Ihrem bevorzugten Texteditor.
  • Klicken Sie vor dem schließenden </body>-Tag auf eine leere Zeile und tippen Sie: <script>
  • Drücken Sie die Return-Taste, um eine neue leere Zeile zu erstellen, und tippen Sie: alert('Willkommen bei W3Docs');

    Herzlichen Glückwunsch! Sie haben Ihre erste Zeile JavaScript-Code getippt.

  • Geben Sie dann </script>. Der Code sollte so aussehen: 
    <!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
  • Aktivieren Sie einen Webbrowser und öffnen Sie die Datei test1.html zur Vorschau. Beachten Sie, dass die Seite leer ist, wenn der Alert erscheint.
  • Durch Klicken auf die OK-Taste des Alert-Fensters schließen Sie es. Nachdem das Alert-Fenster verschwindet, erscheint die Webseite im Browserfenster.

Text auf einer Webseite schreiben

Das Skript im vorherigen Abschnitt erschien in der Mitte Ihres Monitors. Wenn Sie aber eine Nachricht direkt auf einer Webseite mit JavaScript ausgeben möchten, können Sie den eingebauten JavaScript-Befehl verwenden:

  • Öffnen Sie die Datei test2.html in Ihrem Texteditor.

    Während <script>-Tags in einem Webseite <head> erscheinen, können Sie sie und JavaScript-Programme direkt im Körper der Seite einfügen.

  • Geben Sie unter <h1> Schreiben in das Dokumentfenster </h1> diesen Code ein: 
    <!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>

    Document.write() ist ein JavaScript-Befehl wie die Funktion alert(), es schreibt aus, was immer Sie zwischen den öffnenden und schließenden Klammern platzieren. In diesem Beispiel wird das HTML <p>Hallo Welt!<p> zur Seite hinzugefügt: ein Absatz-Tag und zwei Wörter.

  • Speichern Sie jetzt die Seite und öffnen Sie sie in einem Webbrowser.

Wie Sie sehen, öffnet sich die Seite und "Willkommen bei w3Docs" erscheint unter der Überschrift.

Die JavaScript-Konsole von Chrome

Viele Web-Entwickler bevorzugen den Chrome-Browser von Google. Sein DevTools-Attribut bietet Ihnen viele Möglichkeiten, HTML-, CSS- und JavaScript-Probleme zu korrigieren und auszubalancieren. Die JavaScript-Konsole ist ein großartiger Ort, um Fehler und Fehler in Ihrem Code aufzuspüren. Sie erkennt auch die Zeile in Ihrem Code, in der jeder Fehler aufgetreten ist.

<!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>

Klicken Sie auf die Anpassen-Menü-Schaltfläche, um die JavaScript-Konsole zu öffnen, und wählen Sie Tools→JavaScript-Konsole. Oder verwenden Sie die Tastaturkürzel Strg+Shift+J (Windows) oder ⌘-Option-J (Mac) usw.

Quizzeit: Testen Sie Ihre Fähigkeiten!

Sind Sie bereit, das Gelernte herauszufordern? Tauchen Sie ein in unsere interaktiven Quizze für ein tieferes Verständnis und eine unterhaltsame Art, Ihr Wissen zu festigen.

Finden Sie das nützlich?