Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31192 > unrolled thread

HTML/Javascript Data Interfaces

Back to article view | Back to comp.lang.javascript

Contents

  HTML/Javascript Data Interfaces MikeCopeland <mrc2323@cox.net> - 2016-08-28 12:47 -0700
    Re: HTML/Javascript Data Interfaces Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-08-28 21:12 +0100
      Re: HTML/Javascript Data Interfaces MikeCopeland <mrc2323@cox.net> - 2016-08-28 15:00 -0700
    Re: HTML/Javascript Data Interfaces Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-30 12:45 +0200
      Re: HTML/Javascript Data Interfaces John Harris <niam@jghnorth.org.uk.invalid> - 2016-08-30 19:33 +0100

#31192 — HTML/Javascript Data Interfaces

   I have inherited a Web application that's comprised of a set of 10 
HTML/Javascript apps and a "main" page that links to the 10 HTML code 
pages.  Each of the 10 pages has a corresponding Javascript code page 
that has 2 functions.  I'd like to combine and compact all this code 
into fewer source files (for maintenence), as well as reduce redundant 
code.
   My thought is to have a single Javascript file (all processing is 
identical, but the data array is different for each).  In order to do so 
I must declare the array values in the calling HTML (I'm unsure how to 
do this) and call the single Javascript cocde with an additional 
argument (I have no idea how to do this).  In the code below, the data 
array called "Distances" is the app-specific code that I intend to move 
to the HTML code (not know how to declare it, though), and the call from 
there is:

  <input type="button" value="Compute Distance" 
       onClick="Process1(document.Start.Start_Point,  
document.End.End_Point, this.form, SOMETHING)">

   The Web site is: http://mrc5305.com/rp_history/canals.htm

   I hope I've made my query clear.  Please advise.  TIA
////////////////////////////////////////////////////////////////////////
    var Total = 0.0;
function roundOff(value, precision)
{
    var prior    = value;                         // save incoming value
    value        = ""+value                    //convert value to string
    precision    = parseInt(precision);
    var whole    = ""+Math.round(value*Math.pow(10, precision));
    var decPoint = whole.length - precision;

    if(decPoint != 0)
    {
        result = whole.substring(0, decPoint);
        result += ".";
        result += whole.substring(decPoint, whole.length);
    }
    else
    {
        if(prior > 0.9) result = whole;
        else            result = "."+whole;
    }
    return result;
}  // roundOff

function Process1(S,E, form1)
{
    Distances = new Array(0.57, 0.45, 0.62, 0.79, 0.52, 1.14, 0.36, 
0.24,
                     0.55, 1.07, 1.12, 0.98, 1.00, 1.09, 0.71, 0.45,
                     1.33, 1.14, 1.02, 1.14);
    var start = S.selectedIndex;
    var end   = E.selectedIndex;
    Total     = 0;
    if(start < end)
       for(var i = start; i < end; i++)
       { 
          Total = Total+Distances[i];
       }
    else
       for(var i = start; i > end; i--)
         { 
           Total = Total+Distances[i];
         }
    Total = roundOff(Total, 2);
    w1    = ""+Total*1+" Miles";        
  	form1.p2p.value = w1;
    w1    = ""+Total*2+" Miles";
  	form1.loop.value = w1;
    return;
}  // Process1




---
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

[toc] | [next] | [standalone]

#31194

MikeCopeland <mrc2323@cox.net> writes:

>    I have inherited a Web application that's comprised of a set of 10 
> HTML/Javascript apps and a "main" page that links to the 10 HTML code 
> pages.  Each of the 10 pages has a corresponding Javascript code page 
> that has 2 functions.  I'd like to combine and compact all this code 
> into fewer source files (for maintenence), as well as reduce redundant 
> code.
>    My thought is to have a single Javascript file (all processing is 
> identical, but the data array is different for each).  In order to do so 
> I must declare the array values in the calling HTML (I'm unsure how to 
> do this) and call the single Javascript cocde with an additional 
> argument (I have no idea how to do this).  In the code below, the data 
> array called "Distances" is the app-specific code that I intend to move 
> to the HTML code (not know how to declare it, though), and the call from 
> there is:
>
>   <input type="button" value="Compute Distance" 
>        onClick="Process1(document.Start.Start_Point,  
> document.End.End_Point, this.form, SOMETHING)">

