Kaufen

Löschen und Einfügen von Elementen im DOM

aus: Prototype und script.aculo.us

Dieses Video ist nur für Käufer des Video-Trainings, sowie video2brain Abonnenten zugänglich.

Holen Sie sich jetzt dieses Video-Training und starten Sie ins Lernvergnügen!

Kaufen

Über dieses Video

Dieses Beispiel zeigt Ihnen ein ganz einfaches Spiel, bei dem ein Element in der Webseite an der einen Stelle mit remove() weggenommen und an einer anderen Stelle mit insert() wieder eingefügt wird.

Auszug aus: Prototype und script.aculo.us

Sie möchten Rich Internet Applications für das Web 2.0 programmieren und gestalten? Prototype ist die Basis für viele Web-Frameworks und das Referenz-Framework des Web 2.0 schlechthin! Das darauf aufbauende script.aculo.us bietet eindrucksvolle visuelle Effekte und Techniken, um einfach und komfortabel Web-Oberflächen zu erstellen, die in allen relevanten Browsern funktionieren. Dieses Video-Training führt Sie grundlegend in Prototype und scipt.aculo.us ein und zeigt, wie Sie bei der Programmierung viel Zeit und Mühe sparen und dennoch robustere und besser wartbare, dabei ansprechend gestaltete Applikationen schreiben.

EUR 24,95

Kaufen

Ähnliche Video-Trainings

Prototype ist ein freies Framework für Ihre Websites. Bekommen Sie in diesem ersten Kapitel einen Überblick über dieses Framework und erfahren Sie, woher Sie den Code dazu bekommen.

Einleitung
- In diesem ersten Video stellt Ihnen der Trainer Protoype und Scriptaculous sowie die Zielgruppen dieser Frameworks vor.
  
  Vorstellung
  
  03:53
- Die jeweils letzte stabile Version können Sie über die Adresse http://www.prototypejs.org/download auf Ihren Rechner laden. Sie erhalten eine JavaScript-Datei mit Namen prototype.js. Diese enthält die gesamte Funktionalität des Frameworks. Wenn Sie Prototype verwenden wollen, müssen Sie bloß die geladene JavaScript-Datei in Ihre Webseite einbinden. Dieser Film zeigt Ihnen, wie das geht.
  
  Download und Verwendung
  
  02:18
- Die Kompatibilität des Frameworks hängt zum Teil von der Version von Prototype ab, aber allgemein sind die Anforderungen für ein Web-Framework relativ niedrig. Der Trainer zeigt Ihnen in diesem Video, welche Abhängigkeiten zu den Browsern bestehen.
  
  Die unterstützten Browser
  
  01:06
- Die sehr gute und vollständige API-Dokumentation von Prototype steht Ihnen unter http://www.prototypejs.org/api zur Verfügung. Bekommen Sie einen Einblick in diese Dokumentation.
  
  Die API-Dokumentation
  
  01:06
- Ein paar Vorschläge für geeignete Editoren und IDEs zur Programmierung mit Prototype und Scriptaculous bekommen Sie in diesem Video vom Trainer.
  
  Editoren und IDEs
  
  03:27
Ein Großteil der Beliebtheit von Prototype basiert darauf, dass einige mächtige, verkürzte Shortcuts bzw. Hilfsmethoden (Utility methods) für oft notwendige JavaScript-Anweisungen zur Verfügung gestellt werden. Im Wesentlichen handelt es sich um Helfermethoden für häufig benötigte Aktionen auf dem DOM.

