Webbasierte Programmierung

Transkript

1 Webbasierte Programmierung Eine Einführung mit anschaulichen Beispielen aus der HTML5-Welt apl. Prof. Dr. Achim Ebert

2 Inhalt Kapitel 6: JavaScript Kontrollstrukturen Verzweigungen Einseitig, zweiseitig, mehrseitig, mehrstufig Konditional-Operator Einschub: Ausgabe im Browserfenster Schleifen Zählergesteuert, Kopf-/Fußgesteuert Ergänzende Steuermöglichkeiten WEP.6.1

3 Kontrollstrukturen Steuerung des Programmablaufs Anweisungsblock Zusammenfassung mehrerer Anweisungen Block wird in geschweifte Klammern {} eingeschlossen Anweisungen werden sequentiell abgearbeitet Aber oft erforderlich: Programmteile mehrmals ausführen Programmteile ggf. nicht ausführen Sprachelemente zur Steuerung des Ablaufs nötig Allgemeine Bezeichnung: Kontrollstrukturen Verzweigungen Veränderung der sequentiellen Abarbeitung Schleifen Iterationen/Wiederholungen im Kontrollfluss WEP.6.2

4 Verzweigungen Einsatz, wenn Abarbeitung der folgenden Anweisungen von einer oder mehreren Bedingungen abhängt Einseitige Verzweigung Abhängig von Bedingung wird statement (Befehlsblock) ausgeführt oder nicht Wird Bedingung mit ja (true) beantwortet: Statement wird ausgeführt Sonst ( nein, false): keine Ausführung In beiden Fällen: nach Ende der Alternative weiter mit nächster Anweisung? true statement false WEP.6.3

5 Verzweigungen Einseitige Verzweigung (cont.) Umsetzung in JavaScript: einfache if-anweisung if (expression) statement Bedingung expression Ausdruck, der auf wahr oder falsch geprüft wird Ist Bedingung wahr, so wird statement ausgeführt Beispiel: var betrag = ; var rabatt = 0.0; if (betrag > 1000) rabatt = betrag * 0.03;... In geschweifte Klammer setzen ab 2 Befehlen! Besser: immer in {} setzen! WEP.6.4

6 Verzweigungen Zweiseitige Verzweigung Abhängig von Bedingung wird eines von zwei möglichen statements ausgeführt Wenn Bedingung erfüllt ist, dann wird statement1 ausgeführt, sonst statement2 In beiden Fällen: nach Ende der Alternative weiter mit nächster Anweisung? true statement1 false statement2 Umsetzung in JavaScript: allgemeine if-anweisung if (expression) statement1 else statement2 Analog if: besteht statement aus 2 oder mehr Befehlen: in geschweifte Klammer setzen! WEP.6.5

