Today’s goal:

• Beginning learning jQuery, a very useful JavaScript library

 Today’s featured website:

• http://histography.io/– jQuery makes a trip through 14 billion years of history seamlessly interactive!

 What is jQuery and why should you care?

• From Thinkful.com: “jQuery is a powerful JavaScript library that works in all browsers, and enables you to write much less code than you otherwise would with plain JavaScript.”
• Let’s check out this helpful video before getting started with some jQuery practice

 jQuery practice

• In the browser (Chrome)
  • Open Google Chrome, go to this tutorial, and open the browser console by hitting ctrl-shift-j at the same time.
• In Notepad++
  1. Set up a basic page (opening and closing html, head, title, and body tags).
  2. Add a link to http://jquery.com/ in your body section.
  3. At the bottom of the page, before the closing body tag, add the CDN link for jQuery

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

  4. Now add opening and closing script tags right below your jQuery CDN link. That’s where all of our jQuery code is going to go.
  5. We’re going to be using code snippets from this tutorial.
  6. Go to the tutorial and under Launching Code on Document Ready, copy the code snippet that includes “your code here.”
  7. We’re now going to try adding some of the different code snippets to learn some jQuery basics.
  8. OK, we’ve interacted with a hyperlink. Let’s try something else. Create a class called .box in your style sheet. Give it height of 250px, a width of 300px, and a background-color of pink. Now, go into your HTML and add div class=”box” and close the div tag.
  9. We’re going to make this box disappear and then come back again use jQuery’s hide and show APIs. Let’s start with hide. We’re going to select our box and make it hide after a certain amount of time (milliseconds). Then we’ll bring it back. Also try changing hide to slideUp and show to slideDown to see what happens. Then try fadeOut and fadeIn in place of slideUp and slideDown and change the timing to slow it down.
  10. Let’s copy the code and paste it below and then comment out the first line. We’re going to now animate the box. You can add any CSS property here, which can give the box a whole range of animated effects. For example, let’s make it bigger. Change fadeOut or whatever you had to animate then add parenthesis, a curly bracket, height: “300px”, closed curly bracket, comma, space, 300 for a duration, and close the parenthesis.