/prog/ - Javascript - Tables

Name: Anonymous 2011-03-02 23:14

Hey, haven't been to this board before. Anyway, getting into Javascipt... And I'm trying to populate a table with the numbers 1-10, their squares, and cubes. Can someone please help me out?

What I have so far:

<script type="text/javascript">

</script>

With this in <body>:

<table id="num_table" border="5" width="50%"
   summary="Numbers, Their Squares & Cubes">
   <thead>
      <tr>
   <th>Number</th>
   <th>Square</th>
   <th>Cube</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>

Tried writing the script a few different ways with no luck. Didn't really want to use variables to insert rows/cells but most of the examples I've seen do it, so eh... Thanks in advance!

Name: Anonymous 2011-03-02 23:41

Read SICP.

Name: noko 2011-03-03 7:05

Use CoffeeScript instead. At least you wouldn't vomit.
also your script works for me. So make sure to disable noscript.
also code tag
also innerHTML considerd harmful.
use new_cell.appendChild(document.createTextNode(number));
instead

also move



var table_ref = document.getElementById('num_table');

out of loop.

Name: Anonymous 2011-03-03 7:22



table_ref = document.getElementById('num_table')



[1..10].forEach (x) -> 

  row = table_ref.insertRow(-1)

  [x, x*x, x*x*x].forEach (val) ->

    cell = row.insertCell(-1)

    cell.appendChild(document.createTextNode(val))

That's why coffeescript superiour, easy and elegant. Bump because everyone must see.

Name: Anonymous 2011-03-03 7:31

>>4
SIDE EFFECTS EVERYWHERE

Name: Anonymous 2011-03-03 10:47

>>3
>>4
Thanks anons! Checked out coffee script and it does seem really oool. I have to learn javascript for the class I'm taking but I will definitely still give it a try - and probably stick with it after I'm done with my class. Seems like it could even serve as a good learning tool for js - comparing the coffee script source with the compiled js code.

Name: Anonymous 2011-03-03 10:48

>>4
Wow! This could be replaced with a single line



[1..10] |> map {x -> map createTextNode [x x^2 x^3]}

Name: Polecat kebabs 2011-03-03 10:53

>>7
Do not reply to this ``In Lisp" guy, he's trolling you. Thank you.

Name: Anonymous 2011-03-03 10:55

>>8
Nice. Don't argue with me, because I'm right.

Name: Anonymous 2011-03-03 10:57

>>8
Fuck off, ``COMPUTER NGGER''.

Name: Anonymous 2011-03-03 12:21

>>8
What do you mean? What I see in >>7 is PERL CODE. VALID PERL CODE!!!

Name: Anonymous 2011-03-03 12:26

>>7
You mean, this:



add  = (p, c) -> c && p.appendChild c; p

el   = (t, v) -> add document.createElement(t), v

row  =        -> el 'tr'

cell = (x)    -> el 'td', document.createTextNode x



[1..10].map (x) -> ([x, x*x, x*x*x].map cell).reduce add, row()

Or this:



function add(p, c) { c && p.appendChild(c); return p }

function el(t, v)  { return add(document.createElement(t), v) }

function row()     { return el('tr') }

function cell(x)   { return el('td', document.createTextNode(x)) }



[1,2,3,4,5,6,7,8,9,10].map(function(x) { return [x, x*x, x*x*x].map(cell).reduce(add, row()) })

Because I fail to see how Lisp is relevant in a JavaScript thread... oh wait, IHBT

Name: Anonymous 2011-03-03 12:41

Don't listen to the fucktards who say "lawl uez coffee script". It doesn't add anything new and it only bloats your code. Learn to understand how JavaScript works. JavaScript is a powerful functional programming language disguised as a pile of garbage. People hate it because everyone is too dumb to bother trying to understand it. I am a LISP programmer and I'm saying this.

num_table = document.getElementById("num_table");



for (i=0; i<10; i++) {

  new_row = num_table.insertRow(-1);

  new_row.inserCell(-1).innerHTML = i;

  new_row.inserCell(-1).innerHTML = i*i;

  new_row.inserCell(-1).innerHTML = i*i*i;

}

Name: Anonymous 2011-03-03 13:10

Hey. I'm >>13
Actually, I didn't answer your question.

>>1
Despite the fact that it's ugly, your code actually WORKS. The problem is WHEN it works.

When you write a script in a <script> element in the <head>, the script is executed the moment the head is loaded. By that time, the body would not have been loaded yet. That means that the table you're looking for still does not exist, so the script fails to find it.

