JavaScript for Front-End Book

Step-by-Step Training Workbook: Add Interactivity and Animation to Websites

Learn JavaScript to add interactivity and animation to webpages with scrolling animations, parallax, slideshows, and much more.

In this project-based JavaScript training book, you’ll start by learning the fundamentals of JavaScript code to add logic and interactivity to webpages. You’ll write plain vanilla JavaScript as well as learn how to use pre-made JavaScripts (slideshows, tabbed panels, etc.) to save yourself time and be able to quickly add amazing functionality with relatively little work.

Create Animations with GreenSock: The GreenSock Animation Platform (GSAP) is the industry standard framework for web animation. Learn to animate just about anything in a webpage, such as scrolling animations (including parallax effects), animate logos, banner ads, and much more.

Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-941333-19-8

Download Sample Exercise
Setup & Introduction
Downloading the Class Files
Before You Begin
  • Choosing a code editor to work in
  • Installing & Setting up Visual Studio Code
Section 1
Fundamentals of JavaScript Code
  • JavaScript methods (such as alerts and console.log)
  • Variables
  • Using Chrome’s DevTools: The JavaScript Console
  • The importance of quotes
  • Numbers vs. strings
  • Concatenation
  • Booleans
  • Error messages & troubleshooting JavaScript
The DOM & Getting/Setting Properties
  • Selecting HTML elements with getElementById()
  • Manipulating selected elements
  • Getting & setting properties (such as adding a class)
Functions & Event Handlers
  • Defining & calling functions
  • Defining parameters & passing arguments
  • Using an event listener
Section 2
Arrays, Math Object, & Displaying a Random Testimonial
  • Creating an array
  • Editing an array
  • The Math object
  • Picking a random item from an array
For Loops
  • Creating a for loop
  • Using the for loop to set menus
  • The JavaScript Keyword This
  • Using a For Loop In the Product Chooser
External JS Files: Sharing JavaScript Across Pages
  • Externalizing JavaScript
  • Linking to the JavaScript file
If Else, the Date Object, & Creating Elements
  • Conditional Logic: Using if-else statements
  • Single (=) vs. Double (==) Equal Signs
  • The Date Object
  • Creating Elements in a Page with JavaScript
Section 3
JavaScript Objects
  • Intro to objects
  • Defining an Object
  • Accessing & manipulating objects
Dynamically Changing Content with Custom Objects
  • Referencing the Menu
  • Listening For When the Menu is Changed & Getting the Chosen Value
  • Loading in Data from an External File
  • Dynamically Changing Info on the Page
Using a JavaScript Library: Tabs
  • Using premade JavaScript Libraries
  • Creating tabbed sections within a webpage
Section 4
Using a JavaScript Library: Slideshow/Carousel
  • Setting Up the HTML Content
  • Linking to the Provided Files
  • Initializing the Script
  • Customizing the Script Using Provided Options
  • Tweaking Some CSS
Intro to the GreenSock Animation Platform (GSAP)
  • Loading the GSAP JavaScripts
  • Anatomy of a GSAP Tween
  • The gsap.from() Method
  • Tweening Multiple Properties
  • Easing
GSAP Timelines: Animating Multiple Elements in Sequence
  • Animating Multiple Elements
  • Creating & Using a Timeline
  • Cleaning Up the Syntax with Chaining
  • Timeline repeat & repeatDelay Properties
Section 5
GreenSock: Staggered Animations & Animating SVG
  • Animating SVG
  • Transform Origin
  • Stagger: Animating Multiple Elements from a Single Tween
GreenSock: Animating an HTML5 Ad (Google Banner Ads)
  • Linking to the Google Hosted Version of GreenSock
  • Creating a Timeline & Animating Multiple Scenes
  • X & Y versus xPercent & yPercent
  • Timeline Labels & Using Seeking to Jump to a Specific Part of a Timeline
GreenSock: Preventing Flash of Unstyled Content on Load
  • Using Chrome’s DevTools to Simulate a Slow Network
  • Preventing Flash of Unstyled Content on Load
  • Checking Your Ad Using the Google Ads HTML5 Validator
Section 6
GreenSock: Intro to Scrolling Animations (ScrollTrigger)
  • Setting Up a ScrollTrigger
  • Toggle Actions
  • Turning on Markers
  • Scrubbing: Linking an Animation to the Scrollbar
  • Starting & Ending Scroll Positions
GreenSock: Parallax Animation
  • Setting Up the HTML
  • Styling the Parallax Layers
  • Adding the Depth Info
  • Using GSAP to Make the Parallax Work
GreenSock: ScrollTrigger on Multiple Alternating Elements
  • Making ScrollTrigger Work with Each Element Individually
  • Alternating Directions For Each Row
  • Fixing Unwanted Horizontal Scrolling
Bonus Material
GreenSock: ScrollTrigger Media Queries with matchMedia()
  • Defining Different Animations for Different Screen Sizes
  • Fixing Inline Style Contamination Across Media Queries
Using a jQuery Plugin: Lightbox (A Pop-up Image Viewer)
  • How to Use a jQuery Plugin
  • Adjusting the Options of a jQuery Plugin
  • Creating a Photo Enlarger (often called a Lightbox)
  • Grouping the Photos Into a Gallery
  • Customizing the Appearance
More Training from Noble Desktop
Common JavaScript Terms Defined

How our eBooks Work Buying eBooks for Someone Else

Examples of What You Learn

Why Our Books Are Unique

Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.

demonstration of different book formats: print, kindle, & mobile devices
Yelp Facebook LinkedIn YouTube Twitter Instagram