Mit JavaScript beginnen
Schreiben Sie Ihr erstes JavaScript-Programm
HTML kann nicht rechnen und auch nicht erkennen, ob jemand ein Formular korrekt ausgefüllt hat. HTML lässt Menschen nur den Text lesen, Videos ansehen, Bilder betrachten und Links anklicken. Sie brauchen JavaScript, um Ihren Webseiten Intelligenz hinzuzufügen, damit sie auf die Besucher Ihrer Website reagieren können. JavaScript macht Ihre Websites also attraktiver, effektiver und nützlicher.
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 hat solche Symbole ({ } [ ] ; , () !=) und viele unbekannte Wörter (var, null, else if). Man kann sagen, dass das Erlernen einer Programmiersprache dem Erlernen einer anderen Sprache sehr ähnlich ist. Sie müssen neue Wörter lernen und verstehen, wie man sie zusammenfügt.
Über Computerprogramme?
JavaScript zu einer Webseite hinzuzufügen bedeutet, dass Sie ein Computerprogramm schreiben. Viele JavaScript-Programme sind viel einfacher als die Programme, die Sie zum Lesen von E-Mails oder zum Erstellen von Webseiten verwenden. Aber auch wenn JavaScript-Programme, also Skripte, einfacher und kürzer sind, teilen sie viele der gleichen Eigenschaften wie kompliziertere Programme.
Wenn Sie eine Willkommensnachricht mit dem Namen des Webseitenbesuchers anzeigen möchten: „Willkommen, John Doe!“, müssen Sie mehrere Dinge tun:
- Den Namen des Besuchers erfragen;
- Die Antwort des Besuchers erhalten;
- Die Nachricht auf der Webseite ausgeben.
Wenn Sie ein JavaScript-Programm erstellen möchten, müssen Sie die Schritte bestimmen, die nötig sind, um Ihr Ziel zu erreichen. Nachdem Sie die Schritte kennen, übersetzen Sie Ihre Ideen in Programmcode – die Wörter und Zeichen, die den Webbrowser so verhalten lassen, wie Sie es möchten.
Wie man JavaScript zu einer Seite hinzufügt
Webbrowser können HTML und CSS verstehen und diese Sprachen in eine visuelle Darstellung auf dem Bildschirm umwandeln. Der Webbrowser erwartet HTML, daher müssen Sie den Browser klar darauf hinweisen, wenn JavaScript kommt, indem Sie das HTML-<script>-Tag verwenden.
Nachdem Sie Ihre bevorzugte Konsole geöffnet haben (z. B. Node.js), müssen Sie nur noch ein Skript in eine Webseite einbinden. Um JavaScript mit einer HTML-Seite zu verknüpfen, müssen Sie das <script>-Element verwenden; dieses Tag hilft uns, JavaScript-Programme in jeden Teil des HTML-Dokuments einzufügen. Zum Beispiel:
javascript Hello world example
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert('Hello, world!');
</script>
<p>...After the script.</p>
</body>
</html>Lassen Sie uns über öffnende und schließende <script>-Tags sprechen. Wenn Sie ein Skript zu Ihrer Seite hinzufügen möchten, sollten Sie damit beginnen, Tags einzufügen, die entweder das Skript selbst oder einen Link zu einer externen Datei enthalten, die Skripte enthält. In vielen Fällen platzieren Sie die <script>-Tags im <head> der Seite, damit Ihr JavaScript-Code übersichtlich in einem Teil der Webseite organisiert bleibt.
Das <script>-Element hat einige Attribute, die wir heutzutage nicht mehr so oft verwenden. Aber in altem Code begegnen sie uns noch:
Das type-Attribut: <script type=…>
Früher war für HTML – HTML4 – ein Skript mit einem Typ erforderlich. Zuvor war es type="text/javascript", was heutzutage nicht mehr erforderlich ist. Außerdem hat der moderne HTML-Standard die Bedeutung dieses Attributs vollständig geändert. Heute können wir es für JavaScript-Module verwenden. Aber über Module sprechen wir später, da dies ein fortgeschrittenes Thema ist.
Das language-Attribut: <script language=…>
Das oben dargestellte Attribut sollte die Sprache des Skripts anzeigen. Da JavaScript jedoch die Standardsprache ist, besteht dafür keine Notwendigkeit.
Externe JavaScript-Dateien
Wie bereits erwähnt, können Sie mit dem <script>-Tag JavaScript zu einer einzelnen Webseite hinzufügen. Sie müssen aber auch Skripte erstellen, die Sie mit allen Seiten Ihrer Website teilen möchten. Das bloße Kopieren und Einfügen desselben JavaScript-Codes in jede Seite ist jedoch keine gute Idee, besonders wenn Sie eine Website mit Hunderten von Seiten haben.
Kurz gesagt verwenden wir externe Skripte, wenn wir viel JavaScript-Code haben. So erhalten wir Code-Wiederverwendbarkeit, da eine einzelne JavaScript-Datei in mehreren HTML-Seiten verwendet werden kann. Die Erweiterung für JavaScript-Dateien ist .js. Wenn wir ein externes Skript verwenden möchten, sollten wir den Namen der Skriptdatei in das src- (source-) Attribut eines <script>-Tags eintragen:
javascript source attribute
<script src="W3DocsScript.js"></script>Mit Hilfe des src-Attributs können wir Skriptdateien an HTML anhängen.
javascript source attribute
<script src="/path/W3DocsScript.js"></script>In diesem Beispiel ist /path/W3DocsScript.js ein absoluter Pfad für das Skript, der auch einen relativen Pfad von derselben Seite aus angeben kann. Zum Beispiel bezieht sich ein src-Wert my-script.js auf diese Datei neben der aktuellen Seite.
Wir können auch eine vollständige URL angeben, die dann so aussieht:
javascript src url
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Wenn wir mehrere Skripte einbinden möchten, sollten wir mehrere Tags verwenden:
javascript src multiple tags
<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. Das funktioniert einfach nicht:
script tag with src attribute
<!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 Skript mit src-Attribut oder für ein normales <script>-Element mit eingebettetem Code entscheiden. Erst danach können wir dieses Beispiel in zwei Skripte aufteilen, damit es funktioniert:
javascript example into two scripts
<!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
Lassen Sie uns mit dem Programmieren beginnen, 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 geben Sie ein:<script> - Drücken Sie die Eingabetaste, um eine neue leere Zeile zu erstellen, und geben Sie ein:
alert('Welcome to W3Docs');Herzlichen Glückwunsch! Sie haben Ihre erste Zeile JavaScript-Code eingegeben. - Dann geben Sie
</script>ein. Der Code sollte so aussehen:
Javascript alert example
<!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>- Starten Sie einen Webbrowser und öffnen Sie die Datei test1.html, um sie in der Vorschau anzuzeigen. Beachten Sie, dass die Seite leer ist, wenn das Alert-Fenster erscheint.
- Wenn Sie im Alert-Fenster auf die Schaltfläche OK klicken, schließen Sie es. Nachdem das Alert-Fenster verschwunden ist, wird die Webseite im Browserfenster angezeigt.
Text auf einer Webseite schreiben
Das Skript im vorherigen Abschnitt erschien in der Mitte Ihres Monitors. Wenn Sie jedoch mit JavaScript eine Nachricht direkt auf eine Webseite 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 der<head>-Sektion einer Webseite erscheinen, können Sie sie und JavaScript-Programme direkt in den<body>-Bereich der Seite setzen. - Unterhalb von
<h1>Writing to the document window</h1>geben Sie diesen Code ein:
javascript document write example
<!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 alert()-Funktion; er gibt alles aus, was Sie zwischen die öffnenden und schließenden Klammern setzen. In diesem Beispiel wird das HTML <p>Hello world!<p> zur Seite hinzugefügt: ein Absatz-Tag und zwei Wörter.
- Speichern Sie nun die Seite und öffnen Sie sie in einem Webbrowser. Wie Sie sehen, öffnet sich die Seite und „Welcome to w3Docs“ erscheint unter der Überschrift.
Die JavaScript-Konsole in Chrome
Viele Webentwickler bevorzugen Googles Chrome-Browser. Sein DevTools-Attribut bietet Ihnen viele Möglichkeiten, HTML-, CSS- und JavaScript-Probleme zu korrigieren und auszugleichen. Die JavaScript-Konsole ist ein großartiger Ort, um Fehler und Irrtümer in Ihrem Code aufzuspüren. Sie erkennt außerdem die Zeile in Ihrem Code, in der jeder Fehler aufgetreten ist.
Javascript console log example
<!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 Schaltfläche des Menüs „Anpassen“, um die JavaScript-Konsole zu öffnen, und wählen Sie Tools→JavaScript Console. Oder verwenden Sie die Tastenkombination Strg+Umschalt+J (Windows) bzw. ⌘-Option-J (Mac) usw.
Übung
Welche der folgenden Aussagen sind wahr über den Einstieg in JavaScript in der Webentwicklung?