JavaScript function in HTML body

Hi

I have a javascript function in the HTML body

like
<script type="text/javascript">
3 functions
</script>

But I like to add this script in a file and then import to HTML boody.. Please assist me to do this

All you have to do is put the functions [without the script tags] into a file.

And than you link to it:

Eric

Tagged, I'm going to try this out when I get home.

I added

<script type="text/javascript" src="foo.js"></script> line in body section and its not working.

Meet Gaurav wrote:... and its not working.

Keyboard burst into flames?

I added

<script type="text/javascript" src="foo.js"></script> line in body section and its not working.

Eric, That script will be in my HTML page body section.. Not in the head section. Usually head section script will be included using the logic which you gave.

Matters not.

It's most likely that your URL is not correct.

Meet Gaurav wrote:

Eric, That script will be in my HTML page body section.. Not in the head section. Usually head section script will be included using the logic which you gave.

That is incorrect. You can add external script references in the body. A good rule of thumb is to include your scripts before the close of the body tag and not in the head.

As Bear already stated, sounds like you are not referencing the file correctly.
Where is foo.js sitting on your web server?

If you are accessing your page from

http://www.example.com/test/test.jsp
the path to the js file would be
http://www.example.com/test/foo.js

Eric

Eric Pascarello wrote:That is incorrect. You can add external script references in the body. A good rule of thumb is to include your scripts before the close of the body tag and not in the head.

I just tried this out myself and it worked like a charm. Now my JavaScript and CSS are all seperate from each other, thanks!

Eric, I was curious... why would you place the script inclues near the bottom of the close body tag? That sounds like a terrible idea, I would think all imports, includes, etc would go at the top just like Java, VB, C++, C#, CSS, etc etc.... I'm sure there must be a reason, right?

I'm not sure what Eric is getting at, but I'm sure he'll elaborate.

Personally, I include all JavaScript in the head, but I make sure to use the onload handler (in actuality, the jQuery document-ready handler) to make sure that no script executes until after the DOM has been built.

A lot of people put their script at the bottom of the file to achieve this, and I'm not sure that's what Eric is getting at, but I think it's a poor practice.

Disclaimer: I sometimes place script tags in body when loading dynamic content via Ajax with jQuery (whose Ajax methods know how to trigger their execution).

Thanks Bear, that's probably what he's getting at. I haven't worked with DOM's yet so it is not an issue for me yet. ;)

Also, you said "to make sure no script executes until after the DOM has been built"... this would only apply to script that does not have an onClick or other event associated with it right? I mean, as long as it has an event associated with it that requires user interaction then it won't get ran before the DOM gets built right?

Thanks

Correct, I'm referring to setup code that needs to execute before the user gains control.

Reason why to include JavaScript at the bottom is a performance boost:
http://developer.yahoo.com/performance/rules.html#js_bottom

Eric

Gack! I hate hacks like that.

Yeah, I know he's the "JavaScript Guru", but I'm also a bit skeptical as to any real benefit of letting the DOM render, but deferring the scripts that make the page work until afterwards. The user still can't interact (properly) with the page until the scripts have loaded and executed. Because the DOM may render to screen sooner, it may give the user the perception (which may be enough) that the page is loading faster, but in the end, the page isn't ready to interact with any sooner.

There is a lot of things you can do with performance with websites on the front end and may see a little strange, but browsers do some strange things with loading files. If the JS files are really big, it can hang up the browser. Perceived loading times are a lot better than actual loading times. Look at windows!

I have done Web Page performance for my one job and when you can make things seem faster, you do it.

Eric