JavaScript - DHBW Stuttgart

Transcription

Webengineering
JavaScript
Marcel Vilas
Dienstag, 9. Juli 13
1
DHBW - Stuttgart
1
JavaScript - Historie
•
•
•
•
•
•
•
•
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 ab Netscape 4.5 und IE 4
Lange Pause in der Entwicklung (mittlerweile wieder aufgenommen)
Name kommt von Netscape/Mozilla, richtiger Name: ECMAScript
Kann auch in anderen Anwendungen als eingebettete Skriptsprache
verwendet werden (z.B. Phillips Pronto Fernbedienung)
2
2
JavaScript - Sicherheit
•
•
•
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
3
3
Javascript - ein Beispiel
<html>
<head>
<script type="text/
javascript">
alert('Hello World!');
</script>
</head>
<body>
</body>
</html>
•
•
<html>
<head>
<script
type="application/
javascript">
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<script
language="JavaScript">
</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
4
4
JavaScript - Grundlagen
Kommentare:
<script type="text/javascript">
alert('einzeiliger Kommentar.');
//einzeiliger C-Kommentar bis Zeilenende oder JS-Blockende
</script>
alert('Zeilenkommentar');
/* mehrzeiliger Kommentar,
der bis zum Kommentarende geht und auch
'?>' und HTML einschließt.
*/
</script>
5
5
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 gecached und verringert die Ladezeit
6
6
HTML Event-Handler
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout
onchange
onload
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)
Sobald Mauszeiger über Element ist (meiste Elemente)
Sobald Mauszeiger Element verlässt (meiste Elemente)
Wenn Benutzer Wert verändert (input, select, textarea)
Wenn das Dokument vollständig geladen hat (body)
7
7
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
Unterobjekte:
document
event
history
location
Inhalt des Browserfensters
Ereignisse ermitteln und weiterverarbeiten
Besuchte Webseiten des Anwenders
URI der angezeigten Seite
8
8
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.
9
9
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.
10
10
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 angegebenen Werte.
window.resizeBy(integer x, integer y);
•
Verändert die Fenstergröße um die angegebenen Werte.
11
11
Location-Objekt:
// location bezieht sich auf window.location
alert(location);
location = "othersite.html";
location.reload();
</script>
Location-Methoden:
location.replace(string url);
•
Ersetzt die Window-URL mit der angegebenen und zeigt diese an.
location.reload();
•
Lädt die aktuell angezeigte Webseite neu.
12
12
Dialogfenster anzeigen:
alert(string s);
•
Zeigt Meldung s an und Erwartet Bestätigung von Benutzer.
confirm(string s);
•
Zeigt Meldung s an und frägt den Benutzer um Bestätigung/Abbruch.
promt(string s, [string d]);
•
Zeigt Meldung s an und fordert den Benutzer zur Eingabe eines Strings auf,
wobei das Eingabefeld mit d vorausgefüllt ist.
13
13
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
Unterobjekte:
HTML-Elemente
forms
images
links
HTML-Elemente, die direkt im body definiert sind
Array mit allen Formular-Objekten des Dokuments
Array mit allen Bild-Objekten des Dokuments
Array mit allen Link-Objekten des Dokuments
14
14
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.
15
15
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)
16
16
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
(HTML-Attribut: "name").
ducument.getElementsById(string name);
•
Liefert das Element mit angegebener Id (HTML-Attribut: "id").
17
17
Aufruf von JavaScript-Code:
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
18
18
Variablen:
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"
19
19
Gültigkeitsbereich:
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
20
20
Konstanten:
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
21
21
Datentypen:
integer
boolean
float
string
null
undefined
object
Ganzzahl
Logischer Wert (true/false)
Fließkommazahl
Zeichenkette
NULL (leere Variable ohne speziellen Typ)
Nicht initialisierte Variable
Objekt (Referenztypen: Objekte, Arrays, Funktionen)
22
22
Zahlenliterale:
56.60
45
0xFF
061
Dezimal, Gleitkommawert
Dezimal, Ganzzahlwert
Hexadezimal
Octal
23
23
Vordefinierte Konstanten:
Infinity
Besonderer Wert für „unendlich“
NaN
Besonderer Wert für „Not-a-Number“
Number.MAX_VALUE
Größte darstellbare Zahl
Number.MIN_VALUE
Kleinste darstellbare Zahl
Number.NaN
Besonderer Wert für „Not-a-Number“
Number.POSITIVE_INFINITY
Besonderer Wert für „unendlich“
Number.NEGATIVE_INFINITY Besonderer Wert für „negativ unendlich“
24
24
Stringliterale:
"Hello"
'Hello'
String in doppelten Anführungszeichen
String in einfachen Anführungszeichen
Stringeigenschaften:
s.length;
•
Enthält die Länge des Strings s.
25
25
Maskierte Zeichen:
\' \"
Anführungszeichen
\0-\777
Zeichen in Octal
\n
Zeilenumbruch (newline)
\0x-\xFF
Zeichen in Hexadecimal
\r
Zeilenumbruch (carriage return)
\\
Backslash
\t
Tabulator
Zeilenumbrüche:
\r\n
Zeilenumbruch Windows
\n
Zeilenumbruch Unix
\r
Zeilenumbruch Mac
26
26
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
27
27
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
28
28
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.
29
29
Arrays:
var arr = new Array();
arr[0] = "first";
arr[1] = 508;
arr[3] = true; //arr[2] = undefined
arr = new Object();
arr["Val1"] = "first";
arr["Val2"] = 508;
arr["Val3"] = true;
arr2 = new Array("first", 508, true);
arr2 = new Object();
arr2.Val1 = "first";
arr2.Val2 = 508;
</script>
var arr3 = ["first", 508, true];
</script>
indiziertes Array
•
•
„assoziatives Array“
In JavaScript gibt es keine assoziativen Arrays
Objekte können wie assoziative Arrays verwendet werden
30
30
Array-Eigenschaften:
a.length;
•
Enthält die Anzahl der Elemente im Array a.
Array-Funktionen:
a.join(string sep);
•
Setzt alle Elemente von a getrennt durch sep in einen String zusammen.
a.reverse();
•
Dreht die Reihenfolge der Elemente im Array a um (kein neues Array).
31
31
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 b, ...]);
•
Löscht n Elemente ab p und fügt neue Elemente an p in das Array a ein.
32
32
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(integer from, [integer to]);
•
Entfernt das erste Element des Array a und gibt es zurück.
a.unshift(integer from, [mixed p, ...]);
•
Fügt die angegebenen Elemente am Anfang des Array a an.
33
33
Konvertierung von Datentypen:
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,
falls nicht definiert, toString()
34
34
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
String
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
-
35
35
Variablentypen und -zustände:
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
36
36
Arithmetische Operatoren:
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:
x && y; // wahr: x UND y sind wahr
x || y; // wahr: x ODER y sind wahr
!x;
// wahr: x ist falsch (negierter Wert)
</script>
37
37
Vergleichsoperatoren:
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>
38
38
Zuweisungsoperatoren:
$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>
39
39
Weitere Funktionen:
•
•
Mathematische Funktionen (Klasse Math)
‣
‣
‣
‣
floor(), ceil(), round()
cos(), exp(), pow()
min(), max()
random() (Zufallszahl)
Datums- und Zeitfunktionen (Klasse Date)
‣
‣
‣
getDate(), getTime(), getDay(), getHours()
setTime()
parse(), UTC()
40
40
Bedingungen - if/elseif/else:
if (test) {
// Blockanweisung
} else if (test2) {
// Blockanweisung
} else {
// Blockanweisung
}
</script>
Kurzschreibweise:
if (t) {
r = 1;
} else {
r = 0;
}
</script>
r = t ? 1 : 0;
</script>
41
41
Bedingungen - switch/case:
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
42
Schleifen:
<script type="text/
javascript">
while (test) {
// Blockanweisung
}
<script type="text/
javascript">
for (var i=0;i<5;i++) {
alert(i);
}
<script type="text/
javascript">
for (e in [0,1,2]) {
// Blockanweisung
}
do {
// Blockanweisung
} while (test);
</script>
for (;;) {
if (test) break;
}
</script>
for (e in forms) {
// Blockanweisung
}
</script>
while-Schleife
for-Schleife
for/in-Schleife
43
43
Funktionen:
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
44
Formulare:
<head>
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
45
Cookies setzen:
document.cookie = "name=[Name];expires=[Datum];path=[Pfad];domain=[Domain];secure"
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.
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
46
Cookies lesen:
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
47
Ausgabe von HTML:
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
48
Setzen von HTML-Attributen:
<head>
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
49
Setzen von CSS-Eigenschaften:
<head>
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
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.
51
51

JavaScript - DHBW Stuttgart

Transcription

Similar documents

Wer profitiert von 64-Bit Computing?

Leitfaden zur Fehlerbehebung bei der Lizenzinstallation

JavaScript Einführung PDF

8 Typwandlungen

Ein Ersatz für Javascript?

Nicolai Kuban – Geschäftsführer der linkbird GmbH

Dateihandling, Datenformate, Fehlermeldungen

Einführung in die Kommandozeile