1. Loop Lab
CSD 340 (Blum)

2. Start with the HTML for a gray rectangle
Start with Template.htm, Use Save As to give the file another name.
The HTML for a gray rectangle division is:
<div style="height: 60px; width: 40px; position: absolute; top:10px; left: 30px; background: #777777" ms_positioning="GridLayout"></div>
Declare a JavaScript variable and assign the above string to it (remember to replace quotes with backslash quotes).
Then write it to the document.
CSD 340 (Blum)

3. So far we have:
(I choose a black background)
CSD 340 (Blum)

4. Repetition
Write a for loop that concatenates together 5 copies of the gray rectangle HTML code and write it to the document.
Add an alert inside the loop that displays the HTML you should be the code grow longer and longer.
CSD 340 (Blum)

5. CSD 340 (Blum)

6. All 5 rectangles have the same top and left attributes so they all are in the same place and we only see one.
CSD 340 (Blum)

7. Changing position
Instead of having each rectangle have the same position, change the left attribute each time so that it is 30, 60, 90, 120 and 150 – that is 30*i for i=1, 2, 3, 4, 5.
Break up the string where the left attribute is set and insert the expression 30*i in place of 30. (This must occur outside of our pairs of JavaScript quotes.)
CSD 340 (Blum)

8. What looks like one long rectangle is actually five overlapping rectangles.
CSD 340 (Blum)

9. Changing position II
Instead of having each rectangle have the same vertical position, change the top attribute each time so that it is 1, 4, 9, 16 and 25 – that is i*i for i=1, 2, 3, 4, 5.
Break up the string where the top attribute is set and insert the expression 30*i in place of 30. (This must occur outside of our pairs of JavaScript quotes.)
CSD 340 (Blum)

10. CSD 340 (Blum)

11. Toward a color change
Let us set up to make the color of each rectangle change.
Insert in your loop the statement
alert((17*i).toString(16));
and see its effect.
(See next slide.)
CSD 340 (Blum)

12. Use the code (17*i).toString(16) to make the hexadecimal color code for the first rectangle, for the second rectangle and so on
CSD 340 (Blum)

13. CSD 340 (Blum)

14. Finishing the design Comment out the alert function statements.
Change the number of iterations to 15.
(I choose the numbers 15 and 17 here because 15*17 = 255 – which is corresponds FF, the highest number allowed by the usual RGB code.)
CSD 340 (Blum)

15. The result
CSD 340 (Blum)

16. Part 2: Tables in Tables Declare a variable to hold some HTML code
To start assign it the value “<center>”
Write a loop that appends the following HTML code 5 times
<table cellspacing="2" cellpadding="2" border="2"><tr><td style="background-color: #6699CC">
CSD 340 (Blum)

17. Second Loop
Next write a second loop that appends the following HTML code five times
</td></tr></table>
Then append </center>
Final write the code to the document.
CSD 340 (Blum)

18. Result so far
CSD 340 (Blum)

19. Be creative
Use the counting variable to alter the color code for each table data item.
Adjust the number of iterations (should be the same in both loops).
CSD 340 (Blum)

20. Odd or even if(i % 2 == 0) { Color= "FFCC99"; } else Color="99CCFF";
The condition above says divide the counting variable i by 2 and get the remainder from that division. Then ask whether that remainder is equal to 0.
CSD 340 (Blum)

21. Stripe effect
CSD 340 (Blum)