<snip>
> function Process1(S,E, form1)
> {
>     Distances = new Array(0.57, 0.45, 0.62, 0.79, 0.52, 1.14, 0.36, 
> 0.24,
>                      0.55, 1.07, 1.12, 0.98, 1.00, 1.09, 0.71, 0.45,
>                      1.33, 1.14, 1.02, 1.14);

There are so many ways to do this it's hard to know what the best method
is.  Are the 10 HTML pages generated from some master data?

I think you already have the gist of one reasonable approach.  You'd
change the function to

 function Process1(S,E, form1, Distances)

and write the array into the call in the HTML file:

  <input type="button" value="Compute Distance"
         onClick="Process1(document.Start.Start_Point,
                           document.End.End_Point,
                           this.form,
                           new Array(0.57, 0.45, 0.62, 0.79, 0.52, 1.14,
                                     0.36, 0.24, 0.55, 1.07, 1.12, 0.98,
                                     1.00, 1.09, 0.71, 0.45, 1.33, 1.14,
                                     1.02, 1.14)
                           )">

You can write [0.57, 0.45, ...] instead of new Array(0.57, 0.45, ...) if
you prefer.

<snip>
-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#31198

In article <87shtofyac.fsf@bsb.me.uk>, ben.usenet@bsb.me.uk says...
> 
> >    My thought is to have a single Javascript file (all processing is 
> > identical, but the data array is different for each).  In order to do so 
> > I must declare the array values in the calling HTML (I'm unsure how to 
> > do this) and call the single Javascript cocde with an additional 
> > argument (I have no idea how to do this).  In the code below, the data 
> > array called "Distances" is the app-specific code that I intend to move 
> > to the HTML code (not know how to declare it, though), and the call from 
> > there is:
> >
> >   <input type="button" value="Compute Distance" 
> >        onClick="Process1(document.Start.Start_Point,  
> > document.End.End_Point, this.form, SOMETHING)">
> 
> <snip>
> > function Process1(S,E, form1)
> > {
> >     Distances = new Array(0.57, 0.45, 0.62, 0.79, 0.52, 1.14, 0.36, 
> > 0.24,
> >                      0.55, 1.07, 1.12, 0.98, 1.00, 1.09, 0.71, 0.45,
> >                      1.33, 1.14, 1.02, 1.14);
> 
> There are so many ways to do this it's hard to know what the best method
> is.  Are the 10 HTML pages generated from some master data?
> 
> I think you already have the gist of one reasonable approach.  You'd
> change the function to
> 
>  function Process1(S,E, form1, Distances)
> 
> and write the array into the call in the HTML file:
> 
>   <input type="button" value="Compute Distance"
>          onClick="Process1(document.Start.Start_Point,
>                            document.End.End_Point,
>                            this.form,
>                            new Array(0.57, 0.45, 0.62, 0.79, 0.52, 1.14,
>                                      0.36, 0.24, 0.55, 1.07, 1.12, 0.98,
>                                      1.00, 1.09, 0.71, 0.45, 1.33, 1.14,
>                                      1.02, 1.14)
>                            )">
> 
   They were (probably) generated by hand - by a programmer of long ago.  
If you look at the Web site 
	http://mrc5305.com/rp_history/canals.htm
and click on more than one of the links, you'll see that each app works 
the same...but with different data in the dropdown selections of Start 
and End points.  The only real difference in any of the 10 apps is the 
<select> tables in the HTML code and the Distances array in each of the 
Javascript support files.  Otherwise, the 10 app sources (HTML and 
Javascript) are identical.
   Note that these apps allow the user to select appropriate Start & End 
points on the Phoenix canals' running paths and compute either point-to-
point distances or loop route distances.  Nothing very complicated here, 
but messy to support if I want to upgrade any of them with pictures or 
different backgrounds.


---
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

[toc] | [prev] | [next] | [standalone]

#31216

MikeCopeland wrote:

>    I have inherited a Web application that's comprised of a set of 10
> HTML/Javascript apps and a "main" page that links to the 10 HTML code
> pages.  Each of the 10 pages has a corresponding Javascript code page
> that has 2 functions.  I'd like to combine and compact all this code
> into fewer source files (for maintenence), as well as reduce redundant
> code.
>    My thought is to have a single Javascript file (all processing is
> identical, but the data array is different for each).  In order to do so
> I must declare the array values in the calling HTML (I'm unsure how to
> do this)

Simplest solution:

  <script type="text/javascript">
    var distances = […];
  </script>
  <script type="text/javascript" src="…"></script>

Better solution: Pass the array as an argument to the function.

> and call the single Javascript cocde with an additional argument (I have
> no idea how to do this).

RTFFAQ or employ someone with the expertise.  There are *starving* 
*talented* developers out there.

> […]
>   <input type="button" value="Compute Distance"
>        onClick="Process1(document.Start.Start_Point,
> document.End.End_Point, this.form, SOMETHING)">

Should probably be

  <input type="button" value="Compute Distance"
    onclick="Process1(document.forms['Start'].elements['Start_Point'],
      document.forms['End'].elements['End_Point'], this.form, SOMETHING)">

at which point you should find a way to get rid of the spaghetti code.  

Do you really need three forms?
 
>    The Web site is: http://mrc5305.com/rp_history/canals.htm

So I guessed right.  The person writing this had no clue what they were 
doing.  You only need one form, and then

  <input type="button" value="Compute Distance"
    onclick="Process1(this.form.elements['Start_Point'],
      this.form.elements['End_Point'], this.form, SOMETHING)">

which then reduces to

  <input type="button" value="Compute Distance"
    onclick="Process1(this.form, SOMETHING)">

and ultimateily to

  <input type="button" value="Compute Distance"
      onClick="Process1(this, SOMETHING)">

because the logic should be in the function (which should be renamed 
“process1” as it is not a constructor, probably something more descriptive).
Unless the forms are that dissimilar that this is not an option.

>    I hope I've made my query clear.  Please advise.  TIA
                                       ^^^^^^^^^^^^^^^^^^^
Start from scratch.  You’re welcome.

> ////////////////////////////////////////////////////////////////////////
>     var Total = 0.0;
> function roundOff(value, precision)
> {
>     var prior    = value;                         // save incoming value
>     value        = ""+value                    //convert value to string

“value” probably is a String already.  But since “value” is *only* used in a 
*multiplication* operation, what is the point of converting it to *String*?

> […]

Ouch.  There are so many things wrong with this code that I do not know 
where to begin.

> function Process1(S,E, form1)
> {
>     Distances = new Array(0.57, 0.45, 0.62, 0.79, 0.52, 1.14, 0.36,
> 0.24,
>                      0.55, 1.07, 1.12, 0.98, 1.00, 1.09, 0.71, 0.45,
>                      1.33, 1.14, 1.02, 1.14);
> […]
>     w1    = ""+Total*1+" Miles";

<facepalm/>

  var w1 = Total + " Miles";

>   form1.p2p.value = w1;

See above.

>   form1.loop.value = w1;

See above.

>     return;
      ^^^^^^^
> }  // Process1
  ^
<facepalm/>

I leave the rest of the code review to JSHint:

<http://jshint.com/>

> ---
> This email has been checked for viruses by Avast antivirus software.
> https://www.avast.com/antivirus

This was not an e-mail; please disable the spam.

Also, a space character is missing in your name.  Inserting it in the right 
place will increase the number of people reading you and willing to help 
you.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#31217

On Tue, 30 Aug 2016 12:45:01 +0200, Thomas 'PointedEars' Lahn
<PointedEars@web.de> wrote:

>MikeCopeland wrote:

  <snip>
>Also, a space character is missing in your name.  Inserting it in the right 
>place will increase the number of people reading you and willing to help 
>you.

Says you, but

Thomas Lahn said :
"IOW, you do not substantiate your claim, so we can safely assume it
is nonsense based on wishful thinking and insufficient testing."

with which I agree.

  John

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web