...

View Full Version : Using JS to write data



jry
10-24-2006, 02:10 AM
Greetings, currently a student studying web dev.

I have an assignment which has stumped me.

Here are the parameters for the assignment:

- GetWinPercentage has two arguments: the number of wins and the number of losses. It returns the win percentage.
- PrintScore has three arguments: the name of the team, the number of wins and the number of losses. Its purpose is to print one row of data. This function calls GetWinPercentage to get the win percentage.
- PrintALEastStandings has no arguments. Its purpose is to create a table with the scores for each of the teams in the AL East and it calls PrintScore for each of those teams.
- PrintALCentralStandings has no arguments. Its purpose is to create a table with the scores for each of the teams in the AL Central and it calls PrintScore for each of those teams.



the end result should look like this.

http://i13.photobucket.com/albums/a264/uneekvibez/scores.gif


Right now I'm able to achieve the end result. However, it doesnt include using multiple functions. I'm a little stuck on how to go about doing so.

Anyways, here is what I currently have..



<html>
<head>
<title>NBHA RI01 Standings</title>

<script type="text/javascript">
function printScores(name, win, loss) {
percent = win/(win+loss);
percentRound = percent.toFixed(2);

newcol = "</TD><TD>";
document.write("<TR><TD> ", name, newcol, win, newcol, loss, newcol, percentRound, "</TD></TR>\n") }
</script>

</head>
<body>
<table cellpadding="4" align="left" border="1">
<tr>
<th>Team</th><th>Wins</th><th>Losses</th><th>Percentage</th>
</tr>
<script type="text/javascript">
printScores("Boston", 61, 39);
printScores("New York", 59, 40);
printScores("Toronto", 56, 45);
printScores("Baltimore", 46, 56);
printScores("Tampa Bay", 42, 60);
</script>

</table>
</body>
</html>


Any guidence would be greatly appreciated. Thanks.

jry
10-24-2006, 04:06 AM
Ahhh, finally lol. Heres the solution. However, not sure how to use "PrintALEastStandings" and "PrintAlCentralStandings" to create table completely.


<head>
<title>NBHA RI01 Standings</title>

<script type="text/javascript">
function GetWinPercent(numberWin, numberLoss) {
var percent;
percent = numberWin/(numberWin+numberLoss);
return percent;
}

function printScores(name, win, loss) {
var percentPrint;
percentPrint = GetWinPercent(win, loss);
percentRound = percentPrint.toFixed(2);

newcol = "</TD><TD>";
document.write("<TR><TD> ", name, newcol, win, newcol, loss, newcol, percentRound, "</TD></TR>\n") }
</script>

</head>
<body>

<h1>MLB Scores</h1>
<h2>AL East</h2>
<table cellpadding="4" border="1">
<tr>
<th>Team</th><th>Wins</th><th>Losses</th><th>Percentage</th>
</tr>
<script type="text/javascript">
printScores("Boston", 61, 39);
printScores("New York", 59, 40);
printScores("Toronto", 56, 45);
printScores("Baltimore", 46, 56);
printScores("Tampa Bay", 42, 60);
</script>
</table>


<h2>AL Central</h2>
<table cellpadding="4" border="1">
<tr>
<th>Team</th><th>Wins</th><th>Losses</th><th>Percentage</th>
</tr>
<script type="text/javascript">
printScores("Detroit", 68, 33);
printScores("Chicago", 59, 41);
printScores("Minnesota", 59, 41);
printScores("Cleveland", 44, 56);
printScores("Kansas City", 35, 65);
</script>
</table>
</body>
</html>

felgall
10-24-2006, 05:58 AM
That's a very 20th century way of doing it. In the 21st century you would use the Document Object Model and keep the Javascript and HTML completely separate. Still it will probably be another 20 years before the schools and Universities catch up to 2006 coding practice.

jry
10-24-2006, 05:18 PM
Well, this is only the second assignment. I do understand the document object model somewhat. However, like I said, we're just getting into it and they have to assume the students have no prior knowledge of js. Im almost positive we get into that later in the qtr. So, I guess by your post...I achieved what was being asked? lol. Thanks for the reply nonetheless.

radnor
10-24-2006, 08:58 PM
Dont mean to be a PIA about it, but see 1.5

