Post on 02-Jan-2016
1
DIG 3134 – Lecture 11:
Two Dimensional ArraysAnd
Dynamic ControlsAND
CONSTANTS
Michael MoshellUniversity of Central Florida
Internet Software Design
2222
The Conceptual PathwayPART ONE2 dimensional array
$Grid[$x][$y]$Miketable[$i][$j] – you can use any name, any indices
This can be thought of as aMatrix of cells, like aSpreadsheet.
Indices (plural of 'index')Can be numbers 1,2,3 orStrings like A, B, C.
I recommend numbers, because 'for' loops are easy.
1 2 3 4 5 6
1
2
3
4
5
6
33333
The Conceptual PathwayPART ONE2 dimensional array
What happens if we run this code?
//$mtable[$i][$j]
For ($i=1; $i<=6; $i++) { $mtable[$i][2]=34;}
(Our convention: the firstindex ($i) is always “across”, the second “down”)
1 2 3 4 5 6
1
2
3
4
5
6
44444
The Conceptual PathwayPART ONE2 dimensional array
What happens if we run this code?
//$mtable[$i][$j]
For ($i=1; $i<=6; $i++) { $mtable[$i][2]=34;}
(Our convention: the firstindex ($i) is always “across”, the second “down”)
1 2 3 4 5 6
1
2 34 34 34 34 34 34
3
4
5
6
55555
The Conceptual PathwayPART ONE2 dimensional array
What happens if we THEN run this code?
//$mtable[$i][$j]
For ($i=1; $i<=6; $i++) { $mtable[$i][2]=$i;}
(Our convention: the firstindex ($i) is always “across”, the second “down”)
1 2 3 4 5 6
1
2
3
4
5
6
66666
The Conceptual PathwayPART ONE2 dimensional array
What happens if we THEN run this code?
$mtable[$i][$j]
For ($i=1; $i<=6; $i++) { $mtable[$i][2]=$i;}
(Our convention: the firstindex ($i) is always “across”, the second “down”)
1 2 3 4 5 6
1
2 1 2 3 4 5 6
3
4
5
6
77777
In-Class ExerciseModify this code to produce the second image
$mtable[$i][$j]
For ($i=1; $i<=6; $i++) { $mtable[$i][2]=$i;}
(Our convention: the firstindex ($i) is always “across”, the second “down”)
1 2 3 4 5 6
1
2 1 2 3 4 5 6
3
4
5
6
1 2 3 4 5 6
1 1
2 2
3 3
4 4
5 5
6 6
88888
The Conceptual PathwayPART ONE2 dimensional array
What happens if we run this code?
//$mtable[$i][$j]
For ($i=1; $i<=6; $i++) { $mtable[$i][$i]=34;}
1 2 3 4 5 6
1
2
3
4
5
6
99999
The Conceptual PathwayPART ONE2 dimensional array
What happens if we run this code?
//$mtable[$i][$j]
For ($i=1; $i<=6; $i++) { $mtable[$i][$i]=34;}
1 2 3 4 5 6
1 34
2 34
3 34
4 34
5 34
6 34
1010101010
Homework #1:DueNEXT TUESDAY (ready for “gotcha” in class)
Create a loop to construct this pattern in the array.
(Yes, you could usetwo loops. Butit is possibleto do this withONE loop.)
I’ll take two,if you can’tfigure out one.
1 2 3 4 5 6
1 1 2
2 2 4
3 3 6
4 4 8
5 5 10
6 6 12
111111111111
The Conceptual PathwayPART ONENested LOOPs! Now it gets INTERESTINGer
// $mtable[$i][$j]
for ($i=1; $i<=6; $i++){ for ($j=1; $j<=6; $j++) { $mtable[$i][$j]=34; }}
1 2 3 4 5 6
1
2
3
4
5
6
wordpress.com
What will this produce?
121212121212
The Conceptual PathwayPART ONE2 dimensional LOOP! Now it gets INTERESTINGer
// $mtable[$i][$j]
for ($i=1; $i<=6; $i++){ for ($j=1; $j<=6; $j++) { $mtable[$i][$j]=34; }}
1 2 3 4 5 6
1 34 34 34 34 34 34
2 34 34 34 34 34 34
3 34 34 34 34 34 34
4 34 34 34 34 34 34
5 34 34 34 34 34 34
6 34 34 34 34 34 34
wordpress.com
131313131313
The Conceptual PathwayPART ONE2 dimensional LOOP! Now it gets INTERESTINGer
// $mtable[$i][$j]
for ($i=1; $i<=6; $i++){ for ($j=1; $j<=6; $j++) { $mtable[$i][$j]=34; }}
History of $i and $j.
1 2 3 4 5 6
1 34 34 34 34 34 34
2 34 34 34 34 34 34
3 34 34 34 34 34 34
4 34 34 34 34 34 34
5 34 34 34 34 34 34
6 34 34 34 34 34 34
wordpress.com
$i $j1 11 21 31 41 51 62 12 22 32 42 52 6
etc etc
141414141414
Homework #2:Modify the codeso that it makes a MULTIPLICATION TABLELike this one!
// $mtable[$i][$j]
for ($i=1; $i<=6; $i++){ for ($j=1; $j<=6; $j++) { $mtable[$i][$j]=?? }}
wordpress.com
1 2 3 4 5 6
1 1 2 3 4 5 6
2 2 4 6 8 10 12
3 3 6 9 12 15 18
4 4 8 12 16 20 24
5 5 10 15 20 25 30
6 6 12 18 24 30 36
15
Now let's see shipaint.php
• Well, it's really just• a crude PAINT• PROGRAM, but• it will get us started.
Look at ship01.php
161616
The Conceptual PathwayPART ONE
• create a dimensional array• ‘render it’ as an HTML table• use <style> to set color and size of squares
HOMEWORK #3: Carefully analyze shipaint.php
and be ready to EXPLAIN and HAND SIMULATE
any line of code in this program.
1717
Goal: Build a simple Battleship Game
• Players take turns• enter x, y, (b or g)
Play the test game(shipstarter.php)
Read the Requirements
•X• Y
1818
Project 3 Specification
• Go read the specification for Project 3
• Discuss the stages from 80% to 90%
• Discuss the options above 90%
• Then we move forward to review the example code
shipstarter.php is your starter kit for Project3. You mayuse this code as part of your submission (but you don't have to.)
19191919
A note about $_SESSION
I’m seeing lots of CONFUSED Code
like$_SESSION['linenumber']=$_SESSION['linenumber']+1;in the middle of your code.
I recommend: Bring in all SESSION stuff at top of main, into scalar variables like this:
$linenumber=$_SESSION['linenumber'];
Then in the program, as needed: $linenumber++;
Put away all SESSION data at the bottom$_SESSION['linenumber’]=$linenumber;
2020202020
Upward Toward 90%Providing an Alphabetic Top Margin
HINT 1: We need functions to convert 1 to A, 2 to B etc.
and (to process inputs) also, A to 1, and B to 2 etc.
Key Fact: There are two built-in functions in PHP tohelp us.
$n=ord('A');print "ASCII for 'A' is $n";
this will print ASCII for 'A' is 65
2121212121
Upward Toward 90%Two key functions: ord and chr
$n=ord('A');
A 65
and
$c=chr(65);
65 A
2222222222
Upward Toward 90%Providing an Alphabetic Top Margin
#numtochar: maps 1 to A, 2 to B, etc. function numtochar($numin) { $numa=ord('A');
//we want numin=1 to produce chr('A'), so $numout=$numa+$numin-1; // now if numin=1, numout = chr('A')
$charout=chr($numout); // and if numin=2, numout = chr('B') etc. return $charout;
} #numtochar
2323232323
Upward Toward 90%
Hints 2 and 3
* Go read the document "project3.hints.doc"
24242424
The Conceptual PathwayHINT FOUR
•Dynamic generation of radio buttons
You've seen this trick before, in the pundex program.But now, we need to do it in two dimensions.
I want a bunch of radio buttons like this:<input type='radio' name='fillhere' value='1.1'><input type='radio' name='fillhere' value='1.2'>…<input type='radio' name='fillhere' value='1.10'><input type='radio' name='fillhere' value='2.1'> etc…. until 10.10. A total of 100 radio buttons, one fieldname.
2525252525
Dynamic radio buttonsQUESTION:How can I get two pieces of information (x and y)From one radio button?ANSWER:Put the info into a string, and unpack it later.
To produce this stuff:
<input type='radio' name='fillhere' value='1.1'><input type='radio' name='fillhere' value='1.2'>…Here's the trick - put this in your drawgrid 2d loop - print " <input type='radio' name='fillhere' value='$x.$y'>";
262626262626
Unpacking the infoQUESTION:How can I get two pieces of information (x and y)From one string like 1.2?ANSWER:
Bang! - - explode it.
$f=$_POST['fillhere']; // (why $f? why the $f not!!?) // (I just like f for 'fillhere')
If ($f){
$fparts=explode('.',$f);$x=$fparts[0];$y=$fparts[1];
}// now you can do $Grid[$x][$y]=whatever color
272727272727
And Finally ...QUESTION:What's WHITE? BLUE? LIGHTBLUE?
These are Defined Colors in HTML (147 of ‘em!)
www.w3schools.com/html/html_colornames.asp
But ... how can they be passing through to thebrowser WITH NO QUOTES AROUND ‘EM?
$Ships[$x][$y]=GOLD;
It’s an Ancient Flaw in PHP. ‘twould be better as:
$Ships[$x][$y]=‘GOLD’; // straight quotes of course
282828282828
And Then. ...QUESTION:What do we do next?
1) The practice (homework) problems, for next week
2) Start building Project 3. It’s due on 8 November(for show-and-tell); 10 November for grading.
AND if you have less than 150 on the MIDTERM,
You need to undergo the Remedial Processto salvage your grade. See Prof for Details.Limited Time Offer.