Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    jry
    jry is offline
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using JS to write data

    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.




    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.
    Last edited by jry; 10-24-2006 at 01:47 AM.

  • #2
    jry
    jry is offline
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    jry
    jry is offline
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dont mean to be a PIA about it, but see 1.5

    Da RULES....

  • #6
    jry
    jry is offline
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by radnor View Post
    Dont mean to be a PIA about it, but see 1.5

    Da RULES....

    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.
    Last edited by jry; 10-24-2006 at 08:05 PM.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Well, I decided that today was practice-JavaScript-day.

    Quote Originally Posted by jry View Post
    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.

    Code:
    <?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>
    Last edited by Arbitrator; 10-24-2006 at 10:26 PM. Reason: Minor update. Learned something new.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •