Web-Programmierung JavaScript / DHTML 27.09.2017 Thomas Perschke
Heute JavaScript Übung JavaScript einbinden Grundlagen DOM Elemente referenzieren Objekte Beispiele Übung 27.09.2017
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 27.09.2017
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; 27.09.2017
JavaScript - Allgemeine Regeln Anweisungen notieren Zahl = 41; Quadrat = Zahl * Zahl; if(Zahl > 1000) Zahl = 0; Anweisungsblöcke if(Zahl > 1000) { Zahl = 0; Neustart(); } Kommentare /* ... */ //... 27.09.2017
Operatoren Zuweisungsoperator x = 5 Vergleichsoperatoren == != < <= > >= Berechungsoperatoren + ++ += - * / % Logische Operatoren && || ! Operatoren zur Zeichenkettungverknüpfung Name = Vorname + “, “ + Zuname 27.09.2017
Verzweigung / Schleifen if (Bedingung) { Anweisungen; } else { Anweisungen; } for ([Startausdruck]; [Bedingung]; [Iterations-Ausdruck]) { Anweisungen; } while (Bedingung) { Anweisungen; } do { Anweisungen; } while (Bedingung); 27.09.2017
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. 27.09.2017
javascript: (bei Verweisen) js_examples\jsIntegration0.html javascript: (bei Verweisen) <html> <head> <title>Test</title> </head> <body> <a href="javascript:alert(‘Hallo Welt‘)"> Klicken</a> </body> </html> 27.09.2017
JavaScript-Bereiche in HTML definieren 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> 27.09.2017
JavaScript-Anweisungen in HTML-Tags 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> 27.09.2017
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 ... 27.09.2017
JavaScript-Anweisungen in HTML-Tags <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> 27.09.2017
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> 27.09.2017
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; } 27.09.2017
JavaScript - Beispiel 27.09.2017
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> 27.09.2017
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“. 27.09.2017
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 27.09.2017
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 27.09.2017
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> 27.09.2017
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> 27.09.2017
JavaScript – Objekt „Date“ 27.09.2017
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> 27.09.2017
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 27.09.2017
JavaScript – Window-Objekt close() open() pageXOffset pageYOffset menuBar moveTo() moveBy() home() scrollTo() scrollBy() back() forward() outerHeight defaultStatus status alert() prompt() 27.09.2017
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> 27.09.2017
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 http://de.selfhtml.org/javascript/objekte/index.htm Erweitern Sie die Seite so, dass nach Klick auf eine Schaltfläche mit der Aufschrift „Atomuhr“ ein neues Fenster mit der Seite „http://www.uhrzeit.org/“ angezeigt wird. Hinweis: Erzeugen Sie den Button über ein input-Element mit dem Type-Attribut „button“. 27.09.2017
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 27.09.2017
JavaScript – Document-Objekt Hallo Max Mustermann document.getElementsByTagName(...) HTML-Elementobjekte write() 27.09.2017
Beispiel: H1.align='right'; HTML-Elementobjekte H1 FORM Beispiel: H1.align='right'; TITLE HR 27.09.2017
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 27.09.2017
JavaScript - Zugriff auf HTML-Elemente <html><head><title>Test</title> <script type="text/javascript"> <!-- function Ausrichten(wie) { document.getElementById("unentschlossen").align = wie; } //--> </script> </head><body> <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> HTML-Elementobjekt: "h1" H1 27.09.2017
JavaScript – Zugriff auf Elemente <html><head><title>Test</title> <script type="text/javascript"> <!-- function Ankreuzen() { document.getElementsByName("Zutat")[0].checked = true; } //--> </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> HTML-Elementobjekt: "input" 27.09.2017
Aufgabe 4 Erstellen Sie eine HTML-Dokument, welches im Fenstertitel die aktuelle Uhrzeit darstellt. Die Uhrzeit soll sekündlich aktualisiert werden. Vorgehensweise: 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. 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); 27.09.2017
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. 27.09.2017
JavaScript – Zugriff auf Elemente <html><head><title>Test</title> <script type="text/javascript"> <!-- function neueTexte() { document.getElementsByTagName("p")[0].firstChild.data = "neuer erster"; document.getElementsByTagName("p")[1].firstChild.data = "neuer zweiter"; document.getElementsByTagName("p")[2].firstChild.data = "neuer dritter"; document.getElementsByTagName("h1")[0].firstChild.data = "Alles anders"; } //--> </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> H1 "node“-Objekt, aber auch HTML-Elementobjekt: " h1" 27.09.2017
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 XML- gerechten 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 27.09.2017
JavaScript - nodes <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 body n firstChild lastChild title h1 div Test Eine erste Seite cite Alles wird font gut n = document.getElementById("content"); n.firstChild.lastChild.setAttribute("color", "blue"); 27.09.2017
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. 27.09.2017
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) 27.09.2017
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) 27.09.2017
Beispiel <html><head><title>Test</title> <script type="text/javascript"> <!--- var myH1 = document.createElement("h1"); var myText = document.createTextNode("Eine sehr dynamische Seite"); myH1.appendChild(myText); var Ausgabebereich = document.getElementById("Bereich"); Ausgabebereich.appendChild(myH1); myH1.align='right'; //--> </script> </head><body> <div id="Bereich" style="border:1px black solid; padding:10px"> </div> </body></html> 27.09.2017
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. 27.09.2017
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> 27.09.2017
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"); 27.09.2017
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!"); 27.09.2017
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. 27.09.2017
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) 27.09.2017