why does the script crash IE?

[greenflame]

First of all I only have IE for testing.

Ok. I have a script that is supposed to show, not evaluate, the
indefinite integral of something. When I run the script it just craches
IE. I have tried to get all the obvious bugs out... Um... The script is
at: http://ali.freezope.org/idf test and what it is supposed to show is
at: http://ali.freezope.org/idf result

[RobG]

Re: why does the script crash IE?

greenflame wrote:[color=blue]
> First of all I only have IE for testing.
>
> Ok. I have a script that is supposed to show, not evaluate, the
> indefinite integral of something. When I run the script it just craches
> IE. I have tried to get all the obvious bugs out... Um... The script is
> at: http://ali.freezope.org/idf test and what it is supposed to show is
> at: http://ali.freezope.org/idf result
>[/color]

Post URL's thusly:

<URL:http://ali.freezope.org/idf result>

especially if you have spaces in the URL.

You should probably warn users explicitly to turn of JavaScript before
they click on the link if JavaScript is the cause of the 'crash'. The
browser doesn't crash, you send it into a never-ending loop in your
indefiniteinteg ral() function.


function indefiniteinteg ral(input,mainl ine,differentia l) {
var dummy;
var output = copy2darr(input );
dummy = output.unshift( new Array(output[0].length));
dummy = output.push(new Array(output[0].length));


Why assign some number to the variable 'dummy', then overwrite it, then
do so again below?

for (var i=0;i<output.le ngth;i++) {
-----------------^^^^^^^^^^^^^

Here the value of output.length is evaluated every loop. This is slow
and, in this case, creates an infinite loop. Use a variable to store
the value of output.length (it will also slightly speed up your loop):

for (var i=0, len=output.leng th; i<len; i++) {


if (i == 0) {
dummy = output[i].unshift("<font face=symbol>&#2 43;</font>");
dummy = output[i].push(" ");


Don't use such outdated HTML - use span elements, preferably using DOM
rather than document.write. And create a class so you don't have
numerous style declarations:

dummy = output[i].unshift('<span style="font-family:symbol"> '
+ '&#243;</span>');

or, if using CSS and classes, have a style declaration in the head:

<style type="text/css">
.sym { font-family: symbol; }

then:

dummy = output[i].unshift('<span class="sym"> + '&#243;</span>');


} else if (i == mainline) {
dummy = output[i].unshift("<font face=symbol>&#2 44;</font>");
dummy = output[i].push(different ial);
} else if (i == output.length-1) {
dummy = output.unshift( "<font face=cymbol>&#2 45;</font>");
--------------^^^^^^^^^

Here you are putting stuff into output and making it longer while your
for loop is trying to catch up - it never will . You also have a fault
in the depreciated font tag - I think you want 'symbol', not 'cymbol'.


dummy = output[i].unshift("<font face=cymbol>&#2 45;</font>");


dummy = output[i].push(" ");
} else {
dummy = output.unshift( "<font face=symbol>&#2 44;</font>");
--------------^^^^^^^^^

And the same here.

dummy = output[i].push(" ");
}
}
return output;
}


Fixing the above mostly fixes your output, but not entirely for me.


Other comments:

* In your copy2darr() function, the line:

var output = new Array(input.len gth);

can be replaced with:

var output = [];

* The depreciated 'font' element at the start of your file should be
replaced with either a span, pre or code element:

<font face="courier new"> ... </font> becomes:

<pre> ... </pre>

* All of those lines with:

if (input == "del") {output = "<font face=symbol>&#2 09;</font>"}

can be replaced by creating the following variables at the start of the
function:

var fOn = '<font face="symbol">'
var fOf = '</font>'

then use:

if (input == "del") {output = fOn + '&#209;' + fOf }


You really should be using span elements with CSS, but I don't know the
appropriate font-family to replace symbol - try in:

comp.infosystem s.www.authoring.stylesheets


--
Rob

[RobG]

Re: why does the script crash IE?

RobG wrote:[color=blue]
> greenflame wrote:
>[/color]
[...][color=blue]
>
> Other comments:[/color]

Modify your convert() function as follows:

function convert( inVal ) {
var sOn = '<font face="symbol">'
var sOf = '</font>'

if (inVal == undefined){ return "&nbsp;" }
if (inVal == "hyf") {return "—" }
if (inVal == "vA" ) {return "<b>A</b>" }
...
...
...
if (inVal == "]b") {return sOn + '&#251;' + sOf}
}

Your sequential if's will test every single 'if' every single time.
Modifying the script as above will return to the calling function as
soon as the match is found.

It is also pointless to copy 'input' to 'output' when 'output' is not
modified in any way - it's just used in the test.


--
Rob

[Lasse Reichstein Nielsen]

Re: why does the script crash IE?

RobG <rgqld@iinet.ne t.auau> writes:
[color=blue]
> Post URL's thusly:[/color]
[color=blue]
> <URL:http://ali.freezope.org/idf result>[/color]

Preferably as a valid URL (without spaces):
<URL:http://ali.freezope.or g/idf%20result>
[color=blue]
> <font face=symbol>&#2 44;</font>[/color]

While this is the correct form of what the original poster is trying
to do, it is still not the correct way to do it.

The entity &#244; represents the Unicode character with code point
244, i.e., ô (also known as &ocirc;, an o with a circumflex accent).
It is then attempted rendered in the font "Symbol". The problem is
that that font does not contain a glyph for o-circumflex.

Earlier, when Unicode was not as widespread and everything worked
using 8-bit encodings, the glyphs of the Symbol font was mapped to
8-bit values, so rendering the byte 244 in that font would give
the 244th entry of the font file. Those days are over. Modern
font-aware programs, browsers included, will not render &#244;
in the symbol font, but will fall back on the next font specified
in a font tag, or the browser's default font.

There is no Unicode codepoint representing "the top third of an
integral sign", because Unicode represents entire symbols only.
The integral sign can be written as &#8747 or &#int;. I recommend
something like:

<p style="line-height:300%">
<span style="font-size:300%;verti cal-align:middle;"> ∫</span>x dx
</p>

The exact vertical alignment is a little hard to get right across
browsers.


(read more about symbols in HTML here:
<URL:http://www.w3.org/TR/WD-entities-961125>)

The encoding of the page is not specified by either the page itself or
the server, so the browser must guess. I can see that my browser
guesses "windows-1252". You should specifiy an encoding, preferably
from the server, but if not, as an element of the page:
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-15">

Follow-up set to comp.infosystem s.www.authoring.html, since this
is about HTML, not javascript.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[greenflame]

Re: why does the script crash IE?

So you think that every where I have:

"<font face=symbol>" +...+"</font>"

I should replace it with:

"<span class=sym>+...+ "</span>"

while puting:

<style type="text/css">
.sym { font-family: symbol; }
</style>

in the <head>? And the same idea for when I use:

'<font face="courier new">'+...+'</font>'?

Or do You think I should use the sOn and sOf idea?

Also making an undefined array (eventhough I know its length) and
filling it is faster/better than making an array of defined length and
filling it? If so then how?

Also you said to use DOM instead of document.write. How do I do this?
You also suggest using span elements with CSS. How does this work?

[RobG]

Re: why does the script crash IE?

greenflame wrote:[color=blue]
> So you think that every where I have:
>
> "<font face=symbol>" +...+"</font>"
>
> I should replace it with:
>
> "<span class=sym>+...+ "</span>"
>
> while puting:
>
> <style type="text/css">
> .sym { font-family: symbol; }
> </style>
>
> in the <head>? And the same idea for when I use:
>
> '<font face="courier new">'+...+'</font>'?
>
> Or do You think I should use the sOn and sOf idea?[/color]

I think you should replace the <font...> stuff with spans.

One way of doing that is to simply replace the <font...> strings in your
code with <span...> strings.

A more efficient way of doing it is to store the <span...> string in a
variable with a short name (e.g. sOn, sOf) and use the variable in place
of the string in your code.
[color=blue]
>
> Also making an undefined array (eventhough I know its length) and
> filling it is faster/better than making an array of defined length and
> filling it? If so then how?[/color]

Better? Yes.

Faster? For all practical purposes, no. There have been recent
discussions about different ways to create arrays and about setting a
length without filling all (or any) values - 'sparse' arrays.

Consider:

var a = []; - and - var a = new Array();

The first method is less code with fewer keystrokes so less chance of an
error. The cleaner code is easier to read and debug, and when compared
with your:

var a = new Array( x[0].length );

the difference is further highlighted. The two are essentially the same
(the time taken for the extra lookup for x[0].length is insignificant as
a one-of event). The only difference is that an array declared with a
length will have one, whereas one declared without a length won't -
which is of no practical value in your case.

Use var a = [] wherever possible and reasonable, which is nearly always.
[color=blue]
>
> Also you said to use DOM instead of document.write. How do I do this?
> You also suggest using span elements with CSS. How does this work?
>[/color]

Here is a link to a site about using HTML for equations. It also has
some good links and tables with character entities that you'll likely
want to use.

<URL:http://www.myphysicsla b.com/web_math.html>

I think you need to create functions that output various objects - a
matrixOutput function could take a matrix as input and generate the
required DOM objects. Other functions could display one and two line
(e.g. 2x+4 / 3y+3) equations. Then extend it to integrals, sums, etc.

Below is my version of a showMatrix() function. The random array
generator just truncates decimals, so if 'max' is set to 10, the biggest
number is 9 and smallest is -9 (max=100 gives -99 to +99, etc.).

It's just an example, it does no feature detection, it just assumes
support for getElementById, createElement and style. It also assumes
the matrix is rectangular (which includes square).

It doesn't validate input from the form when generating the matrix - the
script in the form button should probably be a separate function that
does appropriate validation, but hey, waddayawant fer free! :-)

Tested in Firefox and IE.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><ti tle>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">

// Array of n +ve & -ve integers of less than max value
function genRandomArray ( n, max ) {
var x = [];
while ( n-- ) {
x[n] = ( (Math.random()-0.5)*2*max ) | 0;
}
return x;
}

// Matrix of r arrays using genRandomArray( c, max )
function genRandomMatrix ( r, c, max ) {
var i, X = [];
while ( r-- ) {
X[r] = genRandomArray( c, max );
}
return X;
}

// Show m in a table inside element with id el
function showMatrix( m, el ) {
var el = document.getEle mentById(el);
var oT = document.create Element('table' );
var oTB = document.create Element('tbody' );
var i, j, r=m.length, c=m[0].length;
var oTR, oTD;
for ( i=0; i<r; i++ ){
oTR = document.create Element('tr');
j = c;
for ( j=0; j<c; j++ ){
oTD = document.create Element('td');
oTD.appendChild ( document.create TextNode( m[i][j]) );
oTR.appendChild ( oTD );
}
oTB.appendChild (oTR);
}
oT.appendChild( oTB);
el.appendChild( oT);
}

// Removes all children of element with id el
function clearContent( el ) {
el = document.getEle mentById( el );
while ( el && el.childNodes.l ength ) {
el.removeChild( el.firstChild );
}
}

</script>
<style type="text/css">
#mDiv { font-family: courier; font-size: 90%;}
#mDiv table {
border-left: 2px solid black;
border-right: 2px solid black;
border-collapse: collapse;
padding: 0; margin: 0;
}
#mDiv td {
text-align: right;
padding: 0 2ex 0 1ex;
white-space: nowrap;
}
</style>
</head><body>

<form action="">
<table><tr>
<td>rows:<inp ut type="text" name="rows" size="3" value="4" ></td>
<td>cols:<inp ut type="text" name="cols" size="3" value="4" ></td>
<td>max:<inpu t type="text" name="max" size="3" value="10"></td>
<td><input type="button" value="Show random matrix" onclick="
clearContent( 'mDiv' );
var f = this.form;
var r = f.rows.value;
var c = f.cols.value;
var m = f.max.value;
showMatrix( genRandomMatrix ( r, c, m), 'mDiv' );
">&nbsp;<in put type="reset" onclick="
clearContent( 'mDiv' );
"></td>
</tr><tr>
<td colspan="4"><di v id="mDiv"></div></td>
</tr></table>
</form>

</body></html>


--
Rob

[Dr John Stockton]

Re: why does the script crash IE?

JRS: In article <ddoBe.2501$Zn. 115695@news.opt us.net.au>, dated Thu, 14
Jul 2005 07:10:01, seen in news:comp.lang. javascript, RobG
<rgqld@iinet.ne t.auau> posted :[color=blue]
>
>// Array of n +ve & -ve integers of less than max value
>function genRandomArray ( n, max ) {
> var x = [];
> while ( n-- ) {
> x[n] = ( (Math.random()-0.5)*2*max ) | 0;
> }
> return x;
>}
>[/color]

While ISTM that does what it says, the middle value (zero) is about
twice as common as any of the others; ISTM worth noting, lest otherwise
be assumed. Try

A = genRandomArray( 2000, 4)
B = [0,0,0,0,0,0,0,0 ,0]
for (J in A) B[A[J]+4]++
B // result.

It might be better to use the FAQ method with an argument of (?) 2*max-1
and subtract (?) max-1, if an even distribution is desired.

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

[greenflame]

Re: why does the script crash IE?

Umm.... ok I will do some work on the suggestions. Also I cant seem to
be able to star this thread. How do I get to do this? (I am using
Google Groups Beta)

[RobG]

Re: why does the script crash IE?

Dr John Stockton wrote:[color=blue]
> JRS: In article <ddoBe.2501$Zn. 115695@news.opt us.net.au>, dated Thu, 14
> Jul 2005 07:10:01, seen in news:comp.lang. javascript, RobG
> <rgqld@iinet.ne t.auau> posted :
>[color=green]
>>// Array of n +ve & -ve integers of less than max value
>>function genRandomArray ( n, max ) {
>> var x = [];
>> while ( n-- ) {
>> x[n] = ( (Math.random()-0.5)*2*max ) | 0;
>> }
>> return x;
>>}
>>[/color]
>
>
> While ISTM that does what it says, the middle value (zero) is about
> twice as common as any of the others; ISTM worth noting, lest otherwise
> be assumed. Try
>
> A = genRandomArray( 2000, 4)
> B = [0,0,0,0,0,0,0,0 ,0]
> for (J in A) B[A[J]+4]++
> B // result.
>
> It might be better to use the FAQ method with an argument of (?) 2*max-1
> and subtract (?) max-1, if an even distribution is desired.[/color]

