HTML, CSS, and JavaScript (and Bonus ECMAScript) | JavaScript Grandmaster 2025 for Serious Learners, Complete Guide Beginner to Expert

Book Overview & Buying
Table Of Contents

JavaScript Grandmaster 2025 for Serious Learners, Complete Guide Beginner to Expert

By : SkillZone

Buy this Video

JavaScript Grandmaster 2025 for Serious Learners, Complete Guide Beginner to Expert

By: SkillZone

Buy this Video

Overview of this book

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. All the resources for this course are available at https://github.com/PacktPublishing/Complete-JavaScript-Course

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

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

JavaScript Engines

Section Introduction

Engines - Introduction

Why Are There Different JS Engines?

V8 Engine

JavaScript Lives in Different Environments

Outro

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

IDE (Integrated Development Environment) and Text Editors - Introduction

IDEs (Integrated Development Environments) - Introduction

Local Server

How to Include JavaScript in Your HTML

<Script> Tag - Example of Inline and External

Inline JavaScript Example within the <head> Tag and <body> Tag

Order Matters

Trick Question - What Do You Expect to Happen?

Order Matters - The Problem

Order Matters - Why Did the Element Not Load?

Order Matters - Fixing the Problem

External JavaScript and the Async Attribute

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

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

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

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

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

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

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)

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

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

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

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

JavaScript Grandmaster 2025 for Serious Learners, Complete Guide Beginner to Expert

By : SkillZone

JavaScript Grandmaster 2025 for Serious Learners, Complete Guide Beginner to Expert

By: SkillZone

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access