Information Technology Reference
In-Depth Information
erklären, warum aus
data-geo-lat
plötzlich
dataset.geoLat
wird. Bindestriche
werden nämlich durch den in Großbuchstaben umgewandelten nächstfolgen-
den Buchstaben ersetzt - der Fachausdruck für diese Art der Großschreibung
ist
CamelCase
. Damit ist auch klar, warum in
data
-Attributen keine Großbuch-
staben erlaubt sind: Sie könnten beim Ersetzen der Bindestriche zu unerwar-
teten Problemen führen.
Leider ist es um die Unterstützung von
element.dataset
noch nicht sehr gut be-
stellt. Zu dem Zeitpunkt, als dieses Buch geschrieben wurde, implementierte
nur WebKit in seinen
Nightly builds
die
dataset
-DOM-Eigenschaft. Als Work-
around für dieses Manko verwendet das Spiel Remy Sharps
html5-data.js
, einen
JavaScript-
Shim,
der zumindest das Lesen von
data
-Attributen ermöglicht.
Zum Setzen muss die gute alte
setAttribute()
-Methode herhalten.
12.3 Das »hidden«-Attribut
Bei der
HTML Working Group
wirbelte das
hidden
-Attribut viel Staub auf: Es
brachte es immerhin bis zum
ISSUE
-Status mit einem anschließenden
Straw
Poll for Objections
und wurde erst durch einen Entscheid der Vorsitzenden der
HTML Working Group endgültig abgesegnet. Der Grundtenor der Kritiker lau-
tet:
hidden
ist überflüssig. Für uns wird sich allerdings gleich zeigen, dass das
hidden
-Attribut durchaus gut einsetzbar ist, denn die Auswahl der Spielfragen
wird über
hidden
gelöst werden. Der Algorithmus dabei ist schnell erklärt: Zu-
erst verstecken wir alle Einträge mit
hidden
und zeigen dann vier zufällig aus-
gewählte Einträge wieder an. Der dazu passende JavaScript-Code sieht so aus:
var showRandomNItems = function(q,n) {
var show = [];
for (var i=0; i<q.length; i++) {
q.item(i).hidden = true;
show.push(i);
}
show.sort(function() {return 0.5 - Math.random()});
for (var i=0; i<n; i++) {
q.item(show[i]).hidden = false;
}
};
Als Argumente übergeben wir der Funktion
showRandomNItems()
die Liste mit
li
-Elementen in der Variablen
q
sowie die gewünschte Anzahl an Elementen,
die gezeigt werden soll, in
n
. Dann verstecken wir alle Einträge mit
hidden=true
