Webtechnologien Teil 16: JavaScript

Transcription

Webtechnologien
Teil 16: JavaScript - Teil II
Webtechnologien - WS 2015/16 - Teil 16/JavaScript II
04.12.15 1
Überblick
• Einige Objekte in JavaScript
–
–
–
–
–
String
Number
RegExp
Array
Date
• Document Object Modell (DOM)
• Cookies
2
Objekt String I
(1) var s= "Hallo world!";
(2) var t= new String("Hallo world!");
...
(3) document.write(s.length);
•
•
Das Objekt String wird implizit bei jeder
Zeichenkette benutzt. Beide angegebenen
Formen der Objekterzeugung sind
gleichwertig.
Das Objekt String hat nur ein Attribut:
length. Es wird die Anzahl der Zeichen des
Strings geliefert.
Im Beispiel wird 12 ausgegeben.
3
Objekt String II - Liste der Methoden (Auszug)
Methode
Erläuterung
charAt(Position)
Liefert das Zeichen an der Position
concat(String)
Fügt String hinten an
indexOf(String)
Sucht nach String und gibt dessen Position zurück
slice(Pos1,Pos2)
Extrahiert den String zwischen Pos1 und Pos2
split(Char)
Trennt den String mit dem Trennzeichen Char in einzelne
Bestandteile auf, die in ein Array geschrieben werden können
toLowerCase()
Liefert den nach Kleinbuchstaben konvertierten String
toUpperCase()
Liefert den nach Großbuchstaben konvertierten String
Wie in Java sind Strings keine Arrays von Zeichen…
4
Objekt String III
•
•
Wenn Strings per document.write() ausgegeben werden, können
vorher HTML-Tags in den String integriert werden, die dann die
Ausgabe formatieren.
Das Einfügen von Tags bzw. von Layout-Attributen ist auch per JSRoutinen möglich, z.B.
var out1= "Hallo".bold();
var out2= "World".italics().blink();
document.write(out1+out2);
Der Output sieht zwar fürchterlich aus, demonstriert aber die
Arbeitsweise.
5
Objekt String IV – Tagfunktionen (Auszug)
Methode
Erläuterung
big()
Etwas größerer Font
bold()
Fett
fontcolor(Color)
Schriftfarbe
fontsize(Points)
Schriftgröße
italics()
Kursiv
small()
Etwas kleinerer Font
strike()
Durchgestrichen
sub()
Index Unten
sup()
Index Oben
6
Objekt Number
Eigenschaft
Erläuterung
Number.MAX_VALUE
Größte zulässige Zahl
Number.MIN_VALUE
Kleinste zulässige Zahl
Number.NaN
Wert nach Konvertierungsproblemen
Number.NEGATIVE_INFINITY
Wert, falls Zahl kleiner als MIN_VALUE wurde
Number.POSTIVE_INFINITY
Wert, falls Zahl größer als MAX_VALUE wurde
Infinity
Wert, falls Zahl zu groß oder zu klein wurde
Methode
Erläuterung
toString(Radix)
Konvertierung in String entsprechend Basis
Radix
valueOf()
Konvertierung in Zahl
toExponential(Ziffern)
Konvertierung in String mit Runden auf Ziffern
hinterm Komma
toFixed(Ziffern)
dasselbe nur für Nicht-Exponentialschreibweise
7
Objekt RegExp I
(1) var reg1= /bla*bla/;
(2) var reg2= new RegExp("bla*bla");
•
•
•
•
Das Objekt RegExp kapselt Routinen zum Durchsuchen von Objekten
des Typs String anhand regulärer Ausdrücke.
Beide Beispiele sind äquivalent.
"bla*bla" steht hierbei für den regulären Ausdruck.
Ein regulärer Ausdruck (1) wird durch "/" geklammert.
Das Escape-Zeichen des regulären Ausdrucks ist der Backslash "\".
8
Objekt RegExp II
(1) var reg1= /bla*bla/i;
(2) var reg2= new RegExp("bla*bla","i");
•
•
•
Direkt hinter dem 2. Slash bzw. als 2. Parameter von RegExp sind
folgende Zeichen erlaubt:
– g: Muster mehrfach hintereinander innerhalb einer Zeile anwenden
– i: keine Berücksichtigung der Groß-/Kleinschreibung
Beide angegebenen Beispiele sind äquivalent.
Die Angabe beider Buchstaben: gi ist möglich, dann gelten beide
Variationen.
9
Objekt RegExp III – Meta-Zeichen (Auszug)
Zeichen
Bedeutung
Beispiel
Passt auf
\b
Wortgrenze
/\bThe/
/er\b/
/\bnun\b/
" Theater"
"Ärger "
" nun "
\B
Nicht-Wortgrenze
\d
Ziffer
/\d\d\d/
"987"
\D
Nicht-Ziffer
/\D\D/
"Dr"
\s
Leerzeichen
/E\smail/
"E mail"
\S
Nicht-Leerzeichen
/E\Smail/
"E-mail"
\w
Buchstaben, Ziffer, _
/10\w/
"10m"
\W
Kein Buchstaben, Ziffer, _
/10\W/
"10%"
10
Objekt RegExp IV – Meta-Zeichen (Auszug)
Zeichen
Bedeutung
Beispiel
passt auf
.
Jedes Zeichen außer CR/LF
/../
"g7"
[...]
Irgendein Zeichen
/Ma[jy]er/
"Majer"
[^...]
Keines der Zeichen
*
Kein, ein- oder mehrmals
/\d*/
?
Kein oder einmal
/\d?/
"", "9"
+
Ein oder mehrmals
/\d+/
"9", "371"
{n}
Genau n-mal
/\d{3}/
"371"
{n,}
n oder mehrmals
/\d{3,}/
"37168"
{n,m}
Mindestens n-, max. m-mal
/\d{3,4}/
"3716"
^
Beginn der Zeichenkette
/^Sie/
"Sie haben..."
$
Ende der Zeichenkette
/nnen$/
"...gewonnen"
"", "9", "371"
11
Beispiel
var Text= "Langer Text mit viel drinn......";
var Muster= /drinn/;
if(Muster.test(Text)) {
... Muster gefunden ...
}
...
var Position= Text.search(Muster);
...
var Neu= Text.replace(Muster, "drumm herum");
document.write(Text);
/* gibt nun "Langer Text mit viel drumm herum......" aus */
12
Methoden des Objektes String
Methode von String
Erläuterung
match(/RegExpr/)
Durchsucht die Zeichenkette und liefert alle
Treffer als Array zurück
replace(/RegExpr/, String)
Durchsucht die Zeichenkette und ersetzt alle
Treffer mit String
search(/RegExpr/)
Durchsucht die Zeichenkette und liefert
gefundene Position als 0-basierter Index oder -1
13
Objekt Array I
Beispiel: var Suess= new Array("Schokolade","Bonbon","Eis","Lutscher");
Methode
Erläuterung
Beispiele
join(string)
Verbindet alle Elemente zu einer
Zeichenkette, wobei string der Trenner
zwischen den Elementen ist
Suess.join("+") ergibt
"Schokolade+Bonbon+Eis+Lutscher"
concat(Elem,..)
Die angegebenen Elemente werden
hinten an das Feld angefügt.
Suess.concat("Tomate");
sort(Function)
Das Feld wird durch Anwendung der
Funktion Function sortiert - fehlt diese,
wird die ASCII-Reihenfolge benutzt.
Die Elemente werden paarweise
verglichen durch Aufruf der Funktion
Function. Diese hat zwei Parameter
und liefert 0: keine Änderung oder >0:
erster Wert vor dem zweiten.
14
Objekt Array II
Methode
Erläuterung
Beispiele
push(Elem,..)
Das Array wird durch Anhängen hinten
verlängert.
Suess.push("Marmelade");
pop()
Das letzte Element des Feldes wird
gelöscht und als Wert geliefert.
IchEsse= Suess.pop();
shift()
Das erste Element wird entfernt und als
Wert geliefert, wobei alle anderen
Element um 1 vorrücken
DuIsst= Suess.shift();
unshift(Elem,..)
Die angegebenen Elemente werden
vorne in das Feld eingeschoben, wobei
alle anderen Elemente entsprechend
nach hinten geschoben werden.
Suess.unshift("Tomate");
15
Objekt Date I
(1)
(2)
(3)
(4)
•
•
var
var
var
var
now1=
now2=
now3=
now4=
new
new
new
new
Date();
Date("Mon Tag, Jahr Stunden:Min:Sec");
Date(Jahr, Monat, Tag);
Date(Jahr, Monat, Tag, Stunden, Min, Sec);
Das Date-Objekt beinhaltet alle Routinen zur Behandlung von Zeitpunkten.
Ein Date-Objekt kann auf vier Arten erzeugt werden:
– (1) Es wird die aktuelle Zeit benutzt.
– (2) Es wird ein String in dem angegebenen Format ausgewertet.
– (3) Die drei Parameter werden übernommen,
die Uhrzeitwerte werden auf 0 gesetzt.
– (4) Alle 6 Parameter werden übernommen.
16
Objekt Date II
(1) var now1= new Date("December 24, 2000 18:00:00");
(2) var now2= new Date(2000, 12, 24);
(3) var now3= new Date(2000, 12, 24, 18, 0, 0);
•
Bei der Behandlung von Zeiten müssen die Probleme der Weltzeit
(Zeitverschiebung) und Sommerzeit beachtet werden.
17
Objekt Date III
Methode
Wertebereich
Erläuterung
getDate()
1..31
Nummer des Tages
getDay()
1..7
Nummer des Wochentags
getHours()
0..23
Stunde
getMinutes()
0..59
Minute
getMonth()
0..11 (!)
Nummer des Monats
getSeconds()
0..59
Sekunden
getTime()
0...
ms seit 1.1.1970
getTimezoneOffset()
-720..+720
Differenz Lokalzeit und GMT
getYear()
00..99
Jahr (Jahr-2000-Probleme)
18
Objekt Date IV
Methode
Erläuterung
setDate(Tag)
Setzen der Tagnummer
setHours(Stunde)
Setzen der Stunde
setMinutes(Minute)
Setzen der Minuten
setMonth(Monat)
Setzen des Monats (0..11!)
setSeconds(Sekunden)
Setzen der Sekunden
setTime(Millisec)
Setzen der ms seit 1.1.1970
setYear(Jahr)
Setzen des Jahres
Es gelten die entsprechenden Bemerkungen zu den get-Funktionen
für die Wertebereiche.
19
Objekt Date V
var
var
var
var
now=
Stu=
Min=
Sek=
new Date();
now.getHours();
now.getMinutes();
now.getSeconds();
var Zeit= ""+((Stu>12)? Stu-12: Stu); // umtypen in String
Zeit+= ((Min<10)?":0" : ":")+Min;
// vorlaufende 0
Zeit+= ((Sec<10)?":0" : ":")+Sec;
// vorlaufende 0
Zeit+= (Stu>=12)? "PM" : "AM";
document.write(Zeit);
•
•
Das Code-Stück zeigt den schrittweisen Zusammenbau einer Zeitangabe
nach amerikanischer Art.
Wenn noch Felder mit den Strings der Monate und Wochentage benutzt
werden, kann das Datum in eine Langform gebracht werden.
20
Document Object Model (DOM) I
• Das Document Object Modell (DOM) beschreibt die hierarchische
Struktur der im Browser durch das Dokument definierten Objekte. Das
DOM beschreibt damit die interne hierarchische Repräsentation des
Dokuments als Baum von Knoten.
• DOM ist also die API für den Zugriff auf die Bestandteile des
Dokuments.
• Entsprechend der Hierarchie wird mit der Punktnotation ein Objekt
bzw. Methode bzw. Attribut adressiert, z. B. window.document.write().
• Wenn es eindeutig ist, können die vorderen Teile der Punktnotation
weggelassen werden, z. B. document.write().
• In die API sind auch Objekte von JavaScript integriert, z.B. Date.
Siehe
http://www.w3.org/DOM/
http://de.selfhtml.org/dhtml/modelle/dom.htm
21
Document Object Model (DOM) II
W3C hat die meisten Elemente des Legacy DOMs standardisiert
und noch weitere zusätzlich festgelegt.
• Das gesamte Dokument wird in Knoten zerlegt, auch Kommentare.
• Das Verändern eines Knotens führt unmittelbar zur geänderten
Darstellung. Dies ist die Basis der AJAX-Technologie.
• Beginnend mit der Wurzel wird ein Element nach folgendem
Verfahren adressiert:
wurzel.element.element.element
wobei element für den Namen oder die Art eines Knoten steht.
22
W3C DOM II – Suchen anhand von Merkmalen
document.getElementById("String")
Zugriff auf ein Element/Tag mit Attribut id=String.
document.getElementsByTagName("String")
Zugriff auf Elemente, wobei diese in einem Array geliefert
werden, z.B. Zugriff auf den 3. Absatz:
document.getElementsByTagName("p")[2]
document.getElementsByName("String")
Zugriff auf Elemente mit Attribut name=String, wobei diese in
einem Array geliefert werden
23
Übersicht über einige DOM-Objekte
Objekt
Erläuterungen
anchor
Referenz auf selbst definierte URL
applet
Referenz auf ein Applet
document
Webseite selbst
form
Referenz auf ein Formular
frame
Referenz auf ein Frame
history
Referenz auf die Surfgeschichte
image
Referenz auf eine Grafik
link
Referenz auf benutzte URL
location
Referenz auf Adresszeile des Browsers
navigator
Referenz auf benutzten Browser
plugin
Referenz auf geladene Plugins
screen
Referenz auf Informationen des verwendeten Bildschirms
window
Statusinformation des Browserfensters
24
Übersicht über DOM-Felder
Arrays
Beschreibung
anchors[]
Zugriff auf alle Anker (benannte Positionen)
applets[]
Zugriff auf alle applets u.a. Steuerung
forms[]
Zugriff auf alle Formulare
frames[]
Zugriff auf alle Frames
images[]
Zugriff auf alle Bilder
links[]
Zugriff auf alle Hyperlinks (URL)
options[]
Im Formular selektierte Optionen
plugins[]
Zugriff auf alle geladenen Plugins
Die obigen Arrays stehen immer zur Verfügung und können durch
das Laufen durch den Baum direkt angesprochen werden.
Das Laufen wird durch die Punkt-Notation erreicht.
25
Objekt Window I
•
•
•
•
Eines der wichtigsten Objekte ist das Window-Objekt.
Über dieses Objekt läuft die gesamte globale Steuerung.
Die Eigenschaften/Methoden stehen überall zur Verfügung.
In vielen Fällen braucht "window." nicht angegeben zu werden,
z. B. reicht "document.write()" statt "window.document.write()"
Eigenschaft
Erläuterung
defaultStatus
Voreingestellter Text der Statuszeile
opener
Referenz auf das Fenster, das das aktuelle geöffnet hat
self
Referenz auf sich selbst
status
Aktueller Text der Statuszeile
26
Objekt Window II
Methode
Erläuterung
alert(Text)
Öffnet eine Alarmbox mit dem Text
blur(Window)
Setzt das angegebene Fenster in den
Hintergrund
close(Window)
Schließt das angegebene Fenster
confirm(Text)
Öffnet ein kleines Formular mit dem Text und
den Knöpfen OK und Abbruch
focus(Window)
Setzt das angegebene Fenster in den
Vordergrund
open(URL,Name,Optionen)
Öffnet ein neues Fenster
prompt(Text, Default)
Öffnet ein Fenster zur Eingabe mit vorbelegten
Text Default
clearTimeout(TimeID)
Löscht den Timer
setTimeout(Func,MS)
Setzt den Timer und liefert TimeID zurück.
27
Objekt Window - Beispiele I
window.status= 'Text in der Statuszeile';
var fen= open("neu.html","Faenster","height=200,width=300");
fen.focus();
•
•
•
•
Das erste Beispiel zeigt die Veränderung der Statuszeile,
das zweite, wie ein neues Fenster aufgemacht wird.
Hier braucht "window." nicht vorangestellt zu werden.
Die Optionen innerhalb des Strings müssen direkt ohne ein Blank
hintereinander definiert werden.
28
Optionen für window.open()
Option
Werte
Erläuterung
height
Pixel
Höhe
width
Pixel
Breite
directories
yes/no
Anzeige der Lesezeichenleiste
location
yes/no
Anzeige der URL-Zeile
menubar
yes/no
Anzeige der Standard-Menue-Leiste
resizable
yes/no
Veränderung der Fenstergröße
scrollbars
yes/no
Anzeige der Scrollbars
status
yes/no
Anzeige der Statuszeile
toolbar
yes/no
Anzeige der Werkzeugleiste
top
Pixel
Y-Position
left
Pixel
X-Position
29
Objekt Window - Beispiele II
...
<a href='javascript:self.close();'>Fenster zu</a>
...
•
•
Hier wird eine JavaScript-Routine statt einer URL benutzt. Dies dient
nur als instruktives Beispiel – möglichst vermeiden, mit onClick geht
es auch.
Nach diesem Schema sind Knöpfe zum Vorwärts- und Zurückgehen in
der History etc. möglich.
30
Objekt Document I
• Das Objekt Document betrifft die durch HTML bearbeitete
"Fläche", d.h. den <body>-Teil.
• Das Verändern führt eventuell zu Schwierigkeiten, da der
Browser bei längeren oder komplizierten Operationen nicht
korrekt den Bildschirm aktualisiert.
Methode
Erläuterung
document.write(Text)
Fügt den Text in das Dokument ein, das
anschließend interpretiert wird
document.writeln(Text)
Wie write() nur dass ein CR angefügt wird
document.open(Docu)
Löscht das Dokument und eröffnet zum Schreiben
document.close(Docu)
Beendet das Schreiben, kein window.close()
document.clear(Docu)
Löscht den Text im Dokument
Das betrifft nur den Client, Dokumente auf dem Server bleiben unberührt.
31
document.write()
document.write("Hallo"," Ihr ",cnt," Fische!","<br>");
• Dies ist eine der wichtigsten Funktionen, die auch mit einer Liste
von Parametern aufgerufen werden kann, wie oben im Beispiel.
32
Objekt Document II
Eigenschaft
Erläuterung
document.bgColor
Hintergrundfarbe
document.fgColor
Textfarbe (nur lesen)
document.linkColor
Linkfarbe nicht besucht
document.alinkColor
Linkfarbe während des Ladens
document.vlinkColor
Linkfarbe besucht
document.lastModified
Änderungsdatum des Dokuments (nur lesen)
document.location
href des Dokuments (nur lesen)
document.referrer
URL des Dokuments, das auf das aktuelle
verwiesen hat
document.title
Der Text des <title>-Elements
document.cookie
String mit den Cookie-Informationen
33
Objekt Document III
• Über verschiedene Felder kann auf weitere Elemente der Seite
zugegriffen werden.
• Anzahl der Elemente kann mit length erfahren werden.
Array-Name
Erläuterung
window.document.images[]
Graphiken in der Reihenfolgen der img-Tags
window.document.anchors[]
Anker in der Definitionsreihenfolge
window.document.links[]
Links in der Definitionsreihenfolge
window.document.forms[]
Formulare in der Definitionsreihenfolge
34
Objekt Document IV - Stylesheets
(1)document.styleSheets[index]
(2)document.styleSheets[0].disabled= true;
(3)document.styleSheets[0].cssRules[0]
(4)document.styleSheets[0].rules[0]
(5)document.styleSheets[0].cssRules[0].style.fontsize="10pt"
•
•
•
•
•
Mit (1) ist ein Zugriff auf Stylesheets möglich.
(2) zeigt wie ein bestimmtes Stylesheet ein-/ausgeschaltet werden kann.
Zugriff auf die 1. Regel: (3) beim Firefox, (4) beim Explorer
In (5) wird beim Firefox die Fontgröße der 1. Regel auf 10pt gesetzt.
Die einzelnen Regeln lassen sich in einer Schleife traversieren.
Die obigen Beispiele zeigen nur, wie auf die Unterbäume zugegriffen
werden kann.
35
Objekt Document V - Stylesheets
var elem= document.getElementById(Name);
(1)elem.style.display= ....;
(2)elem.style.visibility= ....;
(3)elem.style.width= "70%";
(4)elem.style.height= "100px";
(5)elem.cssFloat= ....;
(6)elem.styleFloat= ....;
•
•
•
//"none" oder "block"
//"visible" oder "hidden"
//"left" oder "right"
//"left" oder "right"
Dies sind Beispiele für den Umgang mit Layers (div mit ID).
Beispiel (1) bis (4) zeigen, wie Eigenschaften gesetzt werden können.
In (5) und (6) wird das Umfließen mit Text gesteuert
(5) für den Firefox
(6) für den Explorer
36
Objekt Image
• Zugriff auf die Bilder erfolgt mit:
– document.images[...]
– document.Bildname
Eigenschaft
Erläuterung
border
Dicke des Rahmens in Pixel
complete
Boole'scher Wert über den Ladestatus
heigth, width
Höhe und Breite in Pixel
hspace, vspace
Horizontaler/Vertikaler Abstand zum nächsten Element
in Pixel
lowsrc
URL der alternativen Grafikdatei
name
Name des Image-Objekts
src
URL der Graphik
37
Formulare I
• Die Formulare werden in der Definitionsreihenfolge von 0
beginnend durchgezählt.
• Zugriff auf die Formulare: document.forms[0]...
• Zugriff auf die Elemente der Formulare:
document.forms[Nr].elements[0]...
• Die Elemente werden analog den Formularen in der
Definitionsreihenfolge von 0 beginnend durchgezählt.
• Attribute der Elements
– value: Eingegebener/augenblicklicher Wert
– checked: Boole'scher Wert, ob angekreuzt
– options[]: Array mit den Optionen der Elemente
• Attribute der Options
– value: Augenblicklicher Wert
– selected: Boole'scher Wert, ob ausgewählt ist
38
Formulare II
• Damit liegt folgende Hierarchie vor:
– forms[]
elements[]
•
options[]
• Entsprechend dieser Hierarchie müssen Punkte in den Namen
angegeben werden, z. B.
document.forms[2].elements[0].options[1].value
• Da das alles etwas undurchsichtig werden kann, können in dem
"Pfad" die Abschnitte
– forms[Nr]
– elements[Nr]
durch Namen ersetzt werden, d.h. das obige Bespiel kann zu:
document.Bank.BLZ.options[1].value werden, sofern in der
Formular-Definiton der verkürzende Name mit dem nameAttribut definiert wurde.
39
Formulare III
•
Eigenschaft
Erläuterung
action
URL des CGI-Script o.ä.
encoding
MIME-Kodierung der zu sendenden Daten
length
Anzahl der Formulare
name
Name des Formulars
method
Methode des HTTP-Request: "POST", "GET"
target
Zielfenster der action-Antwort
40
Ereignisse im <body>-Tag
• Event = Ereignis = Etwas, was der Browser festgestellt hat und
das durch JavaScript behandelt werden kann
• Events und ihre Behandlung stellen die Basis für Dynamik der
dargestellten Seite dar.
function sagHallo() {
...
}
function sagTschuess() {
...
}
...
<body onLoad="sagHallo();" onUnLoad="sagTschuess();">
Event-Handler
Aktivierung
onLoad
Wenn das Dokument geladen ist
onUnload
Wenn das Dokument geschlossen oder verlassen wird
41
Ereignisse bei Graphik, Links, Anker I
Das Anwendungsgebiet liegt hierbei in der dynamischen Änderung
des Dokuments, z. B. in Abhängigkeit von Eingaben.
...und natürlich in netten Spielereien.
Event-Handler
<img>
<a>
Aktivierung
onAbort
Ja
Nein
bei Abbruch des Ladens
onClick
Nein
Ja
bei Klick auf den Link
onError
Ja
Nein
wenn die Grafik nicht geladen werden konnte
onMouseout
Ja
Ja
wenn die Maus das Objekt verlässt
onMouseover
Ja
Ja
wenn die Maus über dem Objekt ist
42
Ereignisse bei Graphik, Links, Anker II
var Pictures= new Array;
Pictures[0]= new Image; Pictures[0].src= URL1;
Pictures[1]= new Image; Pictures[1].src= URL2;
function Pict(nr) {
document.images[0].src=Pictures[nr].src;
}
<a href=URL onMouseover="Pict(0);" onMouseout="Pict(1);">
<img src=URL1 ...></a>
•
•
Wenn die Maus sich oberhalb des einen Links befindet, wird die Graphik
ausgetauscht - wird dann die Maus wegbewegt, wird die alte Graphik
wieder angezeigt.
Dies ist ein Rollover-Effekt mit zwei Graphiken – nette Spielerei.
43
Ereignisse in Formularen
Event
input type/Form
Aktivierung
onBlur
select text textarea
Wenn Benutzer das Feld verlässt, d.h.
wenn das Feld den Fokus verliert
onKeyUp
Wenn ein Zeichen eingegeben wurde
onChange
Wenn das Feld den Fokus verliert und eine
Änderung gemacht wurde
onClick
button checkbox radio reset
submit
Wenn Benutzer das Feld anklickt
onFocus
Wenn Benutzer das Feld aktiviert, d.h.
wenn das Feld den Fokus erhält
onReset
form
Bei Drücken des RESET-Knopfes
onSelect
text textarea
Wenn Benutzer eine Textstelle markiert
onSubmit
form
Bei Drücken des SUBMIT-Knopfes
44
Beispiel I – Kleiner Umrechner
function Rechner() {
var Money= document.EURO.DM.value;
var Total= Math.round((Money/1.95583)*100)/100;
document.EURO.EUR.value= Total;
}
...
<form name="EURO">
<input name="DM" size=... type="text">DM <p>
<input type="button" value="Los!" onClick="Rechner();"><p>
<input name="EUR" size=... type="text">EUR
</form>
•
•
Der triviale EUR-Umrechner basiert auf der Klickbehandlung im 2.
input-Tag.
"document.forms[0]" ist durch "document.EURO" ersetzt.
45
Beispiel II: Besuchsdauer
start= new Date();
startzeit= start.getTime();
function Stoppuhr() {
jetzt= new Date();
zeit= (jetzt.getTime()-startzeit)/1000;
document.Hier.Dauer.value= Math.round(zeit);
setTimeout('Stoppuhr()', 1000);
}
...
<body onLoad="Stoppuhr()">
<form name="Hier">
Du bist schon <input name="Dauer" size="10"> Sekunden hier.
</form>
</body>
•
•
Alle 1000ms wird die Funktion Stoppuhr() aufgerufen, die die
Zeitdifferenz zum ersten Aufruf berechnet und ausgibt.
Direkt nach dem Laden wird Stoppuhr() sofort aufgerufen.
46
Beispiel III
<input type="text" style="backgroundcolor:'#FFFF99'"
onFocus="this.style.backgroundColor='#FF0000'"
onBlur= "this.style.backgroundColor='#FFFF99'">
....
</input>
•
•
Das Eingabefeld soll seine Farbe ändern, wenn der Fokus darauf fällt.
#FFFF99 ist ein Gelbton, während #FF0000 ein kräftiges Rot ist.
47
Heraus klappende Layers (Navigation) I
<style type="text/css">
body
{ padding-left:20px; }
#leftBord
{ left:0px; top:0px; position: absolute;
width: 20px; height: 100px; }
#navigat
{ left:0px; top:0px; position: absolute;
width: 200px; height: 100px;
background-color:yellow;
visibility:hidden; }
</style>
Lorem ipsum dolor …… tempor invidunt ut …… voluptua.<p>
<div id="leftBord" onMouseOver="show()" onMouseOut="hide()">
</div>
<div id="navigat" onMouseOver="show()" onMouseOut="hide()">Text2
</div>
Lorem ipsum …… invidunt ut …… voluptua.<p>
Es werden drei Bereiche definiert: (1) Der Hauptbereich, etwas nach rechts
eingerückt, (2) eine schmale linke Leiste und (3) ein versteckter Layer mit
z.B. Navigation-URLs.
48
Heraus klappende Layers (Navigation) II
function show () {
document.getElementById("navigat").style.visibility= 'visible';
}
function hide() {
document.getElementById("navigat").style.visibility= 'hidden';
}
Dies sind die fehlenden Routinen im Mozilla-Stil.
In der Realität muss eine (komplexe) Browserweiche programmiert
werden, die entsprechend dem Browsertyp eine globale Variable setzt, die
wiederum in diesen Funktionen abgefragt werden muss...
49
Heraus klappende Layers (Navigation) III
Vorher
Nachher
50
Cookies I
document.cookie= "Name=Wert; Attribut=Wert; ...";
...
var exp= new Date(2007,4,1);
document.cookie= "Name=Gustav; expires="+exp.toGMTString();
document.cookie= "Beruf=Koenig; expires="+exp.toGMTString();
•
•
•
Das Erzeugen von Cookies erfolgt durch das Setzen des Attributs cookie
vom Objekt document.
In Form einer Schlüsselwortliste werden alle Bestandteile definiert.
Die Cookie-Werte dürfen weder Blanks noch Sonderzeichen enthalten;
daher müssen in diesen Fällen die Strings vorher mit escape() und
unescape() konvertiert werden.
51
Cookies II
Domain und Path geben die Auswahlbedingungen von Cookies,
in dem Sinne an, dass nur die Cookies an den Server
gesendet werden, deren domain+path mit dem Server
kompatibel ist.
Dies sind die Attribute der Cookies:
Attribut
Erläuterung
domain
Name der Domain oder in Teil davon, z. B. domain=lola.de
path
Pfad zur Datei, z.B. path=/
expires
Verfallsdatum
secure
Cookie wird nur bei SSL übertragen
Dieses Attribut wird ohne = benutzt, d.h. wie ein Schlüsselwort.
52
Nach dieser Anstrengung etwas Entspannung...
53

Webtechnologien Teil 16: JavaScript

Transcription

Similar documents

Einführung in das Programmieren mit Java

Kapitel 1 Einleitung

Fallstudie: Das drahtlose Netzwerk von Microsoft

Stichworte zur Vorlesung 2004 - Prof. Dr.

Florian Rotenburg - Freiwillige Feuerwehr Elsdorf

Hungry Ghost Festival