JavaScript & jQuery

JavaScript Classes in NYC

Once you've built your site's layout and style, it's time to add functionality.  Enter: JavaScript.

In this hands-on JavaScript class, you’ll start by learning the fundamentals of JavaScript, before diving into jQuery. jQuery is an industry-standard framework that lets you quickly and easily write powerful JavaScript. We'll teach you to use some of the most popular jQuery plugins to help you get the most out of JavaScript.  By the end of this course, you'll ahve a solid grasp of JavaScript and jQuery, and you'll be able to use any plugin your heart desires.

Prerequisites: HTML & CSS knowledge equivalent to our Web Development Level 2 class is expected.

This JavaScript course is held at our web development school in SoHo, located at 594 Broadway, New York, NY.

  • icon for small classesSmall classes
  • icon for small classesComputer provided
  • icon for small classesBook included
  • icon for small classesFree retake

Register for a Class 

$975 18 Hours Mac and PC provided 594 Broadway, NYC In-person classroom training

This course is offered at our design school, Noble Desktop, in SoHo. View upcoming dates and register for this course directly on Noble Desktop’s website.

Register at nobledesktop.com 

What You'll Learn

  • Write your own JavaScript to add animation and interactive functionality to your webpages.
  • Understand how to use freely available JavaScript frameworks, including the industry standard: jQuery.
  • Create animated slideshows with transitions such as fades or slides. 
  • Build animated image enlargers, show/hide additional content, and more.

Full Course Syllabus

Download PDF 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 & passing arguments

Simple Accordion with JavaScript

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

If Statements: Clearing Form Fields

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

Section 2

Introduction to JavaScript Objects & the DOM

  • Intro to objects
  • The global object
  • Breaking open & 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 & 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 & 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 & 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 & exploring options
  • Reversing the animation

jQuery Cycle: Adding Slideshow Controls

  • Preventing a possible “flash of unstyled content”
  • Enabling the slideshow
  • Adding & 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 & 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