where to find rules about punctuation in JavaScript dynamic table population

[murrayatuptowngallery]

Hello:

I previously posted a question about how to do populate an html table
dynamically with results from JavaScript Math and basic math. Dr Clue
responded and this started the learning curve. I think the terminology
for what I want to do is pass variables to the <td> 'workspace' (half
this statement might make sense).

The problem I am having is being overwhelmed with understanding the
context of each new statement, syntax etc.

I have had difficulty finding explanations of the use of proper
punctuation. I see for example, code with <td> and <tr> that also have
+ + surrounding what look like the desired variables.

Yet, obviously I am not understanding the proper usage because one of
two things happen; either a cut and pasted example was much more
complex than what I need and I can't get it running at all due to
missing parts, or I am buried with 'errors on page'.

Will html validation explain to me what heinous errors have been
committed?

I've looked at W3 std on the Web and books, and example after example,
but found little if any explanation of what the function is of each
punctuation element in these 'exotic' examples. I call them exotic
because I'm sure not finding them.

If posting a snip of code would be a better way to ask 'what's wrong',
I can do that.

One thing I think would work for me is simply a way to output
(document.write or whatever method) to a <td> "+ varname +" </td> kind
of thing. If I actually wrote something correctly, I didn't do it
consciously.

I've tried searching before posting, but obviously I'm looking for the
wrong thing or progress in my case is exceedingly slow.

Thank you
Murray

 

[Mick White]

Hello:

I previously posted a question about how to do populate an html table
dynamically with results from JavaScript Math and basic math. Dr Clue
responded and this started the learning curve. I think the terminology
for what I want to do is pass variables to the <td> 'workspace' (half
this statement might make sense).

The problem I am having is being overwhelmed with understanding the
context of each new statement, syntax etc.

[snip]
Look up "concatenation javascript".

"String surrounded by quotes" + variable +"Another string"

The "+" operator is overloaded in js, thus the context of the statement
dictates its function:

String + Number = String
"2"+2=="22"

Number + Number = Number
2+2==4

For example:
"2"+(2+2)=="24"
Number("2")+(2+2)==6 // convert String to Number
(2+2)+ +("2")==6 // using the "+" for the conversion +("2")

HTH
Mick

 

[murrayatuptowngallery]

I am still having trouble evolving to the next level of enlightenment.

I've resigned myself to doing my calculations by multiplying array
elements and opening a new window and doc.write to the screen for a
printout option separate from the original web page.

With that working pretty well, I tried to pass contents of variables to
a table as <td> </td>content based on example code, but each sample or
advise I've received has 'new' elements or implied function I am not
grasping, and despite me efforts to go read and understand the context
of the other methods, it's just not sinking in.

I thought it might be simpler to post what I am TRYING to do, and then
perhaps what is missing will be obvious.

Below is a simplified example. The actual stuff is messier, and reads
from an input form but this boils down the math & malfunctioning table
parts. I realize I can clean it up by using "with Math..." and maybe
some other simplification.

The problem seems to be that I am not properly "enabling" the variables
for the table data. That's the hard part (for me) of dissecting someone
else's code; if I don't know the rules for each 'functional part',
mimicking something gives unpredictable results.

I think the open-ended flexibility of DOM is where I am lost. I can't
tell what is infinitely possible and what has rigid rules.

Also, can one increment a counting element by 0.5 in a JS 'for'
statement? I tried in VB and it seemed to work there.

Thanks

Murray
---------------------
<html>
<body>

<script type="text/javascript">
var AAA = new Array(4)

AAA[0] = 0.1*Math.round(10*Math.log(32)/Math.log(2))
AAA[1] = 0.1*Math.round(10*Math.log(16)/Math.log(2))
AAA[2] = 0.1*Math.round(10*Math.log(8)/Math.log(2))
AAA[3] = 0.1*Math.round(10*Math.log(5.656)/Math.log(2))

for (i=0;i<AAA.length;i++)
{
document.write(AAA + "<br />")
}
</script>
<hr>
<table border="2">

