In den letzten Wochen und Monaten habe ich wie gewohnt via E-Mail, Twitter, Formspring und andere Kanäle Fragen zu HTML5 gestellt bekommen und beantwortet. Da wie immer gilt, dass es keine dummen Fragen, aber sehr viel öffentliches Interesse gibt, präsentiere ich hiermit einen weitereren Teil der allseits beliebten Serie „Fragen zu HTML5 und Co“ mit den neuesten Fragen und Antworten rund um unser liebstes Hype-Thema und den diversen dazugehörigen Webtechnologien.

Section-Elemente in Header-Elementen?

Ein Section-Element kann ja ein Header- oder ein Footer-Element beinhalten. Geht es aber auch anders herum? Im konkreten Fall geht es um ein Header-Element mit einem Warenkorb- und Kundenbewertungsbereich. Wäre es semantisch korrekt dafür ein Section-Element zu verwenden?

Erlaubt es eine solche Konstruktion auf jeden Fall – ob sie auch semantisch korrekt ist, hängt vom betroffenen Inhalt ab, aber ich denke im genannten Fall passt es. Generell gilt: Header- und Footer-Elemente dürfen jedweden Flow-Content enthalten, der selbst kein Header- oder Footer-Element ist. Flow-Content umfasst dabei so ziemlich alles, was es für Content bestimmten HTML-Elementen so gibt.

Wie baut man große JavaScript-Apps?

Da ich viel mit Actionscript gearbeitet habe, habe ich immer noch nicht den Sprung zu JS gewagt, da ich immer noch das Gefühl habe, das JS mehr dieses Prototyping-Dingsda macht statt mit Klassen zu arbeiten. In AS und PHP zB. habe ich meine Klasse mit Constructor und den Methoden und Eigenschaften und kann das ganze schön in eine Datei packen und KlasseA nennen.

Wie sieht denn ein allgemeiner Workflow in JS aus? Ich sehe immer nur irgendwelche Codschnipsel, aber ich habe noch nicht wirklich begriffen, wie man komplexere Programme in JS wirklich umsetzen kann (z.B. nach MVC), also dass man die einzelnen Funktions- und Logikeinheiten sinnvoll organisiert.

Das „Prototyping-Dingsda“ in JS (prototypische Vererbung) ist eigentlich simpler und mächtiger als Veerbung via Klassen. Objekte erben direkt von anderen Objekten und die Zwischenkonstruktion „Klasse“ fällt einfach weg. Und das beste: Klassensysteme kann man via Prototypen implementieren. Wenn du also unbedingt möchtest, kannst du problemlos Klassen in JavaScript bekommen. Links:

Was App-Struktur angeht, kommt es drauf an, was du genau in JS machen möchtest. Serverseitige Umgebungen wie Node bieten z.B. ein Modulsystem. Ansonsten gibt es auch für den Browser viele fertige Lösungen aus der Dose. Diesen Artikel über RequireJS in Zusammenarbeit mit AMD (asynchronous module definition) würde ich mal exemplarisch durchlesen. Was MVCeske Konstruktionen angeht, gibt es auch mehrere Lösungen. Unter anderem diese hier sind empfehlenswert:

Für große Apps allgemein würde ich mir mal diese drei kurzen Talks reinziehen, die alle Themen rund um große JavaScript-Apps streifen.

Webcam-Chat mit HTML5?

Ich suche eine Möglichkeit, mit HTML5 Webcam-Chats zwischen bis zu vier Personen zu verwirklichen. Ich habe dabei die jQuery Webcam-API entdeckt, aber es erscheint mir, als ob es hier lediglich um die Möglichkeit geht die Webcam anzusprechen und es nicht möglich ist das Bild auch irgendwie an andere zu übertragen. Ist es nicht möglich, Webcam-Daten zu kopieren und vor allem an andere übertragen?

Was Webcam-Chats angeht, habe ich eine gute Nachricht und eine schlechte Nachricht. Die Gute ist, dass Webcam-Chat (inklusive Sound, d.h. Skype-klonen) tatsächlich bei den klugen Köpfen rund um HTML5 eine Rolle spielt. Es wird aktiv daran gearbeitet und das Ganze läuft unter dem Titel WebRTC. Die schlechte Nachricht ist, dass WebRTC noch eine in einer sehr frühen Phase steckt und noch nicht ernsthaft benutzbar ist – außer in Chrome-Nightlies läuft die API noch nirgendwo und ich möchte wetten, dass die ganze Technologie noch einige größere Änderungen vor sich hat. Da hilft, fürchte ich, erst mal nur Geduld.

Warum kein new Array() in JavaScript?

In diesem Artikel und dem besprochenen Buch heißt es Finger weg von new Array(). Wieso?

Neue Arrays macht man in JavaScript am einfachsten (weil am kürzesten) mit dem Literal []. Es gibt keinen Grund, sich mit new Array() einen Wolf zu tippen, denn das bringt gegenüber [] keine Vorteile. Im Gegenteil: new Array() macht, je nachdem wie viele Argumente man ihm mitgibt, sehr unterschiedliche und teils verwirrende Dinge:

var a = new Array(3);     // Leeres Array mit length = 3
var b = new Array(3, 14); // Array [3, 14]
var c = new Array(3.14);  // RangeError: Invalid array length

All den Stress hat man mit [] nicht – da kommt einfach ein Array mit genau den Elementen heraus, die man hineingesteckt hat.

Weitere Fragen?

Eure Fragen zu HTML5, JavaScript und anderen Webtechnologien beantworte ich gerne! Einfach eine E-Mail schreiben oder Formspring bemühen und ein bisschen Geduld haben – falls ich gerade unterwegs bin, kann es mit Antwort manchmal etwas dauern, doch früher oder später schreibe ich garantiert zurück.