Javascript war einst eine kleine Programmiersprache – die alten Hasen unter den Programmierern würden heute sagen: eine kleine Skriptsprache. Im Laufe der Zeit wurde Javascript umfangreicher, um komplexere Anwendungen besser realisieren zu können. Dennoch ist Javascript nach wie vor leicht zu erlernen.
Allerdings gibt es einen Haken: Wenn Sie Javascript programmieren möchten, müssen Sie die Grundlagen von HTML und auch CSS in- und auswendig kennen.
Editoren und Browser für die ersten Schritte mit Javascript.
Für die ersten Versuche benötigen wir eine HTML-Datei und einen einfachen Programm-Editor (z. B. Notepad auf dem PC oder TextEdit auf dem Mac). Wenn Sie mehr Unterstützung vom Code-Editor wünschen: Brackets ist ein kostenloser Open-Source-Editor für HTML, Javascript und CSS mit einer sofortigen Vorschau.
Welcher Browser ist am besten geeignet? Moderne Browser sind alle auf dem neuesten Stand der Technik. Die lästigen Unterschiede gehören der Vergangenheit an, bis auf kleine Einschränkungen in IE11.
Das erste Javascript-Programm
Genauso wie die Überschrift in einem h1-Tag und der Text in p-Tags steht, steht Javascript in script-Tags. Wie HTML ist auch Javascript reiner Text, muss nicht kompiliert (übersetzt) werden, sondern wird direkt vom Browser Schritt für Schritt ausgeführt.
<!DOCTYPE html>
<html>
<head>
<title>Javascript-Grundlagen</title>
</head>
<body>
<h1>Eine sehr einfache HTML-Datei</h1>.
<p>Eine sehr einfache HTML-Seite.</p>
<p>Hier gibt es eine Überschrift, Text und eine ungeordnete Liste.</p>
<ul id=“list”>
<li>Überschrift im h1-Tag</li>.
<li>Text im p-Tag</li>
<li>Eine ungeordnete Liste mit drei li-Elementen.</li>
</ul>
<script>
alert („Hallo Welt!“);
</script>
</body>
</html>Es gibt viele Aspekte, die bei der Platzierung eines Skriptaufrufs in der HTML-Datei zu berücksichtigen sind. Für Anfänger ist es am einfachsten, das Skript-Tag mit den Javascript-Anweisungen am Ende der HTML-Datei vor dem schließenden body-Tag zu platzieren.
Zu diesem Zeitpunkt ist die HTML-Datei geladen und Javascript kann auf alle Elemente zugreifen.
Javascript Hello World
Die Ausgabe von „Hello World” ist die klassische Einführung in die Programmierung, egal ob Javascript, PHP, Java oder C.
Die HTML-Datei wird in einem lokalen Verzeichnis gespeichert und in einem Browser aufgerufen: Der Browser führt das Skript aus und die Alert-Anweisung öffnet ein kleines Dialogfeld. Das Dialogfeld zeigt den Text, der in runden Klammern innerhalb der Anführungszeichen des Alert-Befehls steht.
Dialogfelder: alert, confirm, prompt
Javascript-Dialogfelder sind kleine Fenster – Meldungsfelder, die der Browser über das Seitenfenster legt, wenn alert, confirm und prompt aufgerufen werden.
alert
spielt einen kurzen Text ab
confirm
spielt eine Abfrage ab, die der Benutzer bestätigen oder ablehnen (abbrechen) kann.
prompt
spielt ebenfalls eine Abfrage ab, zusätzlich jedoch ein Feld für Benutzereingaben.
Modernes Webdesign verwendet diese verstaubten alten Dialogfelder kaum noch. Heute gibt es elegantere Methoden. Aber für die ersten Schritte mit Javascript sind Dialogfelder oder modale Fenster intuitiv, weil sie eine schnelle Rückmeldung zeigen.
<p id=“conf”>Confirm</p>
<script>
let txt; // javascript variable
document.getElementById(“conf”).onclick = function () {
let result = confirm (‘Please confirm or cancel’);
if (result === true) {
txt = ‘Has been confirmed’;
} else {
txt = “Was rejected”;
}
}
</script>Die wichtigsten Konzepte für den Einstieg:
Eine Javascript-Variable kann je nach Situation unterschiedliche Werte annehmen.
document.getElementById(„conf“) erklärt sich fast von selbst: Auf diese Weise ruft Javascript Elemente der Webseite ab.
alert(), confirm() und prompt() sind vorgefertigte Javascript-Funktionen.
innerHTML ersetzt alles innerhalb eines HTML-Elements.
Die Anführungszeichen müssen vorhanden sein, es können jedoch sowohl doppelte als auch einfache Anführungszeichen verwendet werden – jedoch immer paarweise!
onclick erkennt, wenn der Benutzer auf ein Element klickt. Das Element in diesem Beispiel ist das p-Element mit „confirm”.
Was ist der Zweck des dreifachen Gleichheitszeichens? Ein einzelnes Gleichheitszeichen weist einer Variablen einen Wert zu. Ein doppeltes oder dreifaches Gleichheitszeichen prüft, ob die Werte auf beiden Seiten gleich sind, und weist nichts zu.
Anweisungen, Befehle
Javascript-Anweisungen sind Befehle, die normalerweise in einer Zeile geschrieben werden und mit einem Semikolon enden.
Javascript-Anweisungen geben Schritt für Schritt vor, was das Skript tun soll:
Farbe der Überschrift h1 festlegen:
document.querySelector(„h1“).setAttribute(‚style‘, „color:firebrick“);
Die ungeordnete Liste mit der ID „list” ausblenden:
let list = document.getElementById(„list“);
list.setAttribute(„style“, „display:none“);
Zeige anstelle der Liste eine Schaltfläche mit dem Text „Liste anzeigen“ an:
let button = document.createElement(‚button‘);
button.innerHTML = „Liste anzeigen“;
document.querySelector(‚body‘).appendChild(button);
Zeige die Liste, wenn der Benutzer auf die Schaltfläche klickt:
button.onclick = function () {
list.setAttribute(„style“, „display:block“);
button.setAttribute(„style“, „display:none“);
}
Auch wenn der Pseudocode einfach klingt: Viele dieser Anweisungen werden in JavaScript durch mehrere Befehle realisiert, da JavaScript sehr detaillierte Befehle benötigt.
Das Präfix-Dokument ist der Einstiegspunkt in das HTML-Dokument – weitere Informationen finden Sie unter DOM: Document Object Model.
querySelector findet das erste Tag vom Typ „h1”.
let button definiert eine Variable mit dem Namen „button”. Javascript verwendet Variablen, um Werte zu speichern. Mit dem Namen „button” kann das Skript direkt auf das neu erstellte Button-Element zugreifen.
Funktionen und geschweifte Klammern
Funktionen sind ein Block aus mehreren zusammengehörigen Anweisungen – die geschweiften Klammern markieren den Anfang und das Ende eines Blocks.
function paintItGreen () {
let paint = document.getElementById(„paint“);
paint.innerHTML = „Jetzt in Grün!“;
paint.setAttribute(‚style‘, „color: green“);
}
Funktionen werden nicht sofort ausgeführt, sondern erst, wenn sie aufgerufen werden.
window.addEventListener(“click”, paintItGreen);
Beim Lesen der Webseite überspringt der Browser alle Anweisungen der Funktion. Hier sollten die Anweisungen der Funktion nur ausgeführt werden, wenn die Schaltfläche angeklickt wird.
Auch hier werden Anweisungen nur unter bestimmten Bedingungen ausgeführt. Auch dann kennzeichnen geschweifte Klammern einen Block zusammenhängender Anweisungen.
Wo soll das Skript platziert werden?
In einem so einfachen kleinen HTML-Dokument kann das Skript-Tag mit den Javascript-Anweisungen natürlich am Ende des Dokuments platziert werden – vor dem schließenden Body-Tag. Das Skript-Tag könnte sogar in der Mitte des HTML-Dokuments platziert werden – wichtig ist nur, dass es erst aufgerufen wird, nachdem das h1-Tag und die Liste bereits vom Browser geladen wurden.
Bei komplexen Skripten würde der HTML-Quellcode jedoch unübersichtlich werden und die Fehlersuche wäre mühsam.
Skripte können in eine externe JavaScript-Datei ausgelagert werden und werden mit dem src-Attribut des Skript-Tags geladen.
Die Skriptanweisungen in der externen Skriptdatei befinden sich nicht in einem Skript-Tag.
Ereignisse – Benutzeraktionen abfangen
Das Skript – ob in Skript-Tags oder in einer externen Skriptdatei – kann auch im Head-Element des HTML-Dokuments geladen werden. Dann dürfen Anweisungen erst ausgeführt werden, wenn der Browser die angesprochenen Elemente geladen hat.
Dafür sorgt ein EventListener – eine JavaScript-Methode, die Ereignisse wie das Laden einer Seite an das Skript meldet.
Genauso wie es einen Mechanismus gibt, der das Laden des Dokuments im Browserfenster abfängt und an das Skript meldet, kann das Skript benachrichtigt werden, wenn der Benutzer auf einen Link, eine Schaltfläche oder ein Bild klickt (oder ein Element mit dem Finger auf einem Mobiltelefon oder Tablet berührt).
Dieser Mechanismus wird als Ereignisbehandlung bezeichnet.
onclick registriert ein Ereignis – das Ereignis, dass der Benutzer auf die Schaltfläche klickt. Javascript bietet eine lange Liste von Ereignissen: onclick, ondblclick (wenn der Benutzer doppelklickt), ontouch (wenn der Benutzer ein Element mit dem Finger auf einem Touch-Gerät berührt), onkeydown (wenn der Benutzer eine Taste auf der Tastatur drückt), onscroll, onload (wenn das Element im Browser geladen wird) und viele mehr.
Wenn nichts passiert …
Wenn die Webseite nicht auf das Javascript reagiert, liegt ein Fehler vor. Falsch getippt? Wenn ein Befehl falsch geschrieben ist – z. B. alter statt alert oder Alert (Javascript unterscheidet stärker zwischen Groß- und Kleinschreibung als jeder Lehrer) –, liegt ein Syntaxfehler vor. Syntaxfehler sind relativ leicht zu finden.
Die erste Hilfe bei JavaScript-Fehlern kommt von der Konsole des Browsers. Alle modernen Browser verfügen heute über eine JavaScript-Konsole. Sie wird in jedem Browser etwas anders aufgerufen, aber egal ob IE, Edge, Chrome, Safari, Opera oder Firefox: Die Browserkonsole hilft bei der Fehlersuche.
Was ist der nächste Schritt?
Es gibt keine Reihenfolge, um eine Programmiersprache systematisch zu erlernen. Wer bereits programmiert hat und ein Programm mit einer neuen Programmiersprache schreiben möchte, hat bereits eine Vorstellung davon und benötigt nur noch die Syntax für die Datentypen und Anweisungen der neuen Programmiersprache.
Wenn Sie zum ersten Mal Programmieren und Skripten lernen, haben Sie vielleicht eine Idee für eine Anwendung und müssen nun herausfinden, wie Sie Ihre Idee in ein Programm umsetzen können. Dazu muss die Idee in kleinste Schritte zerlegt werden. Programmieren ist wie das Bauen einer Mauer aus kleinen Mosaiksteinen.
Die meisten Anfänger suchen nach einem funktionierenden Skript für ihre Aufgabe und passen es an ihre Anforderungen an – sie lernen durch Ausprobieren oder durch Praxis.