JavaScript for Front-End Book

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