JavaScript - webmasters-fernakademie.de · 2.5 Mehrere Anweisungen in einem Script ... 5...

W E C E R T I F I E D W E B D E S I G N E R I

Offizielles Curriculum des Europäischen Webmasterverbandes

JavaScriptfür Webdesigner

Art.-Nr. 011599354 Version 4.0.2 vom 11.06.2013 Autor: Frank Schad

© webmasters akademie Nürnberg GmbH, Nürnberg, GermanyDas vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Ge-nehmigung der webmasters akademie Nürnberg GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen.Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Heraus-geber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.

W E C E R T I F I E D W E B D E S I G N E R I

JavaScriptfür Webdesigner

5

Inhalt

1 Geschichte und Entwicklung von JavaScript ................................................................................ 8

1.1 Was ist JavaScript? .............................................................................................................................. 8

1.2 JavaScript-fähige Browser ............................................................................................................. 10

2 Das Zusammenspiel von HTML & JavaScript ............................................................................... 11

2.1 JavaScript in HTML-Dokumente einbinden ............................................................................ 11

2.2 Ausgabe eines Textes in einer Alertbox ....................................................................................12

2.3 Mischen von HTML und JavaScript ............................................................................................ 14

2.4 Funktionen und Argumente ......................................................................................................... 16

2.5 Mehrere Anweisungen in einem Script ....................................................................................17

2.6 Maskieren von Steuerzeichen ...................................................................................................... 18

2.7 Fehler finden mit der Firefox-JavaScript-Konsole ...............................................................20

2.8 Kommentare ........................................................................................................................................ 22

3 Objekte und Eigenschaften .................................................................................................................... 24

3.1 Das Document Object Model (DOM) ........................................................................................ 24

3.1.1 Die Objekthierarchie des Basis-DOMs ........................................................................ 25

3.1.2 Verschiedene DOMs .........................................................................................................29

4 Variablen und Verkettung von Strings ............................................................................................31

4.1 Texte mit JavaScript-Eigenschaften kombinieren ...............................................................31

4.2 Variablen und Datentypen ............................................................................................................ 33

4.2.1 Was sind Variablen? .......................................................................................................... 34

4.2.2 Anlegen von Variablen .................................................................................................... 35

4.2.3 Datentypen: Einer Variablen einen Wert zuweisen ............................................... 35

6

5 Mausereignisse und Funktionen ........................................................................................................ 38

5.1 Events und Event-Handler ............................................................................................................. 38

5.2 Funktionen selbst definieren .......................................................................................................42

5.3 Auslagern von JavaScript in externe Dateien ....................................................................... 45

6 Ändern von HTML-Elementen ..............................................................................................................48

6.1 Zugreifen auf HTML-Elemente .....................................................................................................48

6.1.1 Zugriff über die Elementnummer ...............................................................................49

6.1.2 Zugriff über eine eindeutige ID .................................................................................... 52

6.2 Bilder austauschen mit der Eigenschaft src ........................................................................... 57

7 Fallunterscheidungen ................................................................................................................................59

8 Funktionsparameter ...................................................................................................................................66

8.1 Mehrere Objekte ansprechen ......................................................................................................66

8.2 Funktionsparameter verwenden ................................................................................................69

8.3 Mehrere Funktionsparameter ...................................................................................................... 72

9 Schleifen .............................................................................................................................................................. 75

10 Dynamische Änderung von CSS-Eigenschaften.......................................................................80

10.1 Die style-Eigenschaft .......................................................................................................................80

10.2 Die Eigenschaft className ........................................................................................................... 81

10.2.1 Hinzufügen von Klassen .................................................................................................82

10.2.2 Entfernen von Klassen ..................................................................................................... 83

10.2.3 Hinzufügen neuer Klassen zu bereits vorhandenen .............................................84

10.2.4 Selektives Entfernen von Klassen ................................................................................86

10.2.5 Verallgemeinerung der Funktionen ........................................................................... 87

7

11 Praxisbeispiel: HTML5-Videogalerie.................................................................................................89

11.1 Projektbeschreibung .......................................................................................................................89

11.2 Überblick über das Projekt ............................................................................................................ 91

11.3 Aktivieren der Vorschaubilder .....................................................................................................92

11.4 Hervorheben des ausgewählten Buttons und Anzeigen des Beschreibungstextes .94

11.4.1 Eventuell bereits ausgewählte Buttons deaktivieren ...........................................94

11.4.2 Hervorheben des angeklickten Thumbnails und Hinzufügen des Beschreibungstextes ........................................................................................................95

