Was macht man noch mit HTML?

aus: JavaScript

Kaufen

Was ist JavaScript? JavaScript
Was macht man noch mit HTML? JavaScript
Das interne Skript JavaScript
Zuweisungsoperatoren JavaScript
Verwendung von Objekten in JavaScript JavaScript
Allgemeines zu document JavaScript

Über dieses Video

HTML wird in seiner Anwendung bei modernen Webseiten fast vollständig auf die Festlegung von Strukturen und die Verknüpfung mit Ressourcen reduziert.

Auszug aus: JavaScript

Lernen Sie in diesem Video-Training die Möglichkeiten der universellen Sprache JavaScript kennen und effektiv im Rahmen Ihrer Web-Applikationen einsetzen. Beginnend mit einfachen Erweiterungen der Webseite und Grundlagen der Sprache steigen Sie bald auf zu komplexen Anwendungen.

EUR 39,80

9 Stunden

Kaufen

Ähnliche Video-Trainings

In diesem Kapitel erfahren Sie die zentralen Grundlagen zu JavaScript und dem benötigten Umfeld. Sie lernen mit ersten Beispielen mehr zur Einrichtung der Programmier- und Testumgebung und Webtechniken, die Sie in Verbindung mit JavaScript einsetzen.

Grundlagen
- In diesem ersten Kapitel erhalten Sie eine kompakte Einführung in das Umfeld und Einsatzgebiet von JavaScript sowie einfache erste Beispiele.
  
  Einführung
  - Was ist JavaScript, wo setzt man es ein, wie ergänzen sich die verschiedenen Techniken im Web und was gilt es bei der Webprogrammierung zu beachten?
    
    Was ist JavaScript?
    
    03:08
  - In diesem Film sehen Sie einige typische Anwendungen, die man in modernen Webseiten mittels JavaScript umsetzt. Außerdem sehen Sie, was passiert, wenn Besucher JavaScript nicht aktiviert haben.
    
    Typische Webapplikationen
    
    04:17
  - In welchem Umfeld ist JavaScript angesiedelt? Wie ergänzen andere Webtechnologien JavaScript bzw. wie sind diese im Vergleich zu sehen?
    
    JavaScript im Vergleich
    
    02:16
  - Hier im Video sehen Sie erste einfache Beispiele mit JavaScript. Das beginnt bei der Anzeige von einem einfachen Dialogfenster, die Ausgabe von einem Datum in der Webseite, bis hin zur Entgegennahme und Ausgabe einer Benutzereingabe.
    
    Erste Beispiele
    
    04:40
  - Erfahren Sie mehr zu den Besonderheiten der Webprogrammierung mit der Interpretation von Klartext versus dem Compiler-Prinzip sowie der Ausführung auf Clientseite gegenüber der Ausführung von Skripten und Programmen auf dem Webserver.
    
    Besonderheiten der Webprogrammierung
    
    03:57
- Im Fokus der Filme in diesem Kapitel steht die Einrichtung einer Programmier- und Testumgebung für die Erstellung von Webseiten und JavaScripts.
  
  Die Programmier- und Testumgebung
  - In diesem Lernvideo erfahren Sie, was Sie an Hardware und Betriebssystem benötigen und welche Editoren bzw. IDEs und Browser Sie zur Verfügung haben sollten.
    
    Die notwendigen Tools
    
    05:14
  - Best practice - Sie sehen hier, wie Sie mit XAMPP einen lokalen Webserver, hier einen Apache, einrichten können. Über diese Installation können Sie Ihre Webapplikationen unter realen Bedingungen vor einer Veröffentlichung testen.
    
    Ein lokaler Webserver
    
    04:19
  - Wenn Sie mit XAMPP Apache auf Ihrem Rechner installiert haben, können Sie den lokalen Webserver zum Testen Ihrer Webseiten verwenden. Mehr Informationen zu lokal host und dem internen Test-Webserver von Aptana.
    
    Den Webserver verwenden
    
    03:36
  - Im Film lernen Sie diverse Verfahren kennen, mit denen Sie verschiedene Versionen des Internet Explorers auf Ihrem Rechner parallel installieren können.
    
    Mehrere Internet Explorer
    
    04:33
  - Best practice - mit Add-Ons können Sie Firefox um vielfältige Features erweitern. Für Webentwickler ist Firebug ein unverzichtbares Tool, dessen Installation Sie in diesem Film kennenlernen.
    
    Firefox als Zentrale der Webentwicklung
    
    04:36
  - Alle aktuellen Browser stellen mittlerweile Möglichkeiten und Tools zur Erweiterung zur Verfügung, die Webentwickler unterstützen. Sie sehen in diesem Film, wie Sie diese Möglichkeiten z.B. unter Opera, Safari, Internet Explorer und Chrome nutzen können.
    
    Andere Browser als Entwicklungszentrale
    
    02:40
  - Browser unterscheiden sich massiv in der Geschwindigkeit beim Aufbau der Webseiten. Insbesondere die Verarbeitung von CSS und JavaScript wird sich in der Performance stark unterscheiden. In diesem Film sehen Sie, wie Sie Ihre Browser testen können.
    
    Speedtest
    
    05:05
  - Aptana unterstützt Sie in vielfältiger Weise bei der Erstellung von Webseiten im Allgemeinen und JavaScript im Besonderen. In diesem Teil 1 erfahren Sie, wie Sie Projekte anlegen, Aptana konfigurieren, bedienen und Dateien in die Projekte einfügen.
    
    Aptana - Teil 1
    
    04:48
  - Der Editor von Aptana bietet Ihnen eine ganze Reihe an Hilfestellungen an, die hier kompakt vorgestellt werden. Ebenso erfahren Sie in diesem Teil 2, wie Sie aus Aptana heraus Ihre Webseite über den internen Webserver Jetty im Defaultbrowser laden können.
    
    Aptana - Teil 2
    
    06:06
