Javascript ist nicht aktiviert! Bitte aktiviern Sie Javascript in Ihren Browsereinstellungen.

Kaufen

AJAX und das Web 2.0

aus: JavaScript (2007)

Datenfelder JavaScript (2007)
Ausnahmebehandlung JavaScript (2007)
AJAX und das Web 2.0 JavaScript (2007)

Über dieses Video

Nach dem Motto 'ein Bild sagt mehr als 1000 Worte' zeigt der Autor anhand von drei Beispiel-Webseiten, was man mit AJAX machen kann: Google, Google Maps und AjaxWrite.

Auszug aus: JavaScript (2007)

Nicht erst seit dem AJAX- und Web 2.0-Hype findet sich JavaScript im Werkzeugkasten jedes Web-Developers! Lassen Sie sich von den Sprachgrundlagen bis zu Ihren ersten Schritten mit AJAX führen!

JavaScript (2007)

EUR 39,95

Kaufen

Ähnliche Video-Trainings

Bonusmaterial

Bei AJAX-Applikationen wird ein Sniffer zur Analyse des Datenverkehrs zwischen Client und Server zum notwendigen Produkt, weil man wegen der nun "unsichtbaren" Browseraktionen keine Rückschlüsse mehr ziehen kann.

Einen Sniffer nutzen

05:56
Die Aptana-IDE lässt sich ganz leicht über "Perspectives" und "Views" an Ihre Bedürfnisse anpassen. So können Sie beispielsweise den "AJAX Monitor" (einen integrierter Sniffer) in Ihre Arbeitsumgebung einbinden.

Die Aptana-IDE

01:12
Eine XML-Datei können Sie mit jedem beliebigen Editor erstellen. Aber wie kontrollieren Sie die Fehlerfreiheit und Wohlgeformtheit? - Ein einfacher Test in einem Browser ist immer etwas wortkarg, das Firefox-Add-on "XML Developer" ist im Vergleich dazu deutlich flexibler.

Der XML Developer

02:39

Zu Beginn begrüßt Sie Ihr Trainer Ralph Steyer recht herzlich zu diesem JavaScript-Training. Nachdem er Ihnen einen kurzen Ausblick auf die Lerninhalte gegeben hat, behandelt er anschließend die Themen Hardware- und Systemanforderungen.

Einleitung
- Ihr Trainer Ralph Steyer zeigt Ihnen anhand von Beispielen im WWW, wie und wo JavaScript eingesetzt wird. Außerdem gibt er Ihnen einen Ausblick auf die Themen, die im Zuge dieses Video-Trainings behandelt werden.
  
  Über das JavaScript-Training
  
  05:57
- Welche Anforderungen müssen Sie für das Programmieren von JavaScript an Ihren Rechner stellen? Die eindeutige Antwort Ihres Trainers: 'Keine!'
  
  Anforderungen an die Hardware
  
  00:48
- In dem Film erklärt Ihnen Ralph Steyer, welche Software Sie zur erfolgreichen Programmierung mit JavaScript benötigen. Dabei beginnt er mit dem Betriebssystem, gibt Informationen über den geeigneten Editor (oder eine passende IDE - Integrated Development Enviroment) und Tipps zu Browsern.
  
  Softwarevoraussetzungen
  
  12:29
Nachdem Sie Ihr erstes alert-Mitteilungsfenster mit 'Hallo Welt' als Textinhalt erstellt haben, erhalten Sie wichtige Hintergrundinformationen zum Internet und zu den verschieden Diensten. Das Verbinden von JavaScript mit einer Webseite und das Verwenden von externen Bibliotheken sind weitere Themen.

Erste Schritte mit JavaScript

ca. 40 min
- Sie springen gleich direkt ins kalte Wasser und beginnen gemeinsam mit Ihrem Trainer, JavaScript zu schreiben. Beim ersten Beispiel handelt es sich um ein alert-Mitteilungsfenster mit 'Hallo Welt' als Textinhalt. Dazu gibt Ihnen Ralph Steyer einige Tipps zur Handhabung der Sicherheitseinstellungen bei Browsern.
  
  Ihr erstes Beispiel
  
  06:14
