O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Modern JavaScript From The Beginning

Video Description

Learn and Build Projects with Pure JavaScript (No Frameworks or Libraries)

About This Video

  • Understanding of JS concepts
  • Requires only basic knowledge about HTML / CSS knowledge

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.

Table of Contents

  1. Chapter 1 : Intro & Getting Started
    1. Welcome To the Course 00:05:41
    2. Project Files & Questions 00:02:09
    3. Visual Studio Code Setup 00:10:05
  2. Chapter 2 : JavaScript Language Fundamentals
    1. Section Intro & File Setup 00:04:21
    2. Using the Console 00:09:01
    3. Variables - var, let & const 00:12:45
    4. Data Types in JavaScript 00:10:20
    5. Type Conversion 00:11:43
    6. Numbers & the Math Object 00:07:19
    7. String Methods & Concatenation 00:14:21
    8. Template Literals 00:10:07
    9. Arrays & Array Methods 00:16:00
    10. Object Literals 00:07:50
    11. Dates & Times 00:09:14
    12. If Statements & Comparison Operators 00:19:02
    13. Switches 00:04:49
    14. Function Declarations & Expressions 00:11:44
    15. General Loops 00:16:41
    16. A Look at the Window Object 00:20:51
    17. Block Scope With let & const 00:06:32
  3. Chapter 3 : DOM Manipulation & Events
    1. What Is The DOM? 00:03:16
    2. Examining the Document Object 00:15:19
    3. DOM Selectors for Single Elements 00:14:13
    4. DOM Selectors for Multiple Elements 00:14:26
    5. Traversing the DOM 00:15:49
    6. Creating Elements 00:06:47
    7. Removing & Replacing Elements 00:10:57
    8. Event Listeners & the Event Object 00:10:12
    9. Mouse Events 00:11:04
    10. Keyboard & Input Events 00:12:43
    11. Event Bubbling & Delegation 00:13:45
    12. Local & Session Storage 00:15:14
  4. Chapter 4 : DOM Projects
    1. Task List [Part 1] - UI & Add Task Items 00:15:53
    2. Task List [Part 2] - Delete & Filter Tasks 00:14:04
    3. Task List [Part 3] - Persist To Local Storage 00:11:03
    4. Loan Calculator [Part 1] - Build the UI 00:15:07
    5. Loan Calculator [Part 2] - Calculate & Error 00:16:47
    6. Loan Calculator [Part 3] - Loader & User Experience 00:06:19
    7. Number Guesser [Part 1] - Build the UI 00:07:01
    8. Number Guesser [Part 2] - Validation & Winning Case 00:16:31
    9. Number Guesser [Part 3] - Lose Case & Game Over 00:10:15
    10. Number Guesser [Part 4] - Play Again 00:10:53
  5. Chapter 5 : Object Oriented JavaScript - ES5 & ES2015
    1. Constructors & the 'this' Keyword 00:11:56
    2. Built In Constructors 00:12:16
    3. Prototypes Explained 00:09:54
    4. Prototypal Inheritance 00:08:24
    5. Using Object.create 00:05:29
    6. ES6 Classes 00:08:35
    7. Sub Classes 00:05:47
  6. Chapter 6 : OOP Book List Project
    1. Build the Book List UI 00:08:20
    2. Add Book to List 00:12:32
    3. Validation & Alert 00:08:28
    4. Delete Book from List 00:06:30
    5. Convert to ES6 Classes 00:06:06
    6. Bonus - Add Local Storage 00:14:44
  7. Chapter 7 : Asynchronous JavaScript, Ajax & Fetch API
    1. What Is Asynchronous Programming? 00:03:41
    2. Ajax & XHR Introduction 00:06:00
    3. XHR Object Methods & Working with Text 00:12:50
    4. Working With Ajax & JSON 00:14:24
    5. Data from an External API - Chuck Norris Project 00:14:57
    6. REST APIs & HTTP Requests 00:06:34
    7. Callback Functions 00:08:28
    8. Custom HTTP Library (Ajax with Callbacks) - Part 1 00:15:26
    9. Custom HTTP Library (Ajax with Callbacks) - Part 2 00:12:13
    10. ES6 Promises 00:05:39
    11. The Fetch API 00:12:40
    12. Arrow Functions 00:12:10
    13. Custom HTTP Library (Fetch with Promises) - Part 3 00:12:55
    14. Async & Await 00:08:05
    15. Custom HTTP Library (Fetch with Async Await) - Part 4 00:05:34
  8. Chapter 8 : API Projects
    1. Github Finder [Part 1] - Intro & UI 00:13:45
    2. Github Finder [Part 2] - Fetching Profile Data 00:12:04
    3. Github Finder [Part 3] - Display the Profile 00:10:43
    4. Github Finder [Part 4] - Show Alert Message 00:10:07
    5. Github Finder [Part 5] - Fetch & Display Repos 00:09:43
    6. WeatherJS [Part 1] - Intro & UI 00:13:13
    7. WeatherJS [Part 2] - Fetch Weather from API 00:08:02
    8. WeatherJS [Part 3] - Display the Weather 00:08:47
    9. WeatherJS [Part 4] - Save Location to Local Storage 00:11:13
  9. Chapter 9 : Error Handling & Regular Expressions
    1. Error Handling with Try...Catch 00:09:50
    2. Regular Expressions [Part 1] - Evaluation Functions 00:13:34
    3. Regular Expressions [Part 2] - Metacharacter Symbols 00:12:35
    4. Regular Expressions [Part 3] - Character Sets & Quantifiers 00:12:41
    5. Regular Expressions [Part 4] - Shorthand Character Classes 00:09:44
    6. Regular Expressions - Form Validation Project 00:21:56
  10. Chapter 10 : Other Newer Features - ES2015+
    1. Iterators & Generators 00:09:46
    2. Profile Scroller - Iterator Mini Project 00:15:07
    3. Symbols 00:08:53
    4. Destructuring 00:09:29
    5. ES6 Maps 00:08:59
    6. ES6 Sets 00:09:02
  11. Chapter 11 : JavaScript Patterns
    1. What Are Patterns? 00:02:29
    2. Module & Revealing Module Pattern 00:12:54
    3. Singleton Pattern 00:04:58
    4. Factory Pattern 00:08:18
    5. Observer Pattern 00:16:02
    6. Mediator Pattern 00:10:15
    7. State Pattern - Small Project 00:10:54
  12. Chapter 12 : Tracalorie Project (Using the Module Pattern)
    1. Project Introduction 00:03:14
    2. Creating the UI With Materialize CSS 00:16:39
    3. Controllers & Data Structure 00:11:02
    4. Get & Populate Items 00:10:05
    5. Add Item to Data Structure 00:16:35
    6. Add Item to the UI 00:12:39
    7. Add Total Calories 00:07:43
    8. Working With the Edit State 00:20:27
    9. Updating Items & Total Calories 00:18:57
    10. Delete & Clear Items 00:15:46
    11. Add & Get From Local Storage 00:12:35
    12. Delete & Clear from Local Storage 00:10:10
  13. Chapter 13 : Microposts Project - CRUD Front End (Webpack & Babel)
    1. Babel & Webpack Environment Setup 00:08:56
    2. Intro to ES2015 Modules 00:09:22
    3. Create the UI 00:07:08
    4. Create a fake REST API Using JSON Server 00:07:14
    5. Get & Display Posts 00:13:02
    6. Add Posts & Show Alert 00:12:00
    7. Post Edit State & Update [1] 00:08:30
    8. Post Edit State & Update [2] 00:18:06
  14. Chapter 14 : Wrap Up
    1. Wrap Up & Where to Go From Here 00:02:11