Everand Logo

Welcome to Everand!

  • Discover millions of audiobooks, ebooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

    Mastering JavaScript: The Complete Guide to JavaScript Mastery
    Mastering JavaScript: The Complete Guide to JavaScript Mastery
    Mastering JavaScript: The Complete Guide to JavaScript Mastery
    Ebook296 pages2 hours

    Mastering JavaScript: The Complete Guide to JavaScript Mastery

    By Tim Robards

    5/5

    ()

    Read preview

    • Javascript

    • Web Development

    • Dom Manipulation

    • Data Types

    • Html

    • Strings

    • Arrays

    • Programming

    • Objects

    • Variables

    About this ebook

    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!

    LanguageEnglish
    PublisherTim Robards
    Release dateJun 7, 2022
    ISBN9781370093106
    Mastering JavaScript: The Complete Guide to JavaScript Mastery
    Author

    Tim Robards

    Web developer, writer & creator of easeout.co.

    Read more from Tim Robards

    Related to Mastering JavaScript

    Related ebooks

    Programming For You

    View More
    View More

    Related podcast episodes

    Related categories

    Reviews for Mastering JavaScript

    5/5

    1 rating0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Mastering JavaScript - Tim Robards

      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

      Enjoying the preview?
      Page 1 of 1