Utility Methods
- Shortcuts erleichtern die kompakte Erstellung von JavaScript-Quellcodes erheblich. Dieses Unterkapitel beschäftigt sich mit diesem Thema und gibt Ihnen Aufschluss darüber.
  
  Shortcuts
  - Der Shortcut $() bildet das Rückgrat des gesamten Frameworks. Darüber können Sie ein Element in der Webseite über die ID oder eine DOM-Knotenreferenz als Parameter ansprechen. Die Funktionalität von $() reicht aber über eine reine Kurzschreibweise für document.getElementById() hinaus. Der $()-Methode können Sie beliebig viele Elementreferenzen als Parameter übergeben, um dann die Aktion auf alle Elemente anzuwenden.
    
    $()
    
    05:27
  - Die Funktion $$() nimmt eine beliebige Anzahl von CSS-Selektoren im Stringformat als Parameter und liefert ein Array mit DOM-Elementen als Rückgabewert, die der Selektion entsprechen. Seien Sie auf die Ausführungen des Trainers gespannt.
    
    $$()
    
    01:53
  - Bei $F() handelt es sich im Wesentlichen um einen Shortcut, um über die ID auf den Wert eines Formularfelds zuzugreifen. $F() ist ein Alias für Form.Element.getValue(). Der Trainer erklärt Ihnen die Verwendung in diesem Video.
    
    $F()
    
    00:49
  - Der Trainer demonstriert Ihnen, wie die Methode $A([obj]) eine datenfeldartige Sammlung akzeptiert und das Äquivalent als tatsächliches Array-Objekt zurückgibt. Diese Methode ist ein Alias für die Prototype-Erweiterung Array.from(). Primär kommt $A() zum Einsatz, wenn Sie ein wirkliches Array-Objekt brauchen, aber nur etwas Ähnliches wie eine NodeList oder HTMLCollection zur Verfügung haben. Solche Strukturen werden von verschiedenen DOM-Methoden als Rückgabetyp geliefert.
    
    $A()
    
    02:15
  - Die Methode $H() erstellt ein Hash bzw. Map oder assoziatives Array. Dieser Film gibt Aufschluss über deren Verwendung.
    
    $H()
    
    01:25
  - Mit $R() können Sie ein Objekt erzeugen, das einem Wertebereich entspricht. Dies ist Thema dieses Videos.
    
    $R()
    
    00:50
  - Mit der Funktion $w() wird ein String an den Leerzeichen in ein Array aufgesplittet. Wie Sie am geeignetsten damit umgehen, erfahren Sie in diesem Film.
    
    $w()
    
    00:27
- Try.these() ist eine verkürzte Prototype-Schreibweise für die Ausnahmebehandlung in JavaScript. Mit Try.these() nehmen Sie eine beliebige Anzahl von Funktionen entgegen. Als Ergebnis erhalten Sie den Rückgabewert der ersten Funktion, die keine Ausnahme erzeugt hat. Der Trainer demonstriert Ihnen in diesem Film, wie das funktioniert.
  
  Ausnahmebehandlung mit Prototype
  
  05:46
- Die Prototype-Erweiterung document.getElementsByClassName() erlaubt den Zugriff auf alle Elemente in einem Dokument, denen eine bestimmte CSS-Klasse zugewiesen wurde. Bekommen Sie Einblick in dieses Werkzeug.
  
  Die Methode getElementsByClassName()
  
  02:10
Eine Stärke von Prototype ist sicher die Unterstützung für AJAX. Zu diesem Zweck bietet Prototype einige interessante Objekte an. Sehen Sie mehr dazu in den folgenden Videos.

AJAX mit Prototype
- Erlernen Sie anhand dieses Films, wie Sie mit Ajax.Request eine AJAX-Anfrage durchführen. Über Ajax.Updater können Sie zudem direkt in einem HTML-Element die Antwort des Servers anzeigen. Seien Sie auf die Ausführungen des Trainers gespannt.
  
  Die AJAX-Objekte von Prototype
  
  02:28
- Ein praktisches Beispiel zum Nachfordern von Textdateien mit dem Ajax.Updater sehen Sie in diesem Video.
  
  Ajax.Updater
  
  02:41
- Ein Beispiel für eine periodische AJAX-Anfrage mit Ajax.PeriodicalUpdater erwartet Sie in diesem Film.
  
  Ajax.PeriodicalUpdater
  
  01:32
- Mit den Methoden toJSON() und evalJSON() unterstützt Prototype die Verarbeitung von JSON, was insbesondere bei AJAX eines der wichtigsten Datenübertragungsformate ist. Dieser Film gibt Ihnen Aufschluss über deren Verwendung.
  
  JSON-Verarbeitung mit Prototype
  
  02:38
