HTML and CSS Reference
In-Depth Information
var words = [
"muon", "blight","kerfuffle","qat"
];
Notice that the words are all different lengths. This means that we can use the random processing code
that we will want for the final version and still know what word has been selected when were testing. Well
make sure the code uses
words.length
so that when you substitute a bigger array, the coding still
works.
Now, the question is how to use different arrays for this purpose if we want to bring in a different list of
words. It certainly is possible to change the HTML document. However, in HTML5 (or previous versions of
HTML), it is possible to include a reference to an external script file in place of or in addition to a script
element in the HTML document. We can take the three lines that declare and define the variable words and
place them in a file named
words1.js
. We can include this file with the rest of the document using the
following line of code:
<script src="words1.js" defer></script>
The
defer
method will cause this file to be loaded while the browser is continuing with the rest of the base
HTML document. We could not load these two files simultaneously if the external file contained part of the
body
, but it works in this situation.
A more elaborate program could include multiple files with code for the player to select from among
different levels or languages.
Generating and positioning HTML markup, then making the
markup be buttons, and then disabling the buttons
The creation of the alphabet buttons and the secret word dashes is done with a combination of JavaScript
and CSS.
Well write code to create HTML markup for two parts of the program: the alphabet icons and the blanks for
the secret word. (You can go to the quiz game in Chapter 6 for more on creating HTML markup.) In each
case, HTML markup is created using the following built-in methods:
•
document.createElement(x)
: Creates HTML markup for the new element type
x
•
document.body.appendChild (d)
: Adds the
d
element as another child element of the
body
element
•
document.getElementById(id)
: Extracts the element with id the value of
id
The HTML is created to include a unique id for each element. The code involves setting certain properties:
•
d.innerHTML
is set to hold the HTML
•
thingelem.style.top
is set to hold the vertical position
•
thingelem.style.left
is set to hold the horizontal position
With this background, here is the coding for setting up the alphabet buttons. We first declare a global
variable
alphabet:
var alphabet = "abcdefghijklmnopqrstuvwxyz";
The
setupgame
function has this code for making the alphabet buttons:
