writing slabs of html

[mammothman42]

hi ppl

i've made a javascript component in a html file, and i want to be able
to use this on other pages, so i'm going to put it into a js file.
thing is, the component in 90% html and 10% java. so how do i print out
a whole slab of html without having to do a hideous batch of
document.write? couldn't figure out how other components did it.
cheers
dave

 

[McKirahan]

hi ppl

i've made a javascript component in a html file, and i want to be able
to use this on other pages, so i'm going to put it into a js file.
thing is, the component in 90% html and 10% java. so how do i print out
a whole slab of html without having to do a hideous batch of
document.write? couldn't figure out how other components did it.
cheers
dave

Put the Java in a separate .js file.

Also, to avoid numerous document.write statements,
use an array; for example, try something like:

var a = new Array();
a[i++] = "1";
a[i++] = "2";
a[i++] = "3";
for (i=0; i<a.length; i++) {
document.write a;
}

 

[Randy Webb]

Put the Java in a separate .js file.

<pedant>
Java != Javascript

Also, to avoid numerous document.write statements,
use an array; for example, try something like:

var a = new Array();
a[i++] = "1";
a[i++] = "2";
a[i++] = "3";
for (i=0; i<a.length; i++) {
document.write a;
}

That doesn't avoid numerous document.write statements, it just avoids
the author having to type them. If the array has 10,000 items in it,
then the document.write is called 10,000 times. Its a lot more
efficient, and faster, to use concatenation and then one document.write:

var i=0;
var myVar = "";
var a = new Array();
a[i++] = "1";
a[i++] = "2";
a[i++] = "3";
for (i=0; i<a.length; i++) {
myVar += a;
}
document.write(myVar);

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Sat, 2 Oct
2004 10:08:49, seen in Randy Webb

That doesn't avoid numerous document.write statements, it just avoids
the author having to type them. If the array has 10,000 items in it,
then the document.write is called 10,000 times. Its a lot more
efficient, and faster, to use concatenation and then one document.write:

var i=0;
var myVar = "";
var a = new Array();
a[i++] = "1";
a[i++] = "2";
a[i++] = "3";
for (i=0; i<a.length; i++) {
myVar += a;
}
document.write(myVar);

(1) document.write(a.join('')) // might be better

(2) Or
var myVar = "" +
"1" +
"2" +
"3" +
"" ;
document.write(myVar)

The average overhead of a few spaces, two quotes and a + per line of
HTML are not really important. Note that I've arranged matters so that
all 3 'HTML' lines are given identical treatment.

 

[McKirahan]

Put the Java in a separate .js file.

<pedant>
Java != Javascript

Also, to avoid numerous document.write statements,
use an array; for example, try something like:

var a = new Array();
a[i++] = "1";
a[i++] = "2";
a[i++] = "3";
for (i=0; i<a.length; i++) {
document.write a;
}

That doesn't avoid numerous document.write statements, it just avoids
the author having to type them. If the array has 10,000 items in it,
then the document.write is called 10,000 times. Its a lot more
efficient, and faster, to use concatenation and then one document.write:

var i=0;
var myVar = "";
var a = new Array();
a[i++] = "1";
a[i++] = "2";
a[i++] = "3";
for (i=0; i<a.length; i++) {
myVar += a;
}
document.write(myVar);

Well I did say "something like"

I actually meant to say what you did.

 

[Lasse Reichstein Nielsen]

(1) document.write(a.join('')) // might be better

In the general case, it can be a *lot* better.
In the Javascript implementations I have checked, Array.prototype.join
works in time proportional to the size of the resulting string.
In comparison, doing manual concatenation in a loop can take time
proportional to the square of the size of the resulting string.

Example code:
---
var N = 10000;
var arr = [];
for (var i = 0; i < N; i++) {
arr = "hello world!";
}
var d1 = new Date()
var r1 = "";
for (i = 0; i < N; i++) {
r1 += arr;
}
var d2 = new Date();
var r2 = arr.join("");
var d3 = new Date();
alert("Times: " + (d2-d1) + " vs. " + (d3-d2));
---

In IE 6, the result is 29072 ms vs. 20 ms, a factor of ... 1500.

Mozilla has 70 m vs 20 ms. Increasing N to 100000 gives ~6000 vs 5000,
so not nearly as big a fifference (hmm, the join might actually be
inefficiently created!).

In Opera 7, I had to increase N to a full million to get significant
numbers, 9133 ms vs 1433 ms., only a factor ~6.


In general: Creating a string by repeatedly appending to it is
inefficient. Don't do it. In Javascript, the "join" function is
an efficient way to join an array of strings. In, e.g., Java
you would use the StringBuffer class instead.

/L

 

[mammothman42]

but if i have 50-100 lines of code, concatenation or arrays is going to
get horrifically messy and painful to code. SURELY there must be a
better way of doing it. in PHP you can start HTML wherever and whenever
you like, you just close the php bit ?> and start it again when you
need <?php. Maybe I'm going about this the wrong way.

cheers
dave

 

[Richard Cornford]

In the general case, it can be a *lot* better.
In the Javascript implementations I have checked, Array.prototype.join
works in time proportional to the size of the resulting string.
In comparison, doing manual concatenation in a loop can take time
proportional to the square of the size of the resulting string.

<snip>

Even if the internal operation of Array prototype join was an equivalent
concatenation loop it should be expected to be quicker than doing the
same in javascript as it will be 'native' code doing the work. But
obviously join has a sufficiently clear outcome to allow much internal
optimisation.



When I have proposed the use of join in this context in the past it has
been suggested that it is less clear in the source code, but I know that
repeated concatenation is so inefficient in comparison (probably due to
the creation (and subsequent destruction) of many intermediate strings)
that I use it extensively. Often implemented as an overloaded toString
property assigned to the array:-



function arrayToString(){

return this.join('');

}

.. . .

ar.toString = arrayToString;



- and then just reference the array in a context where it will be
type-converted to a sting (thus calling the replacement toStirng
method).



The function can be re-used, and arrays that employ it can be mixed in
other arrays with string literal elements to have the whole lot
concatenated and output in one go.



Richard.

 

[mammothman42]

maybe i could use the DOM, like ummm... telling it to document.write
the root node somehow.

just an idea.

cheers
dave

 

[Fred Oz]

maybe i could use the DOM, like ummm... telling it to document.write

I think you'll find DOM methods very lengthy, unless your using
cloneNode. But the fact is that at some time you have to write HTML to
the browser.

Using the suggested array/join method is not as bad as you think, e.g.:

<html>
<head>
<title>Fred</title>
</head>
<body>
<script type="text/javascript">
var a = [];
var i = 0;
a[0] = " <p>here is paragraph " + i + "</p>";
a[++i] = " <p>here is paragraph " + i + "</p>";
a[++i] = " <p>here is paragraph " + i + "</p>";
a[++i] = " <table border='1' cellpadding='5' cellspacing='10'>";
a[++i] = " <tr>";
a[++i] = " <td>This is a cell</td>";
a[++i] = " <td>another cell</td>";
a[++i] = " </tr>";
a[++i] = " <tr>";
a[++i] = " <td>This is a cell</td>";
a[++i] = " <td>another cell</td>";
a[++i] = " </tr>";
a[++i] = " <tr>";
a[++i] = " <td colspan='2' align='center'>";
a[++i] = " <form name='fred' action=''>";
a[++i] = " <input type='text' name='aTxt' width='50'>";
a[++i] = " <input type='button' value='click me'"
+ " onclick=\"alert(this.form.aTxt.value);\"><br>";
a[++i] = " <input type='reset' value='Reset'>";
a[++i] = " </form>";
a[++i] = " </td>";
a[++i] = " </tr>";
a[++i] = "</table>";

var s = a.join("");

document.write(s);

</script>
</body>
</html>



Cheers, Fred.

 

[mammothman42]

well i've just ended up doing:

html='code code code'
+'code code cdoe'

etc etc.
(50 lines later... man this language is getting on my nerves...)

 

[mammothman42]

AHA! I have figured it out! (At the cost of my electrical circuits
assignment nevertheless).

Instead of putting the code into a js file, i put it into a php file,
and put the html in as normal, then put in my js as normal.

This not only allows me to encapsulate my js component neatly in one
file, it also allows me to send variables to it from php very very
neatly.

cheers
dave

 

[Thomas 'PointedEars' Lahn]

but if i have 50-100 lines of code, concatenation or arrays is going to
get horrifically messy and painful to code.

I don't think so:

var html = [
'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"',
' "http://www.w3.org/TR/html4/strict.dtd">',
'<html>',
' <head>',
' <title>foo</title>'
' </head>',
' <body>',
' <p>Do you find this horrifically messy and painful to code?</p>',
' </body>',
'</html>'].join();

// Kids, don't try this at home!
document.open();
document.write(html);
document.close();

(Well, those were only 10 lines of HTML code, but I think you got the idea.)
All I did was to put a ' in front and a ', at the end of the HTML code, and
enclosed the whole in an Array literal. Could have been done easily on
existing HTML code with a regular expression search and replace feature.

SURELY there must be a better way of doing it.

No, there is not.

in PHP you can start HTML wherever and whenever you like, you just close
the php bit ?> and start it again when you need <?php. Maybe I'm going
about this the wrong way.

Yes, JavaScript is not a (PHP) Hypertext Preprocessor (note the acronym).


PointedEars