wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes 3 questions about javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "3 questions about javascript" Watch "3 questions about javascript" New topic

3 questions about javascript

colin shuker
Ranch Hand

Joined: Apr 11, 2005
Posts: 744
There are 3 things that I'm not clear about, hopefully someone can explain.

1) What is the difference between using

where initAll() is a function in the script tags that initalizes some data,
and just placing the same code (excluding function initAll(){...} )
at the top of the script tags(wouldn't this code get executed when the page is loaded anyway?)

2. Supposing you had some code in the script tags, or in a function in the script tags that was like...


Then, since after calling showTimer() for the first time, how does control
go back to the code after it, since showTimer() never finishes processing.

3. When calling a function from inside the body of the html page, for example...

We just write initAll(), but in other cases, like...

We write javascript: in front of the function.

What is the difference, and when do we need to use javascript:

Thanks for any help.
[ February 18, 2006: Message edited by: colin shuker ]
Jon Egan
Ranch Hand

Joined: Mar 24, 2004
Posts: 83

My JavaScript is rusty, so someone will come along and correct me, but maybe I'll get one of these right, and it will save them typing. Here are my understandings:

1. difference between a <body onload...> event handler, and code in a script tag that's not part of a function:

the onload event fires after the page has fully loaded.... while the "outside a function" script can run as soon as it has loaded (doesn't wait for the rest of the document). So, if the script depends on the page loading (for example, it references some form element to give it focus), it should be in the body tag's onload event handler.

2. How does control ever get back from the call to "showTimer()" in your example?

The call to setTimeout() is asynchronous - meaning that the control flow of your script continues, after starting a new thread - in that new thread, after 1000 ms, the function will be called again, run straight through to completion (including kicking off another new separate thread to run the function again), and finish normally.

It sounded like you were thinking of this as a recursive call - where the same thread would call the function again before finishing the first run of the function, and wait for that second call to complete before continuing with the first... but then, that second invocation of the method would call it a third time, which would call it a fourth time.... and each function call wouldn't finish until the call it made returned.... which would be never.

If you had the call in showTimer() directly inside showTimer() (and not by way of setTimeout()), that's exactly what you would have. You also would have a stack overflow, at some point... there's only finite memory set aside for the call stack, and you would eentually run out.

3. When do we need to use "javascript:", and when can we just give the name of the method?

I dunno - I don't think you need the "javascript:" before the method call in your second case. The "onnClick=" is already an event handler...

The only place I can remember using "javascript:" like that was in the HREF of a link... it went something like this:

Hope this helps,
-- Jon
[ February 18, 2006: Message edited by: Jon Egan ]
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 60765

1. the onload handler is not called until after the page has loaded, so all elements on the page have been created.

2. The timeout calls are called asynchronously and do not block main-line code.

3. You do not use the javascript: pseudo-protocol in onclick attributes as you have shown. It is only used where URL's are expected, such as the href attribute of anchor tags.

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 60765

CLANG! <bumping heads>
colin shuker
Ranch Hand

Joined: Apr 11, 2005
Posts: 744
Thanks, Jon's explanation of no2 made sense.
The setTimeout() starts the new thread, and without it, you would
run of memory before returning back to the code again.

I didn't know you could use javascript inside a HREF.
So I guess this means, clicking on a word or image triggers a function.
Which is why you need to say javascript:, so it knows to look for a
function, not an address.(Is that right?)

I've been using onclicck to trigger functions, so I guess thats just
another way of doing it.
Jon Egan
Ranch Hand

Joined: Mar 24, 2004
Posts: 83
Bear: ouch, my head hurts!

Colin: yep, think of the 'javascript:' in "A href='javascript:someScript()'" as the protocol - like 'http:'

-- Jon
colin shuker
Ranch Hand

Joined: Apr 11, 2005
Posts: 744
While I'm still rambling, I thought I would ask this question again.
I still haven't been able to figure it out.

I basically have a big table, with 81 cells in.
Each cell has an ID, and when it's clicked on, a function is called, to
change the cells value using...

But in my html page body, there are 81 lines of code, pretty much
exactly the same, except the ID numbers are different

I wanted to put this into a script, then use a couple of for loops
to display the tables cells.
Its hard work modifying 81 lines at a time, especially when I'm sure
it can be done with 1 line.

For now, all I want to do is... in the body of my page, inside a script,
use the code...

To output the element with ID="XXX" to the screen.

If (inside same script) I try to set element using...

It still doesn't work.

This has something to do with it not existing yet, but I've tried lots
of ways to get it to work, and still no output.
Can anyone help? Thanks
Jon Egan
Ranch Hand

Joined: Mar 24, 2004
Posts: 83
Sounds like a job for the "body onlload" event handler we discussed earlier in the post... have the document.write() calls in a script, outside any function, so they are run as they are encountered. Then, have the function call that references the objects in the onlload event....

if that doesn't work, maybe combine that with setTimeout()? meaning, have the onload event call functionA, which has only 1 line - a call to setTimeout(functionB, 2000), so the order of things is:

page loads partially
document.writes happen
page loads more (maybe?)
some objects created with document.write come into "existence" in the DOM
page finishes loading
functionA is called
rest of objects created with document.write come into "existence" in the DOM
functionB call is evaluated

That's a real stretch though, not very clean code at all... what if someone else's browser takes 3000ms to evaluate those document.write()s?

-- Jon
colin shuker
Ranch Hand

Joined: Apr 11, 2005
Posts: 744
I don't beleive it!!!
I tried your first method and it worked.
But, I'm sure that was exactly what I tried before, and it never worked.

I must have been doing something wrong.
Anyway, I'm gonna try and reduce those 81 lines of code that produces
the table, using some for loops.

Thanks again
[ February 20, 2006: Message edited by: colin shuker ]
colin shuker
Ranch Hand

Joined: Apr 11, 2005
Posts: 744
I'm annoyed now

I've managed to get rid of my 81 lines of almost identical code,
and replace it using for loops and document.write(...) statements.
An example below shows the case for the first cell

Clicking on the tables cells, triggers the setColor() function
(This is needed to change the cells color)

This does get called, because I have an alert message as the first line of code in the function.
But the problem is, the cells color wont change.
The code I'm using to do this for the first cell is

where #S0 is declared in the style tags.

Peviously, when I had the 81 lines of code outside any script tags,
calling setColor(...) would work fine, but now that I have put the table cells inside a script, it doesn't want to change color again.

Any ideas how to fix this would be great.
If not I suppose I will just have to go back to using all those lines of code.

Thanks for any help
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15376
Play with this (wrote it here without testing)...

colin shuker
Ranch Hand

Joined: Apr 11, 2005
Posts: 744

Have a beer on me, I tried your code with the table written outside
of any script tags, and it worked. Then I tried it inside the script tags,
and it still works.

I'll have to modify my previous page somewhat, but I can't foresee, any
more difficulties with this part.

Thanks for your patient and effort
I agree. Here's the link: http://aspose.com/file-tools
subject: 3 questions about javascript
Similar Threads
JSP variable typical problem
Variable Example
How to avoid page reload
onclick as a replacement for onsubmit