Book Image

Modern JavaScript from the Beginning - Second Edition [Video]

By : Brad Traversy
5 (9)
Book Image

Modern JavaScript from the Beginning - Second Edition [Video]

5 (9)
By: Brad Traversy

Overview of this book

This course is a comprehensive introduction to JavaScript, covering everything from the basics of variables, data types, and methods, to more advanced topics such as asynchronous programming, object-oriented programming, and unit testing. Starting with the fundamentals of the language, the course progresses through a series of carefully structured sections that build on each other to give you a solid understanding of JavaScript’s capabilities and how to use them effectively. You will learn how to work with arrays and objects, write functions, and use logic and control flow to create more complex programs. From there, the course dives into more advanced topics such as DOM manipulation, event handling, and asynchronous programming, teaching you how to use these techniques to create responsive and interactive web applications. You will also learn about object-oriented programming in JavaScript, including constructors, prototypes, and classes, and build several projects along the way to put your new skills into practice. The course also covers more advanced topics such as modules, iterators, and generators, as well as unit testing and data structures. Additionally, you will get hands-on experience with tools like Webpack and Node.js, giving you a well-rounded understanding of modern JavaScript development. By the end of the course, you will have a solid foundation in JavaScript and be able to build dynamic, interactive web applications using the language. Whether you are just starting out with programming or are looking to expand your skillset, this course is the perfect way to learn JavaScript from the ground up.

Related Content you might be interested in

Current Title:

