Computer and Business Skills training

Sign Up
888.815.0604
Home / JavaScript

JavaScript Training Course

Chicago, Los Angeles

Go beyond HTML and CSS and learn JavaScript so you can add interactivity to your websites such as animated slideshows, lightboxes (image enlargers), show/hide content, form validation, and more.


Live face-to-face instructor. No minimum class size - all classes guaranteed to run!


We provide instructor-led Javascript classes. Classroom learning from an experienced Web developer is still the quickest and most effective way to learn Javascript.


Onsite training available countrywide.

Course summary

JavaScript and jQuery

On this course you will learn to create better user experiences by adding interactive elements to your Web pages. This class will introduce you to JavaScript syntax, before delving into the jQuery library and adding some cool features such as navigation menus, slideshows, lightboxes, accordions and more.

3 Days | $1495.00

Book this course

View class timetable View past student reviews

What's Included

Certificate of Course Completion
Training Manual
FREE Class Repeat

Detailed course outline

  • Fundamentals of JavaScript Code

In this lesson, you will learn some foundational concepts and syntax such as variables, strings, and numbers. These are core concepts used throughout even the most complicated scripts.

    • JavaScript methods (such as alerts)
    • Variables
    • The importance of quotes
    • Numbers vs. strings
    • Concatenation

  • Reusing Code with Functions

A function is a group of reusable code that performs a specific task (or tasks) at a desired time. In this exercise, you will learn how to write a custom function.

    • Defining functions
    • Calling functions
    • Defining parameters & passing arguments

  • Targeting HTML Elements

In this exercise, we will take a look at what JavaScript is doing in the background. We will use Chrome's DevTools to reveal the structure of an HTML document, select individual HTML elements and edit them.

    • Selecting & Working with HTML Elements
    • Getting & Setting Input Values
    • Hiding & showing elements with JavaScript

  • If Statements: Clearing Form Fields

There are times when you only want your JavaScript code to be executed if certain criteria have been met. In this exercise, you will use an IF statement to detect whether a form field contains text and then respond with a hint if necessary.

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

  • Simple Accordion with JavaScript

Accordions let you condense a lot of information into a small space by hiding some of it. In this exercise, you are going to build a simple accordion to hide and show different elements.

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

  • Sharing JavaScript Across Pages

In this exercise, we will learn how to externalize JavaScript so it can be shared between pages.

    • Externalizing JavaScript
    • Linking to the JavaScript File

  • Introduction to Arrays & the Math Object

In this exercise, we will learn about arrays and how to create them. You will also learn about Math objects and how to use them in conjunction with arrays to display the values we want.

    • Creating an Array of testimonials
    • Editing an Array
    • The Math Object
    • Using the Math Object to Pick Random Testimonials

  • Postcard Generator

In this exercise, you will build a postcard generator. The user will choose from a list of U.S. states and the page will dynamically generate a postcard for that state.

    • Getting Input From the Menu
    • Unobtrusive JavaScript

  • Introduction to JavaScript Objects & the DOM

In this exercise you will learn the basics about JavaScript objects. You will create your own object and learn how to access objects inside an HTML document to see how you can manipulate them.

    • Intro to objects
    • The global object
    • Breaking open & manipulating objects

  • Dynamically Changing Content with Custom Objects

In this exercise, you will use JavaScript objects to dynamically update content without having to reload the page. In other words, when a user makes a selection, the information on the page will update without the page having to reload.

    • 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

One of the things that programming is really good for is repeating the same (or similar) actions very quickly. In this exercise, we will look at one way to do this by using a for loop.

    • Creating a for loop
    • Using the for loop to set dropdown menus
    • Clearing the To menu
    • Optional bonus: refining the menu selection experience
  • Introduction to jQuery: Showing & Hiding Content

jQuery is an industry standard JavaScript library. In this exercise, you will get started using jQuery by learning how to show and hide some content using a few different animations.

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

  • Product Color Chooser

When products are available in multiple colors, users need to be able to choose the color they want to receive. In this exercise, you will use jQuery to make a product color picker that lets a user choose a color and then see a photo of the product with the color they selected.

    • Getting the Swatch Buttons to Work
    • Figuring Out Which Color the User Clicked On
    • Change the Border Color of the Selected Element
    • Using Hover Instead of Click

  • More Advanced jQuery Showing/Hiding

