Today’s Goals:

• Practice writing jQuery
• Learn how to add jQuery to your webpage project
• Download desktop wallpaper for May (optional)

 Today’s featured website:

• http://run4tiger.com/– This site uses jQuery to engage users

 Intro to jQuery, one of the most popular JavaScript libraries

• About:
  • jQuery is one of the most popular JavaScript libraries because it’s easy to use for adding animations and other interactive elements.
  • jQuery is a JavaScript library and you should have a basic understanding of JavaScript to use it.
  • Unlike JavaScript, jQuery is NOT built into the browser automatically, so, like other libraries, you need to download it and add it to your webpage by linking to it OR you can use a CDN (we will do this)
  • Everything you need to use jQuery is on jQuery.com
• Practice: We are going to continue with our mini-tutorials: Period 5 (click here) and Period 6 (click here)

 jQuery Practice

How to Add jQuery to Your Webpage

jQuery is a JavaScript library that isn’t automatically included in the browser, like “regular” JavaScript. If you want to use it, you need to add it to your webpage by either downloading it from jQuery.com or using a CDN (content delivery network) that basically links the appropriate hosted files to your webpage. We are going to use the CDN method today.

Note: If you were going to download jQuery to your computer, you would do so and then move it to the same file location as your webpage project. You would still have to link the jQuery files to your webpage in order to use it.

Adding jQuery via a CDN:

1. Open Notepad++ and start a new file. Save it as jQuery1.html. Add opening and closing html, head, title, and body tags.
2. In the head section add the CDN link for jQuery

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

3. 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.
4. Finally, let’s add the document ready function (like we did at the beginning of Friday’s tutorials). All of your jQuery code has to go inside this function, which basically makes sure the webpage is loaded and ready before jQuery can execute. We can grab the code from here.

Adding jQuery code

1. Review: $(“select something here”).API(“do something here”);. Example: $(“p”).css(“color” , “red”); makes all of your paragraphs red.
2. Let’s add some content to our page to work with. First, add a link to http://jquery.com/ in your body section. Then, add a paragraph and grab some placeholder text from here.
3. Next, let’s add a box to our page. Add some opening and closing style tags in your head section and 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.
4. Last week we learned how to do several things with jQuery, including selecting elements and changing the CSS. Let’s begin by selecting the paragraph and drawing a border around it by using jQuery’s CSS API.
5. How could we add a border to the box we created?
6. Let’s now interact with our hyperlink by grabbing some of the sample code from here. What do you think this code will do?
7. 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). How can we use the show API to bring the box back after 2 seconds? Let’s also try “fast” and “slow” instead of time in milliseconds.
8. Basic animation part 1: Let’s use slideUp and slideDown and fadeOut and fadeIn. Let’s comment out the hide and show code by adding // before it and make the box slide up and down and also fade out and in by adding new code below.
9. Basic animation part 2: Let’s animate the box by changing its width and height. First, let’s comment out the previous code and add some new code below. Now let’s select the box and then add animate.(). Inside the parenthesis we’ll add {height: “300px”}, 4000, which will change the height of the box from 250px to 300px over 4 seconds. Now let’s change the width and height at the same time. Note: jQuery’s animate API can be used with any NUMERIC CSS property.