Small book image
Modern JavaScript from the Beginning - Second Edition [Video]
Brad Traversy
Apr, 2023 | 36 hours 58 minutes
No titles found
Table of Contents (22 chapters)
Free Chapter
1
Course Introduction
Welcome to the Course
Course Outline and Projects
What Is JavaScript?
Tools and Setup
Running JavaScript in the Browser
2
Variables, Data Types, Methods, and More
Section Introduction
The Sandbox Files
Using the Console
Comments and Shortcuts
Variables and Constants
Data Types
Primitive Versus Reference Types
Type Conversion
Operators
Type Coercion
Working with Strings
Capitalize Challenge
Working with Numbers
The Math Object
Number Challenge
Dates and Times
Date Methods and DateTimeFormat API
3
Arrays and Objects
Section Introduction
Creating Arrays
Basic Array Methods
Nesting, Concat and the Spread Operator
Array Challenges
Object Literals
Object Spread Operator and Methods
Destructuring and Naming
JSON Introduction
Object Challenges
4
Functions, Scope, and Execution Context
Section Introduction
Creating a Function
More on Arguments and Parameters
Global and Function Scope
Block Scope
Nested Scope
Declaration Versus Expression
Arrow Functions
Immediately Invoked Function Expressions (IIFE)
Function Challenges
Execution Context
Execution Context in Action
The Call Stack
5
Logic and Control Flow
Section Introduction
If Statements
Else-If and Nesting
Switches
Calculator Challenge
Truthy and Falsy
Logical Operators
Logical Assignment
Ternary Operator
6
Loops, Iteration, and High-Order Array Methods
Section Introduction
For Loop
Break and Continue
While and Do While Loops
FizzBuzz Challenge
For...of Loop
For...in Loop
Array.forEach Method
Array.filter Method
Array.map Method
Array.reduce Method
Array Method Challenges
7
DOM Manipulation
Section Introduction
Introduction to the DOM
Document Element Properties
DOM Selectors - Single Elements
DOM Selectors - Multiple Elements
Traversing the DOM - Elements
Traversing the DOM - All Nodes
Create and Append Elements
InnerHTML Versus createElement()
Refactor to Multiple Functions
Insert Elements, Text, and HTML
Custom insertAfter() Challenge
Replace Elements
Remove Elements
Manipulating Styles and Classes
8
Events
Section Introduction
Event Listeners
Mouse Events
The Event Object
Keyboard Events and Key Properties
KeyCode Mini-Project
Input Events
Form Submission and FormData Object
Event Bubbling
Event Delegation and Multiple Events
Page Loading and Window Events
9
Shopping List Project
Section Introduction
Add Items to List (DOM Only)
Setting Up Git and GitHub (Optional)
Remove and Clear Items
Clear UI State
Filter Items
Local Storage Crash Course
Add Items to Local Storage
Display Items from Local Storage
Remove Items from Local Storage
Set Item to Edit
Update Item and Reset State
Prevent Duplicate Items
Deploy to Netlify
10
Asynchronous JavaScript
Section Introduction
Under the Hood: Thread of Execution
Under the Hood: How Async JS Works
setTimeout and clearTimeout Functions
setInterval and clearInterval Functions
Callbacks
Crash Course on HTTP Requests
DevTools Network Tab
AJAX and XHR Object
Joke Generator Project Challenge
Callback Hell
Promises
Callback to Promise Refactor
Promise Chaining
Promises Versus Callback Hell
Handling Multiple Promises with promise.all()
11
Fetch API and Async Await
Section Introduction
Fetch Basics
Random User Mini-Project
Fetch Options - Method, Body Headers
Typicode Todos Mini-Project - Part 1
Typicode Todos Mini-Project - Part 2
Fetch API Error Handling
Async and Await
Try...Catch Statements
Error Handling with Async and Await
Multiple Promises with Async and Await
12
Flixx Movie App Project
Section Introduction
Theme Overview and Prep
API Overview and API Key
Page Router and Active Link
Display Popular Movies
Spinner and Popular TV Shows
Movie Details Page
Details Page Backdrop
TV Show Details Page
Swiper Slider
Search Functionality
Display Search Results
Add Pagination for Search
13
Web Browser APIs
Section Introduction
GeoLocation API
Show Location on a Map
Canvas Element and API
requestAnimationFrame() Method
Animated Clock - Part 1
Animated Clock - Part 2
Web Audio API
Music Player Project
Drum Machine Project
Video API
Video Player Project
Web Animations API - Ball Project
Speech Recognition API - Color Say Project
Speech Synthesis API - Text to Speech
14
OOP - Constructors and Prototypes
Section Introduction
What Is OOP?
Basic Principles of OOP
More on Object Literals and this Keyword
Constructor Functions
Literals Versus Built-In Constructors
Working with Object Properties
Prototypes and the Prototype Chain
Adding Methods to the Prototype
Using Object.create()
Prototypical Inheritance and call()
OOP Game Challenge
15
OOP - Classes, Getters, Setters, and Private Properties
Classes
Class Inheritance
Static Methods
bind() and Defining this
Getters and Setters with Classes
Getters and Setters with defineProperty()
Private Property Underscore Convention
ES2022 Private Class Fields
Property Flags and Descriptors
Sealing and Freezing Objects
16
Tracalorie App (OOP Project)
Project Introduction
UI Theme Setup
Project Planning and Diagram
Base Tracker, Meal, and Workout Class
Display Tracker Stats
Progress Bar and Calorie Alert
App Class, New Meal, and Workout
Refactor to Single _newItem Method
Display New Meal and Workout
Remove Meal and Workout
Filter and Reset
Set Calorie Limit
Storage Class and Calorie Limit Persist
Persist Total Calories to Local Storage
Save Meals to Local Storage
Save Workouts to Local Storage
Remove Meals and Workouts from Local Storage
Clear Storage Items
17
Modules and Tooling
Project Introduction
What Are Modules?
Installing and Using Node.js
CommonJS Modules
NPM Packages/Modules
ES Modules
Module Bundlers
Webpack Basic Setup
CSS and Style Loaders
HTML Webpack Plugin
Webpack DevServer Plugin
Babel Setup
CSS Minify Extract Plugin
Tracalorie Refactor to Use Webpack
Deploy Tracalorie to Netlify
18
Iterators, Generators, and Data Structures
Section Introduction
Symbols
Iterators
Generators
Profile Scroller Project
Sets
Maps
Poll Project
Stacks
Queues
Linked Lists
19
Unit Testing Algorithms
Introduction and What Are Algorithms?
What Is Unit Testing?
Getting Started with Jest
Grouping Tests Together
Reverse String Algorithm
Palindrome Algorithm
Array Chunking
Anagram Algorithm
Get Elements by Tag - jsdom
Has Duplicate IDs - jsdom
20
Node.js Modules (Bonus Module)
Section Intro
fs (filesystem) Module
path Module
os Module
url and querystring Modules
http Module
21
RandomIdeas Project - Backend REST API (Bonus Project)
Section Introduction
Express Setup and Basic API
Nodemon and Route Clean-Up
Handle POST Requests - Add Idea
PUT and DELETE Requests - Update and Remove Ideas
What Is MongoDB?
MongoDB Atlas Setup
Mongoose Connect and Dotenv
Mongoose Schema and Model
Database Queries
22
RandomIdeas Project - Webpack Frontend (Bonus Project)
Fullstack Workflow
Client Folder Setup
Modal Component
IdeaForm Component
IdeaList Component
API Service - Fetch Ideas
Create Idea through Form
Save Username to Local Storage
Add Username Validation to Server
Delete Ideas
Deploying a Fullstack App
Chapter 10
Asynchronous JavaScript
Content Locked
Section 9
AJAX and XHR Object
In this video, you will learn about the Network tab in the Chrome DevTools. We will see how to inspect HTTP requests and responses and how to analyze network performance.
Previous Section
End of Section 9
Next Section