Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Web-Programmierung JavaScript / DHTML 27.09.2017 Thomas Perschke.

Veröffentlicht von:Babette Blau Geändert vor über 6 Jahren

Ähnliche Präsentationen

Präsentation zum Thema: "Web-Programmierung JavaScript / DHTML 27.09.2017 Thomas Perschke."— Präsentation transkript:

1 Web-Programmierung JavaScript / DHTML Thomas Perschke

2 Heute JavaScript Übung 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* 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 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>

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

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

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
<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
close() open() pageXOffset pageYOffset menuBar moveTo() moveBy() home() scrollTo() scrollBy() back() forward() outerHeight defaultStatus status alert() prompt()

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
Hallo Max Mustermann document.getElementsByTagName(...)  HTML-Elementobjekte write()

31 Beispiel: H1.align='right';
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> <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

34 JavaScript – Zugriff auf Elemente
<html><head><title>Test</title> <script type="text/javascript">  </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"

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

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

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

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

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)

Herunterladen ppt "Web-Programmierung JavaScript / DHTML 27.09.2017 Thomas Perschke."

Ähnliche Präsentationen

To make this website work, we log user data and share it with processors. To use this website, you must agree to our Privacy Policy, including cookie policy.

Google-Anzeigen