• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

JavaScript function in HTML body

 
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
All you have to do is put the functions [without the script tags] into a file.

And than you link to it:


Eric
 
Ranch Hand
Posts: 488
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Tagged, I'm going to try this out when I get home.
 
Meet Gaurav
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I added

<script type="text/javascript" src="foo.js"></script> line in body section and its not working.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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


Keyboard burst into flames?
 
Meet Gaurav
Ranch Hand
Posts: 492
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Matters not.

It's most likely that your URL is not correct.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 488
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 488
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Correct, I'm referring to setup code that needs to execute before the user gains control.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Reason why to include JavaScript at the bottom is a performance boost:
http://developer.yahoo.com/performance/rules.html#js_bottom

Eric
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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

 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic