Today’s Goals:

• Practice writing jQuery
• Learn how to add jQuery to your webpage project
• Practice with jQuery’s animate API

 Today’s featured website:

• https://livressedufruitpago.fr/– This might be in French but jQuery is used effectively to help the site get its message across!

 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.

 jQuery’s Animate API

• Read through each of the following examples and then do the exercises. Clicking a button is only used for the examples. When you do an exercise, you will just focus on the jQuery and the element will move on its on without the click of a button.
• Move something to the right or left
  1. View example
  2. Do exercise. After you get it to move, make the animation last 3 seconds by adding a comma after the curly bracket and adding 3000 before the closing parenthesis.
     Like this: $(selector).animate({params}, 3000);
• Change multiple properties at the same time
  1. View example
  2. Do exercise. Once you get it to work, make the animation last for 4 seconds by adding the same code as the previous example (comma after curly bracket and then the time before the closing parenthesis)
• Create back to back animations
  1. View example 1 and example 2
  2. Do exercise– See if you can also change the div’s width to 200px
• Connect animations to events, like clicking or hovering
  1. Go to this example. Change button to div. How can you get the animation to work now? What do you have to do? When you get it to work, change click to hover. How does the animation work now?
• Stop an animation before it’s finished
  1. View example (no exercise)