jquery - Linking javascript file with your jquery in it

Question

There doesnt seem to be a definitive answer anywhere online to this. I understand that you can put:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

Your code here.....

});
</script>

to link your downloaded jquery file. But what code do you have to add so that it works from a javascript file that you have writting your jquery code into?

I like to work from 3 documents (as that is how ive learn on codeacademy) html, css, js. But all i can find online is how to attach the downloaded jquery and then work your jquery code into the html file. So is this possible?

any help would be much appreciated

Answer 1

Just reference your script (after jQuery of course):

<script type="text/javascript" src="yourscript.js"></script>

Inside yourscript.js

$(document).ready(function() {
    console.log("Documents ready!");
});

Check your console, you'll see this logged.

Answer 2

Put this code in your script.js

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

and then include your .js file like this (after jQuery) -

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

Answer 3

As long as the javascript file containing your jquery code is included after jquery it will work. So you would have:

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

In my_jquery_code.js you would have:

$(document).ready(function(){

// my jquery code

});