
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>
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>
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>
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