- In diesem Kapitel gehen wir auf Grundtechniken und Konzepte/Features ein, die als Basis von JavaScript zu sehen sind. Das umfasst z.B. HTML/XHTML inklusive der Version 5 und der Validierung von Webseiten, aber auch CSS, XML und das DOM-Konzept.
  
  Vorbereitende Basics
  - HTML wird in seiner Anwendung bei modernen Webseiten fast vollständig auf die Festlegung von Strukturen und die Verknüpfung mit Ressourcen reduziert.
    
    Was macht man noch mit HTML?
    
    02:51
  - Wie verhalten sich Browser, wenn man die Regeln von HTML bricht? Sie reagieren fehlertolerant und korrigieren intern die fehlerhaften Strukturen.
    
    Fehlertoleranz
    
    05:57
  - Man kann Webseiten bezüglich der Gültigkeit und Fehlerfreiheit testen. In diesem Film sehen Sie, wie man das machen kann und warum diese Fehlerfreiheit weder zwingend noch immer sinnvoll ist.
    
    Validierung von Webseiten
    
    05:01
  - HTML5 ist der zukünftige Standard im Web. In diesem Film werden Ihnen die ersten Neuerungen von HTML5 vorgestellt, die sich aufgrund der Neuerungen und Tags bzw. Attribute ergeben.
    
    HTML5
    
    08:46
  - Als Webprogrammierer sollten Sie zumindest wissen, was sich hinter dem Begriff XML verbirgt. In diesem Film erhalten Sie einen ganz kurzen Einblick in XML.
    
    XML
    
    01:52
  - Ganz wichtig in modernen Webseiten sind Style Sheets, die im Web meist in Form von CSS zum Einsatz kommen. Lernen Sie die verschiedenen Formen der Verwendung (Inline-Style, internes Style Sheet und externes Style Sheet) und wichtige Selektoren kennen.
    
    CSS
    
    06:24
Die Filme in diesen Unterkapiteln zeigen die Integration bzw. Verbindung von JavaScript in Webseiten und erklären die elementaren JavaScript-Grundstrukturen.

Einstieg in JavaScript
- In diesem Abschnitt lernen Sie die verschiedenen Techniken kennen, mit denen Sie JavaScript und Ihre Webseite verbinden.
  
  Verbindung zwischen JavaScript und der Webseite
  - Ein kurzer Blick in die Versionsgeschichte von JavaScript und das Verhältnis zu ECMA-Script sowie Jscript trägt viel zum Verständnis bei, warum gewisse Dinge in einigen Browsern funktionieren und in anderen nicht.
    
    Versionszyklen von JavaScript
    
    01:26
  - Sie sehen hier, wie Sie durch ein Inline-Skript JavaScript verwenden können. Diese Technik ist jedoch veraltet und wird nur noch in wenigen Fällen in der Praxis verwendet.
    
    Das Inline-Skript
    
    01:32
  - Mit einem internen Skript schreiben Sie JavaScript-Anweisungen direkt in einen Container in der Webseite. Durch die Positionierung von diesem Container können Sie den Zeitpunkt der Ausführung steuern.
    
    Das interne Skript
    
    02:27
  - Die perfekte Wahl für die Verbindung von JavaScript mit einer Webseite ist die Verwendung einer externen JavaScript-Datei, durch die Sie die Trennung von Struktur und Funktionalität erreichen. In dem Film sehen Sie, wie das geht.
    
    Das externe Skript
    
    03:20
  - Alle JavaScript-Webseiten gehören in einen gemeinsamen Namensraum. Das muss man berücksichtigen, wenn mehrere externe und interne Skripte gemeinsam in einer Webseite verwendet werden, und das ist in der Praxis bei komplexen Seiten fast immer der Fall.
    
    Der gemeinsame Namensraum
    
    04:06
  - Laut Statistik haben über 99% aller Webnutzer JavaScript aktiviert. Bei bestimmten Zielgruppen kann der Anteil auch niedriger sein. Mit dem noscript-Tag können Sie Besuchern, die JavaScript deaktiviert haben, gezielt Informationen zur Verfügung stellen.
    
    Der noscript-Tag
    
    02:01
  - Mit einem indirekten Verfahren kann man testen, ob ein Besucher der Webseite JavaScript aktiviert hat oder nicht, und so die Besucher darüber trennen. Wie das geht, erfahren Sie hier.
    
    Test auf die Verfügbarkeit von JavaScript
    
    03:59
  - In diesem Film lernen Sie einige sehr spezielle Besonderheiten kennen, die man bei der Einbindung von JavaScript in der Praxis teilweise vorfindet und keine positiven Wirkungen haben.
    
    Einige Besonderheiten bei der Skript-Einbindung
    
    04:27
- In diesem Abschnitt lernen Sie elementare Grundstrukturen und die Syntax von JavaScript kennen. Diese bilden das unabdingbare Fundament jeder JavaScript-Programmierung.
  
  Elementare JavaScript-Grundstrukturen
  - Die elementaren Grundstrukturen von JavaScript sind stark an C orientiert. Dies sind logische Strukturen, die Sie in fast jeder Skript- und Programmiersprache so finden. Im Einzelnen umfasst das Token, Kommentare und die Syntaxregeln von JavaScript.
    
    Token und Kommentare sowie die Syntax
    
    01:56
  - Ein Datentyp legt fest, was man mit Daten machen kann, wie viel Speicher eingeplant werden muss und welcher Art die Daten sind. In diesem Video lernen Sie die Datentypen von JavaScript kennen.
    
    Was sind Datentypen?
    
    03:38
  - In diesem Film erfahren Sie, was Variablen sind und wie Sie diese unter JavaScript einführen (deklarieren) und initialisieren. Bei JavaScript muss man dabei, wegen der losen Typisierung, einige Besonderheiten beachten.
    
    Was sind Variablen?
    
    04:32
  - Sehen Sie, wie Sie auf Variablen in einem JavaScript zugreifen können, sowohl schreibend (den Wert der Variable setzen) als auch lesend (den Wert benutzen).
    
    Zugriff auf Variablen
    
    01:24
  - Was sind Anweisungen und welche Besonderheiten müssen Sie beim Codieren in JavaScript beachten? Erfahren Sie mehr zu Groß-/Kleinschreibung, Abschluss der Anweisung mit Semikolon, Trenn-/Leerzeichen, Ausdrücken, Blöcken und dem Maskieren von Zeichen.
    
    Anweisungen in JavaScript
    
    06:21
  - Es gibt einige wenige Namensregeln, die Sie bei JavaScript beim Anlegen von Bezeichnern einhalten müssen. Gerade durch die lose Typisierung und die Case-Sensitivität von JS ist es unabdingbar, dass Sie bei Bezeichnern Namenskonventionen einhalten.
    
    Namen
    
    03:53
  - Sie lernen in diesem Film besondere Token kennen, die in JavaScript nicht vollständig definierte bzw. nicht korrekte oder leere Zustände beschreiben. Konkret - hier werden null, undefined und NaN erklärt.
    
    Nichts
    
    03:10