Yes, my algorithm was quick 'n dirty, I didn't realise that it was not
evenly distributed. The one I've settled on is:

x[n] = ((Math.random() *(2*max+1)) | 0 ) - max;

Provides a distribution from -max to +max inclusive that should be
about as random as Math.random().

Values must be truncated before 'shifting', otherwise all values
between -1 and +1 become zero, doubling its representation.

var A = genRandomArray( num, max )
var B = [], i = max*2+1;
while(i--){B[i]=0;}
for (J in A) B[A[J]+max]++;
B; // result

:-)

--
Rob

[greenflame]

Re: why does the script crash IE?

So using the DOM method I must use a table? Also it seems like each
'tag' is now like a object. Is this right? Also I dont see how this is
any better than document.write( ).

[RobG]

Re: why does the script crash IE?

greenflame wrote:[color=blue]
> So using the DOM method I must use a table?[/color]

No, I chose to use a table as it's a convenient element to use for
displaying a matrix. You could do it as a bunch of DIVs or maybe
mono-spaced text with padding, but that's too hard as far as I'm
concerned - using at table it's a snap.
[color=blue]
> Also it seems like each 'tag' is now like a object. Is this right?[/color]

Tags exist only in the source HTML. When your browser parses HTML, each
'tag' is turned into an element, which behaves like an object. The
elements make up the Document Object Model - DOM.

You can consider the HTML as set of plans for making a document. When
the HTML is read by a browser, it builds elements based on the HTML's
instructions. The browser could be fed any document language that it
understands (say XML, Postscript, SGML) to build a document from.

The idea of using DOM is that you can manipulate the document without
regard for the underlying markup language. Since most browsers only
understand HTML, many programmers use document.write or innerHTML, but
they are limited.
[color=blue]
> Also I dont see how this is any better than document.write( ).[/color]

DOM is language and platform neutral. You don't have to worry about
language semantics - have you got matched tags? Are they properly
nested? Do you have end tags where needed? etc.

Using document.write anytime after the document has finished loading
replaces the entire content of the document every time you use it.

Your code so far is based on doing things as the document loads, but
eventually you'll want to do things at other times and not destroy your
document content in the process. Try replicating the sample page I
provided using document.write.

As you are manipulating tables, your options with innerHTML are reduced
as IE won't let you replace part of a table with innerHTML, only the
entire table or the content of a cell. It's behaviour is also
inconsistent across browsers for different element types - it has no
public specification so knowing who is right and who is wrong is moot.

And you still have the issue of generating properly formed HTML.

So use DOM.


--
Rob

[RobG]

Re: why does the script crash IE?

RobG wrote:
[...][color=blue]
>
> DOM is language and platform neutral. You don't have to worry about
> language semantics - have you got matched tags? Are they properly
> nested? Do you have end tags where needed? etc.[/color]

Just thought I'd better point out that you don't have to worry about tag
nesting but you do have to worry about element nesting. e.g.:

<p><span style="font-weight: bold;">here is some text</p></span>

The above is invalid HTML 4 (though most browsers will tolerate it).
Using DOM, it can't happen but using document.write or innerHTML it can.

Using DOM it is possible to create invalid document structure - say
create a div and put it inside a span, even though block elements aren't
allowed inside inline elements.


[...]


--
Rob

[greenflame]

Re: why does the script crash IE?

OK. So do you know of any websites (for beginners) I can goto to learn
about using DOM?

[RobG]

Re: why does the script crash IE?

greenflame wrote:[color=blue]
> OK. So do you know of any websites (for beginners) I can goto to learn
> about using DOM?
>[/color]

A reasonable place to start:

<URL:http://www.w3schools.c om/>

or

<URL:http://www.w3schools.c om/htmldom/default.asp>

It's a bit old and IE centric, but a useful introduction. Once you get
going, use this group's FAQ and searches through archives (sort the
results by date), you'd be amazed at what others have already written
for you.

:-)

--
Rob

[greenflame]

Re: why does the script crash IE?

I will give it ago. Thanks. :)