1 Web App Development
Code • Real • Operational • Paper world Software specs Design Test 2
min avg max Golfers need to know likely distances for each golf club, preferably under realistic golf course conditions, not just driving range 3
Golfers can estimate distance for each shot using laser rangefinder or GPS device (These devices do not maintain records of distances of each club) 4
Code • Real • Operational • Paper world Software specs Design 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
List Screen Entry Screen http://webp.svsu.edu/~gpcorser/clubEntry.html http://webp.svsu.edu/~gpcorser/clubList.html 8
Code • Real • Operational • Paper world Software specs Design 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
/* * file: club.js * author: george corser (gpcorser@svsu.edu) * 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 { ▪ If you already created an array // create new 2d array of clubs, and save in local storage for the club data, then just pull // cols - 0: row/position, 1: clubAbbrev, 2: clubName, // 3: avg, 4: min, 5: max, 6: NumOfTimesUsed it in from local storage var clubs = [ [0, "1w", "Driver", 0, 0, 0, 0], ▪ Otherwise, create a new array [1, "3w", "3 wood", 0, 0, 0, 0], [2, "3h", "3 hybrid", 0, 0, 0, 0], to store the data for all the [3, "4i", "4 iron", 0, 0, 0, 0], clubs and save it in local [4, "5i", "5 iron", 0, 0, 0, 0], [5, "6i", "6 iron", 0, 0, 0, 0], storage. [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] ]; Use local storage // store 2d array in local storage var str = JSON.stringify(clubs); localStorage.setItem("clubs", str); } 12
▪ 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
// 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); ▪ For the list screen, populate the // create one cell for each column var cell0 = row.insertCell(0); HTML table with the contents of var cell1 = row.insertCell(1); the array 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 14
// 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]; ▪ Get the user-entered shot currentNumShots = clubs[clubRow][6]; distance newAverage = (currentAverage * currentNumShots + shotDistance) / (currentNumShots + 1); clubs[clubRow][3] = newAverage; ▪ Update min, max, avg, etc. // update shot count clubs[clubRow][6] += 1; ▪ Save to local storage // update min if (clubs[clubRow][4]==0 ▪ Redirect back to list || shotDistance < clubs[clubRow][4]) clubs[clubRow][4] = shotDistance; screen // 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"; } 15
// cancel, and return to clubList.html function cancelClub() { window.location.href = "clubList.html"; // redirect } // redirect from clubList.html to clubEntry.html if buton ▪ If the user cancels then navigate clicked (redirect) back to list screen 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 } 16
17
Recommend
More recommend
