previous

page 19

next

My plan is to generate the images part of our program using JavaScript.
The best part is that when we're ready to use 16 cards instead of 4, it will require very little effort.

Start a new file : play2.html

Firstly we store the image part in a variable.
Note the double quotation marks (" )

<script>
var s="<img src='cards/back.png'>";
</script>

Then we use a loop to write it 4 times.

<script>
var s="<img src='cards/back.png'>";
for (var i=0; i<4; i++) {
document.write(s);
}
</script>

And once again you should see the four card backs - nothing new there.
Of course clicking on them won't do anything as yet.
But now we get really tricky - check this out but try to imagine what the result will be before you do.

<script>
var s1="<img src='cards/";
var s2=".png'>";
for (var i=0; i<4; i++) {
document.write(s1 + i + s2);
}
</script>

Just for fun, change the 4 to 16.

previous
next