Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Introduction to jQuery Ways to Include jQuery in a Project

davidreyes2
davidreyes2
3,422 Points
Posted by davidreyes2
davidreyes2
3,422 Points

The jQuery code in this video is giving me an error

function myCode() {
    $(".warning").hide().show("slow");
}

$(document).ready(myCode);

This code is giving me this error

ReferenceError: $ is not defined app.js:5:0

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. index.html

6 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Looking at your HTML... You cut off the http: from the script for jQuery at the bottom. Just add it back in and that should solve your problem.

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

I hope that works :)

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Have you included the jQuery JavaScript library in your HTML document?

davidreyes2
davidreyes2
3,422 Points
davidreyes2
davidreyes2
3,422 Points

I included the html code at the bottom.

Jason Desiderio
Jason Desiderio
21,811 Points
Jason Desiderio
Jason Desiderio
21,811 Points

When it says that the $ is not defined, it usually means that jQuery hasn't been included in the page.

davidreyes2
davidreyes2
3,422 Points
davidreyes2
davidreyes2
3,422 Points

Html code used.....

<!DOCTYPE html>
<html>
<head>
    <title>Take Evasive Action</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <p class="warning">
    <span>It's A Trap!</span>
  </p>
  <div class="image">
    <img src="img/ackbar.gif" />
  </div>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Allison Walker
Allison Walker
17,137 Points
Allison Walker
Allison Walker
17,137 Points

Don't know if this will help, but in the video where he uses the 

$(document).ready(myCode);

note that his links to the .js files are not at the bottom of the page, they're at the top.

When he switches to just 

$(".warning").hide().show("slow");

that is when he puts the .js files at the bottom.

Anthony Santiago
Anthony Santiago
10,082 Points
Anthony Santiago
Anthony Santiago
10,082 Points

Apparently the jQuery.com site is having issues. I had the same error and switched to the google hosted CDN.

Just switch it to the following: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

or just go to the developer site for an updated link at : https://developers.google.com/speed/libraries/?hl=en