1. Getting started with jQuery
Maxwell Furman
Department of MIS
Fox School of Business
Temple University

2. First off Exam grades will be out this week or next - sorry!
Today's class will take a big step up in complexity from previous weeks. Expect confusion! This is a good thing.

3. jQuery Described
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
Think of it as a toolbox to help make common JS tasks easier
jQuery is the most popular JavaScript library in use today.
jQuery handles cross-browser compatibility
jQuery is free, open-source software licensed under the MIT License.
Initial release date: August 26, 2006; 12 years ago

4. Linking to the jQuery library
Pro tip! Knowing what a CDN URL is, and how to add one to your solution, is a powerful way to extend the options available to you, the programmer.

5. What jQuery feels like to a first time programmer…
Why does it feel that way? Because the syntax of jQuery is slightly different from that of a traditional imperative language.
jQuery relies heavily on some things called “selectors”
In many cases, jQuery abbreviates the syntax used in JavaScript.
jQuery relies heavily on functions. We use the assignment operator (=) less often when writing jQuery logic.

6. The $ function in jQuery
Stop a moment and reflect on that. Up until this slide, the function $ has taken one parameter (an id) and done one thing (return an element object). But now… this is a game changer… the $ function can do so much more.

7. Remember this from last class?
Step 1 – Select some elements to work with
Step 2 – Take some action on each element
With jQuery we now have a new, simplified, two-step process. The basic structure of a jQuery command is: $(“some selector goes here”).SomeMethod();

8. These are the simple selectors. What does this syntax remind you of?
jQuery selectors
These are the simple selectors. What does this syntax remind you of?

9. Some more advanced jQuery selectors
We’ll get a chance to use some of these (the ones in red) in our challenge today. The point here is not to try to memorize them all, but to understand that you have a wide variety of options when it comes to selecting content in the HTML document.
Good, interactive, reference material can be found here:

10. jQuery methods For the value of an input tag
For the innerHTML of a node
To move to the next element
To initiate the form submit event
To set the focus to an element

11. More jQuery methods Add a css class Toggle a css class
Hide a tag (or tags)
Show a tag (or tags)
These methods and others like them can work on multiple elements.
To put it another way, the jQuery methods work on *all the elements* returned by a selector.
(And you don’t even need to write a loop to do it!)

12. Notice that we are passing “30” into the value of the #gallons tag.
We do that by passing an argument to the val method.
We don’t use the assignment operator ( = ) here!
Let’s see jQuery at work! (see index_01.html and index_02.html in jquery_demo.zip)

13. What about events?

15. Instead of window.onload now we have…
I will do it this way.

16. It’s time for some experiments!
In jquery_demo.zip, explore index_03.html and index_04.html
Notice the use of selectors
Notice the abbreviated syntax
Notice how the assignment operator (=) less often when writing jQuery logic
Then, begin challenge-jquery.docx

17. Animations SO
Animations!
FUN!
WOW
AMAZING
Wheeeeeeee!

18. Options for animation in web applications
HTML5 increased support for animation … but there’s really no HTML-only option. You need CSS, JavaScript/jQuery, or both.
HTML
CSS
JavaScript
CSS – all on its own – has events that fire when an element receives focus, or is hovered over.
JavaScript and jQuery have animation options. Some options are totally separate from CSS. Others manipulate CSS to implement the effect.

19. Best practices for animation in applications
Use a good CSS template: For real projects, it is advisable to start with a robust HTML/CSS template. A good template will include the CSS animations you need for menus and simple interactive elements. You *probably* don’t need to add any CSS animations beyond that.
Keep user experience in mind: Consider how subtle animations can be used to improve user experience. Add those sparingly. Don’t “hack” the template. Instead use jQuery to implement those.
Use “complex” animations only when necessary: If your animate is more than a few steps, and requires the coordination of multiple events and/or conditional statements, you should ask yourself: “Is this animation necessary? What core functionality is it related to? What key objective of the project is it related to?”

20. Our jQuery toolbox…. That's new… jQuery Method Notes .addClass()
We've already seen this method! But, if you want the full documentation, it can be found here:
.toggleClass()
We've already seen this method! But, if you want the full documentation, it can be found here:
.removeClass()
Ok… technically you have not seen this yet, but, what do you think it does? Full documentation found here:
.show()
We've already seen this method! But, if you want the full documentation, it can be found here:
.hide()
We've already seen this method! But, if you want the full documentation, it can be found here:
.slideToggle()
This shows or hides the matched elements with a sliding motion. That’s pretty neat! See slidetoggle.zip for an example and for full documentation.
.animate()
That's new…

21. $("#somelement").animate({property: value}, [speed, callback] );
jQuery animate
Basic syntax:
$("#somelement").animate({property: value}, [speed, callback] );
This is the selector of the thing we want to animate. Usually just one thing at a time, but not necessarily…
This square brackets “[“ and “]” here are not part of the command. They are just a notation, indicating that speed and callback are optional. That’s good. We’ll cover callback functions another day…

22. jQuery animate (simplified)
Basic (simplified) syntax:
$("#somelement").animate({property: value},400);
This represents the CSS property to animate. Put the CSS property name in quotes.
This is the speed of the animation in milliseconds is the default.
This value is a string as well. It contains a numeric value, and a unit of measure. For example: “10px” or “50%” or “2em”
Tip! You can also use an operators here to manipulate current CSS values. += will add to the current value. The -= operator will subtract.

23. The big picture
Animation effects allow our application’s interface to change right before our eyes.
Those changes do not require us to reach out to a URL and reload a whole new copy of a page in response to every user action. Instead, content can be pulled down once, and show/hidden/animated as needed.
This idea of bundling a lot of content into a single page is known as a Single Page Architecture (SPA) … an idea that we will revisit in the future!

24. It’s time for an experiment!
Download mis2402template.zip and set up the template in your mis2402 workspace
Explore how link navigation is taking place. Note that clicking on a navigation link does not load a new page. Instead, specific divs are shown / hidden.
Notice how we change the class of our navigation <li> tags to “active” to indicate to indicate the user’s last navigation choice.
Notice how .animate use used to emphasize the continue button on content div four.
Your challenge is going to be to add a link 5 and a carousel of images similar to what is found in your textbook (see pages 282, 283)