Book Image

JavaScript Complete Grandmaster 2023 [Video]

By : SkillZone .
Book Image

JavaScript Complete Grandmaster 2023 [Video]

By: SkillZone .

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

Related Content you might be interested in

Current Title:

Small book image
JavaScript Complete Grandmaster 2023 [Video]
SkillZone .
Apr, 2022 | 12 hours 25 minutes
No titles found
Table of Contents (16 chapters)
Free 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
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
3
JavaScript Engines
Section Introduction
Engines - Introduction
Why Are There Different JS Engines?
V8 Engine
JavaScript Lives in Different Environments
Outro
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
5
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
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
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
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
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
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
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
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)
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
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
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
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
Chapter 10
Objects
Content Locked
Section 9
Creating Objects - 1. Object Literal
An object literal is a list of name-value pairs (each pair is separated by a comma) wrapped in curly braces. Object literals encapsulate your data and enclose it in a tidy package. Why is this useful? Well, it reduces the need to use global variables which can cause problems when combining code. Object literals are also the easiest way to create an object in JavaScript.
Previous Section
End of Section 9
Next Section