Question

This is an example of click button to pop up an alert.

<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

If the above part is put in head part, it works.
If the above part is put like below, it does not work.

This drives me crazy since in an open source code, the author said that if the script source is put at the end of html, the page will load faster. I spent a lot of time to figure out why the source code do not work and I found out that the reason in the position of the script src part.

However, when I test on
http://jsfiddle.net/eSud7/3/
the position of the script is not important.

Could anybody please explain why?

I am using Google App Engine and tested on Firefox browser.

Additional info: I am using this free template. Please download and check the index.html,
The author put all script source at the end of document and it works. Why???????

Answer 1

Yes its true that you should include your script at the bottom of the page, In your case you are calling jquery function even before core library has loaded. You will have to include your script after jquery library because functions are defined in the library and as the code executes these function has to be referenced

//At the bottom of the page
<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<script>

      $(document).ready("#button").click(function() {
      alert('button clicked');
});
  </script>

However, when I test on http://jsfiddle.net/eSud7/3/ the position of the script is not important.

Thats because you have selected to load jquery library on load(Look at the left hand side), so your library is included in the DOM on body load i.e. in your fiddle your giving position of library is redundant

Update on OP comments

<script>
    $(document).ready("#button").click(function() { //Included at the header, jquery object like $ and function like ready not declared yet !!!
      alert('button clicked');
    });
  </script>

AT the bottom of the page

//Contains all the jquery functions
    <script  type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>