In order to make the script work after the whole document has been loaded, you have to use the onload event. Like this:

onload = myFunction;

Where myFunction is the function you want to run when the onload event occurs. You can do this in multiple ways. For starters:

<html>

<head>

<script>

function myFunction() {

  num_table = document.getElementById("num_table");

  

  for (i=0; i<10; i++) {

    new_row = num_table.insertRow(-1);

    new_row.inserCell(-1).innerHTML = i;

    new_row.inserCell(-1).innerHTML = i*i;

    new_row.inserCell(-1).innerHTML = i*i*i;

  }

}





onload = myFunction;



/*

Notice how we DIDN'T use () after the function's name,

because that would call it right away. We don't want to CALL

the function; we just want to TELL its name to the onload event

so it can call it when the time comes.

*/



</script>

</head>

<body>

<table id="num_table"></table>

</body>

</html>

Personally, I wouldn't like to have a named function if I'm only gonna use it once. I'd use an anonymous function instead:

onload = function() {

  num_table = document.getElementById("num_table");

  

  for (i=0; i<10; i++) {

    new_row = num_table.insertRow(-1);

    new_row.inserCell(-1).innerHTML = i;

    new_row.inserCell(-1).innerHTML = i*i;

    new_row.inserCell(-1).innerHTML = i*i*i;

  }

}

This is effectively the same as creating a named function and using its name.

There's one more thing left. The onload event actually doesn't occur until the ENTIRE document is loaded, including all the stylesheets and images; not just the HTML file. If you want the script to run right after the HTML document has been loaded, well, you can, but I'd recommend using jQuery. jQuery is a library that will make your web programming a much more pleasant and effective task.

http://jquery.com/

Note that in order to be a powerful JavaScript programmer, you have to master a lot of things. You have to understand how the JavaScript parser works. You have to understand the DOM (Document Object Model). Google is your friend.

Good luck.

Name: smoke coffeescript everyday 2011-03-03 13:11

>>13

fuck you faggot

Name: Anonymous 2011-03-03 13:19

>>14
jQuery < short.js



doc=document

doc.id=doc.getElementById

doc.cls=doc.getElementsByClassName

doc.tag=doc.getElementsByTagName

doc.elm=doc.createElement

doc.txt=doc.createTextNode



// etc...

Name: Anonymous 2011-03-03 13:20

>>13 forgot to say: Such is the elegance of JavaScript.

We all have been trolled.

Name: Anonymous 2011-03-03 13:25

>>16
Nice troll. Made my day.

Name: VIPPER 2011-03-03 13:27

>>15
ANUS AND AUTISM!!!! Read SICP and then use JavaScript. JavaScript is the one and only language!! etc. etc.

Name: Anonymous 2011-03-03 13:31

Today, I was trolled on /prog/ and IMMD

Name: Anonymous 2011-03-03 13:44

>>14
That's what I was missing - how loading affects the script. After writing it ~10 different ways, double checking everything and still having it not work I couldn't figure out what was wrong still. Haha, thank you. And thanks everyone for your suggestions.

Name: Anonymous 2011-03-03 14:22

>>21
You're welcome.

Name: Anonymous 2011-03-03 18:16

>>13
Actually, CoffeeScript and JavaScript are almost the same. Except CoffeeScript uses the ``faggot'' style aka Crockford's style, where JavaScript is more flexible.

Though, CoffeeScript allows you to write in a syntax closer to Lisp, and has a whole lot better syntax for anonymous functions.

(reduce strconcat (map capitalize (list "title1", "title2", "title3")))

>>1
Don't listen to >>14 where he tells you to use an onload event. You should mostly NEVER include script tags on the <head>, include them at the end of the <body> tag instead.

This way you:
1) don't need an onload event because all of the DOM has been already loaded and parsed.
2) don't block the page and resource loading, because the browser downloads scripts synchronously.

Name: Anonymous 2011-03-04 0:01

>>14
Each time you write "innerHTML" God kills a kitten.

it only bloats your code.
produced code. Proper closures in javascript are bloated already



(function(_i) {

    return function() {

      return alert(_i);

    };

  })(i);

Too lispy for anyone's taste.
>>13
It doesn't add anything new and

>> 24
where JavaScript is more flexible.
Everything what is possible in javascript is possible in coffeescript. But with lesser headache. That's why it's more awesome than threesome with south korean twins.

Name: Anonymous 2011-03-04 15:46

>>1
Your lack of [code] tags disturb me.

Name: Anonymous 2011-03-06 17:02

>>25
Your lack of [code] tags disturb[b]s[/]b me.

lrn2grammar