- In diesem Film erhalten Sie wichtige Hintergrundinformationen zum Internet und den verschiedenen Diensten wie FTP, E-Mail und WWW. Außerdem erklärt Ihnen Ihr Trainer alles Wissenswerte zu TCP/IP, den IP-Nummern sowie DNS-Namen und der Bedeutung des W3C.
  
  Details zum Internet
  
  05:26
- Beim Programmieren fürs WWW muss man sich mit dem heterogenen Umfeld und dem Thema der unterschiedlichen Interpretationen auseinandersetzen. Ralph Steyer gibt Ihnen einen Überblick über wichtige Technologien im Umfeld von JavaScript und erzählt Ihnen etwas über den geschichtlichen Hintergrund dieser Skriptsprache.
  
  Besonderheiten der Webprogrammierung
  
  04:36
- Bevor Sie eine Webseite programmieren können, müssen Sie eine Verbindung zwischen dem Gerüst der Webseite (HTML, XML) und der Skriptfunktionalität schaffen. Dies erfolgt mit einem Skriptcontainer. Außerdem erhalten Sie Informationen über die Verwendung von CDATA-Bereichen im Header.
  
  JavaScript mit Webseiten verbinden
  
  08:12
- Beim Verbinden von JavaScript mit einer Webseite ist es zu empfehlen, JavaScript in eine externe Bibliothek auszulagern. Dabei gilt es zu beachten, dass das <script>-Element bei einer externen Referenz leer sein muss.
  
  Eine externe Bibliothek verwenden
  
  04:17
- Sie können die von Ihnen verwendete JavaScript-Version angeben. Dabei kommt es nur leider zu Problemen bei der Kombination von 'type' und 'language'. Was es bei der Angabe von JavaScript noch alles zu beachten gibt, erzählt Ihnen Ihr Trainer …
  
  Angabe von JavaScript-Versionen
  
  05:48
- Jetzt führt Ralph Steyer einen Test durch, in dem er überprüft, ob JavaScript in einem Besucherbrowser aktiviert ist.
  
  Verfügbarkeit von JavaScript testen
  
  02:52
- Mit JavaScript erzeugen Sie aktive Inhalte. Diese werden im Rahmen des Clients ausgeführt. Sicherheit spielt demnach hier eine Rolle.
  
  Sicherheit bei JavaScript
  
  01:39
In diesem Kapitel nimmt Sie der Autor mit auf einen Streifzug, um Ihnen die Grundlagen von XHTML, HTML, XML und CSS näher zu bringen. Sie bekommen Einblicke in die unterschiedlichen Strukturen dieser Standards und erfahren, welchen Regeln diese zugrunde liegen.

Grundlagen von XHTML, HTML, XML und CSS

ca. 35 min
- In diesem Film befassen Sie sich mit den vorbereitenden Basics der Programmierung mit JavaScript. Dies umfasst HTML und XHTML, Grundlagen zu Stylesheets sowie XML.
  
  Grundgerüst Webseite und Fehlertoleranz
  
  04:53
- Wie wissen Sie, ob Ihre Webseite fehlerfrei ist? Das W3C stellt einen Validierungsservice bereit, mit dem Sie eine Webseite überprüfen können. Wichtige Befehle zu Strukturierung von Webseiten mit HTML sind das Blockelement <div> und das Inline-Element <span>.
  
  Webseiten strukturieren
  
  03:20
- Obwohl XHTML schon lange im Internet präsent ist, werden die meisten Seiten noch nach reinem HTML erstellt. In diesem Film stellt Ralph Steyer die wichtigsten Details dieser beiden Standards einander gegenüber.
  
  XHTML versus HTML
  
  07:17
- Sie haben zwei Möglichkeiten, eine Webseite auf ihre Gültigkeit zu testen: einerseits über die Webseite des W3C und andererseits über den Web Developer, den Sie gemeinsam mit Ihrem Trainer im Mozilla Firefox installiert haben.
  
  Gültigkeit von Webseiten
  
  01:58
- In der Praxis wird im Web auf Style Sheets zurückgegriffen. Diese können mit dem Begriff 'Formatvorlage' beschrieben werden. Ralph Steyer erklärt Ihnen Grundlegendes zu CSS und zu dessen Verwendung.
  
  Style Sheets in einer Webseite verwenden
  
  03:48
