Einführung in JavaScript II

MusikwissenschaftlichesInstitut Hamburg

WS 2005/06Klaus Frieler

JavaScript IIVerzweigungen (if-else)

Wichtiges Element einer jeden Programmiersprache ist die bedingte Ausführung von Anweisungen, d.h. Verweigungen.

Syntax:if (<bedingung>) <anweisungen1>

[else <anweisungen2>]

<bedingung> ist ein beliebiger logischer Ausdruck (in runden Klammern) und <anweisungen1/2> eine Anweisung oder ein Anweisungsblock in geschweiften Klammern. Anweisungen können auch wieder Verzweigungen sein. Der else -Zweig ist optional.

Semantik: Ist die Bedingung wahr wird <anweisungen1> ausgeführt, falls nicht wird entweder nichts getan oder der <anweisungen2> ausgeführt (mit else-Zweig)

JavaScript IIVerzweigungen (if-else)

Beispiele:if (moin<0) alert("Zu klein");if(moin<1) moin = 0;

else moin--;

if(moin<0) moin = 0;

else if(moin>=5) moin = 5;

else{ moin = moin++;

alert(moin); }

JavaScript IIVerzweigungen (?-Operator)

Programmierer sind faul, deswegen gibt es für eine einfache Entweder-Oder-Abfrage eine spezielle Kurzschreibweise, den ?-Operator

Syntax: <variable> = (<bedingung>) ? <wert1> :<wert2>

Semantik: Dies ist gleichbedeutend mit:if (<bedingung>)

<variable> = <wert1>;

else

<variable> = <wert2>;

JavaScript IIVerzweigungen (?-Operator)

Beispiele:moin = (moin<0) ? 0 : moin;

alert( (moin<0) ? "Zu klein" : "Genau richtig");

alert((moin<0) ? "Zu klein" : (moin>5) ? "Zu groß" :"Genau richtig");

JavaScript IIVerzweigungen (switch-case)

Um mehrer Fälle unterscheiden zu können gibt es die switch-case Anweisung.

Syntax:switch(<variable>){

case <wert1>: <anweisung> [break;]

[case <wert2>: <anweisung> [break;] ]

[case …]

[default: <anweisung> [break;]]

}

JavaScript IIVerzweigungen (switch-case)

Semantik: Der Wert der Variable <variable> wird mit den Werten hinter den case-Schlüsselworten verglichen, sind sie identisch wird der Anweisungsblock dahinter ausgeführt. (Fehlt das Schlüsselwort break; werden auch alle Anweisungen alle folgenden Fälle ausgeführt (Fall-through) bis zum nächsten break!)

Trifft keiner der Fälle zu, werden die Anweisungen hinter dem optionalen default-Fall ausgeführt.

JavaScript IIVerzweigungen (switch-case)

Beispiele:switch(moin){ case 1:

alert("1"); break;case 2:

alert("2"); break; default: alert("Alles andere.");

break;}

JavaScript IISchleifen

Ein weiteres grundlegendes Element jeder Programmiersprache sind Schleifen,d.h. Anweisungen werden solange wiederholt bis eine bestimmte Bedingung eintritt.

Es gibt drei Typen von Schleifen in JavaScript: while, do-while und die for-Schleife

JavaScript IISchleifen – while-Schleife

Syntax:

while(<bedingung>) <anweisungen>

<bedingung> kann eine beliebiger logischer Ausdruck sein, <anweisungen> eine einzelne Anweisung oder eine Anweisungsbock in geschweiften Klammern.

JavaScript IISchleifen – while-Schleife

Beispiele:

while(true) i = i+1; (Achtung:Endlosschleife!)

while(false) i = i+1; (Achtung:Keine Schleife!)

i = 0;

while(i<10){

i = i+1;

alert(i);

}

JavaScript IISchleifen – do-while-Schleife

Syntax:

do <anweisungen> while(<bedingung>)

<bedingung> kann eine beliebiger logischer Ausdruck sein, <anweisungen> eine einzelne Anweisung oder eine Anweisungsbock in geschweiften Klammern.

Unterschied zur while-Schleife: Die Anweisungen werden mindestens einmal ausgeführt, weil die Bedingung erst am Ende geprüft wird.

JavaScript IISchleifen – for-Schleife

Syntax:

for([<anweisung1>];[<bedingung>];[<anweisung2>]) <anweisungen>

<anweisung1> ist einfache Anweisung (kein Block!), zumeist Initialisierung einer Laufvariablen;

<bedingung> ist die Abbruchbedingung <anweisung2> ist einfache Anweisung, zumeist

Variation (z.B. Hochzählen) der Laufvariablen Alle drei Angaben sind optional!