- Ein Kapitel zu den Operatoren. Lernen Sie Operatoren, Operanden und weitere wichtige Elemente kennen. Man unterscheidet die Operatoren nach ihrem Typ und in diesem Abschnitt lernen Sie diese kennen.
  
  Operatoren
  - In diesem Film erfahren Sie, was arithmetische Operatoren sind und welche es gibt bzw. was man bei JavaScript dabei beachten muss.
    
    Arithmetische Operatoren
    
    04:33
  - Mit dem Plusoperator können Sie nicht nur Zahlen addieren, sondern auch Strings verketten. In zusammengesetzten Ausdrücken "frisst" ein String dann immer andere Datentypen.
    
    Der String-Verkettungs-Operator
    
    04:33
  - Sie können bei logischen Ausdrücken nicht nur auf Gleichheit von zwei Seiten prüfen, sondern auch auf diverse andere Bedingungen, z.B. ob der Wert auf einer Seite kleiner oder größer ist. JavaScript stellt dazu logische Vergleichsoperatoren bereit.
    
    Logische Vergleichsoperatoren
    
    02:49
  - Die logischen Operatoren dienen der Verknüpfung von booleschen Werten beziehungsweise Ausdrücken, wie sie beispielsweise über die Vergleichsoperatoren gebildet werden. Das Ergebnis einer solchen Verknüpfung ist immer erneut ein boolescher Wert.
    
    Logische Operatoren
    
    03:13
  - Es gibt neben dem direkten Zuweisungsoperator in JavaScript noch die arithmetischen Zuweisungsoperatoren. Diese sind als Abkürzung für arithmetische Operationen zu verstehen. Damit lassen sich auch Stringverkettungen verkürzen.
    
    Zuweisungsoperatoren
    
    01:32
  - Jedes Zeichen auf dem Computer wird bekanntlich intern binär dargestellt. JavaScript kennt Operatoren, welche eine Manipulation von Werten auf Bit-Ebene erlauben. Bitweise Operatoren ermöglichen Operationen auf Basis der Binärdarstellung von Zeichen.
    
    Bitweise Operatoren
    
    03:10
  - Die Bitoperatoren dienen zur Verknüpfung von zwei Operanden auf Bit-Ebene. Das bedeutet, dass das Bit im einen Operanden mit dem Bit an der gleichen Stelle des zweiten Operanden verknüpft wird.
    
    Bitoperatoren
    
    01:41
  - Die Operatoren in JavaScript haben eine festgelegte Rangordnung, die immer dann angewandt wird, wenn in einem Ausdruck mehrere Operatoren verwendet werden und keine Klammern gesetzt werden (Klammern haben immer die höchste Priorität).
    
    Operatorrangfolge
    
    00:42
- In den Filmen in diesem Abschnitt beschäftigen wir uns mit den Kontrollstrukturen von JavaScript, mit denen Sie einen Programmfluss steuern können.
  
  Kontrollstrukturen
  - Kontrollstrukturen sind Anwendungen von logischen oder vergleichenden Operatoren oder Anweisungsschritte, mit denen ein Programmierer Entscheidungen über den weiteren Ablauf eines Programms oder Skripts vorgibt. Auch JavaScript stellt dies zur Verfügung.
    
    Was sind Kontrollstrukturen?
    
    01:19
  - Über die if-Kontrollstruktur entscheiden Sie, ob eine nachfolgende Anweisung oder ein Block auszuführen ist. Es gibt die if-Bedingung mit oder ohne nachgestellten else-Zweig. Erfahren Sie alles Nähere hier in diesem Video.
    
    Die if-Anweisung
    
    01:49
  - In JavaScript gibt es die Fallunterscheidung über switch. Damit können Sie auf einfache und sehr übersichtliche Weise mehrere Fälle unterscheiden. Aber Achtung - es handelt sich hier bei JavaScript um eine Fall-Through-Anweisung.
    
    Die switch-case-Anweisung
    
    02:19
  - Die while-Schleife führt am Anfang eines Blocks eine Prüfung einer Bedingung durch. Die Kontrollstruktur wird so lange durchlaufen, bis eine Bedingung nicht mehr erfüllt ist. Es handelt sich somit um eine abweisende (kopfgesteuerte) Schleife.
    
    Die while-Schleife
    
    03:18
  - Die do-while-Schleife ist eine Abart der normalen while-Schleife. Lernen Sie den wichtigsten Unterschied zur reinen while-Schleife kennen und wie sich dadurch die innere Anweisung unterscheidet.
    
    Die do-while-Schleife
    
    01:06
  - Die for-Schleife ist die kompakteste Form der Schleifen, denn sie enthält in der Regel im Schleifenkopf alle relevanten Daten für die Abarbeitung der Schleife. Alles zu Zählvariablen, Wertänderung und Abbruchbedingung.
    
    Die for-Schleife
    
    02:07
  - JavaScript stellt eine gewisse Anzahl an Sprunganweisungen zur Verfügung (break, continue, return, throw). Diese führen dazu, dass mit der direkten Anweisung hinter der syntaktischen Struktur weitergemacht wird.
    
    Sprunganweisungen
    
    03:39
