Mastering JavaScript: The Complete Guide to JavaScript Mastery

By Tim Robards

JavaScript is one of the most powerful programming languages on the web! With it, you can build highly dynamic websites and apps (including both frontend and backend development!).

Have you ever wanted to learn Angular, React, Vue or Node.js? A solid understanding of JavaScript fundamentals will make picking up JS frameworks a breeze!

We cover it all from basic Syntax & Structure, Variables and Data Types to the Document Object Model (the DOM), Arrays, Functions, Loops, and Objects. We also dive into advanced topics such as working with APIs, Async and Defer, Promises, Regex operations & more!

Mastering JavaScript will benefit your web development skills enormously - and it's in very high demand professionally, today the average salary for JavaScript developers are some of the highest in tech!

• Language: English
• Publisher: Tim Robards
• Release date: Jun 7, 2022
• ISBN: 9781370093106

Tim Robards

Web developer, writer & creator of easeout.co.

Book preview

Mastering JavaScript

Mastering JavaScript

The Complete Guide to JavaScript Mastery.

Tim Robards

© 2022 Tim Robards

Table of Contents

An Introduction

Introducing JavaScript

How to add JavaScript to a webpage

How to add inline JavaScript

How to link to external JavaScript

Summary

Syntax and Structure

JavaScript Values

Camel Case

Unicode

Semicolons

Indentation

White Space

Commenting

Identifiers

Case Sensitivity

Reserved Words

JavaScript Operators

JavaScript Expressions

Summary

Variables, Scope & Hoisting

What are Variables?

Naming Variables

Difference Between var, let, and const

Variable Scope

Hoisting

Constants

Summary

Data Types

What are Data Types?

Summary

Converting Data Types

Converting Values to Strings

Converting Values to Numbers

Converting Values to Booleans

The Basics of JavaScript Strings

Creating Strings

Concatenation

Syntax Rules

Summary

Working with Strings

The Anatomy of a String

Converting Strings into Numbers

An Introduction to the DOM

What is the DOM?

The DOM Tree & Nodes

Accessing DOM Elements

getElementById()

getElementsByClassName()

getElementsByTagName()

Query Selectors

Traversing the DOM

Root Nodes

Parent Nodes

Child Nodes

Sibling Nodes

Making changes to the DOM

Creating New Nodes

Inserting Nodes into the DOM

Removing Nodes from the DOM

How to modify DOM nodes

Modifying Attributes

Modifying Classes

Modifying Styles

Understanding Events

What are Event Handlers & Event Listeners?

Inline Event Handlers

Event Handler Properties

Event Listeners

Common Events

Event Objects

Summary

Mastering Arrays

Creating an Array

Looping over an Array

Adding to the end of an Array

Removing from the end of an Array

Removing from the front of an Array

Adding to the front of an Array

Getting the index of an Array item

Removing an item by index position

Remove multiple items from an index position

Copying an Array

Checking if an object is an Array

Reversing the order of an Array

Replacing Array elements with static values

Sorting an Array

Merging Arrays

Converting Array Elements into a String

map(), filter() and reduce()

Find the first element that satisfies a function

Mastering Objects

Creating an Object

Dot notation

Deleting Properties

Square Brackets

Updating object members

What is this?

Summary

Using Conditionals

if/else Statements

else if

Comparison operators

Nesting if/else

Logical operators: AND, OR, and NOT

switch statements

Ternary operator

Mastering Loops

the for loop

do…while statement

while statement

labelled statement

break statement

continue statement

for…in statement

for…of statement

Summary

Mastering Functions

Defining functions

Function expressions

Calling functions

Function scope

Nesting functions and closures

Closures

The arguments object

Function parameters

Arrow functions

Predefined functions

Summary

What are classes?

Classes are just like functions!

Class declarations

Hoisting

Class expressions

Constructors

Instance properties

Field declarations

Child classes using ‘extends’

Species

The ‘super’ keyword

Mix-ins

Understanding APIs

APIs in JavaScript

So how do APIs work?

Summary

Fetching data from a server

The old way…

The solution: AJAX

Creating an Ajax request

XMLHttpRequest

Fetch

Working with promises

Summary

An Introduction to REST APIs

What is a REST API?

RESTful Architecture

REST in action

Working with REST data

Promises

Why use promises?

Summary

Async & defer

So when should I use each method?

The ‘this’ keyword

A little background

Execution Context

this in Global Scope

this when calling Function

this in Methods

this with call() and apply()

this with bind()

this inside an Arrow Function

Summary

Understanding Regex

A very basic Regex pattern

Why use Regular Expressions?

Creating a Regular Expression

Regular Expression Methods

The Power of Regex

Flags:

Character groups

Reviewing Regex

Summary

You did it!

An Introduction

JavaScript is the most popular programming language in the world, so it’s no wonder that it’s one of the most sought-after skills in the web development industry. In fact, the Devskiller IT Skills and Hiring Report (2020) reports that 72% of companies are looking to hire JavaScript experts.

Additionally, of the over 1.8 Billion websites in the world, JavaScript is used on 95% of them.

Choosing to learn JavaScript is undoubtedly a very wise move! Let’s dive right in with an introduction, then we’ll look at the initial setup steps.

