web app development 1 - george corser3 min avg max golfers need to know likely distances for each...
TRANSCRIPT
Web App Development 1
• Real world
Design
• Paper specs
Code• Operational
Software
Test
2
3
min avg max
Golfers need to know likely distances for each golf club,
preferably under realistic golf course conditions, not
just driving range
4
Golfers can estimate distance for each shot
using laser rangefinder or GPS device
(These devices do not maintain records of
distances of each club)
• Real world
Design
• Paper specs
Code• Operational
Software
Test
5
▪ Golfers could record distances on paper
▪ Golfers could hand-compute statistics, like min, max, avg
6
▪ Why carry around paper when you’re already carrying around a mobile phone?
▪ Why spend time computing statistics when the computer can do it for you?
7
8http://webp.svsu.edu/~gpcorser/clubList.html
http://webp.svsu.edu/~gpcorser/clubEntry.html
Entry
Screen
List
Screen
• Real world
Design
• Paper specs
Code• Operational
Software
Test
9
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload='appendRows();'>
<h1>Club Distances</h1>
<table id="clubTable" border="1">
<tr>
<th>Club</th>
<th>AVG</th>
<th>MIN</th>
<th>MAX</th>
<th>NUM</th>
<th> + </th>
</tr>
</table>
<button onclick='about();’
>About</button>
<script src="club.js"></script>
</body>
</html>
10
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload="labelClub();">
<h1>Record a Shot</h1>
<form>
<h2>Enter distance for club</h2>
<label for='clubVal’
id='clubValLbl'>Club</label>
<input name='clubVal' id='clubVal’
type='number'><br>
</form>
<button onclick='updateStats();'>Save</button>
<button onclick='cancelClub();'>Cancel</button>
<script src="club.js"></script>
</body>
</html>
11
▪ If you already created an array for the club data, then just pull it in from local storage
▪ Otherwise, create a new array to store the data for all the clubs and save it in local storage.
12
/*
* file: club.js
* author: george corser ([email protected])
* purpose: JavaScript code for clubList.html, clubEntry.html
*/
// always create or restore club data
if (localStorage.getItem('clubs')) {
// if already in local storage, restore
var clubs = JSON.parse(localStorage.getItem('clubs’) );
}
else {
// create new 2d array of clubs, and save in local storage
// cols - 0: row/position, 1: clubAbbrev, 2: clubName,
// 3: avg, 4: min, 5: max, 6: NumOfTimesUsed
var clubs = [
[0, "1w", "Driver", 0, 0, 0, 0],
[1, "3w", "3 wood", 0, 0, 0, 0],
[2, "3h", "3 hybrid", 0, 0, 0, 0],
[3, "4i", "4 iron", 0, 0, 0, 0],
[4, "5i", "5 iron", 0, 0, 0, 0],
[5, "6i", "6 iron", 0, 0, 0, 0],
[6, "7i", "7 iron", 0, 0, 0, 0],
[7, "8i", "8 iron", 0, 0, 0, 0],
[8, "9i", "9 iron", 0, 0, 0, 0],
[9, "PW", "pitching wedge", 0, 0, 0, 0],
[10, "AW", "approach wedge", 0, 0, 0, 0],
[11, "GW", "gap wedge", 0, 0, 0, 0],
[12, "SW", "sand wedge", 0, 0, 0, 0],
[13, "LW", "lob wedge", 0, 0, 0, 0]
];
// store 2d array in local storage
var str = JSON.stringify(clubs);
localStorage.setItem("clubs", str);
}
Use local storage
▪ Local Storage is persistent memory on a device which is accessible by HTML5-capable browsers
▪ The contents of the memory will be available from HTML web page to page
▪ The contents of the memory remain even if the user turns off the device
▪ Image source: CodeDiesel
13
▪ For the list screen, populate the HTML table with the contents of the array
14
// append to clubList.html table
function appendRows() {
// select whole table
var tbl = document.getElementById('clubTable');
// append row to HTML table for each row in clubs 2d array
for (var i = 0; i < clubs.length; i++) {
var row = tbl.insertRow(i+1);
// create one cell for each column
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
cell0.innerHTML = clubs[i][1]; // row/position (index)
cell1.innerHTML = clubs[i][3];
cell2.innerHTML = clubs[i][4];
cell3.innerHTML = clubs[i][5];
cell4.innerHTML = clubs[i][6];
cell5.innerHTML = '<button onclick="clubEntry('
+ i + ');"> + </button>';
}
}
Create a separate button
for each club
▪ Get the user-entered shot distance
▪ Update min, max, avg, etc.
▪ Save to local storage
▪ Redirect back to list screen
15
// save, and return to clubList.html
function updateStats() {
// get user-entered shot distance
var shotDistance = parseInt(document.getElementById('clubVal').value);
// update average
var clubRow = parseInt(localStorage.getItem('club'));
currentAverage = clubs[clubRow][3];
currentNumShots = clubs[clubRow][6];
newAverage = (currentAverage * currentNumShots + shotDistance)
/ (currentNumShots + 1);
clubs[clubRow][3] = newAverage;
// update shot count
clubs[clubRow][6] += 1;
// update min
if (clubs[clubRow][4]==0
|| shotDistance < clubs[clubRow][4])
clubs[clubRow][4] = shotDistance;
// update max
if (clubs[clubRow][5]==0
|| shotDistance > clubs[clubRow][5])
clubs[clubRow][5] = shotDistance;
// save updated stats in local storage
var str = JSON.stringify(clubs);
localStorage.setItem("clubs", str);
// redirect
window.location.href = "clubList.html";
}
▪ If the user cancels then navigate (redirect) back to list screen
16
// cancel, and return to clubList.html
function cancelClub() {
window.location.href = "clubList.html"; // redirect
}
// redirect from clubList.html to clubEntry.html if buton
clicked
function clubEntry(c) {
localStorage.setItem("club", c);
window.location.href = "clubEntry.html"; // redirect
}
// display the full name of the club on clubEntry.html screen
function labelClub () {
// populate label
var clubRow = parseInt(localStorage.getItem('club'));
var clubs = JSON.parse(localStorage.getItem('clubs'));
document.getElementById('clubValLbl').innerHTML
= clubs[clubRow][2]; // full name of club
}
function about() {
window.location.href = "clubAbout.html"; // redirect
}
17