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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 Setup

Let’s get our development area set up and ready for coding! In this lesson I’ll show you how.

Related Links

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

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
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

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

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:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


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.

Back to the top
View on GitHub