Web-Programmierung. JavaScript / DHTML Thomas Perschke

Transkript

1 Web-Programmierung JavaScript / DHTML Thomas Perschke

2 Heute JavaScript JavaScript einbinden Grundlagen DOM Elemente referenzieren Objekte Beispiele Übung

3 JavaScript Kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache Interpretierte Programmiersprache, wird zur Laufzeit vom Web-Browser in einer Sandbox interpretiert Erlaubt den Zugriff auf das dargestellte Dokument und auf den Browser W3-Konsortium erarbeitet das Document Object Model (DOM). Es definiert, wie sich auf die einzelnen Elemente eines Dokuments zugreifen lässt und welche Manipulationsmöglichkeiten es gibt. Verwendung nicht auf Web-Browser beschränkt generell Einbettung in Anwendung möglich

4 Variablen und Werte Variablen definieren var Hinweis = "Fehler 4711"; var i, x; var Kontostand = 420; Werte von Variablen ändern x = x + i; Hinweis = 'Alarm'; a = "Max"; a = 5; t = "5" * 2;

5 JavaScript - Allgemeine Regeln Anweisungen notieren Zahl = 41; Quadrat = Zahl * Zahl; if(zahl > 1000) Zahl = 0; Anweisungsblöcke if(zahl > 1000) { Zahl = 0; Neustart(); } Kommentare /*... */ //...

6 Operatoren Zuweisungsoperator x = 5 Vergleichsoperatoren ==!= < <= > >= Berechungsoperatoren = - * / % Logische Operatoren &&! Operatoren zur Zeichenkettungverknüpfung Name = Vorname +, + Zuname

7 Verzweigung / Schleifen if (Bedingung) { Anweisungen; } else { Anweisungen; } for ([Startausdruck]; [Bedingung]; [Iterations-Ausdruck]) { Anweisungen; } while (Bedingung) { Anweisungen; } do { Anweisungen; } while (Bedingung);

8 Erstes Experiment Aufgabe 1 Für einfache Experimente mit JavaScript kann man auch das URL-Pseudoprotokoll javascript: verwenden, um einen JavaScript-Ausdruck auszuwerten und das Ergebnis auszugeben. Beispiel: javascript: 2*7+5 javascript: alert("hallo Welt") javascript: document.write("hallo Welt") Aufgabe 1 Nutzen Sie die Adresszeile zur Erstellung eines JavaScript-Ausdrucks, welcher nebenstehende Ausgabe erzeugt. Mit der Anweisung document.write(...) können Sie in das Dokument schreiben, also sozusagen eine Ausgabe erzeugen.

9 js_examples\jsintegration0.html javascript: (bei Verweisen) <html> <head> <title>test</title> </head> <body> <a href="javascript:alert( Hallo Welt )"> Klicken</a> </body> </html>

10 js_examples\jsintegration1.html JavaScript-Bereiche in HTML definieren <html> <head> <title>test</title> <script type="text/javascript"> alert("hallo Welt!"); </script> </head> <body> </body> </html>

11 js_examples\jsintegration2a.html JavaScript-Anweisungen in HTML-Tags <html> <head> <title>test</title> </head> <body> <input type="button" value="klicken" onclick="alert('hallo Welt')"> </body> </html>

12 JavaScript Event-Handler Event-Handler sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Weitere Event-Handler: onabort (bei Abbruch) img onblur (beim Verlassen) body, input, select, textarea onchange (bei Änderung) input, select, textarea onclick (beim Anklicken) a input textarea ondblclick onfocus (beim Aktivieren) body, input, select, textarea onload (beim Laden) body onmouseover (beim Überfahren des Elements mit der Maus) a...

13 JavaScript-Anweisungen in HTML-Tags <html> <head> <title>test</title> <script type="text/javascript"> <! - function Quadrat() {... } //--> </script> </head> <body> <input type="text" name="eingabe" size="3"> <input type="button" value="quadrat errechnen" onclick="quadrat()"> </body> </html>

14 JavaScript in separaten Dateien function Quadrat() {... } <html> <head> <title>javascript-test</title> <script src="quadrat.js" type="text/javascript"> </script> </head> <body> <input type="text" name="eingabe" size="3"> <input type="button" value="quadrat errechnen" onclick="quadrat()"> </body> </html>

