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]

<ma**********@h otmail.com> wrote in message
news:10******** **************@ h37g2000oda.goo glegroups.com.. .

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[i];
}

[Randy Webb]

McKirahan wrote:

<ma**********@h otmail.com> wrote in message
news:10******** **************@ h37g2000oda.goo glegroups.com.. .

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.writ e? couldn't figure out how other components did it.
cheers
dave
Put the Java in a separate .js file.

<pedant>
Java != Javascript
</pedant>

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[i];
}

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[i];
}
document.write( myVar);

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[McKirahan]

"Randy Webb" <Hi************ @aol.com> wrote in message
news:yY******** ************@co mcast.com...

McKirahan wrote:

<ma**********@h otmail.com> wrote in message
news:10******** **************@ h37g2000oda.goo glegroups.com.. .

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.writ e? couldn't figure out how other components did it.
cheers
dave

Put the Java in a separate .js file.

<pedant>
Java != Javascript
</pedant>

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[i];
}

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[i];
}
document.write( myVar);

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

Well I did say "something like" :)

I actually meant to say what you did.

[Dr John Stockton]

JRS: In article <yY************ ********@comcas t.com>, dated Sat, 2 Oct
2004 10:08:49, seen in news:comp.lang. javascript, Randy Webb
<Hi************ @aol.com> posted :

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[i];
}
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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[Lasse Reichstein Nielsen]

Dr John Stockton <sp**@merlyn.de mon.co.uk> writes:

(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[i] = "hello world!";
}
var d1 = new Date()
var r1 = "";
for (i = 0; i < N; i++) {
r1 += arr[i];
}
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[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]

Lasse Reichstein Nielsen wrote:

Dr John Stockton writes:

(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.

<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]

ma**********@ho tmail.com wrote:

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.