Dieses Kapitel zeigt, dass Ihnen mit Class in Prototype ein Objekt zur Verfügung steht, das mehr oder weniger die Nachbildung der klassenbasierenden OOP in JavaScript darstellt. Sie erstellen damit also JavaScript-Klassen.

Klassen des Frameworks verwenden und neue erzeugen
- Einige Hintergrundinformationen zum Umgang mit Class beim Erstellen von Klassen stellt Ihnen der Trainer in diesem Video vor.
  
  Einleitung
  
  01:35
- Die Methode create() dient zum Erstellen einer JavaScript-Klasse und mit addMethods() fügen Sie Methoden einer existierenden Klasse hinzu, die Sie mit Class.create() definiert haben. Dieser Film gibt Aufschluss über die richtige Verwendung.
  
  Die Methoden create() und addMethods()
  
  03:30
- In der Vererbung greift man gelegentlich aus einer Subklasse auf die Superklasse zu. In Prototype steht Ihnen mit $super() die Möglichkeit zur Verfügung, einen solchen Zugriff zu notieren. Sehen Sie mehr dazu in diesem Video.
  
  Die Vererbungskette im Prototyping und $super()
  
  02:52
- Eine kurze Übersicht zu wichtigen Klassen des Frameworks und Hinweise, wie Sie die API-Referenz bei der Anwendung verwenden können, erhalten Sie in diesem Film.
  
  Die Klassen des Frameworks
  
  02:13
- Vorsicht - Prototype entwickelt sich immer weiter und oftmals werden auch alte Codestrukturen nicht mehr funktionieren oder als deprecated erklärt. Der Blick in die Online-Dokumentation ist oftmals zwingend. Der Trainer gibt Ihnen Aufschluss in diesem Video.
  
  Deprecation und Entwicklung
  
  01:42
Element und Element.Methods stellen in Prototype die elementaren Methoden zum Umgang mit dem DOM zur Verfügung. Das ist einer der zentralen Bestandteile des gesamten Frameworks. Mehr dazu in diesem Kapitel.

Element und Element.Methods
- Viele der Methoden, die Ihnen über Element zur Verfügung stehen, lassen sich auch mit den Shortcuts von Prototype kompakter schreiben. In diesem Film erhalten Sie eine kurze Einführung in die Methoden von Element.
  
  Einleitung
  
  02:41
- Die meisten Methoden von Element (und auch die äquivalenten Shortcuts) geben das Element des DOM zurück, auf das sie angewendet werden. Die Methoden können daher meist verkettet werden. Dies eröffnet viele Möglichkeiten für eine sehr kompakte Schreibweise bei DOM-Manipulationen. Der Trainer zeigt Ihnen, wie dies funktioniert.
  
  DOM-Methoden verketten
  
  01:44
- Die Manipulation des DOM ist ein Schwerpunkt von Prototype. Bei der Erweiterung des DOM ist insbesondere Element.extend() von Bedeutung. Erfahren Sie in diesem Video, wie Sie diese Methode einsetzen können.
  
  Wie Prototype den DOM erweitert
  
  03:28
- Das Objekt Element können Sie auch zur bequemen Erstellung von neuen Elementen verwenden. Der Trainer führt Ihnen diese Möglichkeit vor.
  
  Element als Konstruktor
  
  02:57
- Ein Element kann in Prototype Attribute über Element.writeAttribute() erhalten. Sehen Sie selbst, wie das funktioniert.
  
  Element.writeAttribute()
  
  00:58