15 JavaScript - Funktionen Eine Funktion ist ein Block mit Anweisungen, dem ein Name zugewiesen wird. Eine Funktion hat eine Liste von Parametern, die auch leer sein kann Eine Funktion kann einen Wert zurückgeben function funktionsname (param1, param2) { Anweisungen; return Ausdruck; }

16 JavaScript - Beispiel

17 JavaScript Beispiel 2 <html> <head><title>test</title> <script type="text/javascript"> <! - function Geheim() { var Passwort = "Traumtaenzer"; var Eingabe = window.prompt("bitte geben Sie das Passwort ein",""); if(eingabe!= Passwort) { alert("falsches Passwort!"); Geheim(); } else { document.location.href="geheim.htm"; } } // --> </script> </head> <body onload="geheim()"> <h1>hier kommen Sie nur mit Passwort rein ;-)</h1> </body> </html>

18 Aufgabe 2 Aufgabe 2 Erzeugen Sie eine HTML-Formular mit einem Knopf. Nach Klick auf den Knopf sollen wie in Aufgabe 1 die ersten zehn Quadratzahlen aufgelistet werden. Erstellen Sie dazu die Funktion quadratzahlenanzeigen. Verbinden Sie die Funktion und Knopf mittels einem geeigneten EventHandler. Stellen Sie alternativ einen Verweis mit gleicher Funktionalität zur Verfügung. Hinweis: Mit der Anweisung document.write(...) können Sie in das Dokument schreiben, sozusagen eine Ausgabe erzeugen.

19 JavaScript Objekte, Eigenschaften und Methoden Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Funktionen (Methoden). Die JavaScript-Objekte sind in einer Hierarchie geordnet. Zwei Gruppen von vordefinierten JavaScript-Objekten Core objects (Kernobjekte) navigator Date Array Browserfenster als Ausgangspunkt window document node

20 JavaScript Objekt navigator Eigenschaften: appcodename (Spitzname des Browsers) appname (offizieller Name des Browsers) appversion (Browser-Version) cookieenabled (Cookies erlaubt) language (Browser-Sprache) platform (Plattform, auf der der Browser läuft) useragent (HTTP-Identifikation des Browsers) Methoden: javaenabled() (Java-Verfügbarkeit überprüfen) Eigenschaften und Methoden von navigator können Sie direkt ansprechen

21 JavaScript - Eigenschaften von Objekten <html><head><title>test</title> </head><body> <script type="text/javascript"> alert("verwendeter Browser: " + navigator.appname + " Version " + navigator.appversion); </script> </body></html>

22 JavaScript Objekt-Methoden <html><head><title>test</title> </head><body> <script type="text/javascript"> if( navigator.javaenabled() ){ alert("java verfügbar!"); } else { alert("java nicht verfügbar!"); } </script> </body></html>

23 JavaScript Objekt Date

24 JavaScript vordefinierte Objekte <html><head><title>test</title> <script type="text/javascript"> function bis2020 () { var jetzt = new Date(); var Zeit = jetzt.gettime() / 1000; var Jahr2020 = new Date(2020, 0, 1, 0, 0, 0); var Endzeit = Jahr2020.getTime() / 1000; var Rest = Math.floor(Endzeit - Zeit); alert("noch " + Rest + " Sekunden bis zum Jahr 2020"); } </script> </head><body> <a href="javascript:bis2020()">wie lange noch?</a> </body></html>

25 JavaScript Objekt window Das Objekt window (Fenster) ist das oberste Objekt der Objektfamilie für alles, was im Browser-Fenster angezeigt wird Über das Objekt window können Sie das Dokumentfenster abfragen und kontrollieren. Ferner können Sie neue Fenster definieren. Dabei können Sie auch die Fenstereigenschaften frei bestimmen. Beispiel: window.defaultstatus = "Meine Homepage"; Open, close, alert, prompt, confirm, print, moveto, resizeto

26 JavaScript Window-Objekt pagexoffset pageyoffset home() menubar moveto() moveby() close() open() scrollto() scrollby() back() forward() outerheight defaultstatus status prompt() alert()