In this exercise you will take another look at showing and hiding, but with a new twist. You will learn how to control the speed of jQuery's slideToggle() and learn more about targeting elements with jQuery.

    • Adding an animation to reveal hidden content
    • Targeting the proper div: traversing the document
    • Swapping the button image with jQuery

  • Using jQuery Plugins: Smooth Scroll

In this exercise, you will learn how to use a jQuery plugin called Smooth Scroll. It lets you create a single page site with navigation that scrolls down the page with a sliding animation.

    • Linking to the plugin file
    • Initializing the plugin
    • Customizing the plugin with options

  • jQuery Lightbox: A Pop-up Image Viewer

In this exercise, you will learn how to use a free jQuery lightbox plugin called Magnific Popup. This is a great way for users to view enlarged images.

    • 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

In this exercise, you will learn how to use the jQuery Cycle plugin to create a simple slideshow. It can cycle through content with a variety of transitions like fades and pushes.

    • Initial setup
    • Defining what content gets cycled
    • Adding more cycles & exploring options
    • Reversing the animation

  • jQuery Cycle: Adding Slideshow Controls

In this exercise, you will add controls to a slideshow which will allow the end user to jump ahead or back to specific slides.

    • Preventing a possible "flash of unstyled content"
    • Enabling the slideshow
    • Adding & customizing the controls

  • jQuery Form Validation

Form validation is essential for so many websites. Here we will show you how to set up form validation with the popular jQuery Validation Plugin by Jörn Zaefferer, which is easy, fast, flexible, and well-documented.

    • Initializing the plugin & setting options
    • Customizing the error messages
    • Changing the location of the error messages
    • Styling the error messages

  • jQuery Image Carousel

Carousels are one way to present a series of images and/or text for users to scroll through. The free OWL Carousel plugin makes creating these easy.

    • 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


Our outlines are a guide to the content covered on a typical class. We may change or alter the course topics to meet the objectives of a particular class.

Timetable

Chicago

230 W Monroe St
#610
Chicago
IL 60606View Map

Guaranteed to Run Limited Seats Left

Class times: 9.00am to 4.30pm

Servicing Arlington Heights, Aurora, Bollingbrook, Chicago Loop,
Deerfield, Des Plaines, Evanston, Highland Park, Joliet, Naperville,
Schaumburg, Skokie, South Chicago and surrounding areas.

Other Cities

Request onsite training quote

Los Angeles

915 Wilshire Blvd
#1800
Los Angeles
CA 90017View Map

Guaranteed to Run Limited Seats Left

Class times: 9.00am to 4.30pm

Servicing Anaheim, Burbank, Covina, Downtown, Fullerton,
Irvine, Long Beach, Northridge, Pasadena, San Bernardino,
Santa Monica, Van Nuys, Ventura and surrounding areas.

Choosing the right class

Recent student feedback

5.0 stars I have yet to stump Jeff when I ask hard questions in these various classes! Great class as always. I'm READY to go crank out some javascript now.
4.4 stars Chris was an excellent instructor, very informative and knowledgeable. The class covered everything from Html, CSS, and JavaScript basics that I was unfamiliar with, to advanced techniques that I plan to put into practice in our application in the near future. Thanks a lot for the great class.
4.8 stars This was one of the best training courses I have taken in some time. Facilities were top notch and the instructor provided very practical real life examples. Oliver was an outstanding instructor that provided significant interaction with the class made the topics entertaining and enjoyable. I would highly recommend him and training connection!
4.8 stars Chris was wonderful. Our small class was able to move faster than normal and Chris challenged us to learn more. I saw a number of "similar" courses offered in the area, and I am extremely pleased that I made the right choice.

How to Register

Register here

JavaScript resources

What is JavaScript?
Online JavaScript tutorials
JavaScript Variable Scope
Building Arrays

JavaScript Array Methods
More Web Development resources
The Benefits of Learning JavaScript
Understanding Immediately-Invoked Function Expressions - Part 1
Understanding Immediately-Invoked Function Expressions - Part 2

Why train with us?

4.7 / 5

based on 370 reviews

Need Group training quotation? Fresh Starbucks brewed every day FREE Class Repeat with each course