- Das Kapitel zum Thema Arrays. Es ist im Grunde eine Sammlung von Variablen, die alle über einen gemeinsamen Namen angesprochen werden können. Es ist immer dann von großem Vorteil, wenn Sie eine Reihe von gleichartigen Informationen speichern wollen.
  
  Arrays
  - Ein Array wird in JavaScript anders erzeugt als eine normale Variable. Neben dem Namen muss dem System auch kenntlich gemacht werden, dass eine ganze Sammlung an Variablen vorliegt. Dazu gibt es verschiedene Wege und diese lernen Sie hier kennen.
    
    Erzeugen eines Arrays
    
    04:36
  - In diesem Film lernen Sie, wie Sie auf die verschiedenen Elemente in einem Array zugreifen können.
    
    Zugriff auf Arrayeinträge
    
    03:04
  - Die Größe eines numerisch indizierten Arrays steht über length zur Verfügung, dabei muss man aber in JavaScript einige Details beachten.
    
    Die Größe eines Arrays
    
    05:37
  - Die Struktur jedes Arrays und ebenso jedes Objekts wird von JavaScript intern als Hash (Liste mit Schlüssel-Werte-Paaren) verwaltet. In diesem Film wird das Konzept erläutert, das elementar für erweiterte JavaScript-Techniken ist.
    
    Arrays als Hash
    
    01:09
  - Ein großer Vorteil von Arrays ist, dass man über Schleifen mit wenig Aufwand auf Werte zugreifen kann. Speziell für Arrays mit Textindizes eignet sich dazu eine Spezialform von for - die for...in-Schleife.
    
    Mit Schleifen auf Arrays zugreifen
    
    02:33
- Funktionen (Unterprogramme) fassen eine Reihe von Anweisungen im Quelltext zusammen. Einmal definiert, können sie mehrfach aufgerufen werden, ohne dass sie jedes Mal neu in den Quelltext geschrieben werden müssen. Mehr dazu in diesem Kapitel.
  
  Funktionen
  - In diesem Film werden Sie an Funktionen in JavaScript herangeführt. Sie erfahren, was Funktionen sind, welche Vorteile sie bieten und warum man sie in JavaScript einsetzt.
    
    Was sind Funktionen?
    
    02:06
  - JavaScript besitzt eine ganze Reihe von vorgefertigten Funktionen, die Sie direkt verwenden können, indem Sie sie an einer beliebigen Stelle im Quellcode einfach aufrufen (eventuell mit Parametern). Insbesondere isNaN() und eval() sind dabei wichtig.
    
    Standardfunktionen in JavaScript
    
    03:51
  - Bei der Deklaration einer Funktion beginnen Sie mit dem Schlüsselwort function. Dem folgt der gewünschte Name der Funktion und weitere Parameter. Erfahren Sie mehr zu den Unterschieden bei runden und geschweiften Klammern.
    
    Eigene Funktionen
    
    04:03
  - Der Aufruf einer Funktion erfolgt entweder mittels sogenannter Eventhandler oder einfach als Anweisung in einem Skriptbereich. Dazu müssen Sie nur den Funktionsnamen samt Klammern und optionaler Werte für die Parameter in einer Anweisung angeben.
    
    Eigene Funktionen aufrufen
    
    02:17
  - Parameter an Funktionen sind innerhalb des Funktionskörpers als lokale Variablen verfügbar. Sie können auch selbst innerhalb des Funktionskörpers weitere lokale Variablen definieren. Erfahren Sie mehr im Video.
    
    Lokale Variablen in Funktionen
    
    02:08
  - Normalerweise geben Sie beim Aufruf einer Funktion die gewünschte Anzahl Parameter an. Deren Namen sind dann lokale Variablen in der Funktion. Es gibt in JavaScript jedoch zusätzlich, innerhalb jeder Funktion, eine spezielle implizite Variable arguments.
    
    Flexible Anzahl an Funktionsargumenten und arguments
    
    03:16
  - JavaScript unterstützt sogenannte Selbstaufrufe. Dies nennt man auch Rekursion oder einen rekursiven Aufruf. Dabei ruft sich eine Funktion einfach im Laufe der Abarbeitung selbst wieder auf.
    
    Rekursive Funktionsaufrufe
    
    02:28
  - JavaScript erlaubt in neuen Versionen den Aufbau verschachtelter (innerer) Funktionen, diese nennt man Closures. Dabei wird eine Funktion direkt in eine andere Funktion hinein notiert!
    
    Innere Funktionen - Closures
    
    02:30
  - In diesem Film lernen Sie anonyme Funktionen und den Unterschied zu Funktionsreferenzen kennen. Beide werden jedoch in der Regel an JavaScript-Eventhandler gekoppelt, die bei einem bestimmten Ereignis die referenzierte Funktion aufrufen.
    
    Funktionsreferenzen und anonyme Funktionen
    
    03:54
  - Unter einer Callback-Funktion, oder kurz Callback, ist eine JavaScript-Funktion zu verstehen, die in der Regel als Rückgabewert eine Funktionsreferenz liefert. So eine Funktion wird meist verwendet, indem Sie an einen Eventhandler gebunden wird.
    
    Callback-Funktionen
    
    02:16
- Skripts bzw. Funktionen werden nicht nur beim Laden einer Webseite ausgeführt, sondern auch in einer bestimmten Situation. Ein beliebiges Ereignis kann diesen Aufruf auslösen. Damit haben wir bereits den Schlüsselbegriff für diesen Abschnitt - Ereignis.
  
  HTML-Eventhandler
  - Ein Ereignis kann alles sein, was während der Lebenszeit einer Webseite auftreten kann. Mittels unterschiedlicher Eventhandler reagiert man auf unterschiedliche Ereignisse. Eventhandler sind das Bindeglied zwischen (X)HTML und JavaScript.
    
    Ereignisse und Reaktion
    
    05:03
