Buy the workbook
This book comes free with our JavaScript & jQuery class
In this book you’ll go beyond HTML/CSS and learn JavaScript so you can add interactivity such as animated slideshows, lightboxes (image enlargers), show/hide content, validate forms, and more. You’ll start by learning the fundamentals of JavaScript code. You’ll start by learning the fundamentals of JavaScript code, and then get into jQuery. jQuery is an industry standard framework that lets you quickly and easily write powerful JavaScript. You’ll learn how to use some popular jQuery plugins, and gain an understanding of how plugins work, so you can use any plugin! The course workbook can be completed in any code editor. This course workbook can be completed in any code editor. This is advanced level book is for people who have experience building webpages.
Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-941333-19-8
Setup & Introduction
Downloading the Class Files
HTML vs. XHTML Syntax
- Differences between HTML & XHTML syntax
Before You Begin
- Supported browsers
- Recommended software
Section 1
Setting Up: Do This Before Other Exercises!
- Setting up your class files
Fundamentals of JavaScript Code
- JavaScript methods (such as alerts)
- Variables
- The importance of quotes
- Numbers vs. strings
- Concatenation
Reusing Code with Functions
- Defining functions
- Calling functions
- Defining parameters & passing arguments
Targeting HTML Elements
- Using Chrome’s DevTools
- Selecting HTML elements with getElementById()
- Manipulating selected elements
- Getting & setting properties
If Statements: Clearing Form Fields
- Using if statements
- Adding event handlers
- Placing JavaScript in an HTML document
Section 2
Simple Accordion with JavaScript
- Hiding & showing elements with JavaScript
- Setting up an accordion
Sharing JavaScript Across Pages
- Externalizing JavaScript
- Linking to the JavaScript file
Introduction to Arrays & the Math Object
- Creating an array
- Editing an array
- The Math object
- Picking a random item from an array
Postcard Generator
- Getting input from the menu
- Anonymous functions
- Adding event handlers in JavaScript
Section 3
Introduction to JavaScript Objects & the DOM
- Intro to objects
- The global object
- Accessing & manipulating objects
Dynamically Changing Content with Custom Objects
- Checking the functionality of the select menu
- Getting the chosen value
- Dynamically changing the state name value
- Dynamically changing the rest of the values
Introduction to For Loops
- Creating a for loop
- Using the for loop to set menus
- Clearing the contents of a menu
Section 4
Introduction to jQuery: Showing & Hiding Content
- Getting started with jQuery
- Running code when the document is ready
- Click events
- Using jQuery’s slideToggle() method
Product Color Chooser
- Creating a product color picker
- Using jQuery’s attr() method
- Using jQuery’s addClass() method
- Using jQuery’s removeClass() method
- Using jQuery’s hover() method
More Advanced jQuery Showing/Hiding
- Adding an animation to reveal hidden content
- Targeting the proper div: traversing the document
- Swapping the button image with jQuery
Section 5
Using jQuery Plugins: Smooth Scroll
- Linking to the plugin files
- Initializing the plugin
- Customizing plugin behavior with options
jQuery Lightbox: A Pop-up Image Viewer
- Grouping the photos into a gallery
- Adding captions
- Removing the counter
- Customizing the appearance
jQuery Cycle: A Simple Slideshow
- Initial setup
- Defining what content gets cycled
- Adding more cycles & exploring options
- Reversing the animation
Section 6
jQuery Cycle: Adding Slideshow Controls
- Preventing a possible “flash of unstyled content”
- Enabling the slideshow
- Adding & customizing the controls
jQuery Form Validation
- Initializing the plugin & setting options
- Customizing the error messages
- Changing the location of the error messages
- Styling the error messages
jQuery Image Carousel
- Linking to the plugin files
- Creating the carousel
- Styling the carousel
- An easy way to add prev & next buttons
- Adding custom prev & next buttons
- Setting how many items are shown
Bonus Material
Tracking Visitors with Cookies
- Using a JavaScript API for handling cookies
- Coding cookies
- Clearing cookies
- Updating a cookie: incrementing the number of visits
- Submitting the cookie info with the form
Photo Filter Website: User Friendly Navigation
- Using data attributes to track a user’s selection
- Creating variables to store navigation items
- Styling the selected buttons
- Toggling the filter buttons
- Refining the filter buttons
Photo Filter Website: Getting the Photos to Filter
- Setting up data attributes for photo categories
- Creating an array to store the filter choices
- Getting the All button to show all filter values
- Getting the rest of the buttons to select the other filters
- Initially hiding the photos
- Getting the photos to filter
- Optional bonus: fixing a usability issue
Photo Filter Website: Creating an Exclusive Filter
- Adding a checkbox to toggle exclusive filtering on/off
- Separating the inclusive & exclusive filters
- Writing a conditional to select the appropriate filter
- Differentiating the exclusive filter
- Rerunning the filter when the checkbox is toggled
Recreating the Photo Gallery Filter Using jQuery, Part 1
- Adding variable references: jQuery vs. JavaScript syntax
- Attaching a click event handler using the on() method
- Toggling the filter buttons using jQuery
- The All button vs. the rest of the buttons
Recreating the Photo Gallery Filter Using jQuery, Part 2
- Populating a standard JavaScript array using jQuery
- Using JavaScript to skip over the zero index
- Hiding the photos
- Testing the checkbox’s functionality
- Programming the inclusive & exclusive filters
- Rerunning the filter when the checkbox is toggled
- Improving the user experience