11.4.3 Einblenden der Fußzeile .................................................................................................96

11.5 Video abspielen ................................................................................................................................. 97

11.5.1 Anzeigen des Overlays .................................................................................................... 97

11.5.2 Erneutes Kopieren des Titels und Ermitteln der Dateipfade .............................. 97

11.5.3 Anzeigen des Videos ........................................................................................................98

11.6 Schließen des Videofensters und des Overlays ....................................................................99

Lösungen ............................................................................................................................................................................... 102

Index ......................................................................................................................................................................................... 103

8 Geschichte und Entwicklung von JavaScript

Geschichte und Entwicklung von JavaScript

In dieser Lektion lernen Sie:

h wie JavaScript entstanden ist. h welche Browser JavaScript unterstützen.

1.1 Was ist JavaScript?

Webseiten, die ausschließlich mit HTML und CSS erstellt wurden, sind vergleichsweise statisch: Nichts bewegt sich, und die einzelnen Seitenelemente können sich nicht verändern (einmal abgesehen von hover-Effekten und kleinen CSS-Animationen). Der Anwender kann so gut wie keinen Einfluss auf die Seite ausüben. Aus diesem Grund – um die Funktionalität von HTML zu erweitern – wurde JavaScript (gängige Abkürzung: JS) als clientseitige Skriptsprache1 entwickelt. Mit JavaScript können Sie Websei-ten dynamisch machen, d. h. ihr Aussehen und ihr Inhalt kann sich »live« verändern, wenn z. B. der User einen Button drückt oder ein Formular ausfüllt.

Beispiele:

Abb. 1: Wenn der Anwender vergessen hat, bestimmte Formularfelder auszufüllen (links), erscheinen davor kleine Icons als Hinweis (rechts).

1 Clientseitig bedeutet, dass der Code erst auf dem System des Anwenders vom Browser (»Client«) ausgeführt wird, und nicht bereits auf dem Server.

Was ist JavaScript? 9

Abb. 2: »Lightbox«: Beim Klick auf das kleine Vorschaubild eines Artikels (oben) wird die Webseite »abgedunkelt« und darüber eine größere Ansicht des Artikels eingeblendet (unten).

JavaScript ist die beliebteste Programmiersprache im Web, weil sie relativ einfach zu erlernen und platt-formunabhängig ist, d. h. der Programmierer muss sich keine Gedanken darüber machen, ob sein Pro-gramm später auf einem Windows-PC, einem Mac oder einem Linux-Rechner läuft. JavaScript wird von Webbrowsern auf allen Systemen unterstützt. Dabei wird der JavaScript-Code zusammen mit HTML in die Webseiten geschrieben und vom Webbrowser interpretiert.

Die Entwicklung von JavaScript

JavaScript wurde 1995 von der der Firma Netscape Communications, Inc. entwickelt. Die Sprache hieß zunächst LiveScript, wurde jedoch schnell in JavaScript umbenannt. Als Vater dieser jungen Compu-tersprache gilt Brendan eich. JavaScript wurde durch seine erste Einbindung im Netscape Navigator 2.0 schnell sehr populär. Da sich dieser Browser sehr rasch verbreitete, war es Web-Autoren möglich, die neue Technik relativ schnell zu nutzen, ohne sich auf nur einen kleinen Teil der Internetnutzer beschrän-ken zu müssen. Seit seiner ersten Einführung wurde JavaScript ständig erweitert und verbessert. Java-Script eignet sich mittlerweile zu sehr viel mehr als nur kleinen Animationen. Mit JavaScript können Sie

10 Geschichte und Entwicklung von JavaScript

Webanwendungen gestalten, die kaum mehr von klassischen Desktop-Anwendungen zu unterschei-den sind.

Die Firma Microsoft, die mit dem Internet Explorer im Browser-Markt Netscapes größter Konkurrent war, brachte schnell eine eigene JavaScript-Version auf den Markt. Aus lizenzrechtlichen Gründen durfte Microsoft jedoch den Namen JavaScript nicht verwenden und nannte seine Sprache deshalb einfach JScript. Beide Sprachen waren sich sehr ähnlich, die Konkurrenten Netscape und Microsoft versuchten jedoch, sie durch eigene Weiterentwicklungen voneinander abzugrenzen. Dadurch bestand die Gefahr, dass Web-Entwickler in Zukunft zwei Sprachen würden lernen müssen, wenn JScript und JavaScript zu stark voneinander abweichen sollten. Um dieser Entwicklung entgegenzuwirken, wurde im Juni 1997 der Standard ECMAScript von der europäischen Organisation ECMA (European Computer Manufacturers Association) verabschiedet. Im Juni 1998 wurde schon die zweite Version dieses Standards veröffent-licht. Zusätzlich wurde ECMAScript 1.0 im April 1998 als internationale Norm ISO/IEC 16262 verabschie-det. Diese Sprache ist bis heute der Standard, nach dem sich die Browserhersteller zu richten haben.