Der Nutzen von JavaScript besteht darin, dass Sie damit auf Objekte im Rahmen einer Webseite zugreifen können, und um Objekte dreht sich alles in diesem Kapitel.

Objekte
- In diesem Abschnitt erfahren Sie, was Objekte und Klassen sind und wie sie die Programmierung von Webseiten beeinflussen bzw. überhaupt erst möglich machen.
  
  JavaScript und Objekte
  - Dieser Film führt Sie über die Symbole einer grafischen Benutzeroberfläche in die theoretischen Hintergründe von Objekten und Klassen ein.
    
    Was sind Objekte und Klassen?
    
    04:46
  - In diesem Film erfahren Sie, wie man Objekte, Methoden und Eigenschaften in JavaScript grundsätzlich verwendet. Alles zum Thema Punktnotation.
    
    Verwendung von Objekten in JavaScript
    
    01:54
  - Objekte können in JavaScript auf verschiedene Weisen erzeugt werden. In diesem Film sehen Sie, wie man das macht, und dabei kommen sowohl ein Konstruktor als auch eine literale Erzeugung zum Einsatz.
    
    Erzeugen von Objekten in JavaScript
    
    02:47
  - Klassenelemente werden direkt von einer Klasse zur Verfügung gestellt. Sie können solche Elemente nutzen, ohne vorher mit einem Konstruktor eine konkrete Instanz erzeugt zu haben. Im Beispiel sehen Sie die Klasse Math inklusive einem Zufallsgenerator.
    
    Klassenelemente verwenden
    
    04:04
  - In diesem Film erhalten Sie eine kurze Übersicht über die nativen Objekte im JavaScript-Kern.
    
    Native Objekte in JavaScript
    
    01:50
  - In der Webprogrammierung werden Arrays sehr oft auftauchen. Arrays sind auch Objekte und daher gibt es implementierte Methoden und Eigenschaften, welche Ihnen in diesem Film vorgestellt werden.
    
    Arrays aus Sicht der OOP
    
    03:28
  - Einer der wichtigsten Objekttypen, die Sie selbst unter JavaScript erzeugen können, ist ein Datumsobjekt. Es wird als Instanz der Klasse Date erzeugt und stellt in JavaScript für alle Berechnungen mit Datum und Zeit Funktionalitäten bereit.
    
    Datumsobjekte erzeugen
    
    04:40
  - Mit Datumsobjekten und den Methoden zum Zugriff auf Bestandteile eines Datums können Sie viele interessante dynamische Effekte in Webseiten programmieren. In diesem Film sehen Sie, wie Sie zeit- und datumsgesteuerte Inhalte anzeigen und Layouts ändern.
    
    Dynamischer Inhalt auf Grund des Datums
    
    06:49
  - Objekte vom Typ String zählen ebenfalls zu den nativen JavaScript-Objekten. Sie können Zeichenketten direkt über deren Methoden manipulieren. Erfahren Sie hier mehr zum Thema.
    
    String-Operationen
    
    04:55
  - In JavaScript können Sie mit der Klasse Image und deren Konstruktor über new Image() Bildobjekte erzeugen, denen als Eigenschaften alle Attribute zur Verfügung stehen, die Sie vom <img>-Element kennen.
    
    Native Bildobjekte
    
    01:53
  - Reguläre Ausdrücke erlauben in JavaScript eine sehr mächtige Formulierung von Suchpattern. Im Video werden Ihnen die Möglichkeiten kurz vorgestellt, im Beispiel die Überprüfung einer gültigen E-Mail-Adresse.
    
    Reguläre Ausdrücke
    
    02:40
- Eigentlich immer werden Sie in Ihren JavaScript-Codes Objekte nutzen, die Ihnen automatisch vom Browser zu Verfügung gestellt werden. Diese Objekte basieren auf dem DOM-Konzept und dieses lernen Sie in den Filmen dieses Abschnitts kennen.
  
  Der DOM - das Mysterium der JavaScript-Welt
  - Die DOM-Objektbibliothek kann mittels diverser Techniken genutzt werden und Kern der Überlegung ist, dass eine HTML-Seite als differenzierbare Struktur betrachtet wird und deren einzelne Bestandteile dynamisch zugänglich sind.
    
    Was ist das DOM-Konzept?
    
    04:19
  - Im DOM-Konzept stehen die diversen Objekte für eine Verwendung in einem JavaScript zur Verfügung. In diesem Film erhalten Sie eine kurze Übersicht über die verfügbaren DOM-Objekte.
    
    Die verfügbaren DOM-Objekte
    
    05:14
  - Es gibt im Rahmen des DOM-Konzepts Objektfelder, die Arrays mit DOM-Objekten eines spezifischen Typs als Inhalt haben. Beispiele für solche Objektfelder sind forms und images und diese manipulieren wir im Film auf der Beispiel-Webseite.
    
    Das Konzept der Objektfelder
    
    05:25
  - Zum Zugriff auf die Elemente einer Webseite gibt es verschiedene Möglichkeiten, die letztendlich alle das gleiche Objekt referenzieren und unabhängig von der Art des Zugriffs die gleichen Eigenschaften und Methoden bereitstellen.
    
    Generelle Zugriffsmöglichkeiten auf DOM-Objekte
    
    04:54
  - Best practice - wenn Sie auf ein Objekt mehrfach zugreifen wollen, können Sie mit with() sich die mehrfache Notation des Objekts sparen.
    
    Kurzer Weg - with()
    
    00:46
  - Best practice - Sie können erst dann auf DOM-Elemente zugreifen, wenn der Browser den DOM-Baum fertiggestellt hat. In diesem Film erläutern wir Ihnen die Klippen, die Ihnen da drohen, und wie Sie diese umschiffen.
    
    Nicht zu früh zugreifen
    
    05:05
  - Mit innerHTML können Sie universell auf DOM-Elemente zugreifen, die Ihnen Textinhalte bereitstellen. Das Video vermittelt Ihnen, wie Sie dabei vorgehen müssen.
    
    Zugriff auf Textinhalte
    
    01:46
  - In diesem Film vermittelt Ihnen der Autor, wie Sie mit der Eigenschaft value auf Benutzereingaben in einem Webformular zugreifen können.
    
    Zugriff auf Formularinhalte
    
    02:54
