The Complete Modern JavaScript Course with ES6

The Complete Modern JavaScript Course with ES6

by Issam Baou Development Island
Released May 2018
Publisher(s): Packt Publishing
ISBN: 9781789341539

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Whether you have no programming background or have some experience with JavaScript but admit that you struggle with advanced JavaScript coding or feel intimidated when you come across “weird” JavaScript concepts such as Closures, Encapsulation, or IIFE, this is the course for you!

This course follows a robust structure and a result-driven approach based on “learning by doing”, which has helped our students secure web development jobs in the past. It is the most comprehensive JavaScript course in the market. With 21 highly structured sections distributed over 30 hours plus of content and 227 lectures, including crystal-clear presentations, detailed explanations, coding challenges, and a complete professional real-life project.

In this course, you will go from a beginner to a job-ready JS Developer. We will prove that concepts like closures, hoisting, IIFE, encapsulation, and more are as easy as drinking a glass of water. And you will gain so much power you will use those "weird" concepts to build a fully functional 10h Typing Test App which will make you proud of yourself.

By the end of the course, you will have built a full professional JavaScript project from scratch: a fully functional typing test application that can test users’ typing speed and generate a PDF certificate at the end of the test.

What You Will Learn

  • Learn JavaScript fundamentals as well as advanced concepts
  • Master tricky JS concepts such as closures, execution contexts, scope, and more
  • Understand how JavaScript works behind the scenes
  • Master the modular design pattern and use it to write professional and well-structured code
  • Learn new ES6 features such as template literals, arrow functions, classes, and more
  • Build a fantastic fully functional typing test

Audience

Students who would like to go from zero skills to securing a JavaScript developer job or who know some JS and know how to use it, but have not mastered advanced concepts such as IIFE, closures, and so on. This course is also for students preparing for JS interviews with top web development corporations.

No prior knowledge is necessary. HTML/CSS, though, can be useful. But worry not, we have covered videos that teach HTML and CSS from scratch.

About The Author

Development Island (UK), Issam Baou: Issam Baou is the founder and director of Development Island based in Bedford, United Kingdom, and is specialized in providing the best technology courses on the Internet. He has two master’s degrees in engineering and management from Cranfield University (UK) and Ecole Centrale, Paris. He has worked for many world-class companies in the past, including Amadeus, Ford, and Airbus, in different roles including web development, consulting, simulation, and teaching. He has a solid and successful track record of teaching mathematics and web development.

