Is there a correct place to put javascript within a html file?

M

mark4asp

I ask this because only today I read advice telling me to put it
within the <head> element. This is the same advice I've always been
given but no one ever explained why.

Last week I was told to put it at the bottom of the html just before </
body>; the reason being that html won't start rendering until all the
script files have downloaded and if they're all in the head ... Right
now I'm putting all my javascript at the end of the html file seems
like the sensible thing to do; at least there's a reason for it.
 
C

ChronoFish

I ask this because only today I read advice telling me to put it
within the <head> element. This is the same advice I've always been
given but no one ever explained why.

Last week I was told to put it at the bottom of the html just before </
body>; the reason being that html won't start rendering until all the
script files have downloaded and if they're all in the head ... Right
now I'm putting all my javascript at the end of the html file seems
like the sensible thing to do; at least there's a reason for it.
Click to expand...

<script> tags can be placed anywhere in an html document. Functions
are typically placed in the <head> section as to ensure that all
necessary components are loaded before the script is executed.

See
http://www.w3schools.com/js/js_whereto.asp
for more details.

-CF
 
T

The Natural Philosopher

ChronoFish said:
<script> tags can be placed anywhere in an html document. Functions
are typically placed in the <head> section as to ensure that all
necessary components are loaded before the script is executed.
Click to expand...

Well its always nice to have conflicting advice.

I was informed recently that sticking them inside a <SELECT> .....
</SELECT> statement was utterly sinful and would earn me an eternity in
Bill Gates Hell.

Why do I get the feeling that all the self avowed experts here, aren't
actually that hot after all?
 
R

RobG

I ask this
Click to expand...

You should not assume that we can see or remember the subject of your
post when reading the body.

because only today I read advice telling me to put it
within the <head> element.
Click to expand...

Reasonable advice because that is one place that script elements are
allowed, they are also permitted in the body.

This is the same advice I've always been
given but no one ever explained why.
Click to expand...

The HTML specification tells you where script elements are permitted:

Last week I was told to put it at the bottom of the html just before </
body>; the reason being that html won't start rendering until all the
script files have downloaded and if they're all in the head ... Right
now I'm putting all my javascript at the end of the html file seems
like the sensible thing to do; at least there's a reason for it.
Click to expand...

You haven't provided any reason at all. Where you place script
elements depends on their intended purpose. There are two guiding
principles:

1. Code should be loaded before there is any chance it might be
called, and

2. If code requires access to DOM elements, it should not be called
before they might exist and should not error if it is.

How you achieve the above is up to you, but the general way is to
achieve the first is to load scripts containing general functions in
the head.

There are a variety of ways to achieve the second - inserting
functions intended to be run when the DOM is ready rather than onload
into a script element just before the closing body tag is one. There
are others, such as using a general "DOM ready" function or waiting
for the load event to occur.
 
T

The Natural Philosopher

RobG said:
You should not assume that we can see or remember the subject of your
post when reading the body.



Reasonable advice because that is one place that script elements are
allowed, they are also permitted in the body.



The HTML specification tells you where script elements are permitted:

<URL: http://www.w3.org/TR/html4/interact/scripts.html#edef-SCRIPT >
Click to expand...

Well I read it and it doesn't. It says in the head or the body. What
else is there?
 
T

The Natural Philosopher

RobG said:
Yes, it does.



Life, the universe and everything. :)
Click to expand...

Ok: Answer the question.

Where, in the head or the body of a HTML page, should you NOT place a
<SCRIPT...></SCRIPT> statement, and why?

Forget the ordering stuff - that's plain and understood.


can you for example nest a <SRIPT> statement inside say a <DIV> stament?

Lik this

<DIV <SCRIPT></SCRIPT>> </div>

I'd say not. No statement about THAT in your precious citation

What about this ?

<FORM>
<SELECT>
<OPTION><SCRIPT></SCRIPT></OPTION>
</SELECT>
</FORM>

??
 
R

Rick Brandt

The said:
Ok: Answer the question.

Where, in the head or the body of a HTML page, should you NOT place a
<SCRIPT...></SCRIPT> statement, and why?

Forget the ordering stuff - that's plain and understood.


can you for example nest a <SRIPT> statement inside say a <DIV>
stament?
Lik this

<DIV <SCRIPT></SCRIPT>> </div>

I'd say not. No statement about THAT in your precious citation

What about this ?

<FORM>
<SELECT>
<OPTION><SCRIPT></SCRIPT></OPTION>
</SELECT>
</FORM>
Click to expand...

I would interpret "in the head or in the body" to mean DIRECTLY in the head or
DIRECTLY in the body. Not to be the descendent of some other elelment that
resides in the head or in the body.
 
T

The Natural Philosopher

Rick said:
I would interpret "in the head or in the body" to mean DIRECTLY in the head or
DIRECTLY in the body. Not to be the descendent of some other elelment that
resides in the head or in the body.
Click to expand...
I don't want interpretation. I want to be told where the specifications
says one or the other.

I have working code that places script elements inside a select
statement. It was just a shade easier in te server side PHP to place
them there.

I'd like to know if its just luck that they work, or guaranteed to
always work.

My GUESS is that most parsers won't give a hoot where they find a
<SCRIPT> statement..apart from actually inside another HTML TAG raher
than OBJECT.

Ie,

<BODY <SCRIPT></SCRIPT> > wont work but

<B><SCRIPT></SCRIPT></B> would.
 
R

Richard Cornford

Ok: Answer the question.

Where, in the head or the body of a HTML page, should you
NOT place a <SCRIPT...></SCRIPT> statement, and why?
Click to expand...

The DTDs for HTML define the permissible document structures, at least
to the extent that DTDs can express constraints. The DTDs are part of
the specification.
Forget the ordering stuff - that's plain and understood.

can you for example nest a <SRIPT> statement inside say
a <DIV> stament?
Click to expand...

Yes, but not necessarily in all nested contexts. SCRIPT elements can be
direct children of DIV elements, and other elements that may be
children, or descendants, of DIV elements can also contain SCRIPT
elements as their children, but not all elements that may be children or
descendants of DIV elements may have SCRIPT elements as their children.

And, as usual, actual browsers (may) tolerate more than is valid by
specification, but how much more is uncertain, inconsistent and
unpredictable.
Lik this

<DIV <SCRIPT></SCRIPT>> </div>
Click to expand...

The pertinent definition from the (HTML 4.01 strict) DTD reads:-

| <!ELEMENT DIV - - (%flow;)* -- generic language/style container -->
| <!ATTLIST DIV
| %attrs; -- %coreattrs, %i18n, %events --
| %reserved; -- reserved for possible future use --
| >

- and so the content of DIV elements is specified as zero or more
occurrences of %flow. And %flow is defined as:-

| <!ENTITY % flow "%block; | %inline;">

- (an elemnt that is either %block or %inline) with %inline defined as:-

| <!ENTITY % inline
| "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

- (one of; PCDATA, %fontstyle, %phrase, %special or %formctrl)and
%special as:-

| <!ENTITY % special
| "A | IMG | OBJECT | BR | SCRIPT | MAP | Q |
| SUB | SUP | SPAN | BDO">

- (any one of the listed elements including SCRIPT).

Thus SCRIPT elements are allowed to be the (direct) contents of DIV
elements.
I'd say not.
Click to expand...

You are wrong.
No statement about THAT in your precious citation
Click to expand...

Except for an explicit and precise statement of valid document
structures found in the specified DTDs.
What about this ?

<FORM>
<SELECT>
<OPTION><SCRIPT></SCRIPT></OPTION>
</SELECT>
</FORM>
Click to expand...

The DTD entry for OPTION is:-

