this page was generated(minutes/sec) in Java script [Archive]

Click to See Complete Forum and Search --> : this page was generated(minutes/sec) in Java script

JJudy

03-05-2003, 10:55 AM

Can anyone direct me to a script to do this ? I have looked all over...Maybe I dont know what Im looking for in terms of scripting.
I want a script that when the page loads it tells you " this page was generated in 1.29 sec " Or what ever it takes.

pyro

03-05-2003, 10:57 AM

I don't think javascript can do that. I believe you need a server side language....

JJudy

03-05-2003, 11:01 AM

I'm sure javasript can do it... But I have NO idea where to find the script for it..I looked in generators ...and No...
what do you mean by server side?

pyro

03-05-2003, 11:05 AM

I've never seen it done in javascript, but that doesn't mean it isn't possible.

Server side means a language that runs on the server. PHP or CGI/Perl two examples.

JJudy

03-05-2003, 11:10 AM

In my control panel ... I do have CGI/Perl . I'll have to look into that. Didnt think of that...cool..TY for the help.

Vladdy

03-05-2003, 11:16 AM

this may work but I never tested.

<head>
<script>
pageStart = new Date();

function pageDone()
{ renderingTime = new Date();
renderingTime = renderingTime.getMilliseconds() - pageStart.getMilliseconds();
alert('Page rendered in: ' + (0.001*renderingTime) + ' seconds');
}
</script>
....
</head>
<body onload="pageDone();">
....

JJudy

03-05-2003, 11:21 AM

TY TY TY .... if I could see you.Id give ya a big kiss and hug...
Thanks so much... :D

pyro

03-05-2003, 11:22 AM

That returns NaN...

Vladdy

03-05-2003, 11:23 AM

Try last edit LOL, had to fix a few typos

pyro

03-05-2003, 11:25 AM

Did that work for you JJudy? What browser? I tested in IE6 and NN7 and got NaN... :confused:

pyro

03-05-2003, 11:26 AM

Ah, yes. Works now. Good going... :D

JJudy

03-05-2003, 11:42 AM

am I to get the warning box ? this page rendered in NAN seconds ? What does that mean ?

Vladdy

03-05-2003, 11:47 AM

Yes you will get an alert box. If it displays NaN, you grabbed the code before I had a chance to edit the typos out. Try copy - paste again.

pyro

03-05-2003, 11:47 AM

No, I tested the code before Vladdy fixed the typo's so I was receiving a NaN error, rather than the time it took to generate the page.

khaki

03-05-2003, 11:53 AM

Hey that's pretty cool Vladdy!

I couldnt get it to work in IE (maybe there's somethings wrong with my IE? I gotta look into that), but it worked in Netscape (go figure. lol).

So that makes me wonder...

Do you think that all browsers read the page at the same speed? (for the same person with the same connection, etc)?
Or are some faster?
Anyone know if thats been determined?

curiouser and curiouser...
k

JJudy

03-05-2003, 11:53 AM

Originally posted by Vladdy
Yes you will get an alert box. If it displays NaN, you grabbed the code before I had a chance to edit the typos out. Try copy - paste again.

It looks like it's just is the header code isnt it ...
TY ....Both ...:-)

JJudy

03-05-2003, 12:14 PM

Originally posted by Vladdy
this may work but I never tested.

<head>
<script>
pageStart = new Date();

function pageDone()
{ renderingTime = new Date();
renderingTime = renderingTime.getMilliseconds() - pageStart.getMilliseconds();
alert('Page rendered in: ' + (0.001*renderingTime) + ' seconds');
}
</script>
....
</head>
<body onload="pageDone();">
....

IT WORKS !!!!!! HEHEHE ... Wowwwwwww what a guy ..
What is the best loading for a pge ? brain fart right now...:confused:

JJudy

03-05-2003, 09:46 PM

Originally posted by Vladdy
this may work but I never tested.

<head>
<script>
pageStart = new Date();

function pageDone()
{ renderingTime = new Date();
renderingTime = renderingTime.getMilliseconds() - pageStart.getMilliseconds();
alert('Page rendered in: ' + (0.001*renderingTime) + ' seconds');
}
</script>
....
</head>
<body onload="pageDone();">
....

Hi ... Vladdy .... is there anything I could do to this code to stop the box coming up..and have the code just view on the page ?
TY in advance ... for your help ..:)

khaki

03-06-2003, 08:25 AM

hi judy...

to have the function write the result to the page instead of generating the alert box,
just change the function as follows:

function pageDone()
{ renderingTime = new Date();
renderingTime = renderingTime.getMilliseconds() - pageStart.getMilliseconds();
document.write('Page rendered in: ' + (0.001*renderingTime) + ' seconds');
}