Da RULES.... (http://www.codingforums.com/rules.htm)

jry
10-24-2006, 09:02 PM
Dont mean to be a PIA about it, but see 1.5

Da RULES.... (http://www.codingforums.com/rules.htm)


Cheating? I could have asked my teacher for "guidence" which is what I asked this forum as well. Thats all I was asking for. Not for someone to do my homework for me like I was some highschool teenager. If someone just simply did it for me, then I wouldnt learn how to do it and understand how to go about future projects. That's why I don't cheat. I was only asking for some input to help me get on my way...Oh well, I figured it out myself anyways lol. But I understand.

Arbitrator
10-24-2006, 10:36 PM
Well, I decided that today was practice-JavaScript-day.


However, not sure how to use "PrintALEastStandings" and "PrintAlCentralStandings" to create table completely.It would probably be easiest to use the proprietary innerHTML or to populate a partially complete table (i.e., without document.write). Here’s a standards-compliant version with the JavaScript and HTML segregated. It works fine in Firefox and Opera, but it doesn’t work in everyone’s favorite browser; not sure what Internet Explorer is choking on this time… Of course, this is probably way more complicated than is required and I doubt you could get away with a non-IE solution. :p


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>

<title>NBHA RI01 Standings</title>

<style type="text/css">
h1, h2 {
text-align: center;
}
table {
margin: 0 auto;
border-collapse: collapse;
}
th, td {
border: 1px solid;
padding: 5px;
}
tr td + td {
text-align: right;
}
</style>

<script type="text/javascript">
var scoresALEast = new Array();
scoresALEast[0] = new Array("Boston", 61, 39);
scoresALEast[1] = new Array("New York", 59, 40);
scoresALEast[2] = new Array("Toronto", 56, 45);
scoresALEast[3] = new Array("Baltimore", 46, 56);
scoresALEast[4] = new Array("Tampa Bay", 42, 60);

var scoresALCentral = new Array();
scoresALCentral[0] = new Array("Detroit", 68, 33);
scoresALCentral[1] = new Array("Chicago", 59, 41);
scoresALCentral[2] = new Array("Minnesota", 59, 41);
scoresALCentral[3] = new Array("Cleveland", 44, 56);
scoresALCentral[4] = new Array("Kansas City", 35, 65);

function createTable(league) {
var header = document.createElement("h2");
var abbreviation = document.createElement("abbr");
abbreviation.setAttribute("title", "American League");
abbreviation.appendChild(document.createTextNode("AL"));
header.appendChild(abbreviation);
header.appendChild(document.createTextNode(" " + league));
var table = document.createElement("table");
var row = document.createElement("tr");
var cellTeam = document.createElement("th");
var cellWins = document.createElement("th");
var cellLosses = document.createElement("th");
var cellWinPercentage = document.createElement("th");
cellTeam.appendChild(document.createTextNode("Team"));
cellWins.appendChild(document.createTextNode("Wins"));
cellLosses.appendChild(document.createTextNode("Losses"));
cellWinPercentage.appendChild(document.createTextNode("WinPercentage"));
row.appendChild(cellTeam);
row.appendChild(cellWins);
row.appendChild(cellLosses);
row.appendChild(cellWinPercentage);
table.appendChild(row);
document.getElementsByTagName("body")[0].appendChild(header);
document.getElementsByTagName("body")[0].appendChild(table);
}
function getWinPercentage(wins, losses) {
var winPercentage = ((wins * 100) / (wins + losses)).toFixed(1);
return winPercentage;
}
function printScore(team, wins, losses, winPercentage, league) {
var row = document.createElement("tr");
var cellTeam = document.createElement("td");
var cellWins = document.createElement("td");
var cellLosses = document.createElement("td");
var cellWinPercentage = document.createElement("td");
cellTeam.appendChild(document.createTextNode(team));
cellWins.appendChild(document.createTextNode(wins));
cellLosses.appendChild(document.createTextNode(losses));
cellWinPercentage.appendChild(document.createTextNode(winPercentage));
row.appendChild(cellTeam);
row.appendChild(cellWins);
row.appendChild(cellLosses);
row.appendChild(cellWinPercentage);
if (league == "East") {
document.getElementsByTagName("table")[0].appendChild(row);
}
else {
document.getElementsByTagName("table")[1].appendChild(row);
}
}

function printALEastStandings() {
var league = "East";
createTable(league);
for (var i = 0; scoresALEast.length > i; i++) {
var team = scoresALEast[i][0];
var wins = scoresALEast[i][1];
var losses = scoresALEast[i][2];
var winPercentage = getWinPercentage(wins, losses);
printScore(team, wins, losses, winPercentage, league);
}
}
function printALCentralStandings() {
var league = "Central";
createTable(league);
for (var i = 0; scoresALCentral.length > i; i++) {
var team = scoresALCentral[i][0];
var wins = scoresALCentral[i][1];
var losses = scoresALCentral[i][2];
var winPercentage = getWinPercentage(wins, losses);
printScore(team, wins, losses, winPercentage, league);
}
}

window.onload = function() {
printALEastStandings();
printALCentralStandings();
}
</script>

</head>
<body>

<h1><abbr title="Major League Baseball">MLB</abbr> Scores</h1>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum