Cheetaiean Cheetaiean - 3 months ago 12
HTML Question

ReferenceError: Can't find variable: $

Okay so I just began working on jQuery today, trying to implement a div sliding down. However, none of my jQuery is working, so I began with something simple (an alert). This still isn't working, and while browsing forums I found that I can use my browser (Safari) for debugging. While using this, it found an error in my javascript code: ReferenceError: Can't find variable: $

My coding:

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


On my main page, and in my script.js:

$(document).ready(function(){
$("#title").click(function () {
alert("Works!");
});
});


My FULL coding can be found here: http://pastie.org/8676656
When clicking on the error, it highlights the ' $(document).ready(function() {' line.

I have tried other posts, but those errors had to do for example with Mobile devices.
Any help would be greatly appreciated, as I mentioned before I am a beginner with jQuery.

Extra Information: Browser Safari v.7.0.1 (the newest).

Answer

You have to import jQuery before using it:

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

Notice it is using // as protocol (not http:// or https://), it means: if your .html file is at a http:// server, it will get jQuery from http://ajax.google..., and if it is at a https:// server, it will get it from https://ajax.google....


Note: If, while developing, you open your HTML file in your browser instead of in a server, you should specify the protocol, as in this answer, otherwise it won't work:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Also, you should, if possible, place your .js files at the bottom of the page, right before closing </body>. See more in here.