Training workbooks are sold for select college courses only. For access to the workbooks, enroll in a class.

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

Features of Noble Desktop eBooks
  • Searchable, with live text that you can copy and paste.
  • Printable.
  • eBook graphics are in color (printed books are black and white).
  • Widely compatible: We provide the most common eBook formats (EPUB, MOBI, & PDF) so you can load them onto the device or app you choose; such as Mac, PC, iPhone, iPad, Kindle, Android, and more.
  • Free updates for the edition you buy. When we make major changes to a book (requiring a new edition), an affordable upgrade option will be available.
  • DRM-free: Files are subtly watermarked with your name and email, but we do not restrict the devices or apps you can use to view our eBooks.
  • Lifetime access to downloads from free your Noble Desktop account.
The Best Way to Enjoy Our Books

Our workbooks are meant to be used while you work on your computer. They typically contain step-by-step exercises that walk you through doing tasks on your computer. An ideal setup would be to have the eBook loaded onto a device (like a tablet/smartphone) or on a second computer monitor, so you can read the book as you work on your computer. You can also print the PDF if you prefer.

Which File Format Is Right for You?
PDF
  • Ideal for printing.
  • An exact match to the printed book. If the text reflow of an EPUB or MOBI file is confusing please refer to the PDF.
  • PDF is compatible with most devices, but it’s not optimized for small screens. If using a smaller screen you’ll likely want to use the EPUB or MOBI files.
EPUB
  • The industry standard eBook format which works with all devices, except for the Amazon Kindle. EPUB can be read on Mac, PC, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android, and many more.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
MOBI (Kindle)
  • Amazon’s format for Kindle devices and Kindle app.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
  • Using an iOS Device such as iPhone & iPad? The Kindle app for Apple iOS devices requires a specialized format which we do not support. While our MOBI will work in the Kindle app, it will not render well on iOS devices. We recommend using the EPUB format with Apple’s Books app if reading on an iOS device.
Recommended Reading Apps
iPhone, iPad
  • Books (EPUB)
Mac
Windows PC
Android
Can You Share the eBook or Printouts?

Noble Desktop books are intended for use by you, the owner. They are not intended to be loaned or given to others. The files are subtly watermarked with your name and email, but we do not apply any DRM. You can copy your eBooks to any of your own devices without restriction. You can print the PDF files for your own use, but not to give to others. You cannot sell used eBooks. Ownership is solely yours and cannot be transferred to someone else.

Teachers and training centers wishing to print copies for students should email hello@nobledesktop.com for licensing options and pricing.

Buying an eBook for Someone Else
  • When you buy an eBook for yourself, it will be added into your account. It will be watermarked with your information and is intended for use only by you.
  • You can purchase eBooks for someone else, such as a friend or colleague. Schools and training centers can purchase eBooks for their students (be sure to apply for
  • When buying eBooks for someone else, you will receive an eBook voucher code. Send that code to the recipient and they can redeem it. An eBook voucher code can be redeemed once, for the specific book you purchase for them.
  • The recipient of the eBook voucher code will need to log into their Noble Desktop account, or create a free account. In their account they will enter the code on their My eBooks page and the eBook will be added immediately into their account.
  • The recipient receives all the same benefits of Noble Desktop eBooks, which includes lifetime access to download their eBook, as well as free updates to that edition. When the next edition is released, an affordable upgrade option will be available to them.

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