27 Beispiel: window-objekt: neues Fenster öffnen <html> <head> <title>test</title> <script type="text/javascript"> <! window.open("datei.htm", "Meines","width=310,height=400,left=0,top=0"); //--> </script> </head> <body> </body> </html>

28 Aufgabe 3 Erstellen Sie eine HTML-Seite, in welcher direkt bei Aufruf der Name des Browsers, der Name des Betriebssystems sowie die aktuelle Uhrzeit innerhalb der Seite angezeigt wird. Hinweis: Nutzen Sie zur Ausgabe die Methode write des Objekts document. Aktualisieren Sie die Uhrzeit, indem Sie die Seite jede Sekunde neu laden. Nutzen Sie dazu die reload-methode des Objekts location und die Methode settimeout des window-objekts. Hinweis: siehe Erweitern Sie die Seite so, dass nach Klick auf eine Schaltfläche mit der Aufschrift Atomuhr ein neues Fenster mit der Seite angezeigt wird. Hinweis: Erzeugen Sie den Button über ein input-element mit dem Type-Attribut button.

29 JavaScript Objekt document Das document-objekt bezieht sich auf den Inhalt, der in einem Browser-Fenster angezeigt wird. In der Objekthierarchie von JavaScript liegt es unterhalb des window-objekts Entscheidend für den Zugriff auf den HTML- Elementbaum sind beim document-objekt die DOM- Methoden getelementbyid, und getelementsbyname (und getelementsbytagname). bgcolor, lastmodified, referrer, write, writeln

30 JavaScript Document-Objekt document.getelementsbytagname(...) HTML-Elementobjekte Hallo Max Mustermann write()

31 HTML-Elementobjekte H1 FORM Beispiel: H1.align='right'; TITLE HR

32 JavaScript HTML-Elementobjekte Dem Document Object Models (DOM) zufolge stellt jedes HTML-Element in einer HTML-Datei ein Objekt dar (HTML-Elementobjekt) Wichtig ist dabei zu wissen, wie mit einer Scriptsprache wie JavaScript auf ein solches HTML-Elementobjekt zugegriffen werden kann. Nach Syntax der HTML-Variante des DOM kann nur auf solche HTML-Elemente zugegriffen werden, die in ihrem einleitenden Tag entweder ein name-attribut oder ein id-attribut enthalten

33 JavaScript - Zugriff auf HTML-Elemente <html><head><title>test</title> <script type="text/javascript">  </script> </head><body> HTML-Elementobjekt: "h1" <h1 id="unentschlossen">wo gehöre ich eigentlich hin?</h1> <a href="javascript:ausrichten('left')">links?</a><br> <a href="javascript:ausrichten('center')">zentriert?</a><br> <a href="javascript:ausrichten('right')">rechts?</a><br> </body></html> H1

34 JavaScript Zugriff auf Elemente <html><head><title>test</title> <script type="text/javascript">  HTML-Elementobjekt: "input" </script> </head><body> <form name="formular" action=""> <input type="checkbox" name="zutat" value="salami"> Salami <br> <input type="checkbox" name="zutat" value="pilze"> Pilze <br> <input type="checkbox" name="zutat" value="oliven"> Oliven <br> <input type="button" value="test" onclick="ankreuzen()"> </form> </body></html>

35 Aufgabe 4 Erstellen Sie eine HTML-Dokument, welches im Fenstertitel die aktuelle Uhrzeit darstellt. Die Uhrzeit soll sekündlich aktualisiert werden. Vorgehensweise: 1. Erstellen Sie eine JavaScript-Funktion names aktualisierefenstertitel. Die Funktion ermittelt über eine der document.getelement... -Methoden das HTML-Elementobjekt für den Titel. Über das Attribut text des ermittelten HTML-Elementobjekts kann der Titel auf das aktuelle Datum gesetzt werden. Dazu muss zuvor über das Date-Objekt das aktuelle Datum bestimmt werden. Dies geschieht durch das Anlegen einer neuen Date-Variablen mittels new-operator. 2. Sie sollen nun dafür sorgen, das die eben erstellte Funktion sekündlich aufgerufen wird. Nutzen Sie dazu die Methode setinterval des Objekts window : window.setinterval("funktionsname()", Intervall in ms);

