How do I reference jQuery from my HTML/JavaScript application?

Question

I keep getting Uncaught ReferenceError: $ is not defined error. I assume everything is ok and working. My JQuery code is inside my Javascript file. I assume that isn't how it works? Should I have a JQuery file?

I have this inside the head of my HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

This is my Javascript file:

function typing(id, sentence){
var result = $.Deferred();
    var index=0;
    var intObject= setInterval(function() {
        document.getElementById(id).innerHTML+=sentence[index]; 
        index++;
        if(index==sentence.length){
            clearInterval(intObject);
        }
    }, 100);
    return result.promise();
}

var sleep = function(ms) {
    var result = $.Deferred();
    setTimeout(result.resolve, ms);
    return result.promise();
};

typing('container','Subject Name:').then(function() {
      return sleep(500);
    }).then(function() {
      return typing('container',' Carlos Miguel Fernando')
    });

Where did I go wrong?

Answer 1

Your question is fairly unclear, but essentially, you just have to make sure jQuery is loaded before your code. So for instance:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>

or

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

But not

<!-- Not like this -->
<script src="your-code.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Note the order of tags.

These tags do not need to be in the head, and in fact, putting them there is not best practice. They must be in head or body. Best practice barring a specific reason to do something else is to put them at the very end of body, e.g.:

<!-- site content here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
</body>
</html>