webengineering - javascriptvilas/webeng-ii/webeng_js.pdfjavascript - historie 2 • interpretierte...

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:


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


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)


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:


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.


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.


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.


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>


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.


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:


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.


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)


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.


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


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"


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


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


22

Datentypen:

integerbooleanfloatstring

GanzzahlLogischer Wert (true/false)FließkommazahlZeichenkette

nullundefinedobject

NULL (leere Variable ohne speziellen Typ)Nicht initialisierte VariableObjekt (Referenztypen: Objekte, Arrays, Funktionen)


23

56.60450xFF061

Dezimal, GleitkommawertDezimal, GanzzahlwertHexadezimalOctal

Zahlenliterale:


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“


25

"Hello"'Hello'

String in doppelten AnführungszeichenString in einfachen Anführungszeichen

Stringliterale:

Stringeigenschaften:

s.length;

• Enthält die Länge des Strings s.


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:


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


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


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.


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“


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.


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.


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.


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


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 -


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


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>


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>


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>


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>


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>


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


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


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>


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


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>


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>


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>


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>


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


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>

webengineering - javascriptvilas/webeng-ii/webeng_js.pdfjavascript - historie 2 • interpretierte...

Documents