Advanced Web Development - JavaScript & jQuery

Course Description

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 will 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!

This advanced level course is for people who have experience building webpages. It is a coding class, so HTML and CSS knowledge equivalent to our Web Development Level 2 class is expected.

Who Needs to Attend

Anyone who wants to add greater dynamic interaction to their existing websites. This course can be taken with either a Mac or Window-based machine. You will need to test your projects in a variety of browsers. You will also need a text editor such as Notepad on Windows or TextEdit on Mac.

Course Book

• Noble Desktop Web Development - JavaScript & jQuery

Prerequisites:

• Fundamentals of Web Development and Intermediate Web Development courses or an equivalent knowledge. Some knowledge of programming concepts is helpful.

Course Outline:

Section 1

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 and passing arguments

Simple Accordion with JavaScript

• Targeting elements by ID
• Hiding and showing elements with JavaScript

If Statements: Clearing Form Fields

• Testing code in the JavaScript Console
• Getting and setting properties
• Using if statements
• Reshowing text hints in empty form fields

Section 2

Introduction to JavaScript Objects and the DOM

• Intro to objects
• The global object
• Breaking open and 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 Arrays and the Math Object

• Creating an array
• Editing an array
• Creating an array of welcome headings
• The Math object
• Using the Math object to pick random headlines

Introduction to For Loops

• Creating a for loop
• Using the for loop to set dropdown menus
• Clearing the To menu
• Optional bonus: refining the menu selection experience

Section 3

Exploring JavaScript Selectors

• Intro to JavaScript selectors
• Selecting multiple elements and elements without IDs
• Getting a specific list item
• Getting elements by class name
• Getting multiple items using querySelectorAll()
• Getting a single item using querySelector()
• Chaining selectors together
• Targeting elements by data attribute

Photo Filter Website: User Friendly Navigation

• Setting up the selectors with data attributes
• Getting the selectors on load
• Toggling the filter buttons
• Refining the filter buttons

Photo Filter Website: Getting the Photos to Filter

• Creating an array to store the selectors
• Getting the All button to select all filters
• Getting the rest of the buttons to select the other filters
• Initially hiding the photos
• Getting the photos to filter

Photo Filter Website: Creating an Exclusive Filter

• Adding a checkbox to toggle exclusive filtering on/off
• Separating the inclusive and exclusive filters
• Writing a conditional to select the appropriate filter
• Programming the exclusive filter
• Rerunning the filter when the checkbox is toggled
• Improving the user experience

Section 4

Showing/Hiding Content with jQuery Animation

• Getting started with jQuery
• Running code when the document is ready
• Click events
• Using jQuery’s slideToggle() method
• Supporting JavaScript disabled users

Sharing JavaScript Across Pages

• Externalizing JavaScript
• Linking to the JavaScript file

jQuery Hover Animation

• Adding an outline with CSS
• Using jQuery’s hover() method
• Using jQuery’s animate() 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

jQuery Lightbox: A Pop-up Image Viewer

• Linking to the plugin files
• Initializing the pop-up
• 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 and exploring options
• Reversing the animation

jQuery Cycle: Adding Slideshow Controls

• Preventing a possible “flash of unstyled content”
• Enabling the slideshow
• Adding and customizing the controls

Section 6

jQuery Cycle: Adding a Pause Button

• Adding a pause/play button
• Styling the pause/play button
• Checking to see if the cycle is paused
• Making the pause/play button work

jQuery Form Validation

• Initializing the plugin and 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 and next buttons
• Adding custom prev and next buttons
• Setting how many items are shown