Themen JavaScript Datentypen, Kontrollstrukturen, Besonderheiten Document Object Model - Übersicht
Einleitung Bereits gesehen: Folgend: Strukturierung von Inhalten mittels HTML CSS zur Formatierung von HTML-Dokumenten Dynamisierung von Webseiten auf Client-Seite... mittels JavaScript Inhalte anzeigen, verbergen Styles ändern Formulare auswerten Andere Technologien:... ActiveX, Flash, Applets
JavaScript Einsatzgebiete von JavaScript: Interaktion mit dem Anwender Reaktionen auf Formular-Eingaben Reaktionen auf Link-Clicks Steuerung/Kontrolle von Applets, Frames, Plug-ins Verarbeitung von Daten vor der Übertragung zum Server Überprüfung auf korrekt ausgefüllte Formulare Änderung von HTML-Dokumenten Änderung der Struktur Änderung der Formatierung
JavaScript Funktionsweise: Programmierung von JavaScript Im HTML-Code --> innerhalb des script-tags In separaten Dateien Dann Referenzieren der Dateien im HTML-Kopf Übertragung an den Webbrowser Ausführung von Programm-Code auf dem Client-Rechner durch JavaScript-Interpreter um z.b....... Rechenleistung des Server zu entlasten... unnötigen Netzwerk-Verkehr zu mindern
JavaScript Funktionsweise: HTML- Dokument Erstellen Programmieren Speichern Bereitstellen Webbrowser Webserver
JavaScript Funktionsweise: Webbrowser HTML- Dokument Webserver Request-Reply
JavaScript Funktionsweise: Webbrowser HTML- Dokument Webserver <script type= text/javascript > // some JavaScript-Code </script>
JavaScript Funktionsweise: Webbrowser HTML- Dokument Webserver Ausführung durch JavaScript- Interpreter <script type= text/javascript > // some JavaScript-Code </script>
JavaScript JavaScript - Sprachelemente objektbasierte Sprache Programmiert wird gegen Objekte Elemente aus objektorientierten Programmiersprachen Auch Vererbung möglich Alle Datentypen werden wie Objekte behandelt Sprachelemente Datentypen und Objekte Kontrollstrukturen Ausnahme-Behandlung Funktionen definieren Eigene Objekte definieren
JavaScript - Sprachelemente Datentypen/Prototypen und Objekte Object : Prototyp für Objekte Function : Prototyp für Funktionen Array : Prototyp für Arrays String : Prototyp von Zeichenketten Boolean : Prototyp boolescher Werte Number : Prototyp numerischer Werte Math : Bibliothek mathem. Operationen Date : Bibliothek für Datumsformatierungen RegExp : Bibliothek für reguläre Ausdrücke DOM Objekte : Objekte für HTML-Dokument-Elemente
JavaScript - Sprachelemente Kontrollstrukturen if-else, switch-case, for, for-in, while,... weitere... Ähnlich den Java-Kontrollstrukturen Variablen-Deklaration / -Initialisierung var variablenname = wert; var variablenname; Beachte: globale vs. lokale Variablen <script type="text/javascript"> var globalevar = "Mich gibt es immer"; function meinefunktion() { var lokalevariable = "Mich gibt es nur hier"; } function knopfgedrueckt() { } </script> alert(lokalevariable); // JavaScript-Fehler!!!
Event-Handler JavaScript - Sprachelemente Viele HTML-Elemente erlauben EventHandler-Attribute onclick : Wenn Gedrückt (z.b. Button) onmouseover : Wenn Mousezeiger über dem Element onfocus : Element erhält den Fokus... weitere Ausführung von JavaScript-Code beim Eintritt des Ereignisses <html> <head> <title>javascript-seite</title> </head> <body> <input type="button" value="drücken" onclick="window.alert('gedrueckt')" /> </body> </html>
JavaScript - Sprachelemente Funktionen definieren In JavaScript können eigene Funktionen definiert werden... oftmals zur Verarbeitung von Ereignissen Beispiel: <html> <head> <title>javascript-seite</title> <script type="text/javascript"> function knopfgedrueckt() { window.alert("sie haben gerade einen Button betätigt"); } </script> </head> <body> <input type="button" value="drücken" onclick="knopfgedrueckt()" /> </body> </html>
JavaScript - Sprachelemente Funktionen mit Parametern definieren Funktionen können parametrisiert sein Parameter können übergeben werden, müssen aber nicht Beispiel: <html> <head> <title>javascript-seite</title> <script type="text/javascript"> function knopfgedrueckt(param1) { if (param1) { window.alert(param1); } else { window.alert("sie haben gerade einen Button betätigt "); } } </script> </head> <body> <input type="button" value="drücken" onclick="knopfgedrueckt()" /> <input type="button" value="pushme" onclick="knopfgedrueckt('pushed')" /> </body> </html>
JavaScript - Sprachelemente Eigene Objekte definieren function wird zum definieren eigener Objekt genutzt function-statement gilt dann als Konstruktor Schlüsselwort this als Instanz-Variable <html> <head> <title>javascript-seite</title> <script type="text/javascript"> function NeuesObjekt(variable) { this.objektvar = variable; } var neueinstanz = new NeuesObjekt("Hallo Welt"); function knopfgedrueckt() { window.alert(neueinstanz.objektvar); } </script> </head> <body> <input type="button" value="drücken" onclick="knopfgedrueckt()" /> </body> </html>
Document Object Model - DOM Wie kann man mit JavaScript auf HTML-Elementen arbeiten? Objekt-API für HTML-Elemente Eingeführt im Netscape Navigator 2.0 Zugriff auf HTML-Elemente über Programmiersprache JavaScript Microsoft Internet Explorer 3 ca. 6 Monate später Standard des W3C --> siehe DOM (1998) Programmiersprachen-unabhängig Auf XML-Dokumente anwendbar Wir behandeln in Internet-Technologien das HTML-DOM
Document Object Model - DOM Baumstruktur eines HTML-Dokumentes
Document Object Model - DOM Dokument-Objekte (Übersicht nicht vollständig) browser-unabhängig window frame self top parent hisory document location link form anchor text radio button select textarea checkbox reset option password submit
Document Object Model - DOM Dokument-Objekte Eigenschaften von Objekten z.b. src-eigenschaft eines image-objektes Eigenschaften liefern Werte oder andere Objekte Methoden von Objekten z.b. getelementbyid( id-name ) Methoden tun etwas, liefern Werte oder andere Objekte Navigation durch die Objekt-Hierarchie Syntax: document.forms Enthält alle Formulare des Dokumentes document.forms[0].text Enthält alle Text-Felder des ersten Formulares im Dokument
Document Object Model - DOM Dokument-Objekte Top-Objekt ist das window-objekt Objekt, welches das Browser-Fenster darstellt frame, self, top, parent sind window-objekte frame: ein Fenster im Fenster self: das/der zu einem Dokument gehörende Fenster/Frame top: das Browser-Fenster parent: Eltern-Fenster eines Fensters/Frames Enthält die Objekte history und location Eine Methode des window-objekts: alert(msg) window.alert( Hallo Welt ) erzeugt PopUp-Dialog mit Hallo Welt Eine Eigenschaft des window-objektes: document window.document liefert das aktuelle document-objekt des Fensters
Document Object Model - DOM Dokument-Objekte Elementares Objekt ist das document-objekt Objekt, welches ein HTML-Dokument repräsentiert Enthält Objekte, die im Dokument vorkommen (können) Bilder, Formulare, Links,... <html> <head> <title>javascript-seite</title> <script type="text/javascript"> function showelements() { for (wert in document) { document.write(wert + '<br />'); } } </script> </head> <body> <input type="button" value="eigenschaften" onclick="showelements()" /> </body> </html> Achtung: Code kann Browser blockieren!
Document Object Model - DOM document.images Objekt (Beispiel zum Ausprobieren) Enthält alle im Dokument referenzierten Bilder document.images ist Array-Objekt Zugriff über id oder Array-Index <html> <head> <title>javascript-seite</title> <script type="text/javascript"> function tausche() { var temp = document.images[0].src; document.images[0].src = document.getelementbyid("meinbild").src; document.getelementbyid("meinbild").src = temp; } </script> </head> <body> <input type="button" value="tausche Bilder" onclick="tausche()" /> <img src="./images/bild1.jpg"> <img src="./images/bild2.jpg" id="meinbild"> </body> </html>