36 Aufgabe 5: Geodatenbestimmung Erstellen Sie eine Javascript-basierte Webanwendung, welche die Eingabe einer Adresse ermöglicht und auf Knopfdruck die Geodaten (Längen- und Breitengrad) ermittelt. Das Ziel soll auf einer Karte innerhalb der Seite angezeigt und mit einer Markierung versehen werden.

37 JavaScript Zugriff auf Elemente <html><head><title>test</title> <script type="text/javascript"> "node -Objekt, aber auch HTML-Elementobjekt: " h1" </script> </head><body> <h1>dynamisch, sehr dynamisch</h1> <p>ein erster Absatz</p> <p>ein zweiter Absatz</p> <p>ein dritter Absatz</p> <p><a href="javascript:neuetexte()">neue Texte</a></p> </body></html>

38 JavaScript Objekt node Das node-objekt ist das zentrale Objekt des Document Object Models (DOM) Hintergrund ist das Modell, dass ein Auszeichnungssprachen- Dokument aus einem Baum von Knoten besteht Jedes Element und alle Zeichendaten stellen eigene Knoten dar. Diese Knoten bilden die Baumstruktur. Das node-objekt stellt Eigenschaften und Methoden bereit, um auf die einzelnen Knoten zuzugreifen, egal, wie tief diese Knoten in der Baumstruktur liegen. Das node-objekt stellt damit die allgemeinere und für alle XMLgerechten Sprachen gültige Variante dessen dar, was die HTML- Elementobjekte speziell für HTML darstellen Man kann in JavaScripts, die in HTML-Dateien notiert oder eingebunden sind, sowohl mit den HTML-Elementobjekten als auch mit dem node-objekt arbeiten

39 JavaScript - nodes <html> html <head> <title>test</title> </head> <body> <h1>eine erste Seite</h1> <div id="content"> <cite>alles wird <font color="red">gut</font></cite> </div> </body> </html> head title Test body h1 Eine erste Seite Alles wird n = document.getelementbyid("content"); n.firstchild.lastchild.setattribute("color", "blue"); div cite lastchild n firstchild font gut

40 JavaScript Arbeiten mit dem Objekt node Um auf die Eigenschaften und Methoden des node-objekts zugreifen zu können, benötigen Sie einen Knoten. Um auf vorhandene Knoten im Dokument zuzugreifen, werden die Methoden des document-objekts getelementbyid, getelementsbyname und getelementsbytagname verwendet. Ausgehend davon können Sie die Attributknoten, Textknoten und weitere Element-Kindknoten eines Elements ansprechen. Um neue Knoten zu erzeugen, steht im Objekt document die Methoden createelement und createtextnode zur Verfügung. Diese können dann mit den entsprechenden Methoden des Objekts node in den Elementbaum hinzugefügt werden.

41 JavaScript Objekt node Eigenschaften attributes (Speichert einen Array aus verfügbaren Attributen eines Elements) childnodes (Speichert einen Array aus verfügbaren Kindknoten eines Knotens) data (Speichert Zeichendaten eines Knotens, sofern es sich um einen Textknoten handelt) firstchild (erster Kindknoten) lastchild (letzter Kindknoten) nextsibling (nächster Knoten eines Typs) nodename (Name des Knotens) nodetype (Knotentyp) nodevalue (Wert/Inhalt des Knotens) parentnode (Elternknoten) previoussibling (vorheriger Knoten eines Typs)

42 JavaScript Objekt node Methoden appendchild() (Kindknoten hinzufügen) appenddata() (Zeichendaten hinzufügen) clonenode() (Knoten kopieren) deletedata() (Zeichendaten löschen) getattribute() (Wert eines Attributknotens ermitteln) getattributenode() (Attributknoten ermitteln) haschildnodes() (auf Kindknoten prüfen) insertbefore() (Knoten einfügen) insertdata() (Zeichendaten einfügen) removeattribute() (Wert eines Attributknotens löschen) removeattributenode() (Attributknoten löschen) removechild() (Knoten löschen) replacechild() (Kindknoten ersetzen) replacedata() (Zeichendaten ersetzen) setattribute() (Wert eines Attributknotens setzen) setattributenode() (Attributknoten erzeugen)

