Game Development Reference
In-Depth Information
<input type="text" id="scoreDisplay"
<!-- Indicates that this score is not yet a
new high score -->
data-is-high-score="false"
<!-- Indicates the current high score -->
data-score-to-beat="891,958"
<!-- Not a good use of data attributes, since
the disabledattribute is a better choice -->
data-enabled="false"
/>
In the example code just seen, we have some DOM node that happens to be an
input
tag and represents the score for some game. The first two sample data at-
tributes,
data-is-high-score
and
data-score-to-beat
, are good examples.
Just by looking at the names chosen for each attribute, we can infer the context in
which they were meant to be used.
The first attribute is meant to hold a Boolean value that represents whether or not
the score displayed by the heading element is a new high score. Since it currently
holds the value false, then obviously the current score is not yet a new high score.
The second attribute stores the current high score, meaning that if the player gets a
score higher than that value, his or her score will become a new high score and the
attribute
data-is-high-score
should be updated to hold the value true. Keep in
mind that these attributes are static and meaningless and the logic of your applica-
tion is in charge of adding meaning to them based on their context as well as hand-
ling any updates to them, such as the example described previously.
Finally, note the third
data
attribute example. This is not a very practical use of data
attributes because there exists another HTML element attribute that exists for that
very purpose, namely, to specify that an element is disabled.
To add, remove, and check for an element's attributes and their values programmat-
ically, you can use the following JavaScript APIs:
var myInput =
document.getElementById("scoreDisplay");