Verwechseln Sie JavaScript nicht mit Java! Java ist eine höhere, objektorientierte Programmierspra-che der Firma Sun Microsystems (mittlerweile von Oracle übernommen), mit der Anwendungen aller Art geschrieben werden können. Die Namensähnlichkeit ist nicht viel mehr als ein Marketing-Gag.

f

1.2 JavaScript-fähige Browser

Nahezu alle modernen Webbrowser (Firefox, Safari, Internet Explorer, Opera, Konqueror etc.) haben ei-nen eingebauten JavaScript-Interpreter, auch JavaScript-Engine genannt, der den JavaScript-Code umsetzt – ähnlich wie es die integrierten Rendering Engines mit dem HTML- und CSS-Code tun. Bei Firefox nennt sich diese JavaScript-Engine beispielsweise TraceMonkey, bei Safari SquirrelFish.

JavaScript lässt sich in den meisten Webbrowsern zwar deaktivieren, aber Statistiken zeigen, dass Java-Script in nahezu 100% aller Browser aktiviert ist, 99,5% beherrschen JavaScript 1.5.2 Sie können also davon ausgehen, dass so gut wie alle Internet-Nutzer Webseiten mit JavaScript betrachten können.

2 Quelle: www.webhits.de/deutsch/webstats.html

Projektbeschreibung 89

Praxisbeispiel: HTML5-Videogalerie

In dieser Lektion lernen Sie:

h Videos in HTML5-Dokumente einzubinden. h nach Zeichenketten zu suchen. h den Inhalt von HTML-Attributen auszulesen. h mit dem bisher Gelernten eine Videogalerie zu programmieren.

11.1 Projektbeschreibung

In dieser Übung soll eine komplette und leicht wartbare Videogalerie erstellt werden: Auf einer Webseite werden die Thumbnails beliebig vieler Videos in Form von Pixelbildern angezeigt (im Beispiel werden aus Speichergründen mehrmals dieselben Videos angezeigt).

90 Praxisbeispiel: HTML5-Videogalerie

Wenn der Anwender auf eines der Vorschaubilder klickt, wird dieses zunächst hervorgehoben (»aus-gewählt«) dargestellt, es erscheint ein Play-Button darüber, und am unteren Rand des Browserfensters wird eine kurze textuelle Beschreibung des Videos eingeblendet:

Bei einem zweiten Klick auf das ausgewählte Vorschaubild wird ein Overlay über die gesamte Seite ge-legt, das diese abdunkelt. Darin wird das gewünschte Video in einer Box angezeigt und abgespielt:

Überblick über das Projekt 91

Dieses Videofenster verfügt über einen Schließknopf oben rechts, mit dem das Video samt Overlay wie-der geschlossen werden kann. Damit kehrt der User zurück zur Übersicht.

Zum besseren Verständnis finden Sie im Begleitmaterial im Ordner mediabox einen kurzen Screencast, der die Funktionalität der Website veranschaulicht (mediabox_demo.mov).

Das Projekt soll ausschließlich mit HTML, CSS und JavaScript realisiert werden. Die Videos werden mit dem <video>-Tag eingebunden. Das Problem dabei ist nur, dass zur Zeit noch kein endgültiges Da-teiformat feststeht, in dem die Videos vorliegen müssen. Einige Browser – wie z. B. Safari und der Inter-net Explorer – benötigen das Format MP4 (H.264-Codec), andere – wie Firefox – Googles neues Format WebM (VP8-Codec). Deshalb muss momentan jedes Video in beiden Formaten vorliegen und auch dop-pelt eingebunden werden. Der Browser sucht sich dann das für ihn passende heraus.

11.2 Überblick über das Projekt

Öffnen Sie den Ordner mediabox. Darin befinden sich sämtliche zum Projekt gehörenden Dateien. Die CSS-Datei im Orner styles und die index.html sind fertig vorbereitet und müssen nicht geändert wer-den! Die HTML-Datei enthält bereits die benötigten Event-Handler. Auch die JavaScript-Datei functions.js im Ordner js enthält bereits Code: Zum einen die fertigen Funktionen zun Hinzufügen und Entfernen von CSS-Klassen aus Lektion 10, zum anderen sämtliche benötigten Funktionsdefinitionen, die Sie pro-grammieren sollen. Weitere Funktionen werden nicht benötigt!

