wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes JavaScript function in HTML body Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "JavaScript function in HTML body" Watch "JavaScript function in HTML body" New topic
Author

JavaScript function in HTML body

Meet Gaurav
Ranch Hand

Joined: Oct 08, 2008
Posts: 492
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
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
All you have to do is put the functions [without the script tags] into a file.

And than you link to it:


Eric
Brian Legg
Ranch Hand

Joined: Nov 07, 2008
Posts: 488
Tagged, I'm going to try this out when I get home.

SCJA
~Currently preparing for SCJP6
Meet Gaurav
Ranch Hand

Joined: Oct 08, 2008
Posts: 492
I added

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

Joined: Jan 10, 2002
Posts: 60782
    
  65

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

Keyboard burst into flames?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Meet Gaurav
Ranch Hand

Joined: Oct 08, 2008
Posts: 492
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.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60782
    
  65

Matters not.

It's most likely that your URL is not correct.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
Brian Legg
Ranch Hand

Joined: Nov 07, 2008
Posts: 488
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?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60782
    
  65

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).
Brian Legg
Ranch Hand

Joined: Nov 07, 2008
Posts: 488
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
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60782
    
  65

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
Reason why to include JavaScript at the bottom is a performance boost:
http://developer.yahoo.com/performance/rules.html#js_bottom

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60782
    
  65

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.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

 
It is sorta covered in the JavaRanch Style Guide.
 
subject: JavaScript function in HTML body
 
Similar Threads
javascript function for time... need suggestion
passing formname and texboxname in a function as parameter
JAVASCRIPT functions and not .JAVA
Problem with javascript include
Urgent help reqd. : regarding importing of .js files in servlets