Home
Navigation
Impressum
Coder Welten - Programmierung und Optimierung
Coder Welten
 
 

 

 

Syntax und Variablen von und in JavaScript

Eine kleine Einführung in die Syntax - Teil I

Übersicht / Seite:

  1. Syntax von JavaScript (eine kleine Einführung in die Schreibweise)
  2. Variablen (lokale und globale Variablen deklarieren und definieren)
  3. Datentypen (Ermittlung und Umwandlung von Datentypen)
  4. Operatoren (Ausdrücke, Operanden und spezielle Operatoren)

Die Syntax von JavaScript

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:

» Beispiel 1 «


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="http://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>

» Beispiel 2 «

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>

» Beispiel 3 «

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>

» Beispiel 4 «

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

 
Navigation

Einstieg in JavaScript

 


Listings & Tutorials

 

Weitere Themen

Übersicht

 


Copyright © Verlag Horst Müller - Stendal - 2006 - Impressum - Datenschutz - Nutzungsbedingungen