- Jetzt schauen Sie sich die Syntax von CSS etwas genauer an. Wie ist CSS aufgebaut und welchen Regeln unterliegt es? Diese Fragen und mehr beantwortet Ihnen Ihr Trainer …
  
  Syntax von CSS
  
  06:48
- Ihr Trainer möchte Ihnen nun noch Informationen zu den XML-Grundlagen geben. Dabei analysiert er die Struktur von XML-Dokumenten und aktiviert den DOM-Inspector, um die XML-Daten genauer zu besprechen.
  
  XML-Grundlagen
  
  06:34
Ralph Steyer macht Sie in diesem Kapitel mit grundlegenden Begriffen wie Literale, Variablen, Datentypen, Anweisungen etc. vertraut. Dabei zeigt er Ihnen, wie diese in der Praxis eingesetzt werden und welche Funktionen ihnen zugeschrieben werden.

JavaScript anwenden

ca. 95 min
- Die logischen Strukturen von JavaScript umfassen Variablen, Arrays, Datentypen, Operatoren, Ausdrücke, Anweisungen und Kommentare sowie Unterprogramme. Lernen Sie nun einige Schlüsselwörter in JavaScript kennen …
  
  JavaScript-Schlüsselwörter
  
  01:31
- Jetzt erklärt Ihnen Ihr Trainer alles Wissenswerte zu Variablen und Datentypen. Wie verhalten sie sich bei Operationen? Zu den weiteren Themen dieses Films zählen Literale, Typumwandlung (Casting), die eingebauten Datentypen in JavaScript etc. …
  
  Literale, Variablen, Datentypen und Typumwandlung
  
  14:57
- In diesem Film erzeugen Sie gemeinsam mit Ihrem Trainer Datenfeldern bzw. Arrays in JavaScript. Danach erklärt Ihnen Ralph Steyer anhand eines Beispiels, wie Sie mit verschiedenen Datenfeldtypen als Inhalt arbeiten und die Größe von einem Datenfeld angeben bzw. abfragen.
  
  Datenfelder
  
  13:08
- Anweisungen werden mit einem Semikolon geschlossen. Blöcke werden mit geschweiften Klammern gebildet. Auf was Sie sonst noch alles achten müssen beim Arbeiten mit Anweisungen, Ausdrücken und Operatoren, sagt Ihnen Ihr Trainer.
  
  Anweisungen
  
  10:03
- Jetzt geht es daran, Ausdrücke auszuwerten. An dieser Stelle spricht Ralph Steyer die Regelung der Prioritäten von Operatoren an. Außerdem erfahren Sie, wie Sie Kommentare in JavaScript schreiben.
  
  Ausdrücke auswerten
  
  09:32
- Was versteht man unter Kontrollstrukturen? Wer kontrolliert hier was? Nur so viel dazu: Die if- und die if-else-Anweisung spielen hier eine Rolle.
  
  Kontrollstrukturen
  
  10:48
- Die Ergebnisse der while-Schleife und der do-while-Schleife sind zwar ident, trotzdem lässt dies nicht darauf schließen, dass sie auch beide gleich funktionieren. Der Unterschied liegt in der Richtung der Verarbeitung: Bei der do-while-Schleife handelt es sich um eine fußgesteuerte Schleife, während die while-Schleife kopfgesteuert agiert.
  
  Schleifen
  
  06:44
- Mit einer Funktion können Sie verschiedene Schritte zusammenfassen. Und ... eine Funktion ist grundsätzlich ein Unterprogramm, das einen Namen hat und verschiedene Sachen tut und einen Rückgabewert liefern kann. Was es noch dazu zu wissen gibt, lernen Sie jetzt ...
  
  Funktionen
  
  13:28
- Mit Eventhandlern kann man JavaScript-Funktionalitäten aufrufen, wann immer man sie braucht. Dabei ist wesentlich, dass Eventhandler eigentlich zu HTML zählen. Was hat dies dann eigentlich mit JavaScript zu tun …
  
  Funktionen (Eventhandler) aufrufen
  
  09:17
- Anhand eines Formularbeispiels erarbeiten Sie sich gemeinsam mit Ihrem Trainer, wie Sie 'onFocus' und 'onBlur' einsetzen können. Zur Kontrolle des Versendens von Formulardaten verwenden Sie 'onSubmit' und das Zurücksetzen von Formularen passiert mit 'onReset'.
  
  Formulare
  
  04:03
