HTML/Javascript Data Interfaces

[MikeCopeland]

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

[Ben Bacarisse]

MikeCopeland <mrc...@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.

[MikeCopeland]

In article <87shtof...@bsb.me.uk>, ben.u...@bsb.me.uk says...

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.

[Thomas 'PointedEars' Lahn]

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.

[John Harris]

On Tue, 30 Aug 2016 12:45:01 +0200, Thomas 'PointedEars' Lahn
<Point...@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