Learn and Build Projects with Pure JavaScript (No Frameworks or Libraries)
About This Video
In Detail
This is a front to back JavaScript course for absolutely everybody. We start with the basic fundamentals and work our way to advanced programming without relying on frameworks or libraries at all. You will learn a ton of pure JavaScript, whether you are a …
Learn and Build Projects with Pure JavaScript (No Frameworks or Libraries)
About This Video
In Detail
This is a front to back JavaScript course for absolutely everybody. We start with the basic fundamentals and work our way to advanced programming without relying on frameworks or libraries at all. You will learn a ton of pure JavaScript, whether you are a beginner or an established JS programmer. There is something for everyone.Topics included: - Basics and Fundamentals: Data types, let and const variables, functions, conditionals, loops, object literals, arrays, and so on. DOM Manipulation: Selectors, traversing the DOM, show/hide, creating and removing elements, event listeners OOP: ES5 prototypes, inheritance, ES2015 classes and sub-classes, constructors. Async JS: Ajax and XHR, Fetch API, callbacks, promises, async / await. ES2015+: Arrow functions, template strings, generators, iterators, maps and sets, symbols and more. JavaScript Patterns: Module, Factory, State, Observer, Mediator, SingletonOther: Local and session storage, regular expressions, try/catch error handling. 10 projects of all kinds.
Audience
People that want to learn modern JavaScript from beginner to advanced without libraries and frameworks.
Chapter 1 : Intro Getting Started
Welcome To the Course
Project Files Questions
Visual Studio Code Setup
Chapter 2 : JavaScript Language Fundamentals
Section Intro File Setup
Using the Console
Variables - var, let const
Data Types in JavaScript
Type Conversion
Numbers the Math Object
String Methods Concatenation
Template Literals
Arrays Array Methods
Object Literals
Dates Times
If Statements Comparison Operators
Switches
Function Declarations Expressions
General Loops
A Look at the Window Object
Block Scope With let const
Chapter 3 : DOM Manipulation Events
What Is The DOM?
Examining the Document Object
DOM Selectors for Single Elements
DOM Selectors for Multiple Elements
Traversing the DOM
Creating Elements
Removing Replacing Elements
Event Listeners the Event Object
Mouse Events
Keyboard Input Events
Event Bubbling Delegation
Local Session Storage
Chapter 4 : DOM Projects
Task List [Part 1] - UI Add Task Items
Task List [Part 2] - Delete Filter Tasks
Task List [Part 3] - Persist To Local Storage
Loan Calculator [Part 1] - Build the UI
Loan Calculator [Part 2] - Calculate Error
Loan Calculator [Part 3] - Loader User Experience
Number Guesser [Part 1] - Build the UI
Number Guesser [Part 2] - Validation Winning Case
Number Guesser [Part 3] - Lose Case Game Over
Number Guesser [Part 4] - Play Again
Chapter 5 : Object Oriented JavaScript - ES5 ES2015
Constructors the ’this’ Keyword
Built In Constructors
Prototypes Explained
Prototypal Inheritance
Using Object.create
ES6 Classes
Sub Classes
Chapter 6 : OOP Book List Project
Build the Book List UI
Add Book to List
Validation Alert
Delete Book from List
Convert to ES6 Classes
Bonus - Add Local Storage
Chapter 7 : Asynchronous JavaScript, Ajax Fetch API
What Is Asynchronous Programming?
Ajax XHR Introduction
XHR Object Methods Working with Text
Working With Ajax JSON
Data from an External API - Chuck Norris Project
REST APIs HTTP Requests
Callback Functions
Custom HTTP Library (Ajax with Callbacks) - Part 1
Custom HTTP Library (Ajax with Callbacks) - Part 2
ES6 Promises
The Fetch API
Arrow Functions
Custom HTTP Library (Fetch with Promises) - Part 3
Async Await
Custom HTTP Library (Fetch with Async Await) - Part 4
Chapter 8 : API Projects
Github Finder [Part 1] - Intro UI
Github Finder [Part 2] - Fetching Profile Data
Github Finder [Part 3] - Display the Profile
Github Finder [Part 4] - Show Alert Message
Github Finder [Part 5] - Fetch Display Repos
WeatherJS [Part 1] - Intro UI
WeatherJS [Part 2] - Fetch Weather from API
WeatherJS [Part 3] - Display the Weather
WeatherJS [Part 4] - Save Location to Local Storage
Chapter 9 : Error Handling Regular Expressions
Error Handling with Try…Catch
Regular Expressions [Part 1] - Evaluation Functions
Regular Expressions [Part 2] - Metacharacter Symbols
Regular Expressions [Part 3] - Character Sets Quantifiers
Regular Expressions [Part 4] - Shorthand Character Classes
Regular Expressions - Form Validation Project
Chapter 10 : Other Newer Features - ES2015+
Iterators Generators
Profile Scroller - Iterator Mini Project
Symbols
Destructuring
ES6 Maps
ES6 Sets
Chapter 11 : JavaScript Patterns
What Are Patterns?
Module Revealing Module Pattern
Singleton Pattern
Factory Pattern
Observer Pattern
Mediator Pattern
State Pattern - Small Project
Chapter 12 : Tracalorie Project (Using the Module Pattern)
Project Introduction
Creating the UI With Materialize CSS
Controllers Data Structure
Get Populate Items
Add Item to Data Structure
Add Item to the UI
Add Total Calories
Working With the Edit State
Updating Items Total Calories
Delete Clear Items
Add Get From Local Storage
Delete Clear from Local Storage
Chapter 13 : Microposts Project - CRUD Front End (Webpack Babel)
Babel Webpack Environment Setup
Intro to ES2015 Modules
Create the UI
Create a fake REST API Using JSON Server
Get Display Posts
Add Posts Show Alert
Post Edit State Update [1]
Post Edit State Update [2]
Chapter 14 : Wrap Up
Wrap Up Where to Go From Here