Einführung in JavaScript II

1. Einführung in JavaScript II Musikwissenschaftliches Institut Hamburg WS 2005/06 Klaus Frieler

2. 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)

3. 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); }

4. 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>;

5. 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");

6. 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;]] }

7. 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.

8. JavaScript IIVerzweigungen (switch-case) Beispiele: switch(moin){ case 1: alert("1"); break; case 2: alert("2"); break; default: alert("Alles andere."); break; }

9. 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

10. 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.

11. 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); }

12. 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.

13. 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!

14. 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");

15. 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.

16. 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); }

17. 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)

18. 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.

19. JavaScript IFunktionen Beispiele: function leer() { } function ausgabe(text) { alert(text); } function mult(x,y) { var z = x*y; return z; }

20. 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); }

21. 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“

22. 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);

23. 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)); }

24. 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.

25. 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]; }

26. 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); }