Im Ordner images gibt es einen Unterordner previews, der die Vorschaubilder (Thumbnails) für die Vi-deos enthält. Im Ordner videos liegen die Videodateien, jeweils in zwei verschiedenen Formaten (MP4 und WebM).

Die CSS-Vorgaben enthalten einige Besonderheiten: So wird z. B. die Schriftart GarageSale aus dem Ord-ner fonts für das Logo (Glühbirne) eingebunden, und für die Farbverläufe werden der Einfachheit halber CSS-Gradients sowie eine Animation (Transition) verwendet. Dies hat zur Folge, dass das Layout nur in neueren Versionen von Firefox, Safari und Chrome funktioniert!

Für die Funktionalität der Anwendung werden hauptsächlich die Eigenschaften innerHTML und className verwendet, d. h. es wird HTML-Code dynamisch verändert und Klassen hinzugefügt oder entfernt, um das Aussehen der Seite entsprechend zu verändern. Die dafür benötigten CSS-Klassen sind bereits in der styles.css definiert und – wo nötig – in HTML zugewiesen.

Der Grundgedanke der Anwendung ist, dass Sie – ohne Datenbank – möglichst einfach gewartet wer-den kann. Es soll möglich sein, zu einem späteren Zeitpunkt möglichst einfach weitere Videos inklusive Beschreibungstext hinzuzufügen oder zu entfernen. Dies wird dadurch realisiert, dass alle nötigen Infor-mationen zentral an einem Ort in HTML hinterlegt werden:

mediabox_demo .mov


Jedes Video wird in HTML durch ein DIV mit der Klasse thumbnail repräsentiert:

1 <div class="thumbnail" onclick="aktiviereKlicks(this);">2 <p>3 <img src="images/previews/bunny.jpg" alt="bunny" />4 </p>5 <strong>Big Buck Bunny</strong>6 <span>Lorem ipsum dolor sit amet...</span>7 </div>

Codebeispiel 68: HTML-Code eines Thumbnails

Dieses DIV enthält zunächst das Vorschaubild in einem Absatz. Hier ist der alt-Text von Bedeutung: Er enthält bereits den Dateinamen des abzuspielenden Videos (allerdings ohne Dateiendung). Damit soll später mit JavaScript ermittelt werden, welches Video abgespielt werden soll.

Danach folgt ein <strong>-Tag mit dem Titel des Videos. Dieser Titel wird im Browser zunächst unter-halb des Vorschaubildes angezeigt, soll aber später mit JavaScript zusätzlich in der Fußzeile (footer) sowie über dem Video selbst angezeigt werden.

Am Ende steht noch ein <span> mit einer längeren Beschreibung des Videos. Dieser <span> wird jedoch per CSS ausgeblendet (display: none). Sein Inhalt soll stattdessen mit JavaScript ebenfalls in der Fußzeile angezeigt werden.

Dadurch ist es möglich, durch Hinzufügen weiterer thumbnail-DIVs weitere Videos einzubinden und die-se an Ort und Stelle zu »konfigurieren«: Vorschaubild einbinden, Dateinamen des Videos (unabhängig vom Format und der Dateiendung) im alt-Text angeben, Titel und Beschreibung hinzufügen – fertig.

11.3 Aktivieren der Vorschaubilder

Öffnen Sie die HTML-Datei und die JavaScript-Datei functions.js im Editor. In HTML hat jedes Thumbnail den onclick-Handler aktiviereKlicks(this). Dabei ist das Schlüsselwort this eine Art »Shortcut«, den Sie verwenden können, wenn Sie sich auf das aktuelle Objekt selbst beziehen (das Objekt, das den Event-Handler trägt).

Diese Funktion wollen wir als erstes definieren. Hier wird angegeben, was passieren soll, wenn der User auf ein Vorschaubild klickt:

h Wenn das Bild noch nicht ausgewählt ist, soll es ausgewählt werden, und der Beschreibungstext soll in der Fußzeile angezeigt werden.

h Wenn es bereits ausgewählt ist, soll das entsprechende Video angezeigt und abgespielt werden.

Sie ahnen schon: Hier benötigen wir eine if-Abfrage. Zur Entzerrung des Codes lagern wir jedoch die eigentlichen Anweisungen zum Auswählen des Bildes und zum Anzeigen des Videos in separate Funkti-onen aus (highlightButton und zeigeVideo) und rufen diese in der if-Abfrage lediglich auf:

Aktivieren der Vorschaubilder 93

