Where do I put the $(document).ready()?

Question

I've been trying to add JavaScript to my HTML/CSS, but been running around in circles.

My current set-up is where the html, CSS, and JavaScript files (2 files; my JavaScript code, and jQuery's code) are all separate, but linked to each other via the html page.

So here are my questions:

1) Do I put the link to the jQuery code within the html head? Or within my JavaScript code page?

2) Where does this code go? The html page, or my JavaScript page?

$(document).ready(function(){
    //Code here
});

3) Above, by 'code here', they mean JavaScript code, right? Not my html code?

4) I've read about initializing JavaScript code at the bottom of an html page. From what I take though, I don't have to do that with jQuery's .ready function, right?

it goes to javascript file. [This](http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/) could help — genesis, Jul 21 '11 at 00:59

score 11 · Accepted Answer · answered Jul 21 '11 at 01:00

11

You should like to your JavaScript files either in the <head> or above the closing </body> tag.
The code can go anywhere really, but I would suggest an external JavaScript page.
Yes
This is correct.

answered Jul 21 '11 at 01:00

Seth

6,240
3
28
44

For performance sake, it's better to do it above the `
` tag.
– timw4mail Jul 21 '11 at 01:03

score 9 · Answer 2 · edited Aug 08 '12 at 05:46

When Javascript code is executing in your browser, all of your included Javascript files and any code you write in-between those "script" tags in the HTML document is going to be executed as though it were all part of one giant file (same namespace). So in some sense, it doesn't matter whether you write your code in the HTML document or whether you write it in an external file that you include - you're free to do either, and it will be executed the same. You can balance maintainability, reusability and convenience (think about what functions you write that you might want to reuse on other pages) and do whichever you feel is best.

To make this concrete - this is one valid way to write your Javascript, if you wanted to write the code inside your HTML file:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript">
      $(document).ready(function(){
        alert('Document Ready!');
      });
    </script>
  </head>
  <body>
  ...

Here's the intro at the jQuery site, for reference: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Writing your Javascript code at the bottom of the HTML page was/is a technique for getting it to execute as soon as the document is loaded, which is unnecessary when using jQuery's '$(document).ready' (that's what it does - it abstracts the business of getting Javascript functions to execute on page load, and implements it in a cross-browser way).

See: Introducing $(document).ready() for more.

score 3 · Answer 3 · answered Jul 21 '11 at 01:01

It doesn't really matter where you place your jQuery code. If you place it in the head tag, it'll automatically load everything. If you decide to place it all in an external JavaScript file, you need to link it with a <script type="text/javascript" src="my_file.js"></script> tag.

The 'code here' part is only for JavaScript. What the code is saying is that when the document is ready, run this function. The function can be whatever you like - whatever you put inside the function will run when the document is ready (i.e. when the webpage is called by the browser).

You don't need to insert it at the bottom of the HTML page - you can do it anywhere. People only insert it at the bottom to optimize their loading speed. It's nonessential.

score 1 · Answer 4 · answered Jul 21 '11 at 00:58

1

$(document).ready(function(){
    //Code here
});

goes in your javascript file. All javascript code that should be executed once the page has loaded goes where the //Code here comment is.

Perhaps a quick jQuery tutorial would be in order?

answered Jul 21 '11 at 00:58

Tomm

2,142
1
15
19

Thanks Tomm for the link. I will read that over. However, one quick question. By code here, they mean each individual function, right? – Matt Jul 21 '11 at 02:00

score 0 · Answer 5 · answered Jul 21 '11 at 01:01

0

Or, you can put your script tag in the bottom of your body, and not have to use the $(document).ready() function.

answered Jul 21 '11 at 01:01

timw4mail

1,716
2
13
16

score 0 · Answer 6 · answered Jul 21 '11 at 01:01

0

Put in the head. This is the most stable way and it works. Some people may disagree and say it is slower, etc, but I have found this to always work.
Where you put your code is up to you. You can put in your head with a

<script>Code here</script>

or in a separate file and include it with

<script src="reftomyscript.js"></script>
Yes, put your javascript code in this, either in the head or in a separate file.
Yes, and see (1)

answered Jul 21 '11 at 01:01

Fred

4,195
2
29
42

Every javascript file blocks loading of the webpage. Having the javascript in the footer makes sure the HTML is there to manipulate, eliminating the need for the document.ready function, and insures your javascript doesn't block page load. – timw4mail Jul 21 '11 at 01:13
Good point. I still like to have it in the head, just because it's easier to see and I'm not worried about page performance, if I was I would optimise a lot of other things! What about parallel resource loading? Does it still block the page? – Fred Jul 21 '11 at 01:22
it's complex. Even parallel loading of scripts blocks page rendering. I much prefer the simplicity of putting the scripts at the end of the body, just less to think about. – timw4mail Jul 21 '11 at 01:27

Where do I put the $(document).ready()?

6 Answers6

Linked