Transcript Old Loop Lab - La Salle University

Loop Lab
CSD 340 (Blum)
1
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)
2
So far we have:
(I choose a black background)
CSD 340 (Blum)
3
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)
4
CSD 340 (Blum)
5
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)
6
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)
7
What looks
like one long
rectangle is
actually five
overlapping
rectangles.
CSD 340 (Blum)
8
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)
9
CSD 340 (Blum)
10
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)
11
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
CSD 340 (Blum)
12
CSD 340 (Blum)
13
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)
14
The result
CSD 340 (Blum)
15
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)
16
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)
17
Result so far
CSD 340 (Blum)
18
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)
19
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)
20
Stripe effect
CSD 340 (Blum)
21