JavaScript IISchleifen – for-Schleife

Beispiele:for(j = 0; j<3; j++) alert(j);

for(i = 10; i>=0; i -= 2){

zahl += i;

alert(zahl * zahl);

}

for(;;) alert("Endlosschleife");

JavaScript IISchleifen – break und continue

Mit den Schlüsselwörter break und continue kann man alle Schleifen beeinflussen.

Durch break wird die Schleife sofort beendet. Durch continue wird an den Anfang des

Schleifenblocks gesprungen. Bei der for-Schleife wird dabei noch <anweisung2> ausgeführt und <bedingung> geprüft.

JavaScript IISchleifen – break und continue

Beispiel:while(true){

if(i==10) break;

i = i + 1;

}

for(i = 0; i<10; i++){

if(i % 2) continue;

alert(i);

}

JavaScript IFunktionen

Funktionen sind Unterprogramme, d.h. wieder verwendbare Programmteile

Sie können mit Parametern aufgerufen werden und können einen Wert zurückgeben

Jede komplexere Anweisungsfolge, die in einem Script mehrmals benutzt werden, sollten in Funktionen gekapselt werden.

Sammlungen von Funktionen nennt man auch (Funktions-)Bibliotheken. (Z.B. dll‘s bei Windows)

JavaScript IFunktionen

Syntax:function <name>([Parameterliste]){

<anweisungen>[return <value>;]

} <name> ist ein Bezeichner der den selben Regeln wie

Variablennamen unterworfen ist Die Parameterliste ist optional, sie besteht aus einer durch Komma

getrennte Liste von Variablennamen, den Argumenten der Funktion. Die geschweiften Klammern sind zwingend. Im Funktionsrumpf können beliebige Anweisungen stehen. Die return-Anweisung ist optional. Der dort angegebene Wert ist der

Rückgabewert.

JavaScript IFunktionen

Beispiele:function leer(){}function ausgabe(text){

alert(text);}function mult(x,y){

var z = x*y;return z;

}

JavaScript IFunktionen

Funktionen dürfen sich auch selbst aufrufen, dass nennt man Rekursion. Sehr elegant, aber nicht immer effizient und potentiell gefährlich (Endlosschleife).

Beispiel:function fakultaet(n)

{

if(n <= 1) return 1;

return n*fakultaet(n-1);

}

JavaScript IObjekte

Objekte sind Konstrukte die Variablen und Funktionen unter einem gemeinsamem Dach vereinen.

In JavaScript kann man eigene Objekte definieren, aber meisten benutzt man nur die vordefinierten Objekte (z.B. window, document), vor allem um auf den Browser und die HTML-Seite zuzugreifen.

Variablen eines Objektes heißen „Membervariablen“ und Funktionen heißen auch „(Objekt)Methoden“

JavaScript IObjekte

Auf die Variabeln und Funktionen eines Objektes greift man durch die Punktschreibweise zu.

Bespiel:myObject.myVariable = 5;

test = myObject.myFunction(myObject.myVariable);

Objekte können auch wieder Unterobjekte haben. Auch auf sie greift man durch die Punktschreibweise zu:

Bespiel:myObject.mySubobject.myVar = 5;test = myObject.mySubobject.myFunction(myObject.myVariable);

JavaScript IObjekte

Z.B. ist jeder String in JavaScript eigentlich ein Objekt!Beispiel:

var text ="Teststring";if(text.charAt(0) == "T") alert("Beginnt mit T!")

else

alert("Beginnt nicht mit T!");

for(i = 0; i<text.length; +i){alert(text.charAt(i));

}

JavaScript IArrays

Arrays sind ebenfalls grundlegende Elemente vieler Programmiersprachen

Ein Array ist eine Zusammenfassung vieler gleichartiger Variablen unter einem gemeinsamen Namen.

Die einzelnen Elemente kann man durch einen Index ansprechen, z.B. vektor[0] Der Index ist 0-basiert, d.h. das erste Element wird durch den Index 0 angesprochen.

In JavaScript sind Arrays durch das eingebaute Array-Objekt realisiert.

JavaScript IArrays

Beispiel://erzeugen eines leeren Arrays

var empty= new Array();

//erzeugen eines Arrays mit 5 Zahlen

var vektor= new Array(1, 2, 3, 4, 5);

/*Die Membervariable "length" enthaelt die Laenge des Arrays*/

for(i = 0; i< vektor.length; ++i){

vektor[i] = vektor[i]* vektor[i];

}

JavaScript IArrays

Beispiel: Umwandeln eines Strings in ein Zeichenarray:var text ="Teststring";

var charArray= new Array();

for(i = 0; i<text.length(); ++i){

charArray[i] = text.charAt(i);

}