- In diesem Abschnitt sehen Sie einige Beispiele, in denen die Prototype-Methoden zur Manipulation der Elemente einer Webseite in der Praxis zur Anwendung kommen.
  
  DOM-Methoden in der Praxis
  - Dieses Beispiel zeigt Ihnen ein ganz einfaches Spiel, bei dem ein Element in der Webseite an der einen Stelle mit remove() weggenommen und an einer anderen Stelle mit insert() wieder eingefügt wird.
    
    Löschen und Einfügen von Elementen im DOM
    
    03:14
  - Dieses Video beinhaltet ein Beispiel, in welchem Sie die Sichtbarkeit eines Elements mit der Methode toggle() verändern können. Dabei wird das Element nicht aus dem DOM entfernt, sondern es wird nur implizit dessen CSS-Eigenschaft für die Sichtbarkeit umgeschaltet, wobei der Aufbau der gesamten Webseite erhalten bleibt.
    
    Elemente ausblenden
    
    02:14
  - Das in diesem Video vorgeführte Beispiel zeigt Ihnen verschiedene Methoden, die im Zusammenhang mit Verwandtschaftsbeziehungen zwischen Elementen eine Rolle spielen und vor allen Dingen die potenziellen Probleme in verschiedenen Browsern aufzeigen.
    
    Ein Beispiel zu Verwandtschaftsbeziehungen
    
    05:41
Scriptaculous ist eine JavaScript-Bibliothek, die im Wesentlichen visuelle Effekte und interaktive Funktionen zur erweiterten AJAX-Unterstützung bietet und unmittelbar auf Prototype basiert. Folgen Sie aufmerksam den Ausführungen des Trainers.

Scriptaculous
- Scriptaculous besteht derzeit im Detail aus einem Animations-Framework, Unterstützung für Drag & Drop, ergänzenden Steuerelementen für AJAX, Utilities für den Umgang mit dem DOM sowie Unterstützung für das Unit-Testing. Der Trainer stellt Ihnen dieses Framework vor.
  
  Vorstellung
  
  01:25
- Dieser Film zeigt Ihnen, dass Sie die jeweils aktuelle Version über die Adresse http://script.aculo.us/ auf Ihren Rechner laden können. Sie erhalten eine komprimierte JavaScript-Bibliothek, die Sie am besten im Webverzeichnis Ihres Webservers extrahieren.
  
  Download und Verwendung
  
  01:40
- Wo Sie die Dokumentation, Wiki und Demos bekommen und wie Sie diese richtig lesen, erfahren Sie in diesem Video.
  
  Dokumentation
  
  00:54
- Die Features von Scriptaculous stehen Ihnen zur Verfügung, wenn Sie diese in einem <script>-Tag einbinden und anwenden. Sie können die Effekte aber auch direkt in Eventhandlern einsetzen. Seien Sie auf die Ausführungen des Trainers gespannt.
  
  Grundlegende Anwendung
  
  01:06
- Eine Demonstration wichtiger und interessanter Animationseffekte wie Faden, Morphen, Ein- und Ausblenden über das Objekt Effect erhalten Sie vom Trainer in diesem Film.
  
  Animationseffekte mit Effect
  
  06:40
- Scriptaculous stellt als Ergänzung zu Prototype einige visuelle Eingabeelemente zur Verfügung, die speziell für die Ergänzung oder sogar den vollständigen Ersatz von Formularen geeignet sind. Diese können insbesondere (aber nicht nur) im Zusammenhang mit AJAX hilfreich sein. Der Trainer führt Ihnen diese Möglichkeit vor.
  
  Unterstützung für Formulare und AJAX
  
  06:49
- Das Scriptaculous-Add-on zu Prototype unterstützt recht umfangreich Drag & Drop. Ein ziehbares Objekt erstellen Sie zum Beispiel mit Draggable. Sehen Sie mehr dazu in diesem Video.
  
  Drag & Drop
  
  03:35
- Eine ganz interessante Technik erwartet Sie in diesem Film. Die von Scriptaculous über Sortable zur Verfügung gestellten Methoden und Anwendungsbeispiele sehen Sie in diesem Film.
  
  Sortieren per Drag & Drop
  
  02:18
- Über Sound stehen die Methoden disable(), enable() und play() zur Wiedergabe von Tondateien zur Verfügung. Dieses Video gibt Aufschluss über den richtigen Einsatz dieser Funktionen.
  
  Soundunterstützung
  
  01:14

Löschen und Einfügen von Elementen im DOM

aus: Prototype und script.aculo.us

Über dieses Video

Auszug aus: Prototype und script.aculo.us

Filminformationen