»Wenn das Bild noch nicht ausgewählt ist, soll die Funktion highlightButton ausgeführt werden, an-sonsten soll die Funktion zeigeVideo ausgeführt werden.«

Da die Funktion aktiviereKlicks natürlich mit allen Vorschaubildern funktionieren soll, notieren wir in den runden Klammern nach der Funktionsdefinition die Variable geklicktesBild als Funktionsparameter. Diese Variable repräsentiert das jeweils angeklickte Vorschaubild. Sie wird dann im Funktionsaufruf in HTML jeweils durch das konkrete Vorschaubild ersetzt, auf das der Benutzer geklickt hat. In diesem Fall wird die Variable einfach durch das Schlüsselwort this (= »dieses Vorschaubild«) ersetzt.

Nach Strings suchen mit indexOf()

Die Abfrage, ob ein Vorschaubild ausgewählt ist, geschieht am einfachsten über die CSS-Klasse highligh-ted. Diese Klasse fügt dem Bild die farbige Umrandung und den Play-Button hinzu. Hat das Bild diese Klasse, ist es folglich ausgewählt: »Wenn das Element nicht die Klasse highlighted enthält, dann füge sie hinzu, ansonsten (else) zeige das Video«.

Eine solche Abfrage können Sie mit der Methode indexOf() realisieren. Diese Methode ermittelt das erste Vorkommen eines Zeichens oder einer Zeichenkette innerhalb eines Strings und gibt zurück, an wievielter Stelle dieses Zeichen gefunden wurde. Die Zählung beginnt wie immer bei 0. Wenn das ge-suchte Zeichen nicht gefunden wurde, wird -1 zurückgegeben.

In den runden Klammern geben Sie an, nach welchem String Sie suchen möchten. Die Abfrage, ob im Klassennamen (className) des jeweiligen Thumbnails (geklicktesBild) der String »highlighted« nicht (-1) enthalten ist, muss also lauten:

if(geklicktesBild.className.indexOf("highlighted") == -1)

Denken Sie an das doppelte Gleichheitszeichen als Vergleichsoperator (vgl. »Bedingung formulieren« auf Seite 60). Die vollständige Funktion sieht demnach so aus:

1 function aktiviereKlicks(geklicktesBild) {2 if(geklicktesBild.className.indexOf("highlighted") == -1) {3 highlightButton(geklicktesBild);4 } else {5 zeigeVideo(geklicktesBild);6 }7 }

Codebeispiel 69: Funktion zur Entscheidung, was bei einem Klick auf ein Vorschaubild passieren soll


11.4 Hervorheben des ausgewählten Buttons und Anzeigen des Beschreibungstextes

Die Hervorhebung des Buttons sowie die Anzeige des Beschreibungstextes wird in der Funktion highlightButton() definiert.

Was soll passieren?

h Falls bereits ein anderer Button ausgewählt war, soll dieser nicht mehr ausgewählt sein. h Der angeklickte Button soll hervorgehoben werden. h Der Titel und die Beschreibung sollen in die Fußzeile geschrieben werden. h Die Fußzeile, die anfangs ausgeblendet ist, soll angezeigt werden.

11.4.1 Eventuell bereits ausgewählte Buttons deaktivieren

Wie wir gesehen haben, erfolgt das optische Hervorheben der Buttons über die CSS-Klasse highlighted. Da wir aber nicht wissen können, welcher Button zuvor ausgewählt war, müssen wir zunächst prophy-laktisch die Auswahl aller Buttons aufheben, wir müssen also die eventuell vorhandene Klasse highligh-ted aus allen Buttons entfernen.

Dafür können wir aber nicht die Anweisung className = "" (Funktion entferneKlassen) verwenden, da dadurch die Klasse thumbnail ebenfalls entfernt werden würde, die das grundlegende Aussehen der Buttons definiert. Stattdessen verwenden wir die Anweisung className = "thumbnail" (Funk-tion neueKlasse). Dadurch werden alle Klassen (und dadurch auch die Klasse highlighted) entfernt und anschließend wieder die Klasse thumbnail als einzige zugewiesen.

Das Anwenden der Funktion auf alle Vorschaubilder geschieht am schnellsten wieder über eine for-Schleife (vgl. Lektion 9 auf Seite 75):

1 function highlightButton(geklicktesBild) {2 var elemente = document.getElementById("overview").

getElementsByTagName("div");3 for (var i = 0; i < elemente.length; i++) {4 neueKlasse(elemente[i], "thumbnail");5 }6 }

Codebeispiel 70: for-Schleife zum Entfernen der Klasse highlighted von allen Vorschaubildern

