JavaScript Essential Training

Get hands-on experience scripting in JavaScript. Learn how to work with objects, variables, data types, conditionals, functions, loops, the DOM, and more.

Introduction

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

1. JavaScript: A Brief Introduction

• 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

2. Up and Running with JS

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

3. Objects

• 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

4. Sidebar: String Output

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

5. DOM

• 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

6. Sidebar: Variables and Data Types

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

7. Arrays

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

8. Functions and Methods

• 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

9. Events

• 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

10. Troubleshooting and Validating JS

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

Conclusion

• Next steps on your learning journey