the only thing that is different is that "document.write" is being substituted for "alert".

that's a cool script isn't it Judy?
thanks vladdy!

snowed-in again (ugh)...
k

Vladdy

03-06-2003, 09:19 AM

It won't work with document.write - the function is executed after the document has loaded and adding the document.write will simply delete the page (replacing it all with the line that it was loaded in a certain time LOL)
The correct way is to use DOM:

<head>
<script>
pageStart = new Date();

function pageDone()
{ renderingTime = new Date();
renderingTime = renderingTime.getMilliseconds() - pageStart.getMilliseconds();
document.getElementById('loadingTime').firstChild.nodeValue=0.001*renderingTime;
}
</script>
....
</head>
<body onload="pageDone();">
...

<p>The document was loaded in <span id="loadingTime">0</span> seconds</p>

khaki

03-06-2003, 09:32 AM

pffffffftt!

good point.
i used document.write on a document that contained nothing else on the page
except for that function (duh!)

well... that's just another in a long string of javascript f-ups i've had this week.
time to read more and write less, i guess.
thanks for making the correction vladdy. it's an even cooler script now!

the red-faced javascript air-head...
k

JJudy

03-06-2003, 09:39 AM

Originally posted by Vladdy
It won't work with document.write - the function is executed after the document has loaded and adding the document.write will simply delete the page (replacing it all with the line that it was loaded in a certain time LOL)
The correct way is to use DOM:

<head>
<script>
pageStart = new Date();

function pageDone()
{ renderingTime = new Date();
renderingTime = renderingTime.getMilliseconds() - pageStart.getMilliseconds();
document.getElementById('loadingTime').firstChild.nodeValue=0.001*renderingTime;
}
</script>
....
</head>
<body onload="pageDone();">
...

<p>The document was loaded in <span id="loadingTime">0</span> seconds</p>

What a bunch of GREAT people you all are . I'm serious.
So Willing to help.
It's hard starting out and trying to learn code ... :confused:

khaki
Thank you so much for taking the time to help ... And you to
Vlady.
Just great bunch of people. TY so very much.

One Q ... I want it at the top of my page..so I dont need to Scrol down to see it ...
How do I do that ? Sorry ... I have been on liune trying to figure out a plain text box so I can put recipes in weekly ...and tips..so my brain is farting right now...:confused:
Sometimes I just don't know what things are named. I know how to make text boxes ... but looking for something different...

khaki

03-06-2003, 09:58 AM

Oh... Vladdy. You make me think! (sure... now I start thinking... lol)
(You've also got me using proper punctuation again, but that's another story)

So... question -

If I create a function which includes something like this:

document.getElementById('someID').firstChild.nodeValue="someVariable_orText";

...then I can pass that value to a span tag just by ID'ing it just like using <% someVar %> within
an ASP document?
(and if so... I'm just curious... what happens to the "0" that is originally between the span tags?
Just overwritten? Is it necessary at all?)

Thanks Vladdy for getting my brain working this morning.

snowed-in... but not under...
k

khaki

03-06-2003, 10:15 AM

Judy wrote:
I want it at the top of my page..so I dont need to Scrol down to see it ...
How do I do that ?

Hey Judy, it didn't work for you?

You should be able to do it exactly as Vladdy has just written it.
The span tag would go wherever you need it (plus, you could position it with CSS
if you preferred).

Give it another try and let me know what happens.

And on a side-note:
This script has really opened my eyes. I may have to become friendly with javascript
after all. Maybe I've been fighting it too much.
I LOVE THIS FORUM!!!

snow?... what snow?...
k

JJudy

03-06-2003, 10:24 AM

Originally posted by khaki
Hey Judy, it didn't work for you?

You should be able to do it exactly as Vladdy has just written it.
The span tag would go wherever you need it (plus, you could position it with CSS
if you preferred).

Give it another try and let me know what happens.

And on a side-note:
This script has really opened my eyes. I may have to become friendly with javascript
after all. Maybe I've been fighting it too much.
I LOVE THIS FORUM!!!

snow?... what snow?...
k

Is this the span tag ?


Do I write anyting in it ? or just place it where I want the time to display ?
OMG I am just learning this...my brain is on over ride...
I am trying to get everything in place correctly .... for champagne Ihave coming up .this week or next...so Im so pressed for time....and that doesnt help ...

Omg I love the stuff too...and this forum ..
please dont say that four letter word .. SNOW ...;) I am holding my breath in hopes it doesnt freeze my fruit trees.I want some fruit this year .... :cool:

Hey thanks so much for the help .... I do really appreciate it..But it makes me feel so :confused: at times ....but like you.all of a sudden it just clicks ...

khaki