Hervorheben des ausgewählten Buttons und Anzeigen des Beschreibungstextes 95

Zunächst speichern wir uns alls Thumbnails gemeinsam in einem Array (vgl. Seite 51) mit dem Vari-ablennamen elemente. Da alle Thumbnails zusammen in einem großen DIV mit der ID overview liegen, können wir sie per getElementById("overview").getElementsByTagName("div") darin auswählen (»alle DIVs innerhalb des Elements mit der ID ›overview‹«).

Nun folgt die Schleife: Nach dem Schlüsselwort for folgt zuerst die Definition einer neuen Variablen i mit dem Initialwert 0. Danach folgt die Bedingung, wie oft die Schleife wiederholt werden soll: Hier wird gesagt, dass die nachfolgende Funktion neueKlasse() so oft wiederholt werden soll, wie es Vorschaubilder gibt (wörtlich: solange i kleiner ist als die Gesamtzahl length aller Objekte im Array ele-mente). Zuletzt wird der Wert der Variablen i um 1 erhöht (i++).

Nun wird die Funktion neueKlasse in jedem Schleifendurchlauf auf das nächste Objekt im Array elemente (elemente[i]) angewendet, da i bei jedem Durchlauf einen höheren Wert hat.

11.4.2 Hervorheben des angeklickten Thumbnails und Hinzufügen des Beschreibungstextes

Das anschließende Zuweisen der Klasse highlighted zum aktuell angeklickten Button geschieht über die Funktion fuegeKlasseHinzu():


getElementsByTagName("div");3 for (var i = 0; i < elemente.length; i++) {4 neueKlasse(elemente[i], "thumbnail");5 }6 fuegeKlasseHinzu(geklicktesBild, "highlighted");7 }

Codebeispiel 71: Zuweisen der Klasse highlighted zum aktuell angeklickten Vorschaubild

Als nächstes sollen der Titel des Videos aus dem <strong>-Tag sowie der Beschreibungstext aus dem (unsichtbaren) <span> in die Fußzeile »kopiert« werden. Dafür gibt es in HTML im <footer> zwei (noch leere) Platzhalter-Elemente: <h1 id="footer_headline"> für den Titel und <p id="footer_description"> für die Beschreibung.

Das »Kopieren« der Texte in diese Elemente geschieht mit Hilfe von innerHTML:



getElementsByTagName("div");3 for (var i = 0; i < elemente.length; i++) {4 neueKlasse(elemente[i], "thumbnail");5 }6 fuegeKlasseHinzu(geklicktesBild, "highlighted");7 document.getElementById("footer_headline").innerHTML =

geklicktesBild.getElementsByTagName("strong")[0].innerHTML;8 }

Codebeispiel 72: »Kopieren« des Videotitels aus dem strong-Tag des Vorschaubildes in die Fußzeile

Schreiben Sie nun selbst den Code zum Kopieren des Beschreibungstextes aus dem <span>-Tag in den Absatz #footer_description!

11.4.3 Einblenden der Fußzeile

Zuletzt wird die Fußzeile <footer> eingeblendet: Ihre absolute Position liegt momentan außerhalb des Browserfensters (CSS-Eigenschaft bottom). Die CSS-Klasse beschreibung_sichtbar befördert sie nach oben. Da jedoch der Inhaltsbereich #content den Platz freimachen soll, muss er dafür ebenfalls nach oben rutschen. Auch dafür wurde die Klasse beschreibung_sichtbar in CSS definiert:


getElementsByTagName("div");3 for (var i = 0; i < elemente.length; i++) {4 neueKlasse(elemente[i], "thumbnail");5 }6 fuegeKlasseHinzu(geklicktesBild, "highlighted");7 document.getElementById("footer_headline").innerHTML =

geklicktesBild.getElementsByTagName("strong")[0].innerHTML;8 document.getElementById("footer_description").innerHTML =

geklicktesBild.getElementsByTagName("span")[0].innerHTML;9 10 fuegeKlasseHinzu(document.getElementById("content"),

"beschreibung_sichtbar");11 fuegeKlasseHinzu(document.getElementsByTagName("footer")[0],

"beschreibung_sichtbar");12 }

Codebeispiel 73: Einblenden der Fußzeile und Verschieben des Inhaltsbereichs

Durch die CSS-Eigenschaften -webkit-transition bzw. -moz-transition (ab Firefox 4) wird das Ganze sogar automatisch animiert!

Testen Sie Ihr Programm im Browser!

Video abspielen 97

11.5 Video abspielen

