Im ersten Teil dieses JavaScript Lern-Tutorial werden wir uns einmal grundlegend mit der Programmiersprache auseinandersetzen und auch schon das erste kleine „Programm“ schreiben. Dieses Tutorial richtet sich an Programmier-Anfänger und soll dem Erlernen der Programmiersprache JavaScript dienen. Das schöne am Programmieren mit JavaScript ist, dass man im Vergleich zu anderen Programmiersprachen nicht erst einmal riesige Entwicklerwerkzeuge herunterladen muss, sondern gleich mit dem im Betriebssystem enthaltenen Editor und Web-Browser loslegen kann. Und das wollen wir nun auch tun …
Inhalt
JavaScript ist nicht Java!
Aber Stopp, bevor wir zum eigentlichen Programmieren kommen, muss noch eins gesagt werden: Auch wenn es der Name suggeriert, JavaScript hat nichts, aber auch überhaupt nichts mit Java zu tun. Wer also die Programmiersprache Java lernen möchte, der ist hier leider falsch (falls du doch lieber Java statt Java Script lernen möchtest, dann schau mal hier vorbei). Der Name „JavaScript“ war seinerseits eine Art PR-Gag, der bis heute noch Einsteiger irritiert.
Programmier-Werkzeug
Wie schon gesagt, reicht ein Editor und ein Web-Browser für die Entwicklung der ersten kleinen JavaScript-Programme schon aus. Als Windows-Anwender sollte man aber nicht unbedingt auf den Standard-Editor zurückgreifen, viel komfortabler sind externe Editoren die man sich erst herunterladen und installieren muss. Ich empfehle hier ganz klar Notepad++, ein kleines aber sehr feines Programm, mit dem unter anderem der Code farbig markiert wird und auch das Suchen und Ersetzen schnell von der Hand geht. Mit weiteren Plugins kann man Notepad++ weiter aufbohren, dies braucht man aber meiner Meinung nach erst einmal nicht.
Beim Browser kann man zum Browser seiner Wahl greifen. Egal ob Firefox, Opera, Chrome oder auch der InternetExplorer, mit allen wird das Ausführen unserer JavaScript-Codes kein Problem sein.
Das erste Programm: „Hello World!“
Wie beim Lernen einer Programmiersprache üblich, wird unser erstes Programm in diesem JavaScript-Tutorial erst einmal nichts anderes machen, als die beiden Wörter „Hello World“ auszugeben. Zugegeben, nicht gerade spektakulär, für den Anfang macht man sich aber erst einmal mit der Programmiersprache etwas vertraut.
Die Ausgabe von Text kann in JavaScript auf verschiedene Wege passieren. Nachfolgend möchte ich drei vorstellen, nämlich die Konsole, der Alert und die Ausgabe direkt auf der Webseite. Alle drei Wege sollte man kennen, in den nachfolgenden Teilen des Tutorials werden wir uns aber auf die Website konzentrieren.
Das JavaScript-Grundgerüst
Zwar gibt es inzwischen viele Einsatzgebiete von JavaScript, aber ursprünglich wurde es entwickelt, um im Kontext einer Webseite zu laufen, dementsprechend fungiert auch in diesem JavaScript Tutorial die Webseite als Grundgerüst.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JavaScript Tutorial</title> </head> <body> <h1>Ich lerne JavaScript programmieren</h1> </body> </html>
Wir setzen auf folgendes HTML-Grundgerüst auf, dass nachfolgend einfach kopiert, in eine Textdatei abgespeichert wird und anschließend benennt man die Textdatei in jstutorial.html um. Anschließend kann man die Seite mal wahlweise mit dem Browser öffnen. Wie man sieht, sieht man außer der Überschrift nichts und das ist auch in Ordnung so – Zeit das zu ändern.
Im Grundgerüst war bisher noch nichts von JavaScript zu lesen. Deshalb fügt man nun vor dem </head>-Tag noch folgende Zeile ein:
<script src="script.js" type="text/javascript"></script>
Mit dieser zusätzlichen Zeile binden wir ein externes Skript mit dem Namen „script.js“ ein. Dieses müssen wir noch Erstellen, dafür einfach im selben Ordner wo die html-Datei liegt, eine neue Textdatei erstellen und diese script.js nennen. Im Grund lagert man also den JavaScript-Code in einer neuen Datei aus. Natürlich hätte man den Code auch gleich zwischen den beiden <script></script>-Tags schreiben können, das wird aber bei viel Code irgendwann unübersichtlich. Es empfiehlt sich deshalb, wie beispielsweise auch bei CCS, den Code in einer extra Datei auszulagern.
Nun möchten wir unsere JavaScript-Datei aber auch endlich mit Inhalt befüllen und unseres erstes JavaScript-Programm schreiben.
Ausgabe mit der Konsole
Wir beginnen mit der Konsole und geben dafür in der neu erstellen „script.js“-Datei nachfolgende Zeile ein, nachdem wir die Datei mit dem Texteditor geöffnet haben:
console.log("Hello World!");
Führt man nun nach dem Abspeichern die HTML-Datei erneut aus, sieht man – … wieder nichts! Warum? Na, wie der Befehl schon sagt, wird hier der Text in der Konsole ausgegeben. Die Konsole des Browsers ist aber in der Standardansicht gar nicht vorhanden, da sie dem normalen User gar nicht interessiert. Deshalb muss erst einmal die Konsole aufgerufen werden. Dies geht bei jedem Browser etwas anders, unter Firefox ruft man die Konsole beispielsweise über „Extras“ → „Web-Entwickler“ → „Web-Console“ auf.
Und kaum ist die Console offen, sehen wir auch endlich die Ausgabe unseres ersten JavaScript-Programms. So wirklich glücklich sind wir aber über das Ergebnis nicht, denn wer soll den schon immer extra die Web-Console öffnen, um zu sehen, was man denn programmiert hat. Tatsächlich dient die Web-Console auch nur dem Entwickler, der sich hier bestimmte Ausgaben anzeigen lassen kann, die den Endnutzer nicht interessieren. Sie ist beim Debugging, also beim Auffinden von Fehlern, sehr nützlich, soll aber erst einmal keine Rolle mehr im Tutorial spielen.
Ausgabe mit Alert
Der Alert ist wohl einer der bekanntesten Befehle in JavaScript und schon jeder dürfte diesen gesehen haben. Wir löschen den Code in unserer Script-Datei und geben nun folgendes ein:
alert("Hello World!");
Die Console zeigt nun nichts mehr an, dafür erscheint beim Aufrufen unserer HTML-Seite im Hintergrund ein Pop-Up mit unserer Beschriftung. Hier sieht man übrigens schon die erste Besonderheit von JavaScript: Der Code wird genau an der Stelle ausgeführt, an der er auch eingebunden ist. Sprich, da wir unseres Script im Header eingebunden haben, wird erst das Script ausgeführt und der Hintergrund ist noch komplett grau. Erst nach dem wir auf „Ok“ geklickt haben, erscheint nun die restliche Seite mit der Überschrift. Um diese wichtige Eigenschaft noch einmal zu verinnerlichen, schneiden wir nun die Zeile:
<script src="script.js" type="text/javascript"></script>
aus und fügen sie unter der <h1>-Unterschrift, aber noch vor dem </body>-Tag ein. Öffnen wir nun erneut die HTML-Datei, bzw. aktualisieren diese mit F5 im Browser, dann erscheint zwar wieder der Alert, diesmal sieht man aber im Hintergrund unsere Überschrift.
Wo der JavaScript-Code eingebunden wird, ist also sehr wichtig. Möchte ich beispielsweise mit einem kleinen Programm einen Text auf der Webseite analysieren, dann kann dies nur funktionieren, wenn der Text schon geladen wurde. Je nach dem was man also mit JavaScript erreichen möchte, empfiehlt es sich, den jeweiligen Code erst ganz am Ende einzufügen (kommt auch der Ladegeschwindigkeit entgegen).
Ausgabe direkt im Dokument
Alert-Boxen sind irgendwie auch nicht so das wahre, erinnern sie doch schon sehr an die nervenden Werbe-Popups. Deshalb schreiben wir nun den Text mit dem folgenden Code direkt in den Text:
document.write("Hello World!");
Nun erscheint unter unserer Überschrift der Text „Hello World“. Auch hier kann man wieder experimentieren, was denn passiert, wenn man das Script denn schon vor der Überschrift einbinden.
Natürlich macht die Ausgabe des Text in diesem Beispiel nur bedingt Sinn, hätten wir sie doch auch einfach über HTML ausgeben lassen können. Aber JavaScript kann natürlich viel mehr, zum Beispiel rechnen. Ersetzt man Hello World! Mit 2+8 erscheint nun 2+8 auf dem Bildschirm. Das hat also schon einmal nicht geklappt, aber warum? Ganz einfach, mit den Anführungszeichen signalisieren wir, dass sich darin ein String, also ein Text bzw. eine Zeichenkette befindet, dementsprechend wird die Rechnung auch als Text behandelt und ausgegeben. Löschen wir nun noch die Anführungszeichen, sodass im Script nur noch folgendes steht:
document.write(2+8);
Dann haben wir nun als Ausgabe plötzlich eine 10, also das Ergebnis der Rechnung. JavaScript unterscheidet wie fast jede Programmiersprache also unter verschiedenen Datentypen. Bisher haben wir zwei kennen gelernt, nämlich den String und den Integer (also eine Ganzzahl). Im Laufe des Tutorials werden wir weitere Datentypen kennenlernen. An dieser Stelle sollte aber noch auf eine Begebenheit von JavaScript hingewiesen werden. Folgendes sollte dafür einmal testweise im Script stehen:
document.write(2+"8");
Hier trifft nun ein Integer, die 2, auf einen String, die „8“. Bei einigen Programmiersprachen würde das Aufeinandertreffen von zwei unterschiedlichen Datentypen zu einem Fehler führen. JavaScript hingegen wandelt hier automatisch die 2 in einen String um und verknüpft die beiden Strings durch den Plus-Operator, sodass man als Ausgabe die 28 hat.
Zusammenfassung
In diesem ersten Teil haben wir uns mit den grundlegenden Ausgabemöglichkeiten in JavaScript auseinandergesetzt und schon das erste kleine Programm geschrieben. In diesem Zug haben wir kennengelernt, dass es verschiedene Datentypen gibt und sind auf die ein oder andere Besonderheit der Programmiersprache eingegangen. Im nächsten Teil des Tutorials werden wir tiefer in die JavaScript-Programmierung eintauchen und uns sogenannte Schleifen näher anschauen.
Bei Fragen und Hinweisen einfach einen Kommentar hier hinterlassen.
>> Weiter zu Teil 2: Schleifen
Ich bekomme in der Konsole einen Fehler aufgrund von „“:
„Eine ungültige Zeichenkodierung wurde für das HTML-Dokument mittels eines Meta-Tags deklariert. Die Deklaration wurde ignoriert.“
Woran liegt das? Bzw. wie bekomme ich das weg? 🙂 Ist zwar nicht schlimm, weil es trotzdem funktioniert aber ein Error bleibt ein Error. 😀
Hey Leonard,
vielen Dank für den Hinweis. Du hast wahrscheinlich den Code direkt kopiert, oder? Leider wurde beim Kopieren hier in den Editor von WordPress die Zeichenkodierung wohl durcheinandergebracht. Ich habe die ganzen Anführungszeichen nun noch einmal von Hand ersetzt. Wenn du jetzt den Code kopierst, sollte es keine Fehlermeldung mehr geben 🙂
Beste Grüße
Christian
das mit der Reihenfolge vom scripteinschub im HTML-Code funktioniert in meinem Chrome-Browser ganz anders (ohne dass ich meine da was an Einstellungen groß geändert zu haben). Im Firefox funktioniert es so wie von Dir beschrieben.
ich wollte sagen, es funktioniert im Chrome _nicht_
Hi Thomas,
funktioniert es komplett nicht? Ich habe es gerade in Chrome getestet und da war es bei mir kein Problem.
Beste Grüße
Christian
Hallo,
bei mir erscheint der Text „Hello World“ nur dann alleine, wenn ich statt document.write(„Hello World“); nur Hello World schreibe.
2+8 rechnet die Liebe gar nicht. Stattdessen schreibt er stur 2+8, gegebenenfalls eben document.write(2+8); auf meine Seite.
Das macht mich jetzt sehr traurig, dass ich schon beim First Step so scheitere…
Gruß Satluj
Ups, sorry, hab meinen Fehler gefunden. Ich sollte das Script bearbeiten, nicht die Tutorial-Datei…
Gut und anschaulich erklärt. So muss das sein. Weiter so 🙂
Ich habe Probleme die Javascript Datei mit der anderen zu verlinken.
Ich habe den Code wie vorgegeben eingefügt aber sobald ich etwas in mein Javascript reinschreibe ändert sich gar nichts kann mir da jemand helfen?
Hallo Moritz,
was meinst du genau mit „verlinken“?
Beste Grüße
Christian