43 Beispiel <html><head><title>test</title> <script type="text/javascript">  </script> </head><body> <div id="bereich" style="border:1px black solid; padding:10px"> </div> </body></html>

44 Aufgabe 6: Uhrzeit als Lauftext Erstellen Sie eine HTML-Seite und platzieren Sie im Body ein Blockelement (<div>) mit dem Inhalt Uhrzeit unbekannt. Erstellen Sie eine Funktion aktualisiereuhrzeit(), die das Node- Objekt zum div-element bestimmt, dann zu dem der Uhrzeit zugeordneten Textknoten navigiert und dort die aktuelle Uhrzeit setzt. Erweitern Sie die Seite so, dass die Methode aktualisiereuhrzeit() sekündlich aufgerufen wird. Erweitern Sie die Seite so, dass sich die Uhrzeit von links nach rechts über das Fenster bewegt. Nach Verlassen des Fensters erscheint die Uhrzeit wieder am linken Fensterrand (Lauftext). Steuern Sie die Bewegung über ein dynamische generiertes style- Attribute.

45 Aufgabe 7: Dynamische Aufzählung Vervollständigen Sie die HTML-Seite aufzaehlung.html so, dass eine Aufzählung mit zehn Punkten zu sehen ist. Jeder Aufzählungspunkt soll über den Text Kapitel und einer aufsteigenden Nummer verfügen. Änderungen im Body-Bereich sollen keine vorgenommen werden! Die Aufzählungspunkte sollen quadratisch sein. Gehen Sie schrittweise vor. Hinweis: Eine Aufzählung sieht in HTML wie folgt aus: <ul type="square"> <li>kapitel 1</li> [...] <li>kapitel 10</li> </ul>

46 Hinweis zu Aufgabe 7: node-objekt var node = document.getelementbyid("id"); data Speichert Zeichendaten eines Knotens, sofern es sich um einen Textknoten handelt node.data = "Neuer Text"; firstchild / lastchild erster / letzter Kindknoten node.firstchild.data = "Neuer Text"; appendchild(newchild) Hängt einen zuvor neu erzeugten Knoten in die bestehende Knotenstruktur ein, und zwar so, dass er als letztes Kindelement eines anzugebenden Knotens eingefügt wird. node.appendchild(newnode); setattribute(attrname, attrvalue) Setzt in einem Element einen Attributwert neu. Ist das Attribut bereits vorhanden, wird sein alter Wert durch den neuen ersetzt. Ist es noch nicht vorhanden, wird es neu angelegt und mit dem neuen Wert belegt. node.setattribute("align", "center");

47 Hinweis zu Aufgabe 7: document-objekt createelement() Erzeugt ein neues Element für den Elementenbaum. var n_h1 = document.createelement("h1"); createtextnode() Erzeugt einen neuen Textknoten für den Elementenbaum. var n_text = document.createtextnode("hallo Welt!");

48 DHTML Dynamisches HTML (engl. "Dynamic HTML" oder abgekürzt "DHTML") ist eine Erfindung von Marktstrategen, sagen Kritiker. keine klassische HTML-Erweiterung in Gestalt neuer HTML-Elemente. keine neue Sprache. Dynamisches HTML ist vielmehr der Sammelbegriff für verschiedene Lösungen, um dem Autor einer Web- Seite zu ermöglichen, Elemente der Web-Seite während der Anzeige dynamisch zu ändern, sei es automatisch oder durch Einwirken des Anwenders.

49 Zusammenfassung JavaScript ist eine recht einfache und leicht zu erlernende Skriptsprache JavaScript erlaubt es, Teile der Inhalte einer Webseite zu dynamisieren JavaScript hat die Möglichkeit auf Events zu reagieren, indem es beispielsweise Methoden aufruft, wenn die Events eintreten. JavaScript kann bestehende HTML-Elemente und deren Inhalt lesen und begrenzt selbst ändern oder sogar erzeugen. Aufwind durch AJAX Nachteile: Stellt Anforderungen an den Client (JavaScript-Engine) Unterschiedliche JavaScript-Dialekte Sandbox-Mechanismus ( Sicherheitsaspekt)