Object-oriented Programming in JavaScript - ES6

Stay updated by learning about the latest upgrade to the JavaScript language--ES6, also known as ECMAScript 2015. In this course, you will learn how to develop software using many kinds of classes and modules.
Course info
Rating
(166)
Level
Beginner
Updated
Jun 13, 2016
Duration
2h 27m
Table of contents
Description
Course info
Rating
(166)
Level
Beginner
Updated
Jun 13, 2016
Duration
2h 27m
Description

ES6 is a major upgrade to JavaScript, offering a new syntax for creating objects and working with inheritance. If you want to stay up to date with the JavaScript programming language, you need to watch this course! In this course, Object-oriented Programming in JavaScript - ES6, you will learn this new syntax and create many different kinds of classes. You'll learn all the features of JavaScript classes including working with constructors, prototypes, inheritance, and simulating public, private, and static members. Next, you'll create classes for regular business objects, virtual objects which you want to extend, a data service, and user interface components. Finally, you'll go step by step through the creation of a sample object-oriented web application. When you're finished with this course, you will have a strong understanding of ES6, and how t use classes and modules to develop software using modern programming techniques.

About the author
About the author

Mark started in the developer world over 25 years ago. He began his career with a Bachelor of Science in Computer Science from St. Johns University. After spending 10 years on Wall Street working for Goldman Sachs, Lehman Brothers and other major investment banks, Mark became interested in animation and video game software.

More from the author
JavaScript Fundamentals
Intermediate
3h 0m
Jul 26, 2018
JavaScript: Getting Started
Beginner
2h 46m
Jan 19, 2018
Rapid Angular Training
Intermediate
3h 11m
Oct 6, 2017
More courses by Mark Zamoyta
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Mark Zamoyta, and welcome to my course Object-oriented Programming in JavaScript - ES6. I am a freelance software consultant and developer in Santa Barbara, California. Many object-orietned patterns emerged in the ES5 version of JavaScript, but now in ES6 we have a new syntax to create classes and objects. In this course we are going to learn to work with classes and modules. This will be done the ES6 way. We'll be coding classes for many different types of objects. Classes for regular business objects, classes which can be extended, used for inheritance, a data service class to hold all of our application's data, user interface classes, and we'll create a class to hold an entire web application. By the end of this course, you'll have lots of experience working with classes and modules in the latest version of JavaScript. We'll even create a simple application made solely from ES6 classes. Before beginning this course, you should be familiar with fundamental JavaScript development. Don't worry if object-oriented programming is new to you, since we'll be starting from step 1 when it comes to object-oriented techniques. I hope you'll join me on this journey to learn modern programming with the object-oriented programming in JavaScript ES6 course at Pluralsight.

Class Basics
Hi this is Mark Zamoyta. Welcome to this module Class Basics. Classes are fundamental to object-oriented programming. Class stands for classification and we create a class to classify our objects. You can think of a class as a blueprint or a stamp in order to stamp out objects and create objects. Let's see what we'll cover in this module. We'll start off by creating a simple module in ES6. If you saw the introduction, everything should be all set up, but we'll take a deeper look at what a module is and how it operates. Next we'll define what a class is and what objects are and how classes and objects relate to each other. Next we'll start building classes. And we'll we work with constructors on those classes and the properties which hold data for the classes. We'll also take a look at static properties, which are very different than the properties that get put on objects. We'll look at methods, which are functions that belong to objects and classes, and we'll look at static methods which are the methods that belong directly on a class, not on an instance. Finally, we'll look at getters and setters. Getters and setters let us execute some code when we access or set a property, and we'll see why this can be useful. So let's get started by taking a look at code to create a module.

Inheritance and Code Organization
Hi this is Mark Zamoyta and welcome to this module titled Inheritance and Code Organization. We'll start off by looking at the concept of inheritance. Inheritance refers to class deriving functionality from other classes. And we'll see how this applies to the cars and drones we've been working with so far. We can actually create a new vehicle class that cars and drones can inherit functionality from. And when we use inheritance, we use the extends keyword, it's referred to as extending a class. So you'll have a base class and then we'll extend that base class to create new classes. Working with constructors can be a bit tricky, so we'll see what we need to do in order to get constructors to operate properly, and we'll look at inheriting properties from a base class, and we'll also look at inheriting methods and functionality from a base class. Finally we'll look into organizing our classes. The basic rule of thumb is that each class should be in its own file. So we'll set things up that way. So let's take a look at what inheritance is all about.

User Interface Classes
Hi, my name is Mark Zamoyta and welcome to this module titled User Interface Classes. So far we've been using classes mainly for business objects, for drones and cars, which are the main entities within our application. But we could also use classes for the user interface. Each HTML element we use can become a class and we can create a base element class so that all UI elements share the same functionality. So we'll see how to do that in this module and let's take a look at the actual user interface elements we'll create. We'll start off by creating a Button class. We'll be using Material Design Lite, which works very similarly to Bootstrap, and we'll go over how to get set up with that and how to create elements in that style. Next we'll create an Image class. We want to be able to easily load up an image and display it in a webpage. Next we'll create a Title Bar class, which is also part of Material Design Lite. Here we can see a simple header with a hamburger menu. We won't worry about links and routing in this module, that'll be covered in the next course module, but for now we'll get our title bar set up and it will be responsive. If the screen is wide enough, menu items will appear on top and right aligned. Next we'll create a Data Table class. We'll just create a grid of data. Here we can see car information. We'll pass it the headers we want along with the data we want to display. And finally, we'll create a Map class using Google Maps. Google's API works with global variables, so we'll see how to integrate those into our application, which works mainly with classes. So let's get started and get set up with Material Design Lite.

Building an Application Using Classes
Hello, my name is Mark Zamoyta and this module is titled Building an Application Using Classes. Now normally if you're going to build an application, you'd want to use some kind of bigger framework, such as Angular. But for a fast and dynamic website, you could do it by building your own classes, and that's what we'll explore in this module. We'll start off by creating an application class. This class will hold our entire application and that's a best practice that you'll see in many different frameworks. You start off with one base application class and everything is included within it. Next we'll take a look at setting routes. The application will have a menu and we'll be using Material Design Lite for that, and when we click on different menu items we want to route to different pages. So we'll get that all set up. We'll create a homepage and we'll create a car page to view the cars, and finally we'll create a map page using the Google Map element that we created in the last course module. So by the end of this module you'll have a functioning web application and the entire application is based on classes. All of the user interface elements are classes and each application page itself is a class. So let's get started building this.