1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell...
-
Upload
alvin-mccarthy -
Category
Documents
-
view
214 -
download
0
Transcript of 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell...
![Page 1: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/1.jpg)
1
DIG 3134 – Lecture 11:
Two Dimensional ArraysAnd
Dynamic ControlsAND
CONSTANTS
Michael MoshellUniversity of Central Florida
Internet Software Design
![Page 2: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/2.jpg)
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
![Page 3: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/3.jpg)
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
![Page 4: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/4.jpg)
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
![Page 5: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/5.jpg)
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
![Page 6: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/6.jpg)
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
![Page 7: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/7.jpg)
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
![Page 8: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/8.jpg)
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
![Page 9: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/9.jpg)
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
![Page 10: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/10.jpg)
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
![Page 11: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/11.jpg)
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?
![Page 12: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/12.jpg)
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
![Page 13: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/13.jpg)
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
![Page 14: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/14.jpg)
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
![Page 15: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/15.jpg)
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
![Page 16: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/16.jpg)
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.
![Page 17: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/17.jpg)
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
![Page 18: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/18.jpg)
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.)
![Page 19: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/19.jpg)
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;
![Page 20: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/20.jpg)
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
![Page 21: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/21.jpg)
2121212121
Upward Toward 90%Two key functions: ord and chr
$n=ord('A');
A 65
and
$c=chr(65);
65 A
![Page 22: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/22.jpg)
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
![Page 23: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/23.jpg)
2323232323
Upward Toward 90%
Hints 2 and 3
* Go read the document "project3.hints.doc"
![Page 24: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/24.jpg)
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.
![Page 25: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/25.jpg)
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'>";
![Page 26: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/26.jpg)
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
![Page 27: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/27.jpg)
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
![Page 28: 1 DIG 3134 – Lecture 11: Two Dimensional Arrays And Dynamic Controls AND CONSTANTS Michael Moshell University of Central Florida Internet Software Design.](https://reader030.fdocuments.in/reader030/viewer/2022032709/56649ed95503460f94be8669/html5/thumbnails/28.jpg)
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.