Dieses Kapitel widmet sich interessanten Anwendungen, die durch den Zugriff auf DOM-Elemente möglich sind. Das umfasst etwa Cookies, DHTML, Fenstertechniken und Formularplausibilisierungen.

DOM-Anwendungen
- Das Objekt document ist ein zentrales Objekt im DOM-Konzept. Die Filme in diesem Abschnitt stellen dieses Objekt und dessen Möglichkeiten in den Mittelpunkt.
  
  Das document-Objekt
  - Das Objekt document stellt mit der Methode write() eine Methode für ds (dynamisches Schreiben) beim Laden der Webseite bereit. Hier erfahren Sie interessante Hintergründe und Details zu den Zugriffsmethoden bei diesem Objekt.
    
    Allgemeines zu document
    
    02:59
  - Sehen Sie im Film, wie Sie Cookies schreiben und auslesen können. Bei einem Cookie handelt es sich immer um eine kleine Textdatei, welche von einem Browser in ein im Browser vorgegebenes Verzeichnis geschrieben und von dort wieder ausgelesen werden kann.
    
    Cookies
    
    07:26
  - Mehrere Methoden von document dienen zum Erzeugen von Knoten, um eine Webseite dynamisch per Skript aufzubauen. createAttribute(), createElement() und createTextNode() sind wichtige Methoden in der fortgeschrittenen JavaScript-Programmierung.
    
    Knoten dynamisch erzeugen
    
    04:49
  - Best practice - Sie sehen hier, wie Sie in manchen Situationen über den Stellvertreterbegriff this auf ein Objekt zugreifen können. Dies ist hauptsächlich dann wichtig, wenn Sie sich im "Inneren" eines Objekts befinden.
    
    Der kurze Dienstweg - this
    
    01:20
- Ein node-Objekt ist die Abbildung einer Baumstruktur, die die Webseite oder einen Teil davon repräsentiert. Als JavaScript-Programmierer sollte man die Grundlagen dazu zumindest kennen.
  
  Das node-Objekt
  - In diesem Film widmen wir uns dem etwas sperrigen theoretischen Konzept von node-Objekten, mit den verschiedenen Knotentypen und den Generationenbeziehungen in einem Knotenbaum.
    
    Allgemeines zu node
    
    04:14
  - Erlernen Sie, wie Sie mit node direkt auf den DOM-Baum zugreifen können, und Sie werden sehen, dass das keinesfalls trivial ist. Darum setzt man in der Praxis stattdessen oft auf innerHTML.
    
    Mit node eine Webseite generieren
    
    04:24
- In den Filmen dieses Kapitels sehen Sie Techniken, mit denen Sie Browserfenster (inklusive Frames) beeinflussen können. Im Mittelpunkt steht das DOM-Objekt window, welches das gesamte Browserfenster repräsentiert.
  
  Fenstertechniken
  - Das window-Objekt besitzt drei einfache Methoden zur Anzeige von Standarddialogfenstern (alert(), prompt() und confirm()). In diesem Film lernen Sie diese kennen.
    
    Standarddialoge von window
    
    04:29
  - Hier werden Ihnen kurz die wichtigsten Eigenschaften und Unterobjekte von window vorgestellt.
    
    Eigenschaften von window
    
    02:14
  - Sie sehen hier die Weiterleitung per JavaScript zu einer neuen URL über window.location.href und das Zurückspringen über window.history.back().
    
    Vor und zurück
    
    01:17
  - Wie Sie in die Statuszeile des Browsers schreiben können, erfahren Sie hier. Dazu dient window.status. Doch unterbinden mittlerweile die meisten Browser das Schreiben der Statuszeile per window.status bzw. JavaScript.
    
    Schreiben der Statuszeile
    
    01:14
  - Sie lernen in diesem Video die window-Methoden open() und close() zum Öffnen und Schließen von Browserfenstern (auch in Zusammenhang mit Frames) kennen. Auch hier gibt es Einschränkungen in modernen Browsern.
    
    Auf und zu
    
    06:39
  - Die Methoden resizeBy(), resizeTo(), moveBy() und moveTo() erlauben die Veränderung der Größe und Position eines Browserfensters. Ob sie aber funktionieren, hängt sowohl von den Browsereinstellungen als auch dem konkreten Browser ab.
    
    Verschieben und Größe ändern
    
    03:34
  - Mit Hilfe der Adresszeile des Browsers (window. location) können Sie nicht nur zu einer Ressource weiterleiten, sondern auch Daten an andere Webseiten übergeben. Hier erfahren Sie, wie das geht.
    
    Zugriff auf die Adresszeile
    
    07:04
  - Das window-Objekt besitzt eine Methode mit Namen setTimeout(), das ist ein Timer, der bei fast allen Animationen in JavaScript Anwendung findet. Mit clearTimeout() können Sie einen wartenden Aufruf unterbrechen.
    
    Zeitverzögerung
    
    04:16
  - Unter window stehen auch Frames zur Verfügung, etwa mit dem Objektfeld frames. Das kann man dazu nutzen, einen unsichtbaren Datenspeicher in einer Webseite vorzuhalten. Mehr dazu hier.
    
    Ein unsichtbarer Datenspeicher
    
    05:08
  - Sie können eine Datei in einem IFrame als Datenspeicher verwenden. Im Film sehen Sie, wie Sie das mit Hilfe von Methoden von node (appendChild()) und document (createElement() und createTextNode()) machen können.
    
    Daten in einem IFrame speichern
    
    04:01
