Übungsaufgabe16.September2013

Document Object Model

Aufgabe 1

Überlegen Sie sich alle Objekte, die Sie bereits kennen, und stellen Sie die Beziehungen zwischen ihnen als Baumstruktur dar.

Aufgabe 2

Schreiben Sie ein Formular mit zwei Textfeldern und einem Button. Wenn auf den Button geklickt wird, soll BildA gegen BildB ausgetauscht werden und umgekehrt. Außerdem soll in den Textfeldern jeweils der Dateiname des jeweiligen Bildes erscheinen.

Aufgabe 3

Probieren Sie das Beispiel doch einmal aus, wenn Sie die Formulare ebenfalls gleich benennen. Auf welches Textfeld wird dann zugegriffen?

Aufgabe 3

Probieren Sie einmal aus, eine in zwei Frames aufgeteilte Seite mit einem Menü zu entwerfen. Öffnen Sie die Links der Menüeinträge jeweils in unterschiedlichen Fenstern (zweiter Frame, _blank, _parent, _top).

Aufgabe 4

Aufgabe 5

Schreiben Sie das Menü aus Aufgabe 3 so um, dass die Links nun mit Hilfe von JavaScript im zweiten Frame geöffnet werden. Benutzen Sie dabei alle drei Arten des Zugriffs auf den Nachbarframe.

Aufgabe 6

Erstellen Sie ein HTML-Dokument mit einem Formular und einem Bild. In dem Formular soll der Benutzer für alle Eigenschaften, die das Aussehen des Bildes beeinflussen, Werte eingeben können. Klickt er auf den zugehörigen Button, verändert sich das Bild entsprechend seinen Eingaben.

Aufgabe 7

Programmieren Sie einen Nachrichtenticker. Denken Sie sich eine Textzeile aus, die langsam von rechts nach links durch ein Textfeld wandern soll.

Vordefinierte Objekte

Aufgabe 1

In folgendem Formular soll der Benutzer seine Adresse und sein Geburtsdatum eintragen:

form name ="adressformular"
     table
      
         Name: 
         (Nachname, Vorname)
      
      
         Adresse: 
        
      
      
         PLZ: 
        
      
      
         Ort: 
        
      
      
         Geburtsdatum: 
         (Tag.Monat.Jahr)
      
      
        
      
      
        
      
     table
   /form

Überprüfen Sie in der Funktion pruefen(), ob die Postleitzahl auch wirklich fünf Stellen hat.

Aufgabe 2

Sehen Sie sich mit Testausgaben (z.B. alert) einmal an, welche HTML-Tags JavaScript für diese Textauszeichnungen verwendet!

Aufgabe 3

Überprüfen Sie im Adressformular aus Aufgabe 1, ob der Benutzer wirklich Vor- und Nachname durch Komma getrennt eingegeben hat. Geben Sie beides aus.

Aufgabe 4

Zeigen Sie in der Seite mit dem Adressformular aus ÜAufgabe1 die aktuelle Uhrzeit in einem zusätzlichen Textfeld an.

Aufgabe 5

Der Benutzer soll im Adressformular aus Aufgabe 1 auch sein Geburtsdatum angeben. Berechnen Sie, wie viele Tage er noch bis zu seinem nächsten Geburtstag warten muss.

Aufgabe 6 Suchen Sie eine geeignete Rundungsfunktion heraus, um die Ausgabe der Tage bis zum nächsten Geburtstag des Benutzers aus Aufgabe 5 etwas schöner zu gestalten

Events

Aufgabe 1

Erstellen Sie ein Dokument mit einer Tabelle. Jede Zelle der Tabelle soll eine andere Hintergrundfarbe bekommen. Klickt der Benutzer mit der Maus auf eine Zelle, nimmt der Hintergrund der Seite die gleiche Farbe wie die Tabellenzelle an.

Aufgabe 2

Fügen Sie ein weiteres Beispiel zu Ereignissen in diese Seite ein. Solange die Maustaste gedrückt ist, soll in der Statusleiste stehen "Maustaste gedrückt". Lässt der Benutzer die Maustaste los, soll dies verschwinden.

Aufgabe 3

Probieren Sie alle Event-Handler der Objekte window und document einmal aus. Z.B. geben Sie bei jedem Ereignis eine alert()-Box mit dem Namen des Ereignisses aus. Aber Vorsicht bei MouseMove – dieses Ereignis tritt praktisch ständig auf.

Aufgabe 4

Erstellen Sie ein Formular mit einem reset-Button und bauen Sie eine Bestätigungs-Box ein, bevor die Formularfelder endgültig gelöscht werden.