Become a Grandmaster in JavaScript by starting with the foundation level and moving toward advanced level in JavaScript.
About This Video
In Detail
JavaScript is the #1 scripting language of the web, where a lot of the dynamic and styled content is …
Become a Grandmaster in JavaScript by starting with the foundation level and moving toward advanced level in JavaScript.
About This Video
In Detail
JavaScript is the #1 scripting language of the web, where a lot of the dynamic and styled content is handled by JavaScript in the background. But before using this language to create dynamic websites, you need to have a firm grasp of how it works behind the scenes.
You will learn “why” things work and not just “how”. Understanding the fundamentals of JavaScript is important as it will allow you to write more complicated code. And trust me, every programming encounters bugs, and without understanding the fundamentals, you will be totally lost.
By the end of this course, you will be able to “speak” JavaScript by gaining an understanding of how the browser uses it; what variables, objects, and functions are; what different data types there are; and how to manipulate content on a website. We will dig deeper and create our own dialog methods from scratch. You will learn about the arrow syntax, Math.random() function, looping through objects and arrays, and working with dates. We will look at prototypes, JS Engines, the Execution Stack, and a whole bunch more!
Through practical examples, this course helps you understand JavaScript piece by piece. And we will use the latest and best features of JavaScript along the way so you can stay ahead of the pack.
Audience
This course is for beginners and is aimed at people new to the world of web design. No previous JavaScript experience is necessary.
This course is for someone wanting to be a professional, an expert, and confident in using JavaScript to create complex and impressive websites.
Chapter 1 : Programming, Machine Code, and Interpreters
Welcome to the Course
Introduction
Programming - What Is It?
English Analogy
Order Matters
GIGO
Quick Recap
Hundreds of Languages
Machine Code - Introduction
Machine Code - A Little Deeper
Processors
Low-Level Languages
High-Level Languages
Step Back - A Comparison Between Low Level and High-Level Languages
Writing JavaScript - How
Compiling
Interpreters
Compiling Versus Interpreting
Intermediate
Recap: Compiling, Interpreting, and JavaScript
Outro
Chapter 2 : HTML, CSS, and JavaScript (and Bonus ECMAScript)
Section Introduction
Relationship between HTML, CSS, and JavaScript
Practical Example: Browser’s Default CSS Styles
Practical Example: Changing Button Text
Scripting Language
Is JavaScript a ‘Safe’ Language?
Java Versus JavaScript
Part 1 - ECMAScript and ES6
Part 2 - ECMAScript and ES6
Chapter 3 : JavaScript Engines
Section Introduction
Engines - Introduction
Why Are There Different JS Engines?
V8 Engine
JavaScript Lives in Different Environments
Outro
Chapter 4 : Writing JavaScript in the Console
Section Introduction
Console - Introduction
Alert Function - Introduction
Console Log
Browser Object Model (BOM)
Window Object - Playaround
Deprecated Window Properties
Console - Log, Info, Warn, and Error
Console - Assert
Console - Count, Dir, Group, Time, Table
Substitutions
Chapter 5 : IDE (Integrated Development Environment) and Text Editors - Introduction
IDEs (Integrated Development Environments) - Introduction
Local Server
How to Include JavaScript in Your HTML
Tag - Example of Inline and External
Inline JavaScript Example within the Tag and Tag
Chapter 6 : Syntax
Syntax - Introduction
Syntax - What Is It?
Syntax Parser
White Space
Semicolons and the ‘return’ Statement
Comments
Data Types and the typeof() Method
Primitive Data Types - An Example
String Data Type = “Click Me” Button Example
Properties
Number Date Type - Floating Points
Number Data Type: 0.1 + 0.2
Number Data Type - Base 10 Versus Base 2
Number Data Type - Number (), Infinity, and More
Null and Undefined Data Types
Escaping
Operators - Introduction
Operators - Binary Versus Unary
Coercion - Introduction
Coercion - String, Number, and Boolean
Chapter 7 : Variables
Variables - Section Introduction
Variables - What Are They?
Variable Creation: Declare, Initialize, and Assign
Identifiers
VAR - the Old Way to Declare a Variable
LET - the New Way to Declare a Variable
CONST - the New Way to Declare a Constant Variable
CONST - Try and Catch
Variables - Quick Recap
Scope - What Is It?
Local Versus Global Scope, and Function Versus Block Scope
Scope - VAR Versus LET and a NESTED Block
Using DevTools to Determine Scope
Chapter 8 : Dialog Boxes in JavaScript
Alert - Creating an Onclick Event for a Button
Alert - Writing Text to a Screen after the Alert Has Been Acknowledged
Confirm - Conditional If Statement
Prompt
Alert - Custom Design with Pure HTML, CSS, and JS
Chapter 9 : JavaScript Dates
Date Object
Why is the New Keyword Important when Instantiating the Date Object?
Four Ways to Create a Date Object in JavaScript
Get Methods on the Date Object
Set Methods on the Date Object
3 Practical Examples: Birthday, UTC, and Reformatting
Chapter 10 : Objects
Section Introduction
Objects - Introduction
name:value Pairs
Objects and Data - How They Relate to Each Other
Objects Versus Variables
Properties and Methods
Accessing Properties
Creating Objects - Four Ways
Creating Objects - 1. Object Literal
Creating Objects - 2. Constructor Function Introduction
Creating Objects - 2. Constructor Function Example
Pause Quickly
Construction Function Versus Object Literal - Part 1
Construction Function Versus Object Literal - Instantiation Versus Singleton Approach
Construction Function Versus Object Literal - init Function and Which to Choose
Creating Objects - 3. Object.create()
Examples of Object.create()
Another Example of Object.create()
Creating Objects - 4. Classes
Understanding Classes Starts with the Constructor Function
Class Example
Objects Recap and an Example of How Objects can Be Passed into Other Functions
JavaScript Object Model
Chapter 11 : Advanced Section - Building a Custom Polyfill
Introduction
What Is a Browser?
Do Browsers Follow a Set of Common Rules?
What Is a Polyfill?
Testing Whether the forEach() Method Exists in Our Browser
What Is forEach()
Practical Example of forEach()
Custom forEach() Polyfill - First Step
Custom forEach() Polyfill - Introduction
Custom forEach() Polyfill - Callback Function
What Is THIS?
Custom forEach() Polyfill - Final
Outro
Chapter 12 : Arrays and Loops
Arrays Introduction
Creating Arrays
Push and Pop
Three Types of Array Methods
Mutator, Accessor, and Iterator
Why Is Being Able to Loop Through Data Important
Looping Through Arrays
Looping Through Objects
Object Shapes (Advanced)
Chapter 13 : Prototypes
Section Introduction
Prototype Example and isPrototypeOf() Method
What Is a Prototype?
Prototype Versus proto
Prototype Versus proto Part 2
Prototype Tree and Null
Let us Prove the Prototype Tree
Chapter 14 : Functions
Section Introduction
What is a Function?
Invoking a Function Versus Returning a Function
Cool Example: Click on a Paragraph and Make Text Change
Cool Example (Advanced): Click Button and Display Random Quotes
Explanation of Math.Random()
Return Keyword
There Are Two Types of Functions
Function Expressions Versus Declarations - Examples
Function Declaration Versus Function Expression
New Arrow Syntax
What Does “No Binding of This” Mean?
Recap - Variables, Objects, and Functions
Introduction to the toLowerCase() Function
Introduction to the Array.from() Method
How Does the Array.from() Method Work?
Introduction to the indexOf() Method
Using indexOf() with Arrays
Using indexOf() with Strings
Chapter 15 : JavaScript - THIS, Execution Context and Lexical Environments
Section Introduction
What is ‘This’ Reference Variable?
Global Execution Context
Global Versus Functional Execution Context
Execution Stack
Execution Stack - Example
What Is a Lexical Environment?
Lexical Environment - Advanced Example
Six Rules for Determining What This Refers To
Call (), Apply () and Bind () Methods
Chapter 16 : Teaser - How Does JavaScript Affect the Critical Rendering Path
Introduction
What Is the CRP?
How Browsers Used to Work
How Browsers Work Today
Render Blocking Resources - Introduction
JavaScript and the DOM
JavaScript Is Render Blocking
Placing JavaScript at the Bottom of Your File
Using the Async Attribute
Summary of Where We Can Place Our JS to Improve the CRP
Outro