Class Recaps – June 2015

Session 6 – Wednesday, June 17

Our first activity involved implementing a JavaScript function that would display a popup message on a page. Multiple messages could be added by inserting them into a fixed-position div on the page. A CodePen sample can be found here.

After briefly looking at several examples from chapter 8, we looked at how to create a simple jQuery plugin (see the first several examples from chapter 9).

We finished up by looking at how parallaxing works by using the window’s scroll event to reposition fixed elements at new locations relative to the browser windows. Assigning scroll rate multipliers and changing an element’s top attribute, allows them to move at different rates. A CodePen sample can be found here.

Session 5 – Tuesday, June 16

Class started with a JSON exercise that would read random customer comments from a URL and display them within a div on the page. We then built on the example by adding a form that would allow comments to be submitted and randomly selected for display on the page. A CodePen version of the exercise can be found here.

Once we finished with the example, we looked at several form validation techniques, particularly the validation plugin that’s mentioned in the book.

We finished with a tour of the remaining content examples from chapter 7.

Session 4 – Monday, June 15

We took a look at a few CodePen examples of animated menus: two using only CSS to perform the animations (here and here) and one using jQuery. The intent was to understand that quite a bit of animation can be accomplished strictly with CSS.

While visiting CodePen, I opened a modified version of the viewport example we worked in the previous class, and presented a challenge exercise for those so inclined.

We then moved through chapters 5 and 6. Chapter 5 covered several jQuery UI widgets that are fairly simple and straight-forward to use. Chapter 6 introduces some concepts around code organization before examining AJAX. We will resume looking at AJAX at the start of the next session by reimplementing the NASA APOD example from the JavaScript class using jQuery.

Session 3 – Wednesday, June 10

Class started with another CodePen quiz, along with a challenge to go from animating a single box to animating multiple boxes. [SPOILER ALERT: The second link is a complete solution. You should complete the quiz, then move on to completing the challenge by making the quiz solution more general purpose.]

We quickly moved through jQuery’s resizing features, and worked through the lightbox example at the start of chapter 4. The remainder of chapter 4 walks through a lot of jQuery plug-ins that don’t require much programming, so we mainly looked at how simple it was to use plug-ins to accomplish complex tasks by loading the completed examples into the browser.

Session 2 – Tuesday, June 9

We started with a quick CodePen quiz.

We followed up the quiz with a start-from-scratch practice exercise developing a horizontal menu that mimics the drop-down behavior of the W3Schools.com menu.

Once we finished the practice exercise, we looked at the jQuery animate() function and worked through many of the examples from chapter 3 in “jQuery: Novice to Ninja.” Several examples incorporated jQuery plug-ins or parts of the jQuery UI library. We looked at how you can generate a custom version of the jQuery UI library.

Session 1 – Monday, June 8

For the first class session, we reviewed a few JavaScript basics about using anonymous functions, particularly as function parameters.

We walked through the content examples from chapter 2 in “jQuery: Novice to Ninja”. The focus of those examples are on selecting page content, altering content styling, and adding/removing page elements. We looked at what jQuery is doing beneath the surface to understand how it builds on basic JavaScript concepts, but makes them much easier to use.

Leave a Reply

Your email address will not be published. Required fields are marked *