greenflame wrote:
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?
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.
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?
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.
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?
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.myphysicslab.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><title>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.getElementById(el);
var oT = document.createElement('table');
var oTB = document.createElement('tbody');
var i, j, r=m.length, c=m[0].length;
var oTR, oTD;
for ( i=0; i<r; i++ ){
oTR = document.createElement('tr');
j = c;
for ( j=0; j<c; j++ ){
oTD = document.createElement('td');
oTD.appendChild( document.createTextNode( 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.getElementById( el );
while ( el && el.childNodes.length ) {
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:<input type="text" name="rows" size="3" value="4" ></td>
<td>cols:<input type="text" name="cols" size="3" value="4" ></td>
<td>max:<input 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' );
"> <input type="reset" onclick="
clearContent( 'mDiv' );
"></td>
</tr><tr>
<td colspan="4"><div id="mDiv"></div></td>
</tr></table>
</form>
</body></html>
--
Rob
