loops BIS1523 – Lecture 10

For loops The for loop is used to execute a section of code a specific number of times. The for loop uses a counter variable, that will take on a range of values over the course of the loop. For example, you might use a counter variable $i, and have the loop vary $i from 1 to 10. The loop would start $i off at 1, then execute the loop 10 times. Each time $i would get one larger. Inside the loop, you can have any # of statements, each of which will be executed that number of times. This works similarly to the IF statement: anything you put inside the {}’s is part of the if statement, and gets executed.

For loops The syntax is: for (init counter; test counter; increment counter) {   code to be executed; } Init counter is the starting value of the loop. Test counter is where you specify the ending condition for the loop Increment counter is where you increase the counter The code between the {}’s is executed once at every iteration in the loop The loop ends as soon as the test condition returns FALSE.

For example The above loop: The output would look like: Starts $i off at 0 Then as long as $i < 10 it Executes the print statement Then adds 1 to $i The output would look like:

For loops We are outputting HTML, so if you wanted your numbers to be on separate lines, you would need to add a <br /> to the end of each line. The starting and any values can be any literal, variable, or expression. So, you could have an HTML form that allowed the user to input 2 numbers, read those 2 numbers into $start, and $end variables, and use those like:

For loops The ending condition in a loop can be any condition, using relational and logical operators, functions, etc. Most for loop are used for simple iteration The increment expression can be any mathematical expression. So you could have $i count up by 3’s like: Notice as soon as $i becomes >= 10 it stops executing the loop, so the value of 10 isn’t printed.

Infinite loops Since our expressions and increment values can be so many different kinds of expressions, we need to take care not to create any infinite loops. For example: The above loop starts $i off at 1, and increments it by 3. So it will go 1, 4, 7, 10, 13, etc. The ending condition however is “when $i is no longer greater than 0”. Because of the format of the loop $i will always be 0, thus the loop never ends. If you start an infinite loop, close your web browser and re-open it.

Counting Backwards Since our increment counter can be any math, we can count backwards as easily as forwards. If we want to count downwards, we have to adjust our starting point and ending condition appropriately.

For Loop Example We can use for loops to generate large amounts of HTML with very little typing. For example, an option list to let the user select the month and day. There are 12 months, and we would enter each option in separately like this:

Option Example Let’s examine what the HTML would look like to do days 1-31 That is a lot of the same info repeating, with only the number changing each line. This is a perfect task for a for loop.

HTML as output Notice in that print command that there are some extra spaces at the beginning, and a newline (\n) at the end. That is so the output of html looks nice and neat. Without them, it would look like: This HTML would run just fine, but it is really hard to debug, so from a programming standpoint it’s a good idea to make it look good.

Iterative Calculations Some types of calculations require us to do the same type of math over and over again. These calculations are also good uses of for loops. For example, calculating interest over time on an interest bearing account. You start with $1000 in the account, and earn 6% interest every year, how much money do you have in 10 years? If you were going to do this on a piece of paper, you might If you were going to do this on a piece of paper, you might start with a line for ‘this months balance’, calculate the interest, add it to the balance, marking through the previous balance. Notice that even though you were calculating a new balance each time, you didn’t need to remember it, so you just put it in the same place.

Iterative Calculations If you were going to calculate this with code, you might do something like: The value of $balance would grow each year, but since you don’t need to keep track of each year, just the end result, you can use the same variable over and over. Notice the commands are all the same, so we could put that inside a loop.

Iterative Calculations This code would perform 10 years of calculations, at the end of the loop $balance would hold the result. This loop could also be written as: We could also print out the balance at each iteration by adding a print command:

Iterative Calculations Example with some formatting. The starting balance, number of years, and interest rate could as easily be read in from the user, and variables used This type of output would look better formatted into a table….

Tables in HTML To create a table in HTML, we need to use several different tags, each that represent a different area of the table. A table consists of a table header row, made up of a series of header cells cells, followed by any number of table rows. Each row is made up of a series of individual data cells. Tables are created from top to bottom, and left to right.

Table Tags Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. (tr stands for table row) A row is divided into data cells with the <td> tag. (td stands for table data) A row can also be divided into headings with the <th> tag. (th stands for table heading) Each of these individual pieces can be styled with CSS using their tags, or by giving them an ID. ID’s are useful if you have multiple tables that you want to use different formats for.

Table Example The entire table is enclosed in the <table> and </table> tags Each row is enclosed in <tr> and </tr> tags. Each item is enclosed in a <tr> (for the header row), or a <td> (for every other row) tag The header by default is bolded, but nothing else is styled. We can do that with CSS

Styling Tables Adding a border to the table, does not add the borders for the internal cells If we give the <td> tags borders as well, it gives us a double border effect The collapse attribute will give us a single border for the table.

Styling Tables Some final things you could do to style your table would be to set center the headings, and make the heading stand out with a different color scheme. Notice the attributes that we want <td> and <th> to share can be set together, and the attributes that only apply to <th> can be set in a different block.

Colspan You can have a table data item span more than one row by using the colspan attribute There is also a “rowspan” attribute that will allow a column to span multiple rows.

Example Program Back to our previous example, we want to format this output so it has a table. We just need to add the appropriate HTML.

Example Program The first row of the table is just a heading, and doesn’t need to be generated with PHP. So we can just add normal HTML before the PHP starts

Example Program The PHP then needs to generate each row. So it needs to include the <tr> tags at the start and end of each row, as well as the <td> tags around each individual item. This code loops through each row, and prints the appropriate tags along with $i (the year #), and the balance

Example Output

Alternating Row Colors There is a CSS attribute you can use to give alternating rows different schemes. The tr:nth-of-type can use any number or the constants odd or even. This will style every nth row. If you use a specific row #, it will color only that row. So tr:nth-of-type(2) styles row 2.