JavaScript for Front-End Book

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

Reference Material

Websites for Scripts & Plugins

Common JavaScript Terms Defined