<tr>
<td>AAA[0]</td>
<td>AAA[1]</td>
</tr>
<tr>
<td>AAA[2</td>
<td>AAA[3]</td>
</tr>
</table>

</body>
</html>

 

[Mick White]

I am still having trouble evolving to the next level of enlightenment.

I've resigned myself to doing my calculations by multiplying array
elements and opening a new window and doc.write to the screen for a
printout option separate from the original web page.

With that working pretty well, I tried to pass contents of variables to
a table as <td> </td>content based on example code, but each sample or
advise I've received has 'new' elements or implied function I am not
grasping, and despite me efforts to go read and understand the context
of the other methods, it's just not sinking in.

I thought it might be simpler to post what I am TRYING to do, and then
perhaps what is missing will be obvious.

Below is a simplified example. The actual stuff is messier, and reads
from an input form but this boils down the math & malfunctioning table
parts. I realize I can clean it up by using "with Math..." and maybe
some other simplification.

The problem seems to be that I am not properly "enabling" the variables
for the table data. That's the hard part (for me) of dissecting someone
else's code; if I don't know the rules for each 'functional part',
mimicking something gives unpredictable results.

I think the open-ended flexibility of DOM is where I am lost. I can't
tell what is infinitely possible and what has rigid rules.

Also, can one increment a counting element by 0.5 in a JS 'for'
statement? I tried in VB and it seemed to work there.

Thanks

Murray

<script type="text/javascript">
var AAA = new Array(4)

AAA[0] = 0.1*Math.round(10*Math.log(32)/Math.log(2))
AAA[1] = 0.1*Math.round(10*Math.log(16)/Math.log(2))
AAA[2] = 0.1*Math.round(10*Math.log(8)/Math.log(2))
AAA[3] = 0.1*Math.round(10*Math.log(5.656)/Math.log(2))

theTable='<table border="2"><tr><td>';
theTable+=AAA[0];
theTable+='</td><td>';
theTable+=AAA[1];
theTable+='</td></tr><tr><td>';
theTable+=AAA[2];
theTable+='</td><td>';
theTable+=AAA[3];
theTable+=</td></tr></table>;
document.write(theTable);
//or
document.write(AAA.join("<BR>"))

</script>

Mick

 

[murrayatuptowngallery]

Thank you, Mick.

One more question regarding the table format below. It is apparent that
yours has a totally different 'style' with more 'rules' than the most
primitive form I employed.

Is there a description of what structure your code conforms to?
Is it DOM? The ; at end of each line and the variation in = and += are
the kind of subtleties that have to be right and one will never get
right without grasping how it all goes together.

I bounce from one on-line tutorial to another and find that I'm
learning one command at a time but not the BIG picture.

It's analogous to being illiterate and wishing to read Shakespeare.
Figuring out how to build a learning curve is the next challenge.

I suppose if I needed it for work I could take training courses. For a
not-for-profit path, could you recommend any reading? It would be nice
if I could answer more of my own questions, so I would be the only one
hearing them repeated.

Thanks

Murray

 

[Mick White]

Thank you, Mick.

One more question regarding the table format below. It is apparent that
yours has a totally different 'style' with more 'rules' than the most
primitive form I employed.

Is there a description of what structure your code conforms to?
Is it DOM? The ; at end of each line and the variation in = and += are
the kind of subtleties that have to be right and one will never get
right without grasping how it all goes together.

a+=b
a=a+b
The expressions are equivalent, and are core javascript (part of the
language itself). The DOM is part of the browser, the DOM exposes
objects to javascript. (document, window etc.)


What I offered is a quick (and dirty) way of using js to write HTML. If
you are interested in the BIG picture, you need to familiarise yourself
with programming concepts - functions, parameters, scope, iteration etc.

The case that you present -stuffing array values into table cells- is
trivial, thus I offered a one-off solution.

I would approach the coding quite differently. I would look for a
*generic* way to accomplish the task at hand:

function stuffArrayValuesIntoTable(array,tableID){
//do stuff here
}

I try to avoid "document.write()" if I can, in favour of DOM techniques.

function stuffArrayValuesIntoTable(array,tableID){
if(!tableID){
// create a table
}
else{
var theTable;
if(theTable=document.getElementById(tableID)){//Table exists
if(array.length>0){//"array" looks like an Array
//do stuff with the table and array
}
}
else{//Flaky ID, or non-DOM browser
return;//exit function
}
}

For further reading:
http://www.mozilla.org/docs/dom/reference/javascript.html

Mick

I bounce from one on-line tutorial to another and find that I'm
learning one command at a time but not the BIG picture.

It's analogous to being illiterate and wishing to read Shakespeare.
Figuring out how to build a learning curve is the next challenge.

I suppose if I needed it for work I could take training courses. For a
not-for-profit path, could you recommend any reading? It would be nice
if I could answer more of my own questions, so I would be the only one
hearing them repeated.

Thanks

Murray

theTable='<table border="2"><tr><td>';
theTable+=AAA[0];
theTable+='</td><td>';
theTable+=AAA[1];
theTable+='</td></tr><tr><td>';
theTable+=AAA[2];
theTable+='</td><td>';
theTable+=AAA[3];
theTable+=</td></tr></table>;
document.write(theTable);
//or
document.write(AAA.join("<BR>"))

</script>

Mick

 

[murrayatuptowngallery]

Thank you