- Über die DOM-Objekte navigator und screen können Sie aus JavaScript heraus auf zahlreiche Informationen über das Clientprogramm und die Plattform eines Besuchers zugreifen. Lernen Sie, wie das geht und was Sie mit diesen Informationen machen können.
  
  Zugriff auf die Plattform
  - Über das DOM-Objekt navigator stehen Ihnen aus JavaScript heraus zahlreiche Informationen über das Clientprogramm und die Plattform eines Besuchers zur Verfügung. In diesem Film sehen Sie die Details.
    
    Browserauswertung
    
    03:38
  - Über das DOM-Objekt screen stehen Ihnen aus JavaScript heraus zahlreiche Informationen über den Bildschirm eines Besuchers zur Verfügung. Erlernen Sie, wie man diese Angaben anzeigen kann.
    
    Bildschirmauswertung
    
    01:56
  - Diesmal erfahren Sie, wie Sie eine Browserweiche erstellen können und was es dabei alles zu beachten gilt.
    
    Browserweichen
    
    03:00
- In diesem Abschnitt geht es um DHTML und Animationstechniken. Diese sind optisch meist sehr interessant und eindrucksvoll, von der Programmierung her aber oft eher einfach.
  
  DHTML und Animationen
  - DHMTL (Dynamic HTML) ist im weitesten Sinn die Veränderung einer Webseite, nachdem sie bereits in den Browser geladen wurde. Allgemein versteht man darunter aber die Verbindung von HTML, JavaScript und Style Sheets über das DOM-Objekt style.
    
    Was ist DHTML?
    
    04:33
  - Sie können über die Manipulation von style auf einfache Weise mit der Hilfe von setTimeout() Animationen erstellen. Im Film sehen Sie, wie einfach das ist, wenn Sie auf bestimmte Details achten.
    
    Animationen über style
    
    05:55
- Lernen Sie in diesem Kapitel, was ein Formularobjekt ist, was man damit machen kann und warum auch hier Plausibilitätsabfragen wichtig sind.
  
  Formulare
  - In diesem Film lernen Sie das Formularobjekt mit den Objekten für die enthaltenen Elemente kennen und Sie erlernen, wie Sie an die Inhalte der Formularelemente kommen.
    
    Das Formularobjekt
    
    04:33
  - Mit der Methode submit() können Sie per JavaScript die Formulardaten verschicken und mit reset() das Formular zurücksetzen. Damit haben Sie das Versenden und Zurücksetzen des Formulars vollkommen unter Kontrolle.
    
    Das Formular verschicken
    
    02:31
  - Hier sehen Sie, wie Sie ein Formular mit JavaScript plausibilisieren. Dabei können Sie dem Anwender Meldungen anzeigen und das Versenden des Formulars verhindern, wenn es nicht korrekt ausgefüllt ist.
    
    Formularplausibilisierung
    
    09:27
In diesem Abschnitt behandeln wir die verschiedenen Möglichkeiten, aus einer Webseite heraus JavaScript-Anweisungen auf Grund von Ereignissen aufzurufen und wie man mit dem resultierenden Ereignisobjekt umgehen kann.

Ereignisbehandlung und Ausnahmebehandlung
- Eventhandling geht sowohl per HTML- als auch JavaScript-Eventhandler. Wir konzentrieren uns auf Letzteres und erreichen damit die Trennung von Funktionalität und Struktur und haben zudem Zugriff auf das Ereignisobjekt mit zahlreichen Möglichkeiten.
  
  Ereignisbehandlung
  - Sie erfahren hier die Unterschiede zwischen HTML- und JavaScript-Eventhandlern und welche Vorteile die Verlagerung in JavaScript mit sich bringt und wie man dabei vorgeht. Sie können damit die Ereignisbehandlung vollkommen vom statischen HTML lösen.
    
    Wie funktionieren JavaScript-Eventhandler?
    
    07:35
  - Mit anonymen Funktionen können Sie die Ereignisbehandlung flexibilisieren. Sie weisen einem Eventhandler eine anonyme Funktion zu und können im Inneren auch Funktionsaufrufe mit Parametern notieren.
    
    Anonyme Ereignisreaktion
    
    03:07
  - In diesem Film sehen Sie, was das Ereignisobjekt ist und wie Sie es nutzen können. Doch Vorsicht, es gibt inkompatible Ereignismodelle in verschiedenen Browsern.
    
    Das Ereignisobjekt
    
    04:58
  - Wir wollen nun Informationen vom Ereignisobjekt gezielt verwenden und dabei auch einen universellen Ansatz über eine Browserweiche verwenden, damit auch alles in allen relevanten Browsern funktioniert.
    
    Informationen des Eventobjekts verwerten
    
    03:56
- Ausnahmebehandlung ist ein Konzept zur Reaktion auf bestimmte Situationen im Rahmen eines JavaScripts bzw. einer Webseite, die das Skript nicht ohne gewisse Maßnahmen folgerichtig weiterlaufen lassen. Dieser Abschnitt führt Sie in die Grundlagen ein.
  
  Ausnahmebehandlung
  - Mit Ausnahmebehandlung kann man auf das Auftreten von Situationen reagieren, die ein Skript nicht folgerichtig weiterlaufen lassen, ohne dass man Gegenmaßnahmen ergreift. Mit Hilfe von try-catch können Sie gezielt kritische Anweisungen absichern.
    
    Ausnahmen abfangen
    
    04:57
  - Hier sehen Sie, wie Sie mit Hilfe der Ausnahmebehandlung eine universelle Ereignisbehandlung programmieren können. Allgemein kann man das Verfahren auch als Browserweiche verwenden.
    
    Eine universelle Ereignisbehandlung
    
    03:15
  - Best practice - bei Bedarf können Sie auch eigene Ausnahmen erstellen und/oder selbst mit der Sprunganweisung throw Ausnahmen auswerfen.
    
    Eigene Ausnahmen
    
    02:05
