Die Syntax von JavaScript erscheint dem Einsteiger zuweilen recht verworren und in der Tat, sie ist es auch, zumindest könnte ein Programmierer sie noch als gewöhnungsbedürftig bezeichnen. Da aber jeder Einsteiger, gleich um welche Script- oder Programmiersprache es sich auch immer handeln mag, bei nahezu Null beginnt, so ist es auch nicht erforderlich, eine Sprache im vollen Umfang von Anbeginn an zu verstehen und zu beherrschen. So enthält der kleine, in dem Quelltext einer HTML-Seite eingebettete Code-Schnipsel beinahe alles, was ein Einsteiger zu Beginn über die Syntax von JavaScript wissen müsste, um erst einmal loszulegen..
<!DOCTYPE html> <html> <head> <title>Erstes Beispiel für die Syntax von JS</title> <meta charset="windows-1252"> </head> <body> <h1>Beispiel 1</h1> <p>Eine kleine Einführung</p> <script type="text/javascript"> /* Kommentar: Deklaration und Definition von Variablen */ var we1 = 10; var we2 = 20; var we3 = "Ausgabe eines Strings!"; // Kommentar: Ausgabe mit write(): document.write("Ausgabe eines Textes oder "); document.write("Ausgabe von Zahlen wie "+ we1 +" und "+ we2 +"?<br>"); document.write(we3 +"<br>"); </script> </body> </html>
Dieser kleine Code-Schnipsel würde folgende Ausgabe bewirken:
Im Einzelnen: Wird JavaScript in eine bestehende HTML-Seite eingebunden, so muss
dem Browser mitgeteilt werden, wo der Script-Bereich beginnt und wo er endet. Bis HTML 4.01 ist beim definieren des
Script-Bereiches noch der MIME-Typ anzugeben.
<script type="text/javascript"> /* <script Beginn des Script-Bereiches Mime-Type="text/javascript"> ... der Code für das Script ... Ende des Bereiches </script> */ </script>
In HTML5 Dokumenten kann auf eine Angabe des Mime-Types verzichtet werden, um einen Fehler handelt es sich jedoch bislang noch nicht, wenn der Mime-Typ angegeben wird.
<script> /* ... der Code für das Script ... */ </script>
Längere Kommentare, die sich über mehrere Zeilen erstrecken, können mit /* Kommentar-Beginn und */ Kommentar-Ende auskommentiert werden. Bei kürzeren Kommentaren, die sich nicht über mehrere Zeilen erstrecken, genügt ein doppelter Schrägstrich //. Immer noch weit verbreitet ist die Schreibweise, den kompletten Code innerhalb eines HTML-Kommentarbereiches <!-- --> zu platzieren. Beispiel:
<script type="text/javascript"><!-- JavaScript-Code //--></script>
Die obige Schreibweise stammt noch aus einer Zeit, in der ältere Browser kein JavaScript verstanden und
den Code irrtümlich als HTLM-Text ausgaben. Das Einschließen des JavaScript-Codes in HTML-Kommentarzeichen war somit für
Browser aus den 90er Jahren des letzten Jahrhunderts bestimmt. Bei einigen internetfähigen Handys der ersten Generation soll es
jedoch zu ähnlichen Problemen gekommen sein. Wer HTML-Kommentarzeichen verwenden möchte, sollte die schließenden
HTML-Kommentarzeichen --> mit JavaScript-Kommentarzeichen // auskommentieren, da diese sonst irrtümlich noch als
JavaScript-Code interpretiert würden.
Sollen mehr als einzelne Funktionen in einzelnen Seiten eingebettet werden, empfiehlt sich eine Auslagerung des Codes in eine
JS-Datei, die dann wie folgt an einer beliebigen Stelle in den HTML-Dokumenten eingebunden werden kann:
<script type="text/javascript" src="https://www.example.com/datei.js"></script>
Bei der Auslagerung in JS-Dateien ist zu beachten, dass die Script-Tags entfallen und die Dateien mit
dem JavaScript-Code mit der Endung (Extension) js abgespeichert werden. Weit verbreitet ist die Einbindung der
JS-Dateien in den Header-Bereich von HTML-Seiten. Dazu sei angemerkt, der Footer-Bereich eignet sich nicht weniger, wobei
praktisch jeder Bereich in Frage kommt, so lange die Ladezeit der Webseite oder die Funktionalität eines Scripts nicht
beeinträchtigt wird.
Im Unterschied zu anderen Programmiersprachen wie PHP, darf am Ende einer Anweisung bzw. eines Befehls das Semikolon fehlen,
insofern nur eine Anweisung in einer Zeile steht. Bei fehlendem Semikolon würde das Zeilenende gleichzeitig als Ende der
Anweisung interpretiert. Nur wenn mehrere Anweisungen in einer Zeile notiert werden, müssen diese durch ein Semikolon getrennt
werden. Folgendes Beispiel wäre somit auch ohne Semikolons beinahe korrekt, sollte dennoch im Interesse einer einheitlichen und
übersichtlichen Schreibweise nicht zur Gewohnheit werden.
<!DOCTYPE html> <html> <head> <title>Ein Beispiel ohne Semikolons</title> <meta charset="windows-1252"> </head> <body> <h1>Beispiel 2</h1> <p>Ohne Semikolons geht es auch.</p> <script type="text/javascript"> var av = 33 var bv = 66 var cv = "Ergebnis: " document.write(cv, av+bv) // Ergebnis: 99 </script> </body> </html>
In den Beispielen auf dieser und der nachfolgenden Seite sind einige Operatoren enthalten. Der richtige Einsatz von Operatoren ist nicht nur für eine fehlerfreie Syntax wichtig, sondern nicht minder für fehlerfreie Ergebnisse. Folgende Operatoren wurden verwendet:
= Zuweisungsoperator
+ Plus-Operator
+= Zuweisungsoperator
, Komma-Operator
Beim Plus-Operator hängen der Einsatz und das Ergebnis vom Typ der verwendeten Ausdrücke (Expressions) ab, die durch das Pluszeichen verbunden werden. So kann der Plus-Operator sowohl für die Addition als auch zur Verknüpfung von Strings benutzt werden.
<!DOCTYPE html> <html> <head> <title>Ein Beispiel mit dem Plus-Operator</title> <meta charset="windows-1252"> </head> <body> <h1>Beispiel 3</h1> <p>Einsatz des Plus-Operators:</p> <script type="text/javascript"> var was1 = "Susi " + "Musterfrau"; // Ausgabe: Susi Musterfrau var was2 = 5000.01 + 1000; // Ausgabe: 6000.01 document.write(was1 + "<br>" + was2); </script> </body> </html>
Für den += Operator gilt im Prinzip das was bereits über den Plus-Operator geschrieben wurde. Auch bei diesem Operator kommt es auf dem Typ an, nur das ein Wert zu einer bereits initialisierten Variable addiert bzw. angehängt (hinzugefügt) wird. Handelt es sich bei einem der Werte um einen String, werden zwei String miteinander verbunden.
<!DOCTYPE html> <html> <head> <title>Ein weiteres Beispiel mit dem Plus-Operator</title> <meta charset="windows-1252"> </head> <body> <h1>Beispiel 4</h1> <p>Noch einmal ein Einsatz des Plus-Operators:</p> <script type="text/javascript"> var was1, was2; was1 = "Erika "; was1 += "Musterfrau"; // Ausgabe: Erika Musterfrau was2 = 5000.02; was2 += 1000; // Ausgabe: 6000.02 document.write(was1 + "<br>" + was2); </script> </body> </html>
Der Komma-Operator kann wie ein normales Satzzeichen betrachtet werden und bestimmt darüber, welcher
Teil zuerst gelesen oder ausgeben wird.
Was nun noch fehlt, um die ersten Schritte mit JavaScript unternehmen zu können, wäre ein Verständnis für die Deklaration
und Definition von Variablen sowie die Vorstellung der wichtigsten Operatoren und Methoden. Zu den am häufigsten verwendeten
Methoden gehört write(). Im letzten Beispiel wird die Methode write() durch den Punktoperator mit dem Objekt Dokument
verbunden, um ein Ergebnis ins aktuelle Dokument zu schreiben. Alle möglichen Methoden abzuhandeln, würde jedoch an dieser
Stelle zu weit gehen.
weiterlesen » Lokale und globale Variablen
Einstieg in JavaScript
Listings & Tutorials
Übersicht