03-06-2003, 10:35 AM

here Judy, the span tag is highlighted in bold.
Just place it in the location where you want it to appear.


<p>The document was loaded in <span id="loadingTime">0</span> seconds</p>

... and please! My fruit froze long ago... and I don't even own any trees! (lol).

known to use the occassional four letter word... including snow...
k

oh... on further edit...
This part:

is what they call "commented" text.
Anything between the  will not print to the page. It's used for internal documentation of your HTML scripts.

JJudy

03-06-2003, 10:43 AM

Originally posted by khaki
here Judy, the span tag is highlighted in bold.
Just place it in the location where you want it to appear.


<p>The document was loaded in <span id="loadingTime">0</span> seconds</p>

... and please! My fruit froze long ago... and I don't even own any trees! (lol).

known to use the occassional four letter word... including snow...
k

oh... on further edit...
This part:

is what they call "commented" text.
Anything between the  will not print to the page. It's used for internal documentation of your code and scripts.

I see now .... I thought that ..but not sure of it.

Well mine have frozen the past two years..I live in Southern Utah .... so it can get crazy here from time to time...
Me to for that matter....LOL
TY again ...now I go back in and fix it....

Vladdy

03-06-2003, 11:31 AM

Originally posted by khaki

So... question -

If I create a function which includes something like this:

document.getElementById('someID').firstChild.nodeValue="someVariable_orText";

...

In DOM Structure (you can use DOM Inspector in Mozilla, or this tool of mine (http://www.vladdy.net/webdesign/DOM_TreeViewer.html) to see it for yourself) span element has a text node as it's child. So after I retrieve the span element by it's ID, I access the text node (.firstChild) and then it's value - whatever text is there (.nodeValue). By changing the value of this text node, I replace whatever was there. If I wanted to append something, I would do +=

The reason I have it as <span id="blah">0</span> is that you need to have some text there for the text node to be created. If you left it just <span id="blah"></span> then there would be no text node and the script would have to be

document.getElementById('someID').appendChild(document.createTextNode('some text'));

When working with text, on most occasions I find it more convinient to do it the first way. However if you were to add an image, then creating it dinamically would be preferable (again in most cases). It really depends upon the task at hand.

JJudy

03-06-2003, 11:35 AM

Originally posted by JJudy
I see now .... I thought that ..but not sure of it.

Well mine have frozen the past two years..I live in Southern Utah .... so it can get crazy here from time to time...
Me to for that matter....LOL
TY again ...now I go back in and fix it....

HEY !!!!!!! It WORKED !!!!!!! hehehe
TY TY TY ....big smooches for all of ya .... :D

khaki

03-06-2003, 12:42 PM

A- I'm happy for Judy. Way to go girl!

B- Vladdy, your an apparent genius, can I tap into your brain just a little (please)?
(I did go to your site. I actually already had you bookmarked! The last time I was there
my brain almost exploded. lol).

Can you just explain one thing to me... 'cause I need to take this in baby steps.

Do you know how you have this:

document.getElementById('loadingTime').firstChild.nodeValue="someValue"

... well, it's the firstChild.nodeValue part that I'm wondering about because it seems to
establish the value that is associated with the ID'ed element.

See... I'm wondering since you can make one of those... then you should be able to make
more than one. And then you could assign different values to different ID'ed elements.

ok... so if I'm not completey wrong so far...

How do I write another one of these:
document.getElementById('IDnum1').firstChild.nodeValue="someValue"

I'll go ahead and embarrass myself by telling you that I tried:
document.getElementById('IDnum2').secondChild.nodeValue="someOtherValue"

(she pauses, as the entire forum bursts-out in laughter...)
But it didn't work .. for me. :rolleyes:

That's what I think I'd like to learn first. It seems very "ASP-like" (in a client-side kind of way)
and I think that I can wrap my head around the concept, if only I understood how to execute
it properly.

Am I making any sense as to what I'm asking for?
I can try to explain it another way if you need me to (I just don't want to do it unless I need
to... 'cause I post long enough posts as it is here).

I'd really appreciate the simplest explanation possibe if you wouldn't mind. My own knowledge in
this stuff comes in some rather drastic peaks and valleys. This is a pretty deep valley for me, i'm afraid.

Would you mind?
(i'm sure that others besides me might want to know too).

deep in snow and nodes up to my eyeballs...
k

Vladdy

03-06-2003, 06:32 PM

You need to understand the DOM structure, once you do navigating it becomes quite easy.
To begin with you need to understand that every tag makes a node (which has ELEMENT_NODE node type) and every sequence of characters between tags makes a node (TEXT_NODE type).
For example you have the following HTML markup:
<p id="someP">This is a paragraph with a <span>span element</span>and it has three children</p>
In DOM the paragraph node (which you can access using document.getElementById('someP')) has three children:
- text node which value is "This is a paragraph with a"
- span element node
- text node which value is "and it has three children"
You can access each node using the .childNodes array of the element node or you can use .firstChild and .lastChild (no secondChild).
So if you want to change the text "This is a paragraph with a" you do:
document.getElementById('someP')) .firstChild.nodeValue or
document.getElementById('someP')) .childNodes[0].nodeValue
Now the span element has the child of its own which is a text node which value is "span element".
So to change this text you would do:
document.getElementById('someP')) .childNodes[1].firstChild.nodeValue

;) Have I lost you yet??? :D

