Marcel Vilas DHBW - Stuttgart
Webengineering
1
JavaScript
JavaScript - Historie
2
• Interpretierte Programmiersprache mit objektorientierten Fähigkeiten
• Syntaktisch ähnlich zu C, C++ oder Java
• Wird vom Browser ausgeführt und ist im HTML eingebettet (clientseitiges JavaScript)
• Standardisiert durch ECMA (aber browserspezifische Erweiterungen)
• Aktuelle Version in allen Browsern ist Version 5.1 (2011)
• Lange Pause in der Entwicklung (mittlerweile jährliche Version)
• Name kommt von Netscape/Mozilla, richtiger Name: ECMAScript
• Kann auch in anderen Anwendungen als eingebettete Skriptsprache verwendet werden (z.B. Phillips Pronto Fernbedienung)
JavaScript - Sicherheit
3
• Kann keine Dateien auf dem Client lesen oder schreiben
• Hat keine Netzwerkfunktionalitäten, um externe Verbindungen aufzubauen
• Browsereinstellungen:
‣ Pop-ups unterdrücken
‣ self.close() auf andere Fenster unterdrücken
‣ Verschleierung von Linkzielen unterdrücken
‣ Zu kleine Fenster verbieten
‣ Modifizierung von Value-Attribut bei Fileuploads verhindern
‣ Lesen von externen Dokumenten verbieten
Javascript - ein Beispiel
4
<html> <head> <script type="text/javascript"> alert('Hello World!'); </script> </head> <body> </body> </html>
• Einbindung von JS-Anweisungen in ein HTML-Dokument geschieht innerhalb des Skript-Tags
• Syntax an C angelehnt: Anweisungen werden mit Semikolon beendet
<html> <head> <script type="application/javascript"> alert('Hello World!'); </script> </head> <body> </body> </html>
<html> <head> <script language="JavaScript"> alert('Hello World!'); </script> </head> <body> </body> </html>
JavaScript - Grundlagen
5
<script type="text/javascript"> alert('einzeiliger Kommentar.'); //einzeiliger C-Kommentar bis Zeilenende oder JS-Blockende </script>
<script type="text/javascript"> alert('Zeilenkommentar'); /* mehrzeiliger Kommentar, der bis zum Kommentarende geht und auch '?>' und HTML einschließt. */ </script>
Kommentare:
JavaScript - Grundlagen
6
Dateien einschließen:
<script type="text/javascript" src="../js/functions.js"></script>
• Das src Attribut nimmt eine URL an (einbinden externer Dateien möglich)
• Hat üblicherweise die Dateiendung ".js"
• Enthält reines JavaScript und kein HTML
• Vorteile:
‣ Vereinfacht die HTML-Dateien
‣ Wird einmal definiert, kann aber mehrmals verwendet werden
‣ Wird vom Browser gecacht und verringert die Ladezeit
JavaScript - Grundlagen
7
HTML Event-Handler
onclickondblclickonmousedownonmouseup
Klick auf Element (Buttons, a, area)
Doppelklick auf Element (Buttons, a, area)
Sobald Maustaste gedrückt wird (meiste Elemente)
Sobald Maustaste losgelassen wird (meiste Elemente)
onmouseoveronmouseout
Sobald Mauszeiger über Element ist (meiste Elemente)
Sobald Mauszeiger Element verlässt (meiste Elemente)
onchangeonload
Wenn Benutzer Wert verändert (input, select, textarea)
Wenn das Dokument vollständig geladen hat (body)
JavaScript - Grundlagen
8
Das Window Objekt:
• Oberstes Objekt der JavaSkript-Objektfamilie
• Erlaubt die Abfrage und Kontrolle über das Dokumentfenster
• Das aktuelle Fenster kann über die Schlüsselwörter "window" oder "self" angesprochen werden
documenteventhistorylocation
Inhalt des BrowserfenstersEreignisse ermitteln und weiterverarbeitenBesuchte Webseiten des AnwendersURI der angezeigten Seite
Unterobjekte:
JavaScript - Grundlagen
9
Window-Eigenschaften:window.outerWidth; window.outerHeight;
• Größe des Browserfensters auf dem Desktop.
window.screenX; window.screenY;
• Position des Browserfensters auf dem Desktop.
window.innerWidth; window.innerHeight;
• Größe des Viewports (Inhaltsbereich des Browserfensters).
window.pageXOffset; window.pageYOffset;
• Größe des bereits gescrollten Bereichs.
JavaScript - Grundlagen
10
Window-Methoden:window.open([string URL], [string name], [string options]);
• Öffnet ein neues Browserfenster.
window.close();
• Schließt das Browserfenster.
window.moveto(integer x, integer y);
• Verschiebt das Fenster an die angegebene Position.
window.moveby(integer x, integer y);
• Verschiebt das Fenster um die angegebenen Werte.
JavaScript - Grundlagen
11
Window-Methoden:window.scrollTo(integer x, integer y);
• Scrollt das Browserfenster auf die angegebene Position.
window.scrollBy(integer x, integer y);
• Scrollt das Browserfenster um die angegebenen Werte.
window.resizeTo(integer w, integer h);
• Verändert die Fenstergröße auf die anegegebenen Werte.
window.resizeBy(integer x, integer y);
• Verändert die Fenstergröße um die anegegebenen Werte.
JavaScript - Grundlagen
12
Location-Objekt:
Location-Methoden:location.replace(string url);
• Ersetzt die Window-URL mit der angegebenen und zeigt diese an.
location.reload();
• Läd die aktuell angezeigte Webseite neu.
<script type="text/javascript"> // location bezieht sich auf window.location alert(location); location = "othersite.html"; location.reload(); </script>
JavaScript - Grundlagen
13
Dialogfenster anzeigen:alert(string s);
• Zeigt Meldung s an und Erwartet Bestätigung von Benutzer.
confirm(string s);
• Zeigt eine Meldung an und frägt den Benutzer um Bestätigung/Abbruch.
prompt(string s, [string d]);
• Fordert den Benutzer zur Eingabe eines Strings s auf, wobei das Feld mit d vorausgefüllt ist.
JavaScript - Grundlagen
14
Das Document Objekt:
• Bezieht sich auf den Inhalt der im Browser angezeigt wird
• Erlaubt Zugriff auf den HTML-Elementenbaum (DOM)
• Auf das aktuelle Dokument kann man mit dem Schlüsselwort „document“ zugreifen
HTML-Elementeformsimageslinks
HTML-Elemente, die direkt im body definiert sindArray mit allen Formular-Objekten des DokumentsArray mit allen Bild-Objekten des DokumentsArray mit allen Link-Objekten des Dokuments
Unterobjekte:
JavaScript - Grundlagen
15
Document-Eigenschaften:document.bgColor;
• Enthält die Hintergrundfarbe des Dokuments (bgcolor-Attribut von <body>)
document.cookie;
• Erlaubt das Lesen/Schreiben von HTTP-Cookies.
document.domain;
• Erlaubt Interaktion zwischen Webservern in der gleichen Domain.
document.lastModified;
• Enthält das Veränderungsdatum des Dokuments.
JavaScript - Grundlagen
16
Document-Eigenschaften:document.location;
• Veraltetes Synonym für die Eigenschaft URL.
document.referrer;
• URL, die der Benutzer eingegeben hat.
document.title;
• Titel des Dokuments, wie er im <title>-Element definiert ist.
document.URL;
• URL aus des Dokuments (entspricht meist window.location.href)
JavaScript - Grundlagen
17
Elemente im DOM finden:
ducument.getElementsByTagName(string tag);
• Liefert ein Array mit Objekten aller Vorkommen des angegebenen Tags.
ducument.getElementsByName(string name);
• Liefert ein Array mit Objekten aller Elemente mit angegebenen Namen.
ducument.getElementById(string name);
• Liefert das Element mit angegebener Id.
JavaScript - Grundlagen
18
Aufruf von JavaScript-Code:
<script type="text/javascript"> var name = "Michael Krause"; </script> <body onload="execute();"> <a href="javascript:var d = new Date(); alert('Es ist: ' + d);"> Suprise! </a> <div onklick="alert('Gut gemacht!');">Klick mich!</div> </body>
• Beim Laden des Dokuments wird der JavaScript-Code einmalig ausgeführt
• Durch Events kann weiterer JavaSkript-Code ausgeführt werden
• Durch eine JavaSkript-Pseudo-URL kann JavaSkript-Code ausgeführt werden
JavaScript - Grundlagen
19
Variablen:<script type="text/javascript"> name = "Michael Krause"; var i = j = 1 + 4; zahl = 14.59, zahl2 = Math.cos(0.75); delete name; </script>
• Variablenname: Unicode (beginn mit $, _, Buchstaben oder Zahlen)
• Deklaration mit Schlüsselwort "var" (deklariert lokale Variable)
• Initialisierung kann zusammen mit Deklaration erfolgen.
• Deklarierte aber nicht initialisierte Variablen sind undefined
• Variablentyp wird bei der Zuweisung automatisch erkannt und verwaltet
• Variablen werden wenn möglich automatisch umgewandelt
• Löschen einer Variablen mit dem Schlüsselwort "delete"
JavaScript - Grundlagen
20
Gültigkeitsbereich:
<script type="text/javascript"> gzahl = 22; // globale Variable function ausgabe() { gzahl = 33; // Zugriff auf globale Variable var gzahl = 44; // lokale Variable alert(gzahl); //Ausgabe: 44 } ausgabe(); alert(gzahl); //Ausgabe: 33 </script>
• Lokale Variablen "überschreiben" bei Deklaration globale Variablen
• Lokale Variablen sind innerhalb der ganzen Funktion gültig unabhängig davon wo sie definiert wurden
JavaScript - Grundlagen
21
Konstanten:
<script type="text/javascript"> const var PI = 3.14159265; alert(PI); //Ausgabe: 3.14159265 </script>
• Konvention: Name in Großbuchstaben
• Können nicht mehr nachträglich (zur Laufzeit) geändert werden
JavaScript - Grundlagen
22
Datentypen:
integerbooleanfloatstring
GanzzahlLogischer Wert (true/false)FließkommazahlZeichenkette
nullundefinedobject
NULL (leere Variable ohne speziellen Typ)Nicht initialisierte VariableObjekt (Referenztypen: Objekte, Arrays, Funktionen)
JavaScript - Grundlagen
23
56.60450xFF061
Dezimal, GleitkommawertDezimal, GanzzahlwertHexadezimalOctal
Zahlenliterale:
JavaScript - Grundlagen
24
Vordefinierte Konstanten:
Infinity
NaN
Number.MAX_VALUE
Number.MIN_VALUE
Besonderer Wert für „unendlich“
Besonderer Wert für „Not-a-Number“
Größte darstellbare Zahl
Kleinste darstellbare Zahl
Number.NaN
Number.POSITIVE_INFINITY
Number.NEGATIVE_INFINITY
Besonderer Wert für „Not-a-Number“
Besonderer Wert für „unendlich“
Besonderer Wert für „negativ unendlich“
JavaScript - Grundlagen
25
"Hello"'Hello'
String in doppelten AnführungszeichenString in einfachen Anführungszeichen
Stringliterale:
Stringeigenschaften:
s.length;
• Enthält die Länge des Strings s.
JavaScript - Grundlagen
26
Maskierte Zeichen:\' \"
\n
\r
\t
Anführungszeichen
Zeilenumbruch (newline)
Zeilenumbruch (carriage return)
Tabulator
\\ Backslash
\0-\777
\0x-\xFF
Zeichen in Octal
Zeichen in Hexadecimal
\r\n Zeilenumbruch Windows \n Zeilenumbruch Unix
\r Zeilenumbruch Mac
Zeilenumbrüche:
JavaScript - Grundlagen
27
Stringmanipulation:s.concat(mixed val, ...);
• Verkettet mehrere Werte mit dem String s
s.charAt(integer p);
• Ermittelt das Zeichen an Position p der Zeichenkette
s.substring(int from, [integer to]);
• Gibt einen Teilstring zurück beginnend bei from bis Ende bzw. to
s.substr(int from, [integer l]);
• Gibt einen Teilstring zurück beginnend bei from mit einer Länge l
JavaScript - Grundlagen
28
Stringmanipulation:s.splice(int from, [integer to]);
• Wie substring(), kann aber auch mit negativen Werten umgehen.
s.split(string sep, [integer n]);
• Zerteilt den String s an sep in ein Array (optional max. n mal).
s.toLowerCase();
• Gibt eine Kopie des Strings s in Kleinbuchstaben zurück
s.toUpperCase();
• Gibt eine Kopie des Strings s in Großbuchstaben zurück
JavaScript - Grundlagen
29
Stringmanipulation:s.indexOf(string a, [integer p]);
• Ermittelt die Position von a im String s (optional beginnend bei p).
s.lastIndexOf(string a, [integer p]);
• Ermittelt die letzte Position von a im String s (optional beginnend bei p).
s.match(regexp r);
• Gibt einen oder mehrere Auftreten von r im String s als Array zurück.
s.replace(regexp r, string c);
• Ersetzt alle Vorkommen von r im String s durch c.
JavaScript - Grundlagen
30
<script type="text/javascript"> var arr = new Array(); arr[0] = "first"; arr[1] = 508; arr[3] = true; //arr[2] = undefined
arr2 = new Array("first", 508, true);
var arr3 = ["first", 508, true]; </script>
• In JavaScript gibt es keine assoziativen Arrays
• Objekte können wie assoziative Arrays verwendet werden
<script type="text/javascript"> arr = new Object(); arr["Val1"] = "first"; arr["Val2"] = 508; arr["Val3"] = true;
arr2 = new Object(); arr2.Val1 = "first"; arr2.Val2 = 508; </script>
Arrays:
indiziertes Array „assoziatives Array“
JavaScript - Grundlagen
31
Array-Eigenschaften:a.length;
• Enthält die Anzahl der Elemente im Array a.
a.reverse();
• Dreht die Reihenfolge der Elemente im Array a um (kein neues Array).
Array-Funktionen:
a.join(string s);
• Setzt alle Elemente von a getrennt durch s in einen String zusammen.
JavaScript - Grundlagen
32
Array-Funktionen:a.sort();
• Sortiert das Array a (erzeugt kein neues Array).
a.concat(mixed b, ...);
• Erzeugt ein neues Array, in dem alle Elemente zusammengesetzt wurden.
a.slice(integer from, [integer to]);
• Gibt ein Teilarray beginnend bei from bis Ende bzw. to zurück.
a.splice(integer p, integer n, [mixed p, ...]);
• Löscht n Elemente ab p und fügt neue Elemente an p in das Array a ein.
JavaScript - Grundlagen
33
Array-Funktionen:a.pop();
• Entfernt das letzte Element des Array a und gibt es zurück.
a.push(mixed d, ...);
• Fügt die angegebenen Elemente an das Ende des Array a an.
a.shift();
• Entfernt das erste Element des Array a und gibt es zurück.
a.unshift(mixed i, [mixed i2, ...]);
• Fügt die angegebenen Elemente am Anfang des Array a an.
JavaScript - Grundlagen
34
Konvertierung von Datentypen:<script type="text/javascript"> zahl = 1; string = zahl + ""; // Konvertierung in String (dirty) string = String(zahl); // Konvertierung in String (object) string = zahl.toString(); // Konvertierung in String (toString) zahl = string - 0; // Konvertierung in Number (dirty) zahl = parseInt(string); // Konvertierung in Integer float = parseFloat("56.33"); // Konvertierung in Float </script>
• Konvertierung zwischen Datentypen passiert automatisch
• Konvertierung in Zahlen mit parseInt() und parseFloat()
• Bei Konvertierung von Objekten in Strings wird toString() aufgerufen
• Bei Konvertierung von Objekten in Number wird valueOf() aufgerufen oder toString(), falls nicht definiert
JavaScript - Grundlagen
35
Konvertierung von Datentypen:String Zahl Boolean Object
undefined "undefined" NaN false Fehler
null "null" 0 false Fehler
"" - 0 false String
String - parsed value or NaN true Stringt
0 "0" - false Number
NaN "NaN" - false Number
infinity "Infinity" - true Number
-infinity "-Infinity" - true Number
Number parsed value - true Number
true "true" 1 - Boolean
false "false" 0 - Boolean
object toString() valueOf() or toString() or NaN true -
JavaScript - Grundlagen
36
Variablentypen und -zustände:
<script type="text/javascript"> alert(typeof zahl); //Ausgabe: undefined zahl = 144; alert(typeof zahl); //Ausgabe: number alert(zahl instanceof Date); //Ausgabe: false </script>
• Prüfung, ob Variable einen bestimmten Typ hat mit "instanceof"-Operator
• Bestimmung des Datentyps mit "typeof"-Operator
JavaScript - Grundlagen
37
Arithmetische Operatoren:<script type="text/javascript"> x + y; // Addition x - y; // Subtraktion x * y; // Multiplikation x / y; // Division x % y; // Modulus (Rest der Ganzzahldivision) x++; // Inkrementation x--; // Dekrementation </script>
Logische Operatoren:<script type="text/javascript"> x && y; // wahr: x UND y sind wahr x || y; // wahr: x ODER y sind wahr !x; // wahr: x ist falsch (negierter Wert) </script>
JavaScript - Grundlagen
38
Vergleichsoperatoren:
<script type="text/javascript"> x == y; // Gleichheit x != y; // Ungleichheit x === y; // Identisch x !== y; // Nicht identisch x < y; // Größer als x > y; // Kleiner als x <= y; // Größer als oder gleich x >= y; // Kleiner als oder gleich </script>
JavaScript - Grundlagen
39
Zuweisungsoperatoren:
<script type="text/javascript"> $x = $y; // Zuweisung $x += $y; // Hinzuaddieren einer Zahl zu $x $x -= $y; // Abzug einer Zahl von $x $x *= $y; // Vielfaches von $x $x /= $y; // Teilung von $x $x %= $y; // $x % $y und Zuweisung des Ergebnisses in $x $s += $p; // Erweiterung einer Zeichenkette </script>
JavaScript - Grundlagen
40
<script type="text/javascript"> if (test) { // Blockanweisung } else if (test2) { // Blockanweisung } else { // Blockanweisung } </script>
Bedingungen - if/elseif/else:
Kurzschreibweise: <script type="text/javascript"> if (t) { r = 1; } else { r = 0; } </script>
<script type="text/javascript"> r = t ? 1 : 0; </script>
JavaScript - Grundlagen
41
Bedingungen - switch/case:<script type="text/javascript"> d = new Date(); switch(d.getHours()) { case 8: alert("Guten Morgen"); break; case 9: alert("Bisschen spät heute?"); break; case 10: alert("Jetzt gibt‘s Ärger"); break; case 11: alert("Lass dich krankschreiben"); break; default: alert("Sonstwann am Tag ..."); } </script>
JavaScript - Grundlagen
42
<script type="text/javascript"> while (test) { // Blockanweisung }
do { // Blockanweisung } while (test); </script>
<script type="text/javascript"> for (var i=0;i<5;i++) { alert(i); }
for (;;) { if (test) break; } </script>
<script type="text/javascript"> for (for e in [0,1,2]) { // Blockanweisung }
for (for e in forms) { // Blockanweisung } </script>
Schleifen:
while-Schleife for-Schleife for/in-Schleife
JavaScript - Grundlagen
43
Funktionen:<script type="text/javascript"> function name(param, param2, ...) { // Blockanweisung return arguments[2]; } f = function(x, y) {return x*y;} alert(f(2,3)); // Ausgabe: 6 </script>
• Übergabe beliebig vieler Parameter möglich
‣ Auf überzälige Parameter kann über das Array "arguments" zugegriffen werden
‣ Nicht übergebene Parameter sind "undefined"
• Um die Anzahl der übergebenen Parameter, deren Default-Werte und deren Typ muss sich der Programmierer selbst kümmern und innerhalb der Funktion definierten
JavaScript - Grundlagen
44
Formulare:
<head> <script type="text/javascript"> form = document.address; // Form Objekt alert(document.forms[0].elements[0].value); form.plz.value = "54321"; form.reset(); // Setzt das Formular zurück form.submit(); // Sendet das Formular </script> </head> <body> <form name="address" action="action.php" method="post"> <input name="plz" type="text" value="12345"> </form> </body>
JavaScript - Grundlagen
45
Cookies setzen:
name (Pflichtfeld) Enthält Namen + Inhalt (Verbotene Zeichen: Kommas, Semikolons, Leerzeichen). URL-Kodierung des Inhalts ist sinnvoll.
expires (Optional) Lebensdauer des Cookies (Cookie wird nach Ablauf gelöscht)
domain (Optional) Cookie wird nur an den Server gesendet, wenn das Feld passt.Teilmatch reicht. Default: Hostname. Muss mindestens 3 Punkte enthalten.
document.cookie = "name=[Name];expires=[Datum];path=[Pfad];domain=[Domain];secure"
path (Optional) Pfad der URL (nach Domain). Cookie wird nur an den Server gesendet, wenn das Feld mit der URL der Anfrage übereinstimmt
secure (Optional) Cookie wird nur über HTTPS übertragen
JavaScript - Grundlagen
46
Cookies lesen:
<script type="text/javascript"> var cookies = document.cookie; var pos = cookies.indexOf("version="); if (pos != -1) { var start = pos + 8; var end = cookies.indexOf(";", start); if (end == -1) end = cookies.length; var value = cookies.substring(start, end); value = decodeURIComponent(value); } </script>
JavaScript - Grundlagen
47
Ausgabe von HTML:
<script type="text/javascript"> document.write("<p>Dieser Text wird angezeigt.</p>");
p = document.createElement("p"); t = document.createTextNode("Dieser Text wird angezeigt."); p.appendChild(t);
table = document.createElement("table"); table.innerHTML("Dieser Text wird angezeigt."); </script>
JavaScript - Grundlagen
48
Setzen von HTML-Attributen:
<head> <script type="text/javascript"> table = document.getElementsByTagName("table")[0]; table.border = 1; table.setAttribute("border", "1"); </script> </head> <body> <table border="0"> <tr><td>Zelle1</td></tr> </table> </body>
JavaScript - Grundlagen
49
Setzen von CSS-Eigenschaften:
<head> <script type="text/javascript"> table = document.getElementsByTagName("table")[0]; table.style.border = 1; table.style.left = 300 + "px"; </script> </head> <body> <table border="0"> <tr><td>Zelle1</td></tr> </table> </body>
JavaScript - Grundlagen
50
Übungen:
1. Bitten Sie mit Hilfe einer Dialogbox, um eine Bestätigung vor dem Absenden des Formulars.
2. Validieren Sie das Formular mit Hilfe von regular expressions. Zeigen Sie eine Fehlermeldung am Kopf des Dokumentes an, falls die Eingabe nicht valide ist.
3. Färben Sie den Hintergrund des Elements, das einen nicht validen Inhalt hat.
JavaScript - Ajax
51
• AJAX = Asynchronous JavaScript and XML
• Keine neue Programmiersprache, sondern API im JavaScript
• Konzept der asynchronen Übertragung zwischen Browser und Server
• Ermöglicht Ausführung von HTTP-Anfragen während eine Seite angezeigt wird
• Ermöglicht die Veränderung der Seite ohne diese neu zu laden
JavaScript - Ajax
52
JavaScript - Grundlagen
53
Beispiel:<script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {//IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script>