In Codebeispiel 69 haben wir bereits grundlegend definiert, dass das Video abgespielt werden soll, wenn der Anwender auf ein bereits ausgewähltes Vorschaubild klickt (Funktion zeigeVideo). Was aber soll in der Funktion zeigeVideo passieren?

h Der Titel aus dem <strong>-Tag des Thumbnails soll auch als Überschrift über dem Video ange-zeigt werden.

h Der Dateiname des abzuspielenden Videos soll aus dem alt-Text des Vorschaubilds ermittelt wer-den.

h Das Vorschaubild selbst soll auch als Posterframe17 für das Video definiert werden. h Das ausgewählte Video soll innerhalb des DIVs #video_content angezeigt werden. h Das DIV #video_overlay, das auch das Video enthält, soll eingeblendet werden.

11.5.1 Anzeigen des Overlays

Damit wir überhaupt etwas sehen, wollen wir zunächst das Overlay einblenden. Hierfür entfernen wir einfach die CSS-Klasse verborgen, die das Overlay unsichtbar macht. Da dies die einzige Klasse ist, kön-nen wir einfach alle Klassen löschen (className = ""):

1 function zeigeVideo(geklicktesBild) {2 entferneKlassen(document.getElementById("video_overlay"));3 }

Codebeispiel 74: Einblenden des Overlays

Diese Anweisung sollte jedoch am Ende der Funktion zeigeVideo stehen. Notieren Sie also die folgen-den Anweisungen davor.

11.5.2 Erneutes Kopieren des Titels und Ermitteln der Dateipfade

Schreiben Sie in der Funktion zeigeVideo die Anweisung, dass der Titel aus dem <strong>-Tag des Thumbnails auch in der h1#videobox_headline angezeigt wird.

Auslesen des Dateinamens aus dem alt-Text des Vorschaubilds mit getAttribute()

Anschließend soll der Dateiname des Videos aus dem alt-Text des Vorschaubildes ermittelt werden. Dies geschieht mit Hilfe der Methode getAttribute(). Damit ist es möglich, den aktuellen Wert eines beliebigen HTML-Attributs auszulesen. Das gewünschte Attribut notieren Sie – in Anführungszeichen – als Parameter in den runden Klammern. Um also den Inhalt des alt-Textes von Bildern auszulesen, schreiben Sie:

getAttribute("alt")

17 Ein Posterframe ist ein frei wählbares Bild, das im Video-Player angezeigt wird, wenn das Video gerade nicht läuft. Diese Funk-tion wird allerdings von Safari in HTML5-Dokumenten bislang nur fehlerhaft unterstützt. Wir wollen sie trotzdem verwenden.


Da wir den auf diese Weise ermittelten Dateinamen später noch benötigen, speichern wir ihn in einer Variablen namens dateiname. Danach wird daraus der Pfad zum Video gebildet:

var dateiname = geklicktesBild.getElementsByTagName("p")[0] .getElementsByTagName("img")[0].getAttribute("alt");

var videopfad = "videos/" + dateiname;

Auch das Posterframe wird auf diese Weise ermittelt und in einer Variablen gespeichert:

var platzhalterbild = geklicktesBild.getElementsByTagName("p")[0] .getElementsByTagName("img")[0].getAttribute("src");

Die Funktion zeigeVideo sollte nun so aussehen:

1 function zeigeVideo(geklicktesBild) {2 document.getElementById("videobox_headline").innerHTML =

geklicktesBild.getElementsByTagName("strong")[0].innerHTML;3 4 var dateiname = geklicktesBild.getElementsByTagName("p")[0]

.getElementsByTagName("img")[0].getAttribute("alt");5 var videopfad = "videos/" + dateiname;6 var platzhalterbild = geklicktesBild.getElementsByTagName("p")

[0].getElementsByTagName("img")[0].getAttribute("src");7 8 entferneKlassen(document.getElementById("video_overlay"));9 }

Codebeispiel 75: Die Funktion zum Anzeigen des Overlays

Nur das Video selbst wird noch nicht angezeigt.

11.5.3 Anzeigen des Videos

Nun soll der <video>-Tag mit den oben ermittelten Parametern im DIV #video_content erzeugt wer-den. Der HTML-Tag, den wir mit JavaScript dynamisch erzeugen wollen, muss am Ende so aussehen:

1 <video controls autoplay width="720" height="300" poster="platzhalterbild">

2 <source src="videopfad.mp4" type="video/mp4" />3 <source src="videopfad.webm" type="video/webm" />4 </video>

Codebeispiel 76: Standard-Video-Tag