7 Verzweigungen Mehrstufige (verschachtelte) Verzweigung Innerhalb eines if- oder eines else-blocks dürfen wiederum Verzweigungen stehen Ist eine Bedingung wahr, false? wird auch nächste kontrolliert true Trifft eine Bedingung nicht zu, statement1 wird gesamte Verzweigung verlassen Umsetzung in JavaScript if (expression1) { statement1 if (expression2) { statement2 if (expression3) { statement3...? statement2? true true statement3 false false WEP.6.6

8 Verzweigungen Mehrstufige (n-seitige) Verzweigung Innerhalb eines if- oder eines else-blocks dürfen wiederum Verzweigungen stehen Nächste Bedingung wird nur kontrolliert, wenn alle vorangehenden nicht zutreffen Realisierung einer Auswahl 1 aus n möglich Umsetzung in JavaScript if (expression1) statement1 else if (expression2) statement2 else if (expression3) statement3...??? false false false true true true statement1 statement2 statement3 WEP.6.7

9 Verzweigungen Mehrseitige Verzweigung (Fallauswahl) Auswahl 1 aus n Abhängig vom Wert einer Variable wird jeweils unterschiedliches statement ausgewählt und ausgeführt Programmierung mit if-anweisungen möglich, aber mühsam und unübersichtlich? default statement1 statement2 statement3 default st. WEP.6.8

10 Verzweigungen Mehrseitige Verzweigung (Fallauswahl) (cont.) Umsetzung in JavaScript: switch-anweisung switch (expression){ case constvalue1: statement1 case constvalue2: statement2... case constvaluen: statementn default: statementd } expression: Selektor, muss ordinal (abzählbar) sein Jeder Auswahlblock beginnt mit case constvaluex: paarweise verschiedene Ausdrücke Stimmt Wert des Selektors mit keinem Auswahlwert überein, so wird default-zweig ausgeführt WEP.6.9

11 Verzweigungen Mehrseitige Verzweigung (Fallauswahl) (cont.) Beispiel 1: switch-anweisung var note = 3; var text = ""; switch (note){ case 1: text = "sehr gut"; break; case 2: text = "gut"; break; case 3: text = "befriedigend"; break; case 4: text = "ausreichend"; break; case 5: case 6: text = "nicht bestanden"; break; default: text = "nicht erschienen"; } alert ("Klausurnote: " + text); WEP.6.10

12 Verzweigungen Mehrseitige Verzweigung (Fallauswahl) (cont.) Beispiel 2: switch-anweisung var name = "Marta"; var titel = ""; switch (name){ } case "Frodo": case "Hugo": case "Willi": titel = "Herr"; case "Siglinde": case "Jenny": break; case "Marta": titel = "Frau"; default: titel = "?"; alert (titel + " " + name); WEP.6.11

13 Verzweigungen Konditional-Operator Kurzschreibweise für if-else-abfrage (expression)? statement1 : statement2 Trifft Bedingung expression zu, wird statement1 ausgeführt, sonst statement 2 Entspricht also if (expression) statement 1 else statement 2 Beispiel var note = 5; (note > 4)? alert ("Mist!") : alert ("Super!"); WEP.6.12

14 Verzweigungen Konditional-Operator (cont.) Im Gegensatz zur if-abfrage kann Konditional- Operator auf rechter Seite einer Zuweisung stehen Variablen können so in Abhängigkeit einer Bedingung verschiedene Werte zugewiesen werden Beispiel var note = 5; var text; text = (note > 4)? "Mist!" : "Super!"; alert (text); WEP.6.13

15 Schleifen Motivation Aufgabenstellung Umwandlung Celsius in Fahrenheit Ausgabe für Eingabewerte zwischen 10 und 100 in 10er-Schritten Lösungsmöglichkeit var c, f; c = 10; f = 9/5 * c + 32; alert ( c + "C = " + f + "F"); c = 20; f = 9/5 * c + 32; alert ( c + "C = " + f + "F");... c = 100; f = 9/5 * c + 32; alert ( c + "C = " + f + "F"); Aber: aufwendig, umständlich und unflexibel! WEP.6.14

16 Schleifen Einschub: Ausgabe im Browserfenster Grundaufbau HTML-Datei <body> <div id="ausgabebereich"></div> <script type="text/javascript"> var ausgabe = document.getelementbyid ("ausgabebereich"); // Weiterer Code... </script> </body> <div>-tag: Ausgabebereich für Skript festlegen Skript: Zugriff auf mit ID-markierten Ausgabebereich per getelementbyid(), dann z.b.: ausgabe.innerhtml += "Test"; WEP.6.15

17 Schleifen Häufiges Problem: gleiche Anweisungen müssen mehrmals wiederholt werden statement1 statement2 statement1 statement2 statement1 statement2 statement1 statement2 Schleifenkopf statement1 statement2 Schleifenfuß Oft nicht vorbestimmbar, wie oft Anweisungen ausgeführt werden müssen Schleife: Schleifensteuerung + Schleifenrumpf Schleifenrumpf: zu wiederholende Anweisungen Schleifensteuerung: wie oft bzw. unter welchen Bedingungen wird Rumpf ausgeführt WEP.6.16

18 Schleifen Zählergesteuerte Schleife for-schleife, Zählschleife, Iteration for (init; expression; update) statement init ist Ausdrucksanweisung, durch Kommata getrennte Anweisungsfolge, Deklarations-/Definitionsanweisung oder leer expression (Bedingung) ist boolean-ausdruck oder leer update ist Ausdrucksanweisung, durch Kommata getrennte Anweisungsfolge oder leer statement ist Anweisung oder Anweisungsblock (Schleifenrumpf) WEP.6.17

19 Schleifen Zählergesteuerte Schleife (cont.) for-schleife, Zählschleife, Iteration (cont.) for (init; expression; update) statement Startwert setzen Update Bedingung erfüllt? nein ja Schleifenrumpf ausführen WEP.6.18

20 Schleifen Zählergesteuerte Schleife (cont.) Häufigster Fall: Einsatz als Zählschleife Zähler, Laufvariable: Variable, die die Schleifendurchläufe zählt Laufvariable wird bei Schleifeneintritt mit Anfangswert initialisiert Bei jedem Durchlauf wird Prüfbedingung getestet Schleife wird verlassen, sobald Prüfbedingung nicht mehr erfüllt ist Nach jedem Schleifendurchlauf wird Wert aktualisiert Beispiel: for (var i=1; i<=9; i++) { ausgabe.innerhtml += "i="+i+"<br>"; } WEP.6.19

21 Schleifen Zählergesteuerte Schleife (cont.) Beispiel vom Anfang Umwandlung Celsius in Fahrenheit Ausgabe für Eingabewerte zwischen 10 und 100 in 10er-Schritten Lösung mit for-schleife var f; for (var c=10; c<=100; c+=10) { ausgabe.innerhtml += c+"c = "; f = 9/5 * c + 32; ausgabe.innerhtml += f+"f<br>"; } WEP.6.20

22 Schleifen Kopfgesteuerte Schleife while-schleife while (expression) statement Bedingung wird ausgewertet, bevor Anweisungsfolge innerhalb des Rumpfes ausgeführt wird Sog. abweisende Schleife: Darin enthaltene Anweisungen werden nie ausgeführt, wenn Bedingung zu Beginn schon falsch ist Beispiel: var i=0; while (i>0) { i -= 2; alert (i); } WEP.6.21

23 Schleifen Kopfgesteuerte Schleife (cont.) while-schleife while (expression) statement Bedingung erfüllt? nein ja Schleifenrumpf ausführen WEP.6.22

24 Schleifen Kopfgesteuerte Schleife (cont.) while-schleife: Beispiel var weiter = true; var x = 0; while (weiter) { x++; weiter = confirm ("x = " + x + "\n Weitermachen?"); } WEP.6.23

25 Schleifen Fußgesteuerte Schleife do-while-schleife do statement while (expression); Bedingungsprüfung am Ende der Schleife, d.h. nach Abarbeiten der Anweisungen im Rumpf Sog. annehmende Schleife, da darin enthaltene Anweisungen mindestens einmal durchlaufen werden Beispiel: var i=0; do { i -= 2; alert (i); } while (i>0); WEP.6.24

26 Schleifen Fußgesteuerte Schleife (cont.) do-while-schleife do statement while (expression); Schleifenrumpf ausführen Bedingung erfüllt? ja nein WEP.6.25

27 Schleifen Arrays durchlaufen for-schleife: Durchwandert angegebenen Bereich des Arrays Beispiel: for (var i=0; i<a.length; i++){ alert(a[i]); } for..in-schleife: Durchwandert immer alle Elemente des Arrays Beispiel: for (var elem in a){ alert(elem); } WEP.6.26

28 Kontrollstrukturen Ergänzende Steuerungsmöglichkeiten break-anweisung Mit break wird Ausführung der aktuellen Schleife abgebrochen Browser setzt Abarbeitung mit Befehl fort, der direkt auf die Schleife folgt Beispiel: for (var i=1; i<=9; i++) { if (i==6) break; ausgabe.innerhtml += "i="+i+"<br>"; } ausgabe.innerhtml += "Ende.<br>"; Ausgabe wird nach der Zahl 5 abgebrochen Nach der 5 wird bereits Ende. ausgegeben WEP.6.27

29 Kontrollstrukturen Ergänzende Steuerungsmöglichkeiten (cont.) continue-anweisung Nach continue folgende Befehle im Schleifenrumpf werden übersprungen Browser setzt Schleife mit nächstem Schleifendurchgang fort Beispiel: for (var i=1; i<=9; i++) { if (i==6) continue; ausgabe.innerhtml += "i="+i+"<br>"; } ausgabe.innerhtml += "Ende.<br>"; Ausgabe der Zahl 6 wird übersprungen 7, 8 und 9 werden wieder ausgegeben, danach dann Ende. WEP.6.28