Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Free Preview: Modern JavaScript Fundamentals

Introduction

02:12
  • Overview
  • Transcript

JavaScript is the language of the web. If you want to code for the web, you need to know JavaScript inside and out. From humble beginnings, JavaScript has grown to a powerful and complex language with features such as classes, promises, arrow functions, generators, string templates, and many others.

In this course, you'll learn all of the essential concepts of the JavaScript language. That's right: all of them! Including the most important recent improvements to the language, in JavaScript ES6 (ECMAScript 2015) and JavaScript ES7 (ECMAScript 2016).

You'll start with the very fundamentals of the language: variables and datatypes. Then in each lesson you'll build knowledge, from data structures like arrays and maps to loops, control structures, and functions. Along with the basics of the language, you'll also learn some key built-in APIs for manipulating data, AJAX, and working with the web browser DOM. Finally, you'll get a look at some of the most powerful and widely used web APIs that are supported by all modern browsers.

There's a lot to learn, so let's jump in!

Learn JavaScript: The Complete Guide

We've built a complete guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics.

1.Introduction
2 lessons, 07:42

Free Lesson
1.1
Introduction
02:12

Free Lesson
1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
7 lessons, 1:02:30

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Promises
09:52

7.4
Regular Expressions
10:50

7.5
More About Regular Expressions
08:38

7.6
Classes
06:48

7.7
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:42

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:11

9.Web APIs
4 lessons, 17:43

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:47

10.Conclusion
1 lesson, 00:43

10.1
Conclusion
00:43


1. Introduction

1.1 Introduction

Hi, folks, welcome to the Modern JavaScript Fundamentals course here on Tuts+. My name is Dan Wellman, and in this course, we're going to learn all of the essential concepts of JavaScript. Yep, all of them. After the introductory first section, we'll take a look at some of the fundamental concepts of the language, like how variables are declared and assigned, and the different data types and operators in the second section. In section three, we'll focus on data structures, and look at arrays, objects, maps, and sets. In section four, we'll see how we can control program execution and take a look at the conditional logic involving if, switch, and ternary statements. We'll also cover loops and iterators here. Section five will see us move on to some more practical aspects of JavaScript, like how to work with the different types of data. And some of the built in APIs like JSON and Math. Ww'll also see how to work with dates and times. Functions are one of the most used parts of the language, as well as one of the most useful. So section six will focus entirely on them. We look at some essential function concepts like scope, closures, prototypes, and the this key word. And we'll see how to work with different types of functions including arrow functions and generator functions. In section seven, we'll look at a collection of different but widely used features of the language like AJAX, promises, destructuring assignments, regular expressions and classes. Section eight will focus exclusively on working with the DOM. And the final section, Section nine, will look at some of the more common web API's like the selector API, geolocation, web storage, and web workers. Don't worry if you've never written a single line of JavaScript before. By the end of the course, you'll be able to work with the language to leverage its strengths and steer clear of its weaknesses. And don't worry if you don't know any other programming languages at all. All concepts required to understand JavaScript will be explained in full. We've got a lot of material to get through, so let's move to the next lesson and get set up ready for the coding examples. Thanks for watching.

1.2 Setup

Hi, folks. In this lesson, we're going to get a basic development area set up, ready to work through the various coding examples that I'll be showing you throughout the course. During the course we'll be using a variety of JavaScript versions. It will be a mixture of mostly ES5 and ES2015, but we'll also include some newer features such as ES Modules. ES2015 is now largely supported in most modern mainstream browsers, but ES modules did not have as much support yet. For this reason, it's still best to use a transfiler to convert the latest JavaScript into a previous version of JavaScript that would be understood by a wider number of browsers. For this course, I've chosen to use SystemJS with the Babel plugin because it's extremely simple to set up and requires very little configuration. The repository for this course is set up to use SystemJS out of the box. And while we won't need it til later in the course, we can go ahead and claim the repository at this point. You'll need to have the latest stable version of Node.js installed, as well as the Git version control system. So if you don't have these already, head on over to nodejs.org and get git-scm.com and follow the installation instructions for your platform. So to start with then, we can clone the repository, which we can do on the command line. You can get the URL at the repository from GitHub. Once the clone is complete, which basically just means that the repository has been copied from GitHub down to your local computer. We will then need to run npm install to install the project's dependencies. npm is the package manager for Node.js and allows us to install many, many useful packages for JavaScript development. Once this command is finished, everything should be ready to use. Let's just take a quick look at what you'll get in the project directory once you've cloned the repository. There are a couple of files there for Git, the gitignore License and readme.md files. And there are some npm files as well, the package.json and the package-lock.json files. We can ignore these, they aren't related to the course material at all and just contain meta information for git and npm. There is a config.js file which contains a small amount of configuration for SystemJS. We won't need make any changes to this throughout the course and again this can largely be ignored. There's also a very basic HTML file called index.html. This file loads SystemJS and the configuration file, and tells SystemJS to load a file called index.js. This index.js file is our playground, and is where I'll be adding most of the different examples that we'll work on. There is another branch in the repository which contains individual files for each of the different lessons throughout the course. Just to separate out the various coding examples that we're going to be looking at. These are in a branch called completed-course, and you can look at these at your own leisure. Let's just open up the index.js file, it should contain just the use strict directive and a console.log statement. We'll be looking at strict mode in more detail later in the course. The console.log statement just writes a message to the browser's console, but it can be very useful for debugging purposes and we'll be seeing it a lot throughout the course. As well as SystemJS the project also uses a tool called browser sync, which allows us to use a local web server. And again, this is very useful for development purposes and is a very common practice in JavaScript development. We can run browser sync by running the command npm run serve in the command line. We'll first need to move into the directory that we've just cloned. We can then use browser sync by running the npm run serve command. So this command should open up your default browser and load the index.html file from the repository in the browser. And I'm just gonna open up the console now. And in the console there you can see the working message that came from the console.log statement back in the index.js file. One feature of browser sync is that it automatically watches our files and refreshes the browser whenever we save a file. So if we go back to the index.js file now, and let's just change the console.log statements. When we go back to the browser, we should find that it has refreshed itself automatically and updated the log message. Great, so this is all the setup that we need to do right now. Let's move on and start learning JavaScript in section two. Thanks for watching.