Die Parameter, die wir durch unsere Variablen ersetzen müssen, sind im obigen Codebeispiel kursiv dargestellt.

Schließen des Videofensters und des Overlays 99

Erzeugen Sie nun also den Tag, indem Sie die entsprechenden Bereiche durch die oben definierten Vari-ablen videopfad und platzhalterbild ersetzen und mit den Strings verketten. Achten Sie dabei wieder auf verschachtelte Anführungszeichen!

1 function zeigeVideo(geklicktesBild) {2 document.getElementById("videobox_headline").innerHTML =

geklicktesBild.getElementsByTagName("strong")[0].innerHTML;3 4 var dateiname = geklicktesBild.getElementsByTagName("p")[0].

getElementsByTagName("img")[0].getAttribute("alt");5 var videopfad = "videos/" + dateiname;6 var platzhalterbild = geklicktesBild.getElementsByTagName("p")

[0].getElementsByTagName("img")[0].getAttribute("src");7 8 document.getElementById("video_content").innerHTML =9 "<video controls autoplay width='720' height='300'

poster='" + platzhalterbild + "'>" +10 "<source src='" + videopfad + ".mp4' type='video/mp4' />" +11 "<source src='" + videopfad + ".webm' type='video/webm' />" +12 "</video>"13 14 entferneKlassen(document.getElementById("video_overlay"));15 }

Codebeispiel 77: Erzeugen des Video-Tags

11.6 Schließen des Videofensters und des Overlays

Fehlt nur noch die Funktion schliesseFenster(), die im Button .close_button als Event-Handler definiert ist. Damit soll das Overlay samt Video wieder ausgeblendet werden. Wir fügen einfach wieder die Klasse verborgen hinzu:

1 function schliesseFenster() {2 neueKlasse(document.getElementById("video_overlay"),

"verborgen");3 }

Codebeispiel 78: Ausblenden des Overlays

Nun haben wir nur noch ein Problem: Das Ausblenden des Overlays ist dem Video herzlich egal. Wenn der Anwender es zuvor nicht angehalten hat, spielt es munter weiter. Wie lösen Sie dieses Problem (ein-fache Lösung!)?

Damit ist unser kleines »Video-Portal« fertig. Sie können nun jederzeit weitere Videos hinzufügen, in-dem Sie einfach in der HTML-Datei weitere thumbnail-DIVs nach demselben Schema notieren und die entsprechenden Beschreibungstexte, das Vorschaubild sowie den alt-Text angeben. Die Videos legen Sie in den entsprechenden Formaten im Ordner videos ab, die Vorschaubilder im Ordner previews. Die JavaScript-Datei muss dabei nie mehr verändert werden!

Index 103

Kontrollstrukturen 65

length 95LiveScript 9location 25

href 26

Maskieren von Zeichen 18

NaN 86navigator 27Node 51

Objekte 24

Parameter Siehe Funktionsparameter

Programmierrichtlinien 18prompt() 33Punktsyntax 26

Reguläre Ausdrücke Siehe Regular Expressions

Rollovers 42

screen 28src 57

ECMAScript 10Eigenschaften 25, 27

lesen und ändern 27else 63Event-Handler 39Events 38

Fehlerkonsole 20for-Schleife 76, 94Funktionen 16, 42Funktionsaufruf 43Funktionsbezeichner

Siehe BezeichnerFunktionsdefinition 43Funktionsparameter 70

getAttribute() 97getElementById() 49, 52getElementsByTagName() 49

if 60indexOf() 93Initialisierung 36innerHTML 50

JavaScript-Konsole Siehe Fehlerkonsole

JScript 10

Kommentare 22Konkatenationsoperator

Siehe Verkettungsoperator

Index

-= 85*= 85/= 85++ 77, 95+= 85

alert() 13Anführungszeichen verschach-

teln 39Argumente 16Arrays 51ASCII 18Auslagern von JavaScript 45

Basis-DOM 29Bezeichner 16, 35bgColor 28Bilder austauschen 58

className 81

Datentypen 35document 28Document Object Model (DOM)

24

104 Index

Strings 13leere 83

style 80

this 92

var 35Variablen 34

anlegen 35Vergleichsoperatoren 60

Übersicht 65Verkettungsoperator 32

window 25

Zusammengesetzte Operatoren 85

Zuweisungsoperator 27, 35

JavaScript - webmasters-fernakademie.de · 2.5 Mehrere Anweisungen in einem Script ... 5...

Documents

Transcript of JavaScript - webmasters-fernakademie.de · 2.5 Mehrere Anweisungen in einem Script ... 5...