Noob needs basic help on Javascript 'spreadsheet'

Discussion in 'Javascript' started by The Natural Philosopher, Jul 4, 2007.

  1. I am no stranger to procedural languages (C mainly), but am to object
    style languages.. and in particular the overall way that javascript
    hangs together.

    What I wish to do, is to create a sort of spreadsheet type web page,
    customized towards a particular application, so that non technical users
    can select from (dynamically variable) drop down menus, and set up a
    simulation, and the end results are automatically updated in various
    output places.


    What puzzles me is how the browser/script interface works.

    i.e. if I have a bunch of global variables that represent calculation
    results, and I update these as options are selected, will the visible
    results of these variables instantly update if I use e.g. a javascript
    function to express them as HTML text, or do I have to physically force
    some kind of refresh on the page by doing a submit type action?

    i.e. is it enough to say have a variable written to screen via a write
    command, and then that will update as and when the document variable
    changes?

    As might happen after a select event..
    The Natural Philosopher, Jul 4, 2007
    #1
    1. Advertising

  2. The Natural Philosopher

    Lee Guest

    The Natural Philosopher said:
    >
    >I am no stranger to procedural languages (C mainly), but am to object
    >style languages.. and in particular the overall way that javascript
    >hangs together.


    Your confusion doesn't seem to be about Object Oriented languages
    as much as it is about event-driven environments such as a browser.

    >i.e. is it enough to say have a variable written to screen via a write
    >command, and then that will update as and when the document variable
    >changes?
    >
    >As might happen after a select event..


    Changing the variable won't update the display. You need to either
    write the change to the document (usually a bad idea, since writing
    to an existing document clears all previous content), or you change
    the innerHTML attribute of a DOM object (or other ways, that don't
    really apply in this case).

    Here's a fairly simple example that seems relevant:


    <html>
    <head>
    <title>Demo</title>
    <script type="text/javascript">
    function calcAcc() {
    if (document.ui.force.selectedIndex && document.ui.mass.selectedIndex) {
    var f=document.ui.force.options[document.ui.force.selectedIndex].text;
    var m=document.ui.mass.options[document.ui.mass.selectedIndex].text;
    document.ui.force.selectedIndex=0;
    document.ui.mass.selectedIndex=0;
    var a=f/m;
    document.getElementById("forceTD").innerHTML=f;
    document.getElementById("massTD").innerHTML=m;
    document.getElementById("accelTD").innerHTML="<b>"+a+"</b>";
    }
    }
    </script>
    <style type="text/css">
    TD {width:12em;
    text-align:center;
    padding:1em;
    }
    </style>

    </head>
    <body>
    <form name="ui">
    <select name="force" onchange="calcAcc()">
    <option selected>Force...</option>
    <option>6</option>
    <option>12</option>
    <option>18</option>
    <option>24</option>
    </select>
    <select name="mass" onchange="calcAcc()">
    <option selected>Mass...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    </select>
    </form>
    <table border>
    <tr><th>Force</th><th>Mass</th><th>Acceleration</th></tr>
    <tr>
    <td id="forceTD">&nbsp;</td>
    <td id="massTD">&nbsp;</td>
    <td id="accelTD">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>


    --
    Lee, Jul 4, 2007
    #2
    1. Advertising

  3. Lee wrote:
    > The Natural Philosopher said:
    >> I am no stranger to procedural languages (C mainly), but am to object
    >> style languages.. and in particular the overall way that javascript
    >> hangs together.

    >
    > Your confusion doesn't seem to be about Object Oriented languages
    > as much as it is about event-driven environments such as a browser.
    >


    Yes..been struggling away here..what you say is fairly true. ;-)

    Can't quite see what gets run when the page loads, what gets run when
    the onchange function is called, and how to communicate between the two.
    I've laready discovered that I can't pass a variable explicitly in
    onchange(), except 'this'....



    >> i.e. is it enough to say have a variable written to screen via a write
    >> command, and then that will update as and when the document variable
    >> changes?
    >>
    >> As might happen after a select event..

    >
    > Changing the variable won't update the display. You need to either
    > write the change to the document (usually a bad idea, since writing
    > to an existing document clears all previous content), or you change
    > the innerHTML attribute of a DOM object (or other ways, that don't
    > really apply in this case).


    Not that I undersnatd that last phrase..never mind. It gives me keywords
    to google on..and I thank you for that at least.;-)



    >
    > Here's a fairly simple example that seems relevant:
    >
    >
    > <html>
    > <head>
    > <title>Demo</title>
    > <script type="text/javascript">
    > function calcAcc() {
    > if (document.ui.force.selectedIndex && document.ui.mass.selectedIndex) {
    > var f=document.ui.force.options[document.ui.force.selectedIndex].text;
    > var m=document.ui.mass.options[document.ui.mass.selectedIndex].text;
    > document.ui.force.selectedIndex=0;
    > document.ui.mass.selectedIndex=0;
    > var a=f/m;
    > document.getElementById("forceTD").innerHTML=f;
    > document.getElementById("massTD").innerHTML=m;
    > document.getElementById("accelTD").innerHTML="<b>"+a+"</b>";
    > }
    > }
    > </script>
    > <style type="text/css">
    > TD {width:12em;
    > text-align:center;
    > padding:1em;
    > }
    > </style>
    >
    > </head>
    > <body>
    > <form name="ui">
    > <select name="force" onchange="calcAcc()">
    > <option selected>Force...</option>
    > <option>6</option>
    > <option>12</option>
    > <option>18</option>
    > <option>24</option>
    > </select>
    > <select name="mass" onchange="calcAcc()">
    > <option selected>Mass...</option>
    > <option>1</option>
    > <option>2</option>
    > <option>3</option>
    > </select>
    > </form>
    > <table border>
    > <tr><th>Force</th><th>Mass</th><th>Acceleration</th></tr>
    > <tr>
    > <td id="forceTD">&nbsp;</td>
    > <td id="massTD">&nbsp;</td>
    > <td id="accelTD">&nbsp;</td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >


    Right. You've demonstrated some stuff there that I simply didn't
    know..like the association between the form or selection name , and a
    subclass of 'document'.and the use of getElementbyID(). God what a
    hacked up way of doing things...

    However if it does the biznai, I'll follow your lead :)


    It looks like a massive onchange="Update_sodding_everything()" plus a
    relentless trawl through all selections and updating the table (or other
    id'd elements' is whats needed..mm,. and drop down dynamically
    changeable menus too..like imperial/metric etc etc..haha.

    Thanks. I'll mess around with this lot and see where I get to.




    >
    The Natural Philosopher, Jul 4, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Holger
    Replies:
    2
    Views:
    287
    Holger
    Jun 19, 2006
  2. Replies:
    10
    Views:
    437
    Cameron Laird
    Jun 26, 2006
  3. Velvet

    2.0 Noob needs help with sitemap

    Velvet, Nov 1, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    323
    Velvet
    Nov 1, 2006
  4. toveysnake

    noob needs help

    toveysnake, Nov 30, 2008, in forum: Python
    Replies:
    3
    Views:
    327
    Sambo
    Dec 3, 2008
  5. Chad

    Noob needs help

    Chad, Oct 7, 2005, in forum: Javascript
    Replies:
    0
    Views:
    93
Loading...

Share This Page