Webtechnologien Teil 12: JavaScript -...

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


Ü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


Ü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.


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);


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.


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:


Objekt String IV – HTML-Funktionen (Auszug)


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



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");


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");


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%"


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"


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.


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



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");


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");


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


Objekt Window II


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.


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();


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


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>...


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.


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


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>");


Objekt Document III


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


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.


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"


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"


Objekt Image


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


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


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.


Formulare III


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


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.


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.


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.


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


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.


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>


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.


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...


Heraus klappende Layers (Navigation) III

Vorher

Nachher


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();


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.


Nach dieser Anstrengung etwas Entspannung...

Webtechnologien Teil 12: JavaScript -...

Documents

Transcript of Webtechnologien Teil 12: JavaScript -...