Table of contents

  1. Chapter 1 : Introduction
    1. Promo
    2. Introduction to JavaScript
    3. Install Chrome and Brackets
    4. Your First JavaScript Program
  2. Chapter 2 : Variables and Data Types
    1. Introduction
    2. Create Variables
    3. Rules
    4. Memory
    5. Numbers - Introduction
    6. Numbers - Arithmetic Operations
    7. Numbers - Operator Precedence
    8. Operators and Operator Precedence
    9. Numbers - More Operator / Special Numbers
    10. Activity: Avoid a Speeding Fine! (Four Tasks)
    11. Strings
    12. Activity: How Old Will You Be in 2040? (Nine Tasks)
    13. Booleans
    14. Booleans - Logical Operators
    15. Booleans - Operator Precedence
    16. Booleans - Ternary Operator
    17. Booleans Versus Non-Booleans
    18. Activity: Will You Pass? (Six Tasks)
    19. Null and Undefined
    20. Type Coercion
    21. Objects
    22. Activity: Claim Extra Points (Four Tasks)
    23. Arrays
    24. Coding Challenge: Help the Cashier - Introduction
  3. Chapter 3 : Conditional and Looping
    1. If Statement
    2. Activity: Beat Usain Bolt (Four Tasks)
    3. Switch Statement
    4. Activity: Days of the Week (Two Tasks)
    5. For Statement
    6. Activity: Find a Hotel in London (Six Tasks)
    7. while do Statement
    8. do while Statement
    9. Activity: 24h Schedule App (Five Tasks)
    10. Coding Challenge: Improve Your Cashier Code - Part 1
    11. Coding Challenge: Improve Your Cashier Code - Solution 1
    12. Coding Challenge: Improve Your Cashier Code - Part 2
    13. Coding Challenge: Improve Your Cashier Code - Solution 2
  4. Chapter 4 : Functions (Basic and Intermediate)
    1. Introduction
    2. Activity: Holiday Budget Planner (Two Tasks)
    3. Return Values
    4. Activity: The Miami Museum (Two Tasks)
    5. Pass 'by value' Versus 'by reference'
    6. Activity: Rafael Nadal Versus Novak Djokovic (Four Tasks)
    7. First Class Functions
    8. Activity: Mars Invasion (Six Tasks)
    9. Statement Versus Expression
    10. Activity: The Island Treasure (Four Tasks)
    11. IIFE: Immediately Invoked Function Expressions (Intermediate)
    12. An Invocation Pattern: Recursion
    13. Activity: Fibonacci's Honey Bees (Two Tasks)
    14. Built-In JS Functions
    15. Scope (Intermediate)
    16. Activity: Manchester- Part London Train Simulation (Seven Tasks) (1)
    17. Activity: Manchester- Part London Train Simulation (Seven Tasks) - Part 2
    18. Coding Challenge: Is It Prime? - Introduction
    19. Coding Challenge: Is It Prime? - Logic
    20. Coding Challenge: Is It Prime? - Solution
    21. Coding Challenge: Can You Count the Primes? - Introduction
    22. Coding Challenge: Can You Count the Primes? - Logic
    23. Coding Challenge: Can You Count the Primes? - Solution
  5. Chapter 5 : Objects
    1. Object Literals
    2. ‘Dot Notation’ Versus ‘Brackets’
    3. Activity: Hack the Recipe (Three Tasks)
    4. Constructors - ‘new’ Keyword - ‘this’
    5. Prototype
    6. Activity: The Hotel Manager (10 Tasks) - Part 1
    7. Activity: The Hotel Manager (10 Tasks) - Part 2
    8. Activity: The Hotel Manager (10 Tasks) - Part 3
    9. Equality
    10. String Object
    11. Activity: Lion, tiger or else? (5 Tasks) - Part 1
    12. Activity: Lion, Tiger or Else? (Five Tasks) - Part 2
    13. Date Object (1)
    14. Date Object (2)
    15. Activity: Is the Library Open? (Six Tasks) - Part 1
    16. Activity: Is the Library Open? (Six Tasks) - Part 2
    17. Activity: Is the Library Open? (Six Tasks) - Part 3
    18. Math Object
    19. JSON
    20. Array Object
    21. Array Methods: Filtering, Slicing, and more
    22. Loop Through Arrays Using forEach
    23. Activity: The Europe Tour (Four Tasks) - Part 1
    24. Activity: The Europe Tour (Four Tasks) - Part 2
  6. Chapter 6 : The DOM
    1. Learn HTML and CSS (1)
    2. Learn HTML and CSS (2)
    3. Learn HTML and CSS (3)
    4. Learn HTML and CSS (4)
    5. Understand the DOM
    6. Access DOM Elements (1)
    7. Access DOM Elements (2)
    8. Change DOM Elements
    9. Remove DOM Elements
    10. Event Handling (1)
    11. Event Handling (2)
    12. Event Object - Keys
    13. Event Object - Mouse Events
    14. Event Object - Scroll Event
    15. Event Object - Focus
    16. Event Object - preventDefault
    17. Single Threaded JavaScript
    18. Debouncing
    19. Event Propagation
    20. Event Delegation
    21. jQuery
  7. Chapter 7 : Execution Context - Hoisting - 'this'
    1. Global Execution Context - ‘this’
    2. Execution Context - Creation and Hoisting
    3. Execution Context - Execution
    4. Function Declaration Overriding Variable Declaration
  8. Chapter 8 : Scope Chain
    1. Introduction
    2. Understand the Scope Chain
  9. Chapter 9 : Closures
    1. Understand Closures
    2. Update Values of Outer Variables (1)
    3. Update Values of Outer Variables (2)
    4. Closures with Event Loops (1)
    5. Closures with Event Loops (2)
    6. Iteration Challenge
  10. Chapter 10 : Objects (Advanced): Encapsulation and Information Hiding
    1. Why Would You Hide Information?
    2. Use Closures to Hide Properties and Methods
    3. Use IIFE to Create Private Static Properties and Methods
  11. Chapter 11 : Objects (Advanced): Inheritance and Prototype Chain
    1. Understand the Prototype (1)
    2. Understand the Prototype (2)
    3. Inheritance and PrototypeChain: __proto__
    4. Inheritance and PrototypeChain: Object.create
    5. Inheritance and PrototypeChain: Constructor Inheritance
    6. Inheritance and PrototypeChain: Extend Function
    7. Class Augmentation (1)
    8. Class Augmentation (2)
    9. Object Cloning
  12. Chapter 12 : Objects (Advanced): Objects Challenges
    1. Challenge: Iteration and hasOwnProperty
    2. Challenge: Iteration Using object.keys and forEach
    3. Challenge: getPrototypeOf and getOwnPropertyNames
    4. Challenge: Climb Up the Prototype Chain
  13. Chapter 13 : Objects (Advanced): Singleton and Module Patterns
    1. Namespacing
    2. Singleton Pattern
    3. Wrap Page-Specific Code
    4. Modular Design Pattern
  14. Chapter 14 : Functions (Advanced)
    1. Functions Are Objects
    2. The ‘arguments’ Property
    3. Function.prototype.call
    4. Function.prototype.apply
    5. Function.prototype.bind
  15. Chapter 15 : Full Professional Project: Typing Test App
    1. Introduction
    2. Steps Simplified
    3. Back to Client Requirements
    4. Functional Design
    5. Modular Design Pattern
    6. Modular Categorization
    7. Data Module Structure
    8. UI Module Structure
    9. Format Current Word Structure
    10. Results Calculation Structure
    11. Update Time Left - Structure
    12. Certificate Module Structure
    13. Events Module Structure
    14. Words Module Structure
    15. Overview of Modules
    16. Get Ready to Write Code
    17. App Skeleton and Decoration (1)
    18. App Skeleton and Decoration (2)
    19. App Skeleton and Decoration (3)
    20. init Function (Events Module)
    21. Fill the List of Test Words (Data Module)
    22. Shuffle an Array
    23. Add Random Capitalization
    24. Add Random Punctuation
    25. Fill the List of Test Words (1) (UI Module)
    26. Fill the List of Test Words (2) (UI Module)
    27. Time Initialization (Data and UI Modules)
    28. Move to a New Word (Data Module)
    29. Set the Active Word and Format It (UI Module)
    30. Type a Character - Event Listener
    31. word.prototype.update(value)
    32. keydown Versus keyup Versus Keypress Versus Input Events
    33. Format the Active Word (UI Module)
    34. Press Space - Event
    35. Scroll the Active Word into the Middle of the View
    36. Press Enter - Create a Fake Event Using the Event Constructor
    37. Launch the Test
    38. Calculate Words Per Minute and wpmChange (Data Module)
    39. Update the Time Left (Data and UI Modules)
    40. Calculate Clicks Per Minute and cpmChange (Data Module)
    41. Calculate Accuracy and accuracyChange (Data Module)
    42. Update Results (UI Module)
    43. End the Test and Show the Modal (1) (Data and UI Modules)
    44. End the Test and Show the Modal (2) (Data and UI Modules)
    45. Generate PDF Certificate (1) (Certificate Module)
    46. Generate PDF Certificate (2) (Certificate Module)
    47. Generate PDF Certificate (3) (Certificate Module)
  16. Chapter 16 : ES6 - ES2015: Introduction
    1. Introduction
  17. Chapter 17 : ES6 - Variables and Scoping
    1. Review of ‘var’ Declaration
    2. ‘let’ Scope and Temporal Dead Zone
    3. Block Scoping in ES6
    4. Functions and Block Scoping
    5. Functions and Block Scoping - Use ‘let’
    6. ‘let’ Scope Versus Closures
    7. Closures Challenge
    8. ‘const’ - Read Only Variables
  18. Chapter 18 : ES6 - Modern Features That Will Make Your Coding Experience Easier!
    1. Template Literals
    2. Arrow Functions - ‘this’ Lexical Scope
    3. Destructuring - Arrays
    4. Destructuring - Objects
    5. Destructuring - Functions
    6. Functions - Default Parameter Values
    7. Functions - Rest Parameters
    8. Spread Operator
    9. Object Literals New Features
  19. Chapter 19 : ES6 - New Data Structures and Iteration (Iterators, Generators, Maps, Sets)
    1. for of Loop
    2. Iterators, Generators, and next()
    3. Maps - Iteration
    4. Sets - Iteration
    5. Sets - Challenges: Intersection * Difference
    6. Symbols
    7. Symbol.iterator
  20. Chapter 20 : ES6 - Modern Array Methods
    1. Array.from: collections, strings, and arguments
    2. Array.from: optional map, length property, Maps, and Sets
    3. Array.of()
    4. More Modern Array methods
  21. Chapter 21 : ES6 - Classes (Static Methods, Getters/Setters, Inheritance, Extends, Super)
    1. Back to ES5 Constructors
    2. ES6 Classes Syntax
    3. Static Methods
    4. Getters and Setters
    5. Class Inheritance - extends - super()

Product information

  • Title: The Complete Modern JavaScript Course with ES6
  • Author(s): Issam Baou Development Island
  • Release date: May 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789341539