Introducing JavaScript

JavaScript is a programming language that gives you the ability to implement complex features on web pages -and there is almost no limit to what you can do! You can animate 2D/3D graphics, add scrolling video, interactive maps, zoomable images, develop games, the possibilities are truly endless!

When it comes to standard web technologies, it plays exceptionally well with HTML and CSS.

HTML is the markup language that we use to structure our web content. We classify our content into elements such as paragraphs, headings, tables, and even embedded images and videos.

CSS is a language consisting of style rules that we use to style our HTML content. We use it to set fonts, colors, backgrounds and we can also create our overall page layout (with positioning, flexbox, and grid) using CSS.

JavaScript enables you to create just about everything else! As mentioned, you can add complex animation, control multimedia, and add dynamic content.

Let’s see an example of how they all can interact together!

Here is our basic HTML, consisting of a heading, paragraph, and button:

1 <h1>I am a headline made with HTML</h1> 2 <p>And I am a simple text paragraph. The color of this te\ 3 xt is styled with CSS. Click the button below to remove m\ 4 e through the power JavaScript.</p> 5 <button>Hide the text above</button>

Let’s add some CSS to make it look nice:

1 body { 2 font-family: sans-serif; 3 text-align: center; 4 padding: 3rem; 5 font-size: 1.125rem; 6 line-height: 1.5; 7 transition: all 725ms ease-in-out; 8 } 9 10 h1 { 11 font-size: 2rem; 12 font-weight: bolder; 13 margin-bottom: 1rem; 14 } 15 16 p { 17 margin-bottom: 1rem; 18 color: tomato; 19 } 20 21 button { 22 cursor: pointer; 23 appearance: none; 24 border-radius: 4px; 25 font-size: 1.25rem; 26 padding: 0.75rem 1rem; 27 border: 1px solid navy; 28 background-color: dodgerblue; 29 color: white; 30 }

And finally, we can add some JavaScript to implement dynamic behavior:

1 document.querySelector(button).addEventListener(click\ 2 , function () { 3 document.querySelector(p).css(opacity, 0); 4 });

In this example, after the button is clicked, JavaScript detects the click event and removes the paragraph by adding the opacity: 0 CSS rule. All without refreshing the page!

And this is just the beginning.. JavaScript can do a whole lot more! I’ll be taking a deep dive into all things JavaScript throughout this book.

For now, let’s see how we can add JavaScript to our webpages, so we can start playing around for ourselves.

How to add JavaScript to a webpage

JavaScript is added to an HTML page in a similar manner to CSS. If you’re familiar with CSS, you may recall that it uses elements to connect to external stylesheets and

JavaScript only needs one element in order to be added to an HTML page: the

Let’s take a look at how to use

How to add inline JavaScript

JavaScript code that is embedded with an HTML document is referred to as inline JavaScript. To add it to your webpage, just put your JavaScript code in between a pair of

1 <script> 2 3   // Your JavaScript code 4 5 </script>

The best place to put this is just before the tag. This allows your scripts to be downloaded ASAP without blocking your browser (more on this in a later chapter).

So the above example could be added to a webpage, like so:

1 <script> 2 document.querySelector(button).addEventListener(click\ 3 , function () { 4 document.querySelector(p).css(opacity, 0); 5 }); 6 </script>

How to link to external JavaScript

On the other hand, the HTML document may refer to a separate file that contains the JavaScript program, in which case it is referred to as external JavaScript.

You may create as many separate JavaScript files as you like! As long as you give them the .js extension, you can link them up to your webpage. For example, the file script.js can be linked to your page like so:

1 <script src=script.js defer></script>

Inside script.js, you have your JavaScipt code:

1 document.querySelector(button).addEventListener(click\ 2 , function () { 3 document.querySelector(p).css(opacity, 0); 4 });

This code works the same as our inline example, only now we’ve got our JavaScript in an external file. This is generally a good thing as your code will typically be much more organized and reusable. Additionally, your HTML will be much easier to read without huge chunks of script mixed through it.

Summary

We’ve begun with a little bit of the history of JavaScript, including how it relates to both HTML and CSS to essentially form the basis of modern front-end development! We also looked at how to add JavaScript to your HTML webpage, using both the internal & external approaches.

JavaScript may seem a bit intimidating right now, but don’t worry - in this book, we’ll work through each of the core concepts in simple steps. There will undoubtedly be a ton of AHA moments on your journey. As you continue to push forward, these concepts will start to make much more sense as you make new connections and increase your knowledge!

Syntax and Structure

As with any language, programming languages are defined by sets of rules. The rules (or syntax) are what we follow when we write our code, which form the logical structure of our programs.

Let’s dive right in with the building blocks of JavaScript. We’ll be looking at values (literals & variables), camel casing, unicode, semi colons, indentation, white spacing, commenting, case sensitivity, keywords, operators and expressions!

By taking the time to learn the fundamentals, we’ll be well on our way toward building more functional and readable code.

JavaScript Values

In JavaScript there are two types of values: Fixed values (or literals) and Variable values (variables).

Literals

Literals are defined as values that are written in our code, such as numbers, strings, booleans (true or false), as well as object