In diesem Kapitel kümmern wir uns um das Thema AJAX (Asynchronous JavaScript and XML). Das ist die Grundlage dessen, was in Rich Internet Applications gipfelt - dynamische Applikationen, die sehr interaktiv und asynchron mit dem Webserver kommunizieren.

AJAX und das Web 2.0
- Die Filme in diesem Abschnitt erklären Ihnen die theoretischen Grundlagen von AJAX, Rich Internet Applications und dem Web 2.0.
  
  Grundlagen
  - Mit AJAX kommunizieren Sie asynchron mit dem Webserver und tauschen Inhalte der Webseite immer wieder durch nachgeladene Informationen aus und dies meist unbemerkt vom Anwender.
    
    AJAX und das Web 2.0 - was ist das?
    
    03:25
  - In diesem Film besprechen wir die Grundlagen der Datenkommunikation im WWW über HTTP. Um die Arbeitsweise des Protokolls zu sehen, arbeiten wir mit einem Sniffer, über den man die Kommunikation zwischen Browser und Webserver beobachten kann.
    
    Grundlagen von HTTP
    
    06:47
  - Bei der Datenanforderung mit AJAX fordern Sie grundsätzlich reinen Klartext an. Dieser kann aber bei Bedarf auch strukturiert sein.
    
    Das Datenformat
    
    01:39
  - Der grundsätzliche Ablauf einer AJAX-Anfrage folgt dabei in der Regel immer dem gleichen Schema und dieses stellen wir Ihnen in diesem Film vor.
    
    Der grundsätzliche Ablauf einer AJAX-Anfrage
    
    01:07
- In diesem Abschnitt wenden wir uns den AJAX-Anwendungen zu und wie diese konkret programmiert werden.
  
  Praktische Anwendungen
  - Das XMLHttpRequest-Objekt (XHR) steht im Mittelpunkt jeder Kommunikation zwischen Client und Server per AJAX. Hier sehen Sie, wie man das Objekt browserübergreifend erzeugt.
    
    Das XHR-Objekt erzeugen
    
    04:56
  - Anhand einer AJAX-Anforderung, als reine Klartextdatei, sehen Sie im praktischen Beispiel, wie man grundsätzlich Daten anfordern und anzeigen kann.
    
    Eine Textdatei mit AJAX nachfordern
    
    06:14
  - Wenn Sie mit AJAX nur Textdateien vom Server anfordern wollen, können Sie innerhalb von JavaScript eine Auswahl treffen, welche Datei Sie nehmen wollen. In diesem Film sehen Sie, wie Sie das realisieren können.
    
    Textdateien intelligent auswählen
    
    02:29
  - Im Video sehen Sie, dass sich die Anforderung von HTML-Fragmenten so gut wie gar nicht von der Anforderung einer reinen Textdatei unterscheidet. Man kann aber damit die angezeigten Daten bereits über das Übertragungsformat formatieren und strukturieren.
    
    HTML-Fragmente mit AJAX nachfordern
    
    03:04
  - Bei AJAX kann man strukturierte Daten in Form von XML nachfordern. In diesem Film erlernen Sie, wie man das macht, wie man auf den XML-Daten im Client navigieren kann und worauf man dabei zu achten hat.
    
    XML nachfordern
    
    05:32
  - JSON ist das Format der Wahl, wenn man bei AJAX strukturierte Informationen vom Server anfordern will. Es verbindet die Leistungsfähigkeit von XML mit einer viel einheitlicheren Unterstützung der wichtigsten Browser und einer sehr einfachen Verwertung.
    
    JSON nachfordern
    
    06:05
  - Das Verschicken von Daten zum Server per AJAX kann über GET und POST erfolgen. Sehen Sie, wie das geht, was die Unterschiede sind und auf was man achten muss.
    
    Daten senden
    
    05:19
  - Der Film vermittelt, wie Sie Benutzereingaben in einem Webformular mit AJAX verschicken können. Dabei ist es wichtig, dass das normale Verschicken der Formulardaten über das klassische Submit verhindert wird.
    
    Ein Formular mit AJAX verschicken
    
    06:50
  - Best practice - das Video zeigt, wie Sie bei AJAX unerwünschtes Caching verhindern können.
    
    Caching verhindern
    
    01:49
In diesem Kapitel bekommen Sie einen kleinen Ausblick auf erweiterte JavaScript-Techniken. Dies umfasst unter anderem Aufgabenstellungen, die im Rahmen von HTML5 über JavaScript gelöst werden können.

Erweiterte JavaScript-Techniken
- Ein optisches Highlight von HTML5 ist sicher, dass Sie mit Hilfe von Canvas-Objekten und JavaScript komplexe Grafiken direkt im Browser zeichnen können. Hier wird die Technik in kompakter Form vorgestellt.
  
  Zeichnen mit Canvas
  
  05:12
- Geolokalisierung ist die Bestimmung Ihrer Position über den Browser. Im Rahmen von HTML5 bzw. DOM5 gibt es eine neue Eigenschaft des navigator-Objekts (geolocation), die Sie mit JavaScript verwerten können.
  
  Geolokalisierung
  
  05:35
- Durch die interne tabellenartige Struktur eines JS-Objekts kann man ein einzelnes Objekt einfach dadurch erweitern, indem man den Bezeichner des Objekts notiert, dem ein Punkt und die neu gewünschte Eigenschaft/Methode samt Wertzuweisung folgen.
  
  Objekte erweitern
  
  02:48
- In diesem Film werden Sie in die Erweiterung von Klassen in JavaScript durch Prototyping und die Eigenschaft prototype eingeführt.
  
  Prototyping
  
  03:04
- Best practice - Sie sehen hier, wie Sie in JavaScript Fehler finden können und wie Ihnen ein Debugger dabei zur Verfügung steht.
  
  Fehlersuche und Debugging
  
  04:22

Was macht man noch mit HTML?

aus: JavaScript

Über dieses Video

Auszug aus: JavaScript

Filminformationen