Loop Lab

1. Loop Lab

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.

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

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.

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

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

8. What looks like one long rectangle is actually five overlapping rectangles.

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

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

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

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

15. The result

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

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.

18. Result so far

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

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.

21. Stripe effect