| <!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
| <!ATTLIST OPTION
| %attrs; -- %coreattrs, %i18n, %events --
| selected (selected) #IMPLIED
| disabled (disabled) #IMPLIED -- unavailable in this context --
| label %Text; #IMPLIED -- for use in hierarchical menus --
| value CDATA #IMPLIED -- defaults to element content --
| >

- so the permissible content is PCDATA ("Zero or more parsed data
characters", in SGML terms), which precludes SCRIPT elements (and all
other mark-up elements as those are not data characters).

This is covered in the FAQ:-

<URL: http://jibbering.com/faq/faq_notes/script_tags.html#hsPrCn >

Richard.
 
D

David Mark

RobG wrote:
[snip]
Life, the universe and everything. :)
Click to expand...

Ok: Answer the question.

Where, in the head or the body of a HTML page, should you NOT place a
<SCRIPT...></SCRIPT> statement, and why?

Forget the ordering stuff - that's plain and understood.

can you for example nest a <SRIPT> statement inside say a <DIV> stament?
Click to expand...

They are elements, not statements.
Lik this

<DIV <SCRIPT></SCRIPT>> </div>
Click to expand...

That is obviously invalid markup.
I'd say not. No statement about THAT in your precious citation
Click to expand...

If you find the HTML specs lacking, perhaps you should complain to the
W3C.
 
D

David Cox

Rick Brandt said:
I would interpret "in the head or in the body" to mean DIRECTLY in the
head or DIRECTLY in the body. Not to be the descendent of some other
elelment that resides in the head or in the body.
Click to expand...

You mean like "I am in th UK" is different from "I am in my house, which is
in the UK"?

I suppose there are some things I would do in the UK that I would not do in
my house ...

Why not say something like "directly", or "uncontained"?

I have a nervy feeling that the answer is it can be contained in .... , but
not in .....

and somewhere lurking is a "because that is just the way it is".
 
T

Thomas 'PointedEars' Lahn

Dr said:
[...] The Natural Philosopher said:
Well I read it and it doesn't. It says in the head or the body. What
else is there?
Click to expand...

Before the head; between head and body; after the body; inside or
outside the HTML. Before DOCTYPE.
Click to expand...

Apart from "inside the HTML", that were the places where it could exist if
not the DTDs and the prose of the Specification(s) forbade it. While there
could not be a Valid SGML document if that element was placed before the
DOCTYPE declaration.

But I don't think the question of the OP was meant as "What other
possibilities are there, generally?"


PointedEars
 
I

Ivan Marsh

Well its always nice to have conflicting advice.

I was informed recently that sticking them inside a <SELECT> .....
</SELECT> statement was utterly sinful and would earn me an eternity in
Bill Gates Hell.

Why do I get the feeling that all the self avowed experts here, aren't
actually that hot after all?
Click to expand...

Where exactly did someone tell you to put javascript between select tags?
 
T

Tom

Well its always nice to have conflicting advice.

I was informed recently that sticking them inside a <SELECT> .....
</SELECT> statement was utterly sinful and would earn me an eternity in
Bill Gates Hell.

Why do I get the feeling that all the self avowed experts here, aren't
actually that hot after all?
Click to expand...

Where exactly did someone tell you to put javascript between select tags?
[/QUOTE]


When I started learning Javascript, I was shown to put the functions between the
<head> tags, but also learned you can put them in an external file using one
line...

<head>
<script src=/path/file.js></script>
</head>

Sometimes that can make things a little cleaner to work with.

Tom
 
D

Dr J R Stockton

In comp.lang.javascript message <[email protected]>, Mon,
22 Oct 2007 08:44:32 said:
Dr said:
[...] The Natural Philosopher said:
Well I read it and it doesn't. It says in the head or the body. What
else is there?
Click to expand...

Before the head; between head and body; after the body; inside or
outside the HTML. Before DOCTYPE.
Click to expand...
Click to expand...
But I don't think the question of the OP was meant as "What other
possibilities are there, generally?"
Click to expand...

Then you should learn to understand English, because that is exactly
what he asked for.
 
