Webbasierte Programmierung Eine Einführung mit anschaulichen Beispielen aus der HTML5-Welt apl. Prof. Dr. Achim Ebert
Inhalt Kapitel 5: JavaScript Erste Schritte in JavaScript Variablen Definition Typen Initialisierung Namen Berechnungen Operatoren Arrays WEP.5.1
Erste Schritte in JavaScript Der Kreis schließt sich... HTML: die Struktur CSS: die Darstellung JavaScript: das Verhalten Ziel: JavaScript-Code schreiben, der im Browser ausgeführt wird und Interaktion ermöglicht! ECMAScript Standardisierung der europ. Organisation ECMA JavaScript und JScript sind Implementierungen Ziel: Verhindern, dass JavaScript und JScript sich zu stark auseinanderentwickeln Aktuell: ECMAScript 5.1 (nur neuere Browser!) Hier: i.d.r. Beschränkung auf ECMAScript 3 WEP.5.2
Erste Schritte in JavaScript JavaScript-Code einfügen HTML-Tag: <script>... </script> Alles innerhalb dieser Tags wird als Skriptsprache interpretiert Attribut type="text/javascript" Teilt Browser mit, dass die gewählte Skriptsprache JavaScript ist Auch andere Sprachen möglich, z.b. VBScript Im HTML-Dokument können beliebig viele <script>-tags verwendet werden Code im <head> oder <body>-teil Guter Stil: nur im <head> Skripts im <body>-teil vermischen HTML und Skriptsprache Hier: im <body>-teil, um Beispiele einfach zu halten WEP.5.3
Erste Schritte in JavaScript JavaScript-Code einfügen (cont.) Beispiel: Hinweistext ausgeben <!DOCTYPE html> <html> <head> <title>hallo Welt!</title> </head> <body> <p> Das ist HTML. </p> <script type="text/javascript"> alert("das ist JavaScript!"); </script> </body> </html> WEP.5.4
Erste Schritte in JavaScript JavaScript-Code einfügen (cont.) Beispiel: Einfache Berechnungen <script type="text/javascript"> alert (18 + 12 * 2012); </script> Mehrere JavaScript-Befehle Jeder JavaScript-Befehl wird mit Semikolon ; abgeschlossen In den meisten Sprachen ist Semikolon Pflicht In JavaScript: Semikolon nur vorgeschrieben, wenn mehrere Befehle in einer Zeile Browser arbeitet Quellcode von oben nach unten ab Befehle werden in Reihenfolge ihres Vorkommens interpretiert und ausgeführt WEP.5.5
Erste Schritte in JavaScript Reaktion auf Benutzerinteraktionen Benutzereingaben lösen Events (Ereignisse) aus Sog. Eventhandling ist zentraler Mechanismus in JavaScript Beispiel: Hinweis nach Klick auf Schaltfläche <form> <input type="button" value="ok" onclick="alert('done!')"> </form> input-eigenschaft onclick definiert, wie bei einem Klick auf den Button zu reagieren ist (Event-Handler) Code hinter onclick muss in Anführungszeichen stehen (Teil von HTML!) Im Argument von alert ebenfalls Anführungszeichen nötig unterschiedliche Art verwenden! WEP.5.6
Erste Schritte in JavaScript Kommentare Einzeilige Kommentare Einleitung durch zwei Schrägstriche: // Alles rechts davon ist Kommentar Beispiel: alert("ok"); // Hinweisfenster oeffnen Mehrzeilige Kommentare Eingeschlossen in: /*... */ Alles dazwischen ist Kommentar Beispiel: /* Auskommentiert alert("ok"); Hinweisfenster oeffnen */ WEP.5.7
Erste Schritte in JavaScript Auslagerung des JavaScript-Codes Gesamter JavaScript-Code kann in externe Datei ausgelagert werden, sog. js-bibliotheksdatei Dateiendung:.js HTML referenziert dann auf js-datei Pfad-Angabe (relativ/absolut) oder vollständige URL Ziel: saubere Trennung von HTML und JavaScript Beispiel alert (18 + 12 * 2012); rechne.js <body> <script type="text/javascript" src="rechne.js"> </script> </body> HTML-Datei mit Referenz auf js-datei WEP.5.8
Motivation Variable ist Speicherstelle im Computer, in der unterschiedliche Werte abgelegt werden können Ziel: Ergebnis einer Berechnung oder Eingabe merken oder zwischenpuffern Beispiel: Umrechnung Celcius in Fahrenheit Formel: f = 9/5 * c + 32 Herangehensweise: Celsius- und Fahrenheit-Werte in Variable ablegen und dann ausgeben JavaScript-Code: var c = 100; var f = 9 / 5 * c + 32; alert ( c + "C = " + f + "F"); Code immer noch sehr starr später Eingabe von Werten über Formulare! WEP.5.9
Definition von Variablen Für jede Variable muss im Computer Speicherplatz reserviert werden Schlüsselwort var für Deklaration der Variablen JavaScript: explizite Deklaration mittels var vor der ersten Verwendung nicht zwingend Andere Sprachen: deutlich strenger! ECMAScript 5: Deklaration im Strict Mode ebenfalls vorgeschrieben! Daher: Deklaration vor Verwendung angewöhnen! Speichern von Werten in Variablen Ganze Zahlen: var c = 100; Kommazahlen: var d = 12.5; Texte: var s = "Hallo"; Boole sche Werte: var b = true; WEP.5.10
Variablentypen Andere Sprachen: Festlegung nötig, für was eine Variable verwendet werden soll Bezeichnung: strong typing JavaScript: Unterschiedliche Wertetypen können in der selben Variablen gespeichert werden! Bezeichnung: loose typing Für Programmierer bequem Aber: Effizienz geht verloren (Speicherplatzverschwendung) Ggf. Probleme beim Verwenden verschiedener Variablentypen in einem Ausdruck Interpretation des Computers ggf. anders als Intention des Programmierers, z.b.: var x = "5"; var y = 12; var z = x + y; WEP.5.11
Initialisierung von Variablen Erstmalige Zuweisung eines Wertes an eine Variable heißt Initialisierung Wird oft vom Programmierer beim Anlegen gemacht, z.b. var y = 12; Wert einer Variablen ohne initiale Zuweisung Beispiel: var x; In JavaScript erhält Variable den Wert undefined In stärker typisierten Sprachen ist dies i.d.r. anders, ganze Zahlen werden hier z.b. mit 0 initialisiert. WEP.5.12
Variablennamen Namen so wählen, dass man auf den Inhalt schließen kann Beispiel: var celsius=100; statt var c=100; JavaScript ist case-sensitive Groß- und Kleinschreibung wird unterschieden Beispiel: celsius, Celsius, CELSIUS Alle drei sind erlaubt Aber: alle drei sind unterschiedliche Variablen! Potentielle Fehlerquelle!! Beispiel: var Cel=5; alert (cel); Einheitliche Schreibweise angewöhnen! Variablennamen klein schreiben Zusammensetzung mehrerer Wörter in CamelCase: wertvorstart = 0; Alternativ Unterstriche: wert_vor_start = 0; WEP.5.13
Variablennamen (cont.) Reservierte Wörter dürfen nicht als Variablenname verwendet werden! Beispiele: break do else function public while Aufbau von Variablennamen Im Namen dürfen ausschließlich Buchstaben, Zahlen und Unterstriche (underscore: _) vorkommen Satz- oder Sonderzeichen (wie +, $, %) nicht erlaubt (auch keine Leerzeichen!) Erstes Zeichen darf keine Zahl sein Beispiele für erlaubte Namen: yxz HaLLo123 Mein_Name3_x Beispiele für nicht erlaubte Namen: 7Zwerge WertIn% Mein Name WEP.5.14
Berechnungen Berechnungen im Computer nach mathematischen Regeln Beispiele: x=2 Variable x wird Wert 2 zugewiesen x=2+3 Summe aus 2 und 3 wird berechnet und Ergebnis der Variablen x zugewiesen Unterschied zur Schulmathematik (Einfaches) Gleichheitszeichen steht in der Informatik nicht für Gleichheit, sondern für Zuweisung! Im Gegensatz zur Mathematik ist daher z.b. x = x + 1 eine korrekte Darstellung Zunächst wird Ergebnis von x+1 berechnet Dieses Ergebnis wird dann wieder x zugewiesen Beispiel: x=5; x=x+1; x hat nun Wert 6 WEP.5.15
Berechnungen (cont.) Ungenauigkeiten bei Kommazahlen Interne Behandlung von Kommazahlen führt bei JavaScript teilweise zu Ungenauigkeiten Beispiel: var x = 0.1 + 0.2; alert (x); Ergebnis ist nicht wie erwartet 0.3, sondern 0.30000000000000004 Problem kann nur durch Rundung mittels der JavaScript-Methode Math.round() behoben werden WEP.5.16
Operatoren Rechenoperatoren Addition: + Subtraktion: - Multiplikation: * Division: / Modulo: % Inkrement und Dekrement Variable um 1 erhöhen bzw. erniedrigen Kommt in Programmen häufig vor Daher Kurzschreibweise: ++ bzw. -- Beispiele: x++ bzw. ++x: x um 1 erhöhen x-- bzw. --x: x um 1 erniedrigen WEP.5.17
Operatoren (cont.) Inkrement und Dekrement (cont.) Warum gibt es jeweils zwei Schreibweisen? Für sich allein stehend kein Unterschied Unterschiede aber in Verbindung mit Zuweisung Beispiel: y = x++; vs. y = ++x; Operator vor Variablennamen Zuerst wird Inkrement/Dekrement durchgeführt, dann die Zuweisung Beispiel: x=2; y=++x; Ergebnis: zunächst wird x um 1 erhöht auf 3, dann wird das Ergebnis y zugewiesen. y ist also 3. Operator nach Variablennamen Zuerst wird die Zuweisung durchgeführt, dann erst Inkrement/Dekrement Beispiel: x=2; y=x++; Ergebnis: zunächst wird Wert von x y zugewiesen, dann erst x um 1 erhöht. y ist also 2. WEP.5.18
Operatoren (cont.) Boole sche Operatoren Arbeiten mit Boole schen Werten true und false Negationsoperator! Beispiel: x=true; y=!x; y wird Wert false zugewiesen AND-Operator && Beispiel: x=true; y=false; z=x&&y; z wird Wert false zugewiesen OR-Operator Beispiel: x=true; y=false; z=x y; z wird Wert true zugewiesen WEP.5.19
Operatoren (cont.) Bit-Operatoren Der Vollständigkeit halber... >> verschiebt Bits nach rechts << verschiebt Bits nach links & bitweises AND bitweises OR ^ bitweises XOR ~ bitweises NOT, tauscht alle Nullen in Einsen und umgekehrt Beispiel: Ist x = 6 = 0110 2 so ist: x & 5 = 0110 & 0101 = x 5 = 0110 0101 = WEP.5.20
Operatoren (cont.) Zuweisungsoperatoren Einfacher Zuweisungsoperator: = In JavaScript gibt es zur kürzeren Darstellung noch weitere Zuweisungsoperatoren x += 5 entspricht x = x+5 x -= 5 entspricht x = x-5 x *= 5 entspricht x = x*5 x /= 5 entspricht x = x/5 x %= 5 entspricht x = x%5 x &= 5 entspricht x = x&5 x = 5 entspricht x = x 5... WEP.5.21
Operatoren (cont.) Vergleichsoperatoren Gleichheitsprüfung zweier Variablen wird mit Vergleichsoperator == durchgeführt Liefert bei Gleichheit true, sonst false Beispiel: x = y==z Achtung! Verwechslungsgefahr! Einfaches Gleichheitszeichen ist Zuweisung, keine Überprüfung auf Gleichheit! Beispiel: x=2; y=3; z=x==y; Ergibt false als Wert für z Beispiel: x=2; y=3; z=x=y; Ergibt 3 als Wert für z (Zuweisung ist rechtsassoziativ, d.h. x wird Wert von y zugewiesen, dann z (neuer) Wert von x) WEP.5.22
Operatoren (cont.) Vergleichsoperatoren In JavaScript verfügbare Vergleichsoperatoren == gleich!= ungleich === strikt gleich!== strikt ungleich < kleiner > größer <= kleiner gleich >= größer gleich Strikte Vergleichsoperatoren Von Bedeutung bei Vergleich von Variablen unterschiedlichen Datentyps == und!= wandeln zu vergleichende Werte zunächst um und vergleichen anschließend Strikte Operatoren vergleichen ohne Umwandlung! WEP.5.23
Operatoren (cont.) Vergleichsoperatoren Strikte Vergleichsoperatoren (cont.) Beispiel: var str = "3"; var zahl = 3; var gl = (str == zahl); var ugl = (str === zahl); Wert der Variablen gl ist true, da beide zu vergleichende Werte in Zahlen umgewandelt werden Wert der Variablen ugl ist false, da keine Umwandlung erfolgt und somit die Inhalte unterschiedlich sind WEP.5.24
Operatoren (cont.) typeof-operator Abfrage des Typs einer Variable Mögliche Resultate: undefined, boolean, number, string, function, object Beispiel: var x = 5; var typ = typeof x; Variable typ wird Wert number zugewiesen Leichte Überprüfung, ob Variable überhaupt definiert ist (Resultat undefined). Vermeidung von Problemen im weiteren Programmablauf... WEP.5.25
Arrays Ziel: gleichartige Variablen zusammenfassen Array definieren Zum Definitionszeitpunkt ist die Zahl der Elemente noch nicht bekannt: var a = new Array(); Größe des Arrays bei Definition bekannt: var a = new Array(20); Array schon bei Definition mit Anfangswerten vorbelegen: var a = new Array("Hans","Anja","Olli"); Zugriff auf Array-Elemente Angabe des Index in eckigen Klammern, beginnend mit Index 0 (!) Beispiel: Zugriff auf das zweite Element: var name = a[1]; WEP.5.26
Arrays (cont.) Beispiel <script type="text/javascript"> var autos = new Array(4); var i = 0; autos[0] = "Audi"; autos[1] = "BMW"; autos[2] = "Lada"; alert(autos[i]); alert(autos[3]); </script> Ausgabe: WEP.5.27
Arrays (cont.) Bestimmung der Länge eines Arrays mit length Beispiel: var l = autos.length; Arrays in JavaScript sind immer dynamische Arrays Können Ihre Größe verändern, da erweiterbar Beispiel: var a = new Array(2); // Länge 2 a[3] = "mehr"; // Länge jetzt 4 WEP.5.28