Inhalt:
JavaScript
Einbindung von JavaScript-Funktionen in Webseiten
DOM-Referenzierung
Realisierung dynamischer Effekte über das DOM
Exkurs: Objektorientiertes Programmieren mit JavaScript
Peter Sobe Internettechnologien 1
3. Clientseitige Verarbeitung und JavaScript
JavaScript wurde 1995 im Netscape-Browser eingeführt und wird inzwischen von den meisten Browsern unterstützt.
Allgemeines:
Skripte werden mit der HTML/XHTML-Seite übertragen und deren Ausführung durch verschiedene Ereignisse angestoßen
Diese Scripting-Erweiterung bleibt im Rahmen einer 2-Tier Architektur.
JavaScript erlaubt dynamische Effekte bei Darstellung der Webseiten.
Java- bzw. C- ähnliche Sprache – prozedural und objektorientiert, auch funktional
JavaScript
<html>
<head>
<title>Eine Seite mit JavaScript</title>
</head>
<body>
<script type=“text/javascript“>
alert(“Hier spricht das JavaScript!“);
</script>
</body>
</html>
Peter Sobe Internettechnologien 3
JavaScript-Minimalbeispiel
<html>
<head>
<title>Eine Seite mit Javascript</title>
<script type="text/javascript">
function fun() { var x;
x=42;
alert("Die magische Zahl ist "+x);
}
</script>
</head>
<body >
<form name="Formular" action="">
<input type="button" value="Action!" onclick="fun()"/>
</form>
</body>
</html>
JavaScript - Variablen
Variablen sind mittels
„var“ zu deklarieren.
keine Typ-Angabe nötig
<html>
<head>
<title>Eine Seite mit Javascript</title>
<script type="text/javascript">
function fun() { var x;
x=42;
var Nachricht = "Die magische Zahl"; ; alert( Nachricht+" ist "+x);
}
</script>
</head>
<body >
<form name="Formular" action="">
<input type="button" value="Action!" onclick="fun()"/>
</form>
</body>
</html>
Peter Sobe Internettechnologien 5
JavaScript - Variablen
Zeichenketten können
per “+“ zusammen-
gebaut werden
function fun() { var x;
x=eingabe.text;
var Nachricht;
if (x==42)
{ Nachricht = "Die magische Zahl"; } else
{ Nachricht =“Die gewoehnliche Zahl“; } alert( Nachricht+" ist "+x);
}
JavaScript : if –else-Alternative
Generelles:
Fallunterscheidungen (Alternative,Selektion) mittels if (bedingung) else
Bedingungen mit Relationen<,>,==,<=,>=
Logische Verknüpfungen: && (UND), || (ODER),
! (NEGATION)
function fun() { var x;
x=document.eingabe.value;
var Nachricht;
var i = 0;
while (i <=x) {
alert(“Der “+ i +“ te Durchgang!“);
i=i+1;
} }
Zyklen mittels while(…) {…} oder do {… } while(…);
möglich.
Peter Sobe Internettechnologien 7
JavaScript – Zyklus (1)
function fun() { var x;
x=document.eingabe.value;
var Nachricht;
var i = 0;
for(i=0; i<=x; i++) {
alert(“Der “+ i +“ te Durchgang!“);
} }
For-Zyklen vorzugsweise dann, wenn vorab bekannt ist, wieviele Durchläufe erfolgen sollen.
JavaScript – Zyklus (2)
Für while-, do-while- und for-Schleifen kann per
break
– vorzeitig aus der Wiederholung ausgetreten werden
continue
– der aktuelle Schleifendurchlauf beendet werden und mit dem nächsten Durchlauf fortgesetzt werden.
Beispiel:
<script type=“text/javascript“>
var i=0;
while(i<10000) { if (i==20) break;
i++;
if (i==7 || i==13) continue;
document.write(“<li>Listenpunkt“+i+“</li><br/>“);
}
</script>
Peter Sobe Internettechnologien 9
JavaScript – Zyklus (3)
Es werden die
Listenpunkte von 1 bis 19
erzeugt, mit Ausnahme
von 7 und 13
Ohne Parameter und Rückgabewert:
function fun() {
// hier der Code }
Mit Parametern und Rückgabewert:
function calculate(a, b) {
var c = a * (1 + (b / 100));
return c;
}
JavaScript – Funktionen
Vereinbarung der Felder:
var werte= new Array(100);
var 3dpos = new Array(2);
...
for (i=0;i<=100;i++) {
werte[i]=i*2;
}
3dpos[0]=x;
3dpos[1]=y;
3dpos[2]=z;
len = werte.length(); // gibt Anzahl Elemente zurück, hier speziell 101
Peter Sobe Internettechnologien 11
JavaScript – Felder (1)
Die Feldelemente werden beginnend mit 0 nummeriert.
Wenn n Elemente vereinbart werden, dann besitzt das Feld n+1 Elemente
(von Index 0 bis n).
Das ist ein Unterschied gegenüber C.
Mehrdimensionale Felder
var 3dpositions = new Arrray(5);
for (i=0;i<3dpositions.length;i++) 3dpositions[i] = new Array(2);
for (i=0;i<=5;i++) { 3dpos[i][0]=x[i];
3dpos[i][1]=y[i];
3dpos[i][2]=z[i];
}
JavaScript – Felder (2)
Verschiedene Varianten zum Anlegen von Feldern:
über die Anzahl der Elemente var 3dpos = new Array(2);
über die Initialisierung der Elemente
Objektname = new Array(Element0, Element1, ..., element_n);
MeineKinder = new Array(„Max", „Moritz", „Hensel", „Gretel");
Ohne Länge
MeineVorlesungen = new Array();
//Elemente entstehen durch ihre Referenzierung
…
meineVorlesungen[0]="Internettechnologien";
meineVorlesungen[1]="Parallele Programmierung";
meineVorlesungen[2]="Informatik für Chemiker";
Peter Sobe Internettechnologien 13
JavaScript – Felder (3)
Assoziative Felder
Elemente können über ihren Inhalt referenziert werden Beispiel aus selfhtml.org:
<script type="text/JavaScript">
var Mitarbeiter = new Array();
Mitarbeiter[0] = new Object();
Mitarbeiter[0]["Name"] = "Müller";
Mitarbeiter[0]["Vorname"] = „Fred";
Mitarbeiter[0]["Wohnort"] = "Dresden";
Mitarbeiter[1] = new Object();
Mitarbeiter[1]["Name"] = "Schulze";
Mitarbeiter[1]["Vorname"] = „Maria";
Mitarbeiter[1]["Wohnort"] = "Berlin";
JavaScript – Felder (4)
Assoziative Felder (Fortsetzung) Beispiel aus selfhtml.org:
for (var i = 0; i < Mitarbeiter.length; i++) {
document.write("<dl><dt>Mitarbeiter " + (i + 1) + "<\/dt>");
for (var Eigenschaft in Mitarbeiter[i])
document.write("<dd>" + Eigenschaft + ": " + Mitarbeiter[i][Eigenschaft] + "<\/dd>");
document.write("<\/dl>");
}
</script>
Peter Sobe Internettechnologien 15
JavaScript – Felder (5)
Im JavaScript-Element werden eine oder mehrere Funktionen definiert.
<script type=“text/javascript“>
var z=0; // global variable function1() { alert(“z=“+z); } function2() { z=z+1;}
</script>
Es können auch mehrere JavaScript-Elemente in einem Dokument
eingebunden werden. Das wird gern benutzt, wenn Skripte aus externen Quelldateien eingebunden werden.
JavaScript –Einbindung der Funktionen
<script type="text/javascript"
src="../jsclasses/myjsfunctions.js" ></script>
<script type="text/javascript">
function test(){ … }
</script>
Als Beispiel wurden drei Funktionen definiert, die nun auf unterschiedliche Art aufgerufen werden.
Bei Laden der Webseite:
<body onload=“test()“> … </body>
Bei Button-Klick:
<input type=“button“ value=“OK“ onclick=“function1()“>
Bei Formular-Aktionen:
<form id=“Formular1“ action=““ method=“post“
onsubmit=“function1()“ onreset=“function2()“>
<input id=“werteingabe“ type=“text“ size=“5“>
<input type=“submit“> value=“ Berechnen“/>
<input type=“reset“> value=“ Abbruch“/>
</form>
Peter Sobe Internettechnologien 17
JavaScript –Aufruf der Funktionen (1)
Zeitgesteuerter Aufruf (Zeitwert in Millisekunden):
<body onload=“settimeout(‘test()‘,1000)“> … </body>
Aufruf der Funktionen untereinander:
function1() {
// do something function2();
}
Generelles Konzept:
Ein Eventhandler reagiert auf Ereignisse, die von HTML-Elementen mit entsprechenden Attributen (onclick, onload usw.) ausgelöst werden.
In den Ereignis-Attributen kann direkt JavaScript-Code notiert werden, oder der Aufruf von Funktionen innerhalb eines JavaScript-Elements ausgelöst werden.
Attribute (Auswahl): onclick für button, onchange für text, textarea,
onmouseover, onload/onunload für HTML-Seiten(body)
JavaScript –Aufruf der Funktionen (2)
Inline-Skripte:
Diese Skripte stehen innerhalb des Body und werden mit den Laden des HTML-Dokuments ausgeführt. Sie erzeugen oftmals Elemente der Webseite (auf automatisierte Art und Weise).
<html><head><title>Test</title></head>
<body>
<script type="text/javascript">
var i;
document.write("<ul>");
for (i = 1; i != 10; i++) document.write("<li> Listenpunkt " + i + "</li>");
document.write("</ul>");
</script>
…
Peter Sobe Internettechnologien 19
JavaScript –Aufruf der Funktionen (3)
* Listenpunkt 1
* Listenpunkt 2
* Listenpunkt 3
* Listenpunkt 4
* Listenpunkt 5
* Listenpunkt 6
* Listenpunkt 7
* Listenpunkt 8
* Listenpunkt 9
Inline-Skripte (Fortsetzung):
Es können bereits bestehende Elemente gefüllt oder erweitert werden.
<div id="platzhalter1"></div>
<div id="platzhalter2"></div>
<div id="platzhalter3"></div>
<div id="platzhalter4"></div>
<div id="platzhalter5"></div>
<script type="text/javascript">
var i;
for (i=1;i!=6;i++)
{ document.getElementById("platzhalter"+i).innerHTML="<p><font color='blue' size='4'>Listenpunkt"+i+"</font></p>";
alert("platzhalter"+i);
}
</script>
JavaScript –Aufruf der Funktionen (4)
Das JavaScript ist ein normales Element im DOM
Vergleichsoperatoren <,>,<=,=> innerhalb des Skriptes werden als Tag-Kennzeichen gewertet (Problem!).
Mit Kommentar:
<script type=“text/javascript“>
/*<![CDATA[*/
function calculate(a) {
var c = 1;
for (i=1;i<=a; i++) c= c*i;
return c;
}
/*]]>*/
</script>
Peter Sobe Internettechnologien 21
JavaScript in XHTML
Erklärung:
Zeichen <,>,&, … sind innerhalb Elementen nicht erlaubt.
XML-Parser übergeht Bereiche, die durch
<![CDATA[ …. ]]>
eingefasst sind.
Knoten Attribute
Vater/Kind-Knoten
Siblings (Geschwisterknoten)
JavaScript – DOM-Referenzierung (1)
Vater Kinder
Geschwister
Auslesen bzw. Setzen der Werte vom Input-Feldern über DOM-Referenz
<FORM id=“Formular1“> <input id=“Eingabe“ type=“text“/>
</FORM>
…
var z = Formular1.Eingabe.value;
Stattdessen kann auch verwendet werden…
var e = document.getElementById(“Eingabe“);
Über das Objekt e können Werte ausgelesen und gesetzt werden.
eingabe = e.value; // auslesen e.value=“Standardwert“; // setzen
Peter Sobe Internettechnologien 23
JavaScript – DOM-Referenzierung (2)
Element-Id
Lesen und Setzten von Attributen:
var e = document.getElementById(“element-id“);
Über e können Attribute ausgelesen und gesetzt werden.
a = e.getAttribute(“attr-name“);
e.setAttribute(“attr-name“, “attr-value“);
Verkürzte Schreibweise:
document.getElementById(“element-id“).setAttribute(“attr-name“,
“attr-value“);
JavaScript – DOM-Referenzierung (3)
JavaScript-Funktionen zum Zugriff auf Dokumenteigenschaften Zugriff auf Kind-Knoten: firstChild, lastChild
Beispiel aus SelfHTML.org
<body>
<ul><li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>
<script type="text/javascript">
var ErsterPunkt = document.getElementsByTagName("ul")[0].firstChild;
document.write(ErsterPunkt.firstChild.data);
</script>
</body>
Peter Sobe Internettechnologien 25
JavaScript – DOM-Referenzierung (4)
Zugriff auf Geschwister-Knoten: nextSibling (auch previousSibling) Beispiel aus SelfHTML.org
<body>
<ul><li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>
<script type="text/javascript">
document.write("Das ul-Element hat folgende Knoten unter sich:<br>");
var Knoten = document.getElementsByTagName("ul")[0].firstChild;
while (Knoten != null) {
document.write("Einen Knoten mit dem Namen <b>" + Knoten.nodeName +
"<\/b><br>");
Knoten = Knoten.nextSibling;
}
</script>
</body>
JavaScript – DOM-Referenzierung (5)
Test, ob Kind-Knoten vorhanden: hasChildNodes()
gibt true oder false zurück, je nach dem ob das referenzierte Element Kindknoten besitzt oder nicht
Knoten besitzen folgende Eigenschaften/Variable:
nodeName, NodeValue, nodeType, … Eigenschaft: nodeName
var Knoten = document.getElementById("dasScript");
document.write("Dieses Script-Element hat folgenden Knotennamen:
<b>" + Knoten.nodeName + "</b>");
Peter Sobe Internettechnologien 27
JavaScript – DOM-Referenzierung (6)
Eigenschaft: nodeType
<html><head><title>Test</title>
</head><body>
<p align="center">ein kleiner Text</p>
<script type="text/javascript">
var Element = document.getElementsByTagName("p")[0];
var Ausrichtung = Element.getAttributeNode("align");
alert(Ausrichtung.nodeType);
</script>
</body>
</html>
Knotentypen können Tag-Elementknoten (Kodierung 1), Attributknoten (2), Textknoten (3) und weitere sein
JavaScript – DOM-Referenzierung (7)
Eigenschaft: nodeValue
<script type="text/javascript">
function TextAendern () {
document.getElementById("derText").firstChild.nodeValue = document.Formular.neuerText.value;
}
</script>
Eigenschaft: parentNode
</head><body>
<ul> <li>ein Punkt</li><li>ein zweiter</li></ul>
<script type="text/javascript">
alert(document.getElementsByTagName("li")[0].parentNode.parentNode.tagName);
</script>
</body>
Peter Sobe Internettechnologien 29
JavaScript – DOM-Referenzierung (8)
Funktion: InsertBefore
<html><head><title>Test</title></head>
<body>
<p id="derText">Text <i id="derKursiveText">und mit kursivem Text</i></p>
<script type="text/javascript">
var neuB = document.createElement("b");
var neuBText = document.createTextNode("mit fettem Text ");
neuB.appendChild(neuBText);
document.getElementById("derText").insertBefore(neuB, document.getElementById("derKursiveText"));
</script>
</body></html>
InsertBefore wird ausgehend vom Parent-Knoten aufgerufen, wobei das Kind- Element für die Platzierung (davor) angegeben wird.
JavaScript – Dynamische Effekte per DOM (1)
Löschen per removeChild(), Einfügen neuer Knoten per appendChild()
<html><head><title>Test</title></head>
<body>
<ol id="Liste"> <li>Element</li> </ol>
<script type="text/javascript">
document.getElementById("Liste").removeChild(document.getElementById("Liste").firstChild);
for (var i = 0; i < 10; i++) {
var newLI = document.createElement("li");
var liNr = i + 1;
var newLIText = document.createTextNode("Das ist Listeneintrag Nummer " + liNr);
document.getElementById("Liste").appendChild(newLI);
document.getElementsByTagName("li")[i].appendChild(newLIText);
}
</script>
</body></html>
Peter Sobe Internettechnologien 31
JavaScript – Dynamische Effekte per DOM (2)
Eigenschaft: innerHTML
<html>
<head>
<title>DOM 4</title>
<script type="text/javascript">
var Neu = "neuer <b>fetter<\/b> Text";
function Aendern ()
{ meinAbsatz.innerHTML = Neu; }
</script>
</head>
<body>
<p id="meinAbsatz">alter Text</p>
<a href="javascript:Aendern()">Anderer Text</a>
</body>
</html>
JavaScript – Dynamische Effekte per DOM (3)
JavaScript kennt keine Klassen (im Gegensatz zu Java und C++);
dennoch ist objektorientiertes Programmieren möglich.
Einige Aspekte:
Variablen und Funktionen erzeugen intern Objekte
z.B. erzeugen Funktionen s.g. Funktionsobjekte
JavaScript-Objekte sind assoziative Arrays mit Attributen und Methoden als Array-Elemente
Man kann einem JavaScript-Objekt zur Laufzeit neue Methoden zuweisen
Vererbung über prototypische Objekte
Peter Sobe Internettechnologien 33
JavaScript – Objektorientiert Programmieren (1)
Beispiel einer „Klasse“ mit zwei Instanzen
function Klasse(){
this.funktion1 = eingabe;
this.funktion2 = ausgabe;
}
function eingabe() { … } function ausgabe() { … } obj1 = new Klasse();
obj2 = new Klasse();
obj1.funktion1();
obj2.funktion1();
obj1.funktion2();
JavaScript – Objektorientiert Programmieren (2)
Eine Klasse entsteht über
ein Funktionsobjekt, dem
man über this weitere
Funktionen zuweist.
Vererbung:
function Basisklasse() {
this.attribute = “wert“;
this.basisfunktion = b;
}
function b() { … }
function AbgeleiteteKlasse() { … }
AbgeleiteteKlasse.prototyp = new Basisklasse();
obj1 = new AbgeleiteteKlasse();
obj1.basisfunktion();
…
Peter Sobe Internettechnologien 35
JavaScript – Objektorientiert Programmieren (3)
Vererbung kann über das
Attribut „prototyp“ erzeugt
werden.
server-seitiges Scripting
Bislang betrachtet:
2-Tier Architekturen
Überleitung zu 3-Tier-Architekturen
Webbrowser
Webserver
Javascript
JavaScript
HTML, XML, +eingebettete Formate
3-Tier Architekturen
Webbrowser
Javascript
JavaScript
Webserver
PHP
