07.11.18 1Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Webtechnologien
Teil 12: JavaScript - Objekte
2Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Überblick
• Einige Objekte in JavaScript– String
– Number
– RegExp
– Array
• Formulare
• Cookies
3Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Übersicht über einige DOM-Objekte
Objekt Erläuterungen
anchor Knoten einer selbst definierten URL
applet Knoten eines Applets
document Knoten der Webseite selbst
form Knoten eines Formulars
frame Knoten eines Frames
history Knoten der Surfgeschichte
image Knoten einer Graphik
link Knoten einer URL
location Knoten der Adresszeile des Browsers
navigator Knoten des benutzten Browsers
plugin Knoten eines geladenen Plugins
screen Knoten des verwendeten Bildschirms
window Knoten des Browserfensters
4Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Übersicht über Felder von DOM-Objekten
Arrays Erläuterungen
anchors[] Alle Knoten der Anker (benannte Positionen)
applets[] Alle Knoten der Applets
forms[] Alle Knoten der Formulare
frames[] Alle Knoten der Frames
images[] Alle Knoten der Bilder
links[] Alle Knoten der Hyperlinks (URL)
plugins[] Alle Knoten der geladenen Plugins
options[] Im Formular selektierbare Optionen
elements[] Im Formular vorhandene Elemente
Die obigen Arrays werden durch das Laufen durch den Baum direktangesprochen. Das Laufen wird durch die Punkt-Notation erreicht.
5Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt String I
• Das Objekt String wird implizit bei jeder Zeichenkette benutzt. Beide Formen der Objekterzeugung (1-2) sind gleichwertig.
• Das Objekt String hat ein Attribut: length. Es wird die Anzahl der Zeichen des Strings geliefert.Im Beispiel wird 12 ausgegeben.
(1) var s= "Hallo world!"; (2) var t= new String("Hallo world!");(3) document.write(s);(4) document.write(s.length);
6Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt String II - Liste der Methoden (Auszug)
Methode Erläuterung
str.charAt(Position) Liefert das Zeichen an der Position, von 0 an beginnend gezählt
str.concat(String) Fügt String hinten an String str
str.indexOf(String) Sucht nach String und gibt dessen Position zurück
str.slice(Pos1,Pos2) Extrahiert den String zwischen Pos1 und Pos2
str.split(Char) Trennt den String mit dem Trennzeichen Char in einzelne Bestandteile auf, die in ein Array geschrieben werden können
str.toLowerCase() Liefert den nach Kleinbuchstaben konvertierten String
str.toUpperCase() Liefert den nach Großbuchstaben konvertierten String
Wie in Java sind Strings keine Arrays von Zeichen,sondern Objekte mit Attributen und Methoden.
str ist ein Objekt vom Typ String.
7Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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 mit JS-Routinen möglich, z.B.
var out1= "Hallo".bold();var out2= "World".italics().strike();document.write(out1+out2);
Der Output sieht zwar fürchterlich aus, demonstriert aber dieArbeitsweise:
8Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt String IV – HTML-Funktionen (Auszug)
Methode Erläuterung
str.big() Etwas größerer Font
str.bold() Fett
str.fontcolor(Color) Schriftfarbe
str.fontsize(Points) Schriftgröße
str.italics() Kursiv
str.small() Etwas kleinerer Font
str.strike() Durchgestrichen
str.sub() Index Unten
str.sup() Index Oben
str ist ein Objekt vom Typ String.
9Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt RegExp (Reguläre Ausdrücke) I
• Das Objekt RegExp kapselt Routinen zum Durchsuchen von Objekten des Typs String anhand regulärer Ausdrücke.
• Beide Beispiele sind äquivalent."Ma*er" steht hierbei für den regulären Ausdruck.
• Ein regulärer Ausdruck (1) wird durch "/" geklammert.
• Er besteht aus zwei Arten von Zeichen:
• Meta-Zeichen, oben: *
• Zeichen als Daten, oben: Ma und er
• Es wird Groß-/Kleinschreibung beachtet.
• Das Escape-Zeichen des regulären Ausdrucks ist der Backslash "\".
(1) var reg1= /Ma*er/;(2) var reg2= new RegExp("Ma*er");
10Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt RegExp (Reguläre Ausdrücke) II
• Das Metazeichen * bedeutet 0 bis beliebige Wiederholung des vorherigen Zeichens, alle anderen sind normale Zeichen.
• 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.
• Siehe
– https://wiki.selfhtml.org/wiki/JavaScript/Objekte/RegExp
– https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp
(1) var reg1= /Ma*er/i;(2) var reg2= new RegExp("Ma*er","i");
11Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt RegExp (Reguläre Ausdrücke) III – Meta-Zeichen
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%"
12Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt RegExp (Reguläre Ausdrücke) IV – Meta-Zeichen
Zeichen Bedeutung Beispiel passt auf
. Jedes Zeichen außer CR/LF /../ "g7"
[...] Zeichen aus Menge /Ma[jy]er/ "Majer"
[^...] Keines der Zeichen aus Menge
* Kein, ein- oder mehrmals /\d*/ "", "9", "371"
? 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"
13Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Beispiel
(1) var Text= "Frau Mayer sagt zu Herrn Maier 'Maaaer'";(2) var Muster= /Ma*er/;(3) if(Muster.test(Text)) {(4) document.write('passt!<br>'); // Muster gefunden (5) } ...(6) var Position= Text.search(Muster); // Spalte 32 ...(7) var Neu= Text.replace(Muster, "####");(8) document.write(Text);
Frau Mayer sagt zu Herrn Maier '####'
Ausgabe von Zeile (8)
Der * wiederholt das direkt davor stehende Zeichen 0 bis beliebig häufig.
14Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Methoden des Objektes String
Methode von String Erläuterung
str.match(/RegExpr/) Durchsucht die Zeichenkette und liefert alle Treffer als Array zurück
str.replace(/RegExpr/, String) Durchsucht die Zeichenkette und ersetzt alle Treffer mit String
str.search(/RegExpr/) Durchsucht die Zeichenkette und liefert gefundene Position als 0-basierter Index oder -1
str ist ein Objekt vom Typ String.
15Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Array I
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.
Beispiel: var Suess= new Array("Schokolade","Bonbon","Eis","Lutscher");
16Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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");
17Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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
18Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Window II
Methode Erläuterung
alert(Text) Öffnet eine Alarmbox mit dem Text
confirm(Text) Öffnet ein kleines Formular mit dem Text und den Knöpfen OK und Abbruch
prompt(Text, Default) Öffnet ein Fenster zur Eingabe mit vorbelegten Text Default
focus(Window) Setzt das angegebene Fenster in den Vordergrund
blur(Window) Setzt das angegebene Fenster in den Hintergrund
open(URL,Name,Optionen) Öffnet ein neues Fenster
close(Window) Schließt das angegebene Fenster
clearTimeout(TimeID) Löscht den Timer
setTimeout(Func,MS) Setzt den Timer und liefert TimeID zurück.
19Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Window - Beispiele I
• 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.
window.status= 'Text in der Statuszeile';
var fen= open("neu.html","Faenster","height=200,width=300");fen.focus();
20Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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
21Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Window - Beispiele II
• 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.
...<a href='javascript:self.close();'>Fenster zu</a>...
22Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Document I
• Das Objekt Document betrifft die durch HTML definierte "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, der anschließend als HTML interpretiert wird
document.writeln(Text) Wie write() nur dass ein Newline angefügt wird
23Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Document II - document.write()
• Es wird ein zusammengesetzter String in das aktuelle Dokument/Fenster eingefügt, d.h. es wird kein neues Dokument bzw. Fenster dafür benutzt, wie alert();
document.write("Hallo "+cnt+" Fische!<br>");
24Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Document III
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 URL/href-Wert 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
25Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Document IV
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
• Über verschiedene Felder kann auf weitere Elemente der Seite zugegriffen werden.
• Anzahl der Elemente kann mit length erfahren werden.
26Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Document V - Stylesheets
• 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 obigen Beispiele zeigen, wie auf die Unterbäume zugegriffen werden kann.
• Siehe dazu
– http://www.javascriptkit.com/domref/stylesheet.shtml
– https://wiki.selfhtml.org/wiki/JavaScript/Anwendung_und_Praxis/Stylesheets_dynamisch_%C3%A4ndern
(1)document.styleSheets[index](2)document.styleSheets[0].disabled= true;(3)document.styleSheets[0].cssRules[0](4)document.styleSheets[0].rules[0] // nur Explorer(5)document.styleSheets[0].cssRules[0].style.fontsize="10pt"
27Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Document VI - Stylesheets
• Dies sind Beispiele für den Umgang mit Layers (div mit ID). Es werden Layout-Attribute den div-Bereichen zugeordnet.
• 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
var elem= document.getElementById(Name);
(1)elem.style.display= ...; //"none"/"block"(2)elem.style.visibility= ...; //"visible"/"hidden"(3)elem.style.width= "70%";(4)elem.style.height= "100px";(5)elem.cssFloat= ...; //"left"/"right"(6)elem.styleFloat= ...; //"left"/"right"
28Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Objekt Image
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
• Zugriff auf die Bilder erfolgt mit:– document.images[...]
– document.Bildname
29Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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
30Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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 name-Attribut definiert wurde.
31Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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
• Methoden– reset(): Setzt alle Einträge im Formular auf die Defaultwerte zurück
– submit(): sendet das Formular an Server
32Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Ereignisse im <body>-Tag
Event-Handler Aktivierung
onLoad Wenn das Dokument geladen ist
onUnload Wenn das Dokument geschlossen oder verlassen wird
function sagHallo() {...
}function sagTschuess() {
...}...<body onLoad="sagHallo();" onUnLoad="sagTschuess();">
• 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.
33Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Ereignisse bei Graphik, Links, Anker I
Event-Handler <img> <a> Signalisierung
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
Das Anwendungsgebiet liegt hierbei in der dynamischen Änderungdes Dokuments, z. B. in Abhängigkeit von Eingaben.
...und natürlich in netten Spielereien.
34Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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 show(nr) {
document.images[0].src=Pictures[nr].src;}<a href=URL onMouseover="show(0);" onMouseout="show(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.
35Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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 select text textarea Wenn das Feld den Fokus verliert und eine Änderung gemacht wurde
onClick button checkbox radio reset submit
Wenn Benutzer das Feld anklickt
onFocus select text textarea 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
36Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
starttime= new Date().getTime();function Timer() { duration= (new Date().getTime()-starttime)/1000; document.Output.boring.value= Math.round(duration); setTimeout('Timer()', 1000);}Timer();...<form name="Output"> Du starrst schon <input name="boring" size="3"> Sekunden<br> auf diesen leeren Bildschirm.</form>
Beispiel I - Besuchsdauer
• Alle 1000ms wird die Funktion Timer() aufgerufen, die die Zeitdifferenz zum ersten Aufruf berechnet und ausgibt.
• Direkt nach dem Laden wird Stoppuhr() sofort aufgerufen.
37Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Beispiel II
• Das Eingabefeld soll seine Farbe ändern, wenn der Fokus darauf fällt.
• #FFFF99 ist ein Gelbton, während #FFFFFF einfach Weiß ist.
<input type="text" style="backgroundcolor:'#FFFFFF'" onFocus="this.style.backgroundColor='#FFFF99'" onBlur= "this.style.backgroundColor='#FFFFFF'"> ....
</input>
38Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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 rechtseingerückt, (2) eine schmale linke Leiste und (3) ein versteckter Layer mitz.B. Navigation-URLs.
39Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
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 programmiertwerden, die entsprechend dem Browsertyp eine globale Variable setzt, diewiederum in diesen Funktionen abgefragt werden muss...
40Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Heraus klappende Layers (Navigation) III
Vorher
Nachher
41Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Cookies I
• 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.
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();
42Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Cookies II
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.
Dies sind die Attribute der Cookies:
Domain und Path geben die Auswahlbedingungen von Cookies,in dem Sinne an, dass nur die Cookies an den Servergesendet werden, deren domain+path mit dem Serverkompatibel ist.
43Webtechnologien - WS 2018/19 - Teil 12/JavaScript II
Nach dieser Anstrengung etwas Entspannung...