T

Thomas 'PointedEars' Lahn

Dr said:
In comp.lang.javascript message <[email protected]>, Mon,
22 Oct 2007 08:44:32 said:
Dr said:
[...] The Natural Philosopher <[email protected]> posted:
Well I read it and it doesn't. It says in the head or the body. What
else is there?
Before the head; between head and body; after the body; inside or
outside the HTML. Before DOCTYPE.
Click to expand...
Click to expand...
But I don't think the question of the OP was meant as "What other
possibilities are there, generally?"
Click to expand...

Then you should learn to understand English, because that is exactly
what he asked for.
Click to expand...

It is not a matter of understanding English or not, but of the capability of
applying common sense which you either lack or have deliberately not used here.

"What else is there?" in this context clearly means "What other valid
possibilities (other than in the `head' or the `body' [element]) are there
to place a HTML `script' element?", and the only good and correct answer
would have been "None."


PointedEars
 
D

Dr J R Stockton

In comp.lang.javascript message <[email protected]>, Tue,
23 Oct 2007 18:57:29 said:
Dr said:
In comp.lang.javascript message <[email protected]>, Mon,
22 Oct 2007 08:44:32 said:
Dr J R Stockton wrote:
[...] The Natural Philosopher <[email protected]> posted:
Well I read it and it doesn't. It says in the head or the body. What
else is there?
Before the head; between head and body; after the body; inside or
outside the HTML. Before DOCTYPE.
Click to expand...
But I don't think the question of the OP was meant as "What other
possibilities are there, generally?"
Click to expand...

Then you should learn to understand English, because that is exactly
what he asked for.
Click to expand...

It is not a matter of understanding English or not, but of the capability of
applying common sense which you either lack or have deliberately not used here.

"What else is there?" in this context clearly means "What other valid
possibilities (other than in the `head' or the `body' [element]) are there
to place a HTML `script' element?", and the only good and correct answer
would have been "None."
Click to expand...

You, too, should learn to understand English, complete with nuances,
correctly. It's a non-trivial intellectual task, beyond the
capabilities of most non-British.
 
M

mark4asp

You should not assume that we can see or remember the subject of your
post when reading the body.


Reasonable advice because that is one place that script elements are
allowed, they are also permitted in the body.


The HTML specification tells you where script elements are permitted:

<URL:http://www.w3.org/TR/html4/interact/scripts.html#edef-SCRIPT>




You haven't provided any reason at all. Where you place script
elements depends on their intended purpose. There are two guiding
principles:

1. Code should be loaded before there is any chance it might be
called, and

2. If code requires access to DOM elements, it should not be called
before they might exist and should not error if it is.

How you achieve the above is up to you, but the general way is to
achieve the first is to load scripts containing general functions in
the head.

There are a variety of ways to achieve the second - inserting
functions intended to be run when the DOM is ready rather than onload
into a script element just before the closing body tag is one. There
are others, such as using a general "DOM ready" function or waiting
for the load event to occur.
Click to expand...

Thanks Rob. In future, I will generally place my script just before
the </body> tag - unless there is a reason not to. Even then it will
be a rare bit of code that is needed in the head element. If all my
javascript is positioned just before the </body> then the various html
elements must be rendered or in the process of being rendered before
and javascript can run. I don't have much javascript executing on
window.onload but I suppose I could put code in there to check for the
existence of an object before I use it, set and interval and recurse
back?

I'm trying to follow Steven Sounders advice from "High Performance Web
Sites"
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Where to put javascript in the HTML page? Header or body? 3
where to place the javascript in html page 5
I Need Help with making a function that draws in a canvas using location data. 1
refering to a external JavaScript File in HTML 2
Including a Javascript external file from the <body> part of an HTML file 2
how to put javascript in a file 3
David Mark's Javascript Daily - Volume #3 - Tip #6 - How to Get andSet HTML 6

Members online

Total: 27 (members: 3, guests: 24)
Robots: 429

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top