Get hands-on experience scripting in JavaScript. Learn how to work with objects, variables, data types, conditionals, functions, loops, the DOM, and more.
Overview
Syllabus
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
Taught by
Morten Rand-Hendriksen