khaki

03-07-2003, 11:05 AM

No... you haven't lost me yet Vladdy (were you tryin' to? lol).

I think that I understand the "concept" of the DOM structure (I'm still
trying to figure out the particulars though), and being a last child myself
(also known as... "the Baby"), I think that I understand the hiearchy of it
and what you have explained here in your example... although I have
some serious head-cramps from doing it all before I've finished-off my
morning pot of coffee.
But... I've got some more questions... (pause) ... is that ok? (well, I'm
gonna ask as though it is ok, and if it's not... well, I don't know. Just
ignore me, I guess).
(but please don't - this is really interesting and I'm trying to figure out
how I could implement this ability into the type of work that I do).

OK... so in your example:
<p id="someP">This is a paragraph with a <span>span element</span>and it has three children</p>

... I understand how to change the first part of the text with:

document.getElementById('someP').childNodes[0].nodeValue

...and the last part of the text with:

document.getElementById('someP').childNodes[2].nodeValue

But what I don't understand is why I can't use:

document.getElementById('someP').childNodes[1].nodeValue

... to change the <span> part (is it because the span tag itself is
childNodes[1] and not the contents?)
Although I figured out to use:

document.getElementById('someP').childNodes[1].childNodes[0].nodeValue

... to accomplish that. (and actually, this is sort of conceptually similar to a
Javascript menu that I use which has sub-menus that are identified somewhat
similarly... so I'm not in completely unfamiliar surroundings with that concept).

Now I know that you used:

document.getElementById('someP').childNodes[1].firstChild.nodeValue

... to do what I did differently above... and I guess that my question is really this:

If there is only a "firstChild" and "lastChild", and nothing else inbetween, why
would it be preferable to use those terms (first/last) instead of the more exact
index numbers (which would appear to follow a more consistent pattern for identifying
the different elements).
Is that question nothing more than a matter of symantics, or is there a reason that
First and Last were specifically created to be used for element identification in the
DOM? (wow... even that question has hurt my brain. lol).

And... (if you haven't tired of me yet... and I really hope not)... I was wondering
if you could look at this and let me know if I have understood it correctly:
ok... here goes...

Here are the elements:

<div id="myDiv">A
<span id="span1">B</span>C
<span id="span2">D
<span id="span3">E</span>F</span>G</div>

And here is how I would identify them :

document.getElementById('myDiv').childNodes[0].nodeValue="1"; //A
document.getElementById('myDiv').childNodes[1].childNodes[0].nodeValue="2"; //B
document.getElementById('myDiv').childNodes[2].nodeValue="3"; //C
document.getElementById('myDiv').childNodes[3].childNodes[0].nodeValue="4"; //D
document.getElementById('myDiv').childNodes[3].childNodes[1].childNodes[0].nodeValue="5"; //E
document.getElementById('myDiv').childNodes[3].childNodes[2].nodeValue="6"; //F
document.getElementById('myDiv').childNodes[4].nodeValue="7"; //G

I didn't use firstChild or lastChild so is this acceptable as it is (I know it works - because
it counts to 7 - but I guess I want to know if this is "professionally" written... or a hack
attempt). One thing that I am trying to learn on this forum is how to do things the proper
way (and not just the way that I can get it to work). I worked really hard trying to figure
this out... but it won't mean much to me if I don't know if it is in proper form.

If you've hung with me this far Vladdy, you are not only a genius.... but you are
a saint!.
Thanks for sparking my brain into this area. A whole new area has opened-up for me.
Hopefully I'm understanding it correctly.
So.....
am I?

letting some air out of my head to make room for the DOM...
k

Vladdy

03-07-2003, 02:45 PM

You got it, girl. Now you can read this: http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/

As far as first/lastChild goes, I do not think there is a right way and a wrong way; rather what is more logical from the code point of view. If I were to enumerate children of a particular node I would use:
for(i=0; i<node.childNodes.length; i++) alert(node.childNodes[i].nodeType);
However, when I access the text node of some element knowing that it is the only child, then I usually use node.firstChild.nodeValue