„Nobody is perfect!“ – So könnte der Leitspruch dieses Kapitels lauten, denn nun dreht sich alles um das Suchen und Finden von Fehlern. In langen Skripten kann es schon durchaus einmal vorkommen, dass man sich vertippt oder auch syntaktische Fehler macht. Wie Sie diese aufspüren, zeigt Ihnen Ihr Trainer.

Fehler suchen und finden

ca. 22 min
- Zu Beginn stellen Sie sich die Frage: 'Welche Fehler gibt es eigentlich?'. Hier unterscheidet Ralph Steyer zwischen Tipp- oder syntaktischen Fehler und Laufzeitfehlern. Außerdem zeigt er Ihnen, mit welchen Methoden Sie Fehler verhindern können.
  
  Fehlersuche und -behandlung
  
  10:22
- Neben der Zuhilfenahme von den Fehlerkonsolen der Browser können Sie Fehlerstellen auch durch Kontrollausgaben lokalisieren. Das Auskommentieren von Quellcodeteilen kann Ihnen an dieser Stelle ebenso helfen.
  
  Kontrollausgaben
  
  03:07
- Nun begeben Sie sich mit einem Debugger auf Fehlersuche. In diesem Film verwendet Ralph Steyer den Debugger 'Venkman', den Sie zu Beginn des Video-Trainings gemeinsam installiert haben.
  
  Fehlersuche mit einem Debugger
  
  06:34
In diesem Kapitel gehen Sie der Frage nach: “Was sind Objekte?“. Dabei lernen Sie verschiedene Objekte wie 'node' und 'window' oder Methoden wie 'open' kennen. Da JavaScript eine objektbasierende und nicht objektorientierte Programmiersprache ist, gibt es bei der Erzeugung von eigenen Objektdeklarationen einiges zu beachten.

Objekte, Methoden und Klassen

ca. 115 min
- Der eigentliche Sinn und Zweck von JavaScript ist, Objekte aufzurufen und zu manipulieren. Was sind nun Objekte? Ein Objekt lässt sich über gewisse Eigenschaften charakterisieren. Mehr dazu erfahren Sie von Ihrem Trainer …
  
  Was sind Objekte?
  
  07:41
- Wenn Sie unter JavaScript ein Objekt erzeugen wollen, brauchen Sie eine Objektdeklaration (= Klasse). Darunter können Sie sich einen Bauplan für das zu erzeugende Objekt vorstellen.
  
  Klassen und Konstruktoren
  
  07:44
- Ralph Steyer zeigt Ihnen anhand verschiedener Beispiele die Verwendung von Datumsobjekten. Außerdem lernen Sie Strings als Objekte einzusetzen.
  
  Datumsobjekte
  
  08:32
- Eine Klasse wird dafür verwendet, ein Objekt über einen Konstruktor zu erzeugen. Ihr Trainer stellt Klassenmethoden und Klasseneigenschaften den Instanzelementen vergleichend gegenüber.
  
  Klassenelemente
  
  03:07
- "DOM steht für "Document Object Model" und bezeichnet eine Bibliothek von baumartig ineinander verschachtelten Objektstrukturen. Was es dazu noch Interessantes zu wissen gibt, erfahren Sie jetzt ..."
  
  DOM
  
  10:25
- Es gibt verschiedene Zugriffsmöglichkeiten auf DOM-Objekte: über Objektfelder, Zugriff auf den Namen (direkt oder mit getElementsByName()), Zugriff über die ID mit getElementById() und Zugriff über den Elementnamen mit getElementsByTagName().
  
  Zugriff auf DOM-Elemente
  
  08:23
- Auf Inhalte von Elementen in einer Webseite können Sie auf verschiedene Arten zugreifen. Ralph Steyer tut dies in den folgenden Beispielen mit innerHTML und innerText.
  
  Zugriff auf Inhalte von Elementen
  
  02:04
- Das node-Objekt ist relativ neu und löst das proprietäre 'all' ab. Es bietet Ihnen Zugriff auf sämtliche Elemente einer Webseite mit all ihren relevanten Eigenschaften und Methoden.
  
  Das node-Objekt
  
  04:55
- Das window-Objekt ist in der Objekthierarchie im DOM ganz weit oben angeordnet und enthält eine Reihe von Unterobjekten. Welche Methoden diesem Objekt zugeordnet werden, lernen Sie in diesem Film.
  
  Das window-Objekt
  
  08:14
- "Die open-Methode bietet die Möglichkeit, auch einen dritten Parameter anzugeben. Dieser kann das Aussehen eines Fensters beeinflussen."
  
  Die open-Methode
  
  10:43
- In den folgenden Filmen lernen Sie Cookies und deren Anwendung kennen. Außerdem erklärt Ihnen Ihr Trainer, wie Formulare aufgebaut sind und wie Sie die Objekte 'window', 'navigator' und 'screen' einsetzen können. Schließlich erfahren Sie Wissenswertes zum Thema 'Eigene Objektdeklarationen erzeugen'.
  
  Weitere Techniken
  - Mit Cookies kann man Textdateien aus dem Browser heraus auf dem Rechner des Anwenders ablegen. Ihr Trainer überzeugt Sie davon, dass diese nicht immer schädlich, sondern auch nützlich sein können.
    
    Cookies
    
    07:34
  - Eine der wichtigsten Anwendungen von JavaScript ist der Zugriff auf Formulare in einer Webseite. Wenn Sie auf Objekte in einer Webseite zugreifen wollen, sprechen Sie Unterobjekte von 'document' an. Sie lernen hier die verschiedenen Eigenschaften von Formularelementen in Abhängigkeit vom Typ eines Formularelements kennen.
    
    Formulare - Teil 1
    
    08:50
  - In diesem Film lernen Sie, wie ein Formular aufgebaut ist, welche Funktionen Sie einsetzen können und welche Möglichkeiten Ihnen mit dem Einsatz von Methoden offenstehen.
    
    Formulare - Teil 2
    
    07:19
  - Ein Unterobjekt von 'window' ist 'location'. Über 'location.href' kann man zu einer bestimmten Adresse weiterleiten. Das Objekt 'window.history' ermöglicht den Zugriff auf den Verlauf eines Browsers. Noch mehr Informationen zu diesem Thema bekommen Sie jetzt …
    
    window.location und window.history
    
    01:43
  - Das navigator-Objekt ist ein Top-Level-Objekt in DOM. Lernen Sie die Eigenschaften und Methoden dieses Objekts kennen. Außerdem erfahren Sie, dass das screen-Objekt zur Abfrage von Bildschirminformationen eines Besuchers eingesetzt wird.
    
    Das navigator- und das screen-Objekt
    
    07:04
  - Da JavaScript eine objektbasierende, nicht aber objektorientierte Programmiersprache ist, sind das Schreiben von Klassen der objektorientierten Programmierung sowie das Prinzip der Vererbung in JavaScript eigentlich nicht vorgesehen. Prototyping stellt hier einen Ersatz für Vererbung dar.
    
    Eigene Objektdeklarationen erzeugen
    
    10:06
Bei Ausnahmebehandlungen geht es darum, auf eine Aktion zu reagieren, die eine unmittelbare Reaktion zwingend nötig macht. Dabei kommt ein 'try-catch'-Block zum Einsatz. Außerdem gibt Ihnen Ralph Steyer Informationen zum Thema „Ereignisbehandlung in JavaScript“. Am Ende dieses Kapitels bespricht Ihr Trainer ein mit JavaScript programmiertes Spiel.

Ausnahme- und Ereignisbehandlungen

ca. 23 min
- Bei Ausnahmebehandlungen geht es darum, auf eine Aktion zu reagieren, die eine unmittelbare Reaktion zwingend nötig macht. Dabei kommt ein 'try-catch'-Block zum Einsatz.
  
  Ausnahmebehandlung
  
  05:56
- Es gibt zwei Möglichkeiten, wie Sie ein JavaScript aufrufen können: Entweder beim Laden einer Webseite über eine Inline-Referenz oder über Eventhandler. Außerdem lernen Sie die unterschiedlichen Ereignismodelle und die verschiedenartige Verwendung der Eigenschaften eines event-Objekts kennen.
  
  Ereignisbehandlung in JavaScript
  
  09:01
- Jetzt setzen Sie sich in spielerischer Art mit der Auswertung des event-Objekts auseinander! Am Ende dieses Films, bespricht Ihr Trainer ein mit JavaScript programmiertes Spiel. Davor stellt er Ihnen eine universelle Funktion zur Unterstützung der beiden konkurrierenden Ereignismodelle unter Verwendung von Ausnahmebehandlung vor.
  
  Auswertung des event-Objekts
  
  07:54
Was DHTML bedeutet? – Das wird Ihnen spätestens nach dem ersten Film klar sein. Ralph Steyer geht zuerst auf einige allgemeine CSS-Techniken ein, um dann an konkreten Beispielen dynamische Menüs zu bauen oder auch 'nur' den Mauszeiger zu verändern.

DHTML

ca. 23 min
- Was versteht man denn unter 'DHTML' (ursprünglich als 'dHTML' geschrieben)? Über reale Beispiele führt Sie der Autor zur Antwort und beschreibt mögliche Kombinationen von Techniken aus HTML, CSS und JavaScript.
  
  DHTML?
  
  05:13
- Das Optimum aus DHTML erhalten Sie, wenn Sie JavaScript mit HTML und CSS verbinden. Das Verbindungsglied ist dabei das 'style'-Objekt, das Sie an jedem Elementknoten vorfinden - und das über sehr viele Eigenschaften verfügt!
  
  JavaScript mit CSS verbinden
  
  05:19
- In diesem Film bespricht der Autor mehrere konkrete Codebeispiele. Er beginnt mit einem seitlichen Menü und erklärt die Methode, wie Sie Menüs auf- und zuklappen können. Weiter geht es mit einem waagerechten Menü und der dynamischen Veränderung des Mauszeigers.
  
  Den Inhalt einer Webseite verändern
  
  10:25
Es gab auch "dunkle Zeiten" für JavaScript: Aber etwa seit dem Jahr 2000 nimmt die Verbreitung von JavaScript wieder zu – dank AJAX und dem raffinierten Umgang mit clientseitiger Programmierung. Wie Vertreter der "Web 2.0"-Sites arbeiten, erklärt Ihnen der Autor in den Filmen dieses Kapitels.

AJAX

ca.48 min
- Nach dem Motto 'ein Bild sagt mehr als 1000 Worte' zeigt der Autor anhand von drei Beispiel-Webseiten, was man mit AJAX machen kann: Google, Google Maps und AjaxWrite.
  
  AJAX und das Web 2.0
  
  03:52
- Vor den ersten Gehversuchen muss eine Laufzeitumgebung mit einem Webserver (Apache) installiert werden, damit Sie AJAX-Applikationen tatsächlich testen können. Hier empfiehlt der Autor 'XAMPP' als 'Rundum-sorglos-Paket' und zeigt den Download, die Installation und den Start.
  
  AJAX-Laufzeitumgebung
  
  05:08
- Es ist notwendig, den Ablauf einer AJAX-Applikation zu verstehen. Der grundsätzliche Aufbau einer AJAX-Applikation ist immer gleich: Dabei steht ein Kommunikationsobjekt im Mittelpunkt des Interesses, damit die Datenübertragung von und zum Server funktionieren kann.
  
  Ablauf einer AJAX-Anfrage
  
  02:09
- Nicht jeder Browser kennt das 'XMLHttpRequest'-Objekt, was zu einigem Mehraufwand führt, bis auch die Microsoft-Browser das Kommunikationsobjekt zuverlässig erzeugt haben. Hier lernen Sie die elegante Methode kennen, das XMLHttpRequest-Objekt über eine geschachtelte Ausnahmebehandlung zu erzeugen.
  
  Das XMLHttpRequest-Objekt
  
  06:56
- Nach einer kurzen theoretischen Einführung steigt Ralph Steyer in die erste AJAX-Applikation ein und erklärt die wesentlichen Codezeilen: Sie lernen sowohl die Aufrufe in der HTML-Datei kennen als auch die Definition in der externen js-Datei.
  
  Daten per AJAX anfordern
  
  15:54
- Das Google Maps-API dient nun als Beispiel für die Integration fremder APIs. Dank der Objektorientierung ist das vollständige Verstehen nicht notwendig - man sollte aber die Methoden kennen, mit denen man Karten lädt oder neue Koordinaten vorgibt.
  
  Das Google Maps-API
  
  12:51

Zahlungsmöglichkeiten