JavaScript Essential Training

Introduction

• JavaScript: The soil from which the modern web grows
• How to use the exercise files

• JavaScript: First contact
• Navigating the JS landscape
• Tools for working with JavaScript
• Linting and formatting
• Get to know the browser console
• JavaScript language basics
• Learning JavaScript backward

• JavaScript in an HTML document
• JavaScript as an external file
• Modern JavaScript loading
• JavaScript modules

• Objects: A practical introduction
• JavaScript objects: The code version
• Object containers
• Object properties
• Accessing objects
• Accessing object properties
• Practice: Build a new object
• Object methods
• Practice: Build a new method
• Classes: Object blueprints
• Object constructors
• Practice: Build a new object with a constructor
• Global objects
• Challenge: Create a new object type
• Solution: Create a new object type

• Mix text and variables with template literals
• Traditional string output

• DOM: The Document Object Model
• Access elements with querySelector methods
• Access elements using older methods
• Practice: Find an element
• Modifying element classes
• Attributes
• Inline style
• Practice: Modify classes and attributes, and styles
• Add DOM elements
• Challenge: Add a new element
• Solution: Add a new element

• Variables: Containers for everything
• Var
• Scope
• Let
• Const
• Data types
• Assignment vs. comparison
• Math operators

• Arrays explained
• Arrays in code
• Array methods
• Challenge: Build and modify an array
• Solution: Build and modify an array

• The real-world function
• Functions and methods
• A standard function
• The arrow function
• Arrow functions and "this"
• Practice: Build a function
• Pass data to a function with parameters
• Return values from a function
• Practice: Pass values between functions
• Callbacks
• Conditional if...else statement
• Logical operators
• Conditional switch statement
• Looping through content
• Using the map() array method
• Challenge: Build an advanced function
• Solution: Build an advanced function

• DOM events explained
• Typical DOM events
• Event listeners
• Practice: Experiment with event listeners
• Advanced event listeners and "this"
• Pass arguments through event listeners
• Challenge: Create an event listener
• Solution: Create an event listener

• Troubleshooting JavaScript in the browser
• Making sense of a React component

• Next steps on your learning journey