ES6 JavaScript

Developing Apps Using EcmaScript2015
3.5 (19 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
564 students enrolled
$19
$25
24% off
Take This Course
  • Lectures 35
  • Length 2.5 hours
  • Skill Level Intermediate Level
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 English Closed captions available

Course Description

ES6 JavaScript is a course designed to walk through the latest and greatest features of developing in JavaScript. The language has literally become a mature, beautiful representation of development. Its now possible to create classes, refer to contexts in execution, define methods, write cleaner and more concise anonymous classes and so much more.

This course is more advanced than the other courses taught and assumes some fundamental knowledge of javascript. This course is intended as a visual reference to the capabilities for using ES6. The course includes a complete walk through of terminology, illustrations and examples of developing using popular transpilers.

The course can be completed in approximately several hours and referred to throughout the evolution of ES6. As ES6 becomes a more prominent technology, this course will continue to work for you.

Take this course if you want to deepen your knowledge with the JavaScript language and write cleaner, more concise javascript in apps.

What are the requirements?

  • Know Before You Go: HTML

What am I going to get from this course?

  • Learn the latest version of EcmaScript6
  • Discover new shortcuts and language capabilities interactively
  • Create ES6 new keywords, modules, iterations, Collections and Classes

What is the target audience?

  • Novices: This course assumes basic understanding of javascript but its not completely necessary.
  • Students: This course assumes basic understanding of javascript on ES6
  • Professionals: Learn the latest things you can do using ES6.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Who's This Guy?
00:48

Michael Edward Vargas Jr., is an American Software Engineer and Entrepreneur who is best known for his ongoing involvement in the development of federal and private enterprise application systems using the best of breed technologies. He is currently a member of the UXD Summit Developer Group (http://uxdevsummit.com/) and Chief Operating Officer of Intellipoint Corporation (http://www.intellipointcorp.net/). He is a huge fan of Douglas Crockford and John Resig for their development in the JavaScript community.

On his mornings, nights and sometimes weekends, he is passionately devoted to the development of real world applications and teaching. Originally, he started out working for Motorola and has gone on to contribute to organizations such as ADT Security Services, Travel Industry Services and the Engility Corporation.

Section 2: ES6 Overview
02:20

Why writing JavaScript still matters and how you can write for tomorrow's browsers utlizing the tools today,

04:32

In this section, we cover what transpilers are, how we configure them and set them up, where to find them and more.


We also setup our html file where we'll write our own javascript file.

Section 3: New Keywords In ES6
01:35

In this section we cover the new keywords and some features that have been introduced in ES6. We talk about using transpilers and developing ES6 code.

05:42

We cover the usage of the "let" keyword, some pitfalls and then finally wrap up with examples.

02:14

In this section, we talk about what constants are, how to use them, give some examples and walkthrough creating them.

06:53

In this section, we cover the spread operator and how you can use it to reduce clutter when passing arguments to a function.

The Arrow Operator
04:32
Section 4: Using Collections in ES6
Collection Comparisons in ES5 vs ES6
02:00
03:32

ES6 Maps are a new collection introduced in ES6. We walk through the different types of methods available on the map object and talk about adding elements, removing elements, instantiating them and thing should look out for.

ES6 Weak Maps
01:54
03:22

In this section, we define what a set is, how to create, add, remove and update a set using ES6.

ES6 Weak Sets
05:25
Section 5: Various New Flavors Of Iterations
05:01

In this section, we'll cover the new primitive type Symbol. What it is and how its different from the others.

04:07

In this section, we define what a set is, how to create, add, remove, update and delete elements to it using ES6.

07:41

In this section, we will blow your mind. That is all. Coolest thing about ES6 ever. Seriously.

Section 6: ES6 Classes
02:17

In this section, we give an overview of defining classes, what it entails and looks like.

05:01

In this section, we define methods on a class. We capture different flavors and combine concepts learned in this course to do so.

00:55

In this section, we illustrate the commonality between functions and classes in the JavaScript language.

Getters/Setters With ES6
01:25
Defining Methods and Properties in ES6
03:48
08:27

In this section, we'll define object encapsulation, inheritance and how we can develop this using JavaScript6.

Section 7: Developing Modules
01:25

In this section, we'll create modules that will allow us to abstract out our code.

02:59

In this section, we'll review the export statement, how it can be used and its various forms.

The import statement
01:00
Section 8: Creating A Contact App
06:16

In this section of the course, we'll develop a contact application. We'll start out by defining our directory structure and begin accessing the application using the file system. The development is illustrated in Sublime Text Editor. 


By the end of this section, you should be familiar with:

  • General Directory Structures In Front End Development
  • Referencing Libraries Like JQuery, Bootstrap 
  • Reference Transpilers, namely, Traceur
  • Combining these together to leverage the best of both worlds while developing in ES6.
00:46

In this section, we'll install the http-server using the nodejs platform. 


By the end of this quick lesson, you will be running your application online and serving it through the http protocol.

04:01

In this section, we'll begin incorporating ES6/EcmaScript2015 principles and practices to develop the contact app project.


By the end of this section you will be able to:

  • Define Class Objects
  • Encapsulate properties using ES6 techniques
  • Create getters and setters using EmcaScript2015

06:48

In this section, we leverage imports and exports to decouple and abstract our classes from our main javascript. We then reference these containers by import and exporting the classes.

By the end of this section, you will be able to:

  • Use imports and exports
  • Use and understand alias syntax 
  • Be knowledgeable in referencing your imports in index.html
  • Inspect and verify the objects that you've created in Chrome Tools.
03:40

In this section, we take a look at a couple of gotchas when working with ES6 and localStorage. By the end of this section, you will know:

  • How to reference ES6 code outside the module script declaration.
  • Retrieve ES6 objects from localStorage
  • Store ES6 objects to localStorage
  • Use the window object to store properties by reference.
02:11

In this section, we continue developing our contact application and leverage constants. Using constants, we define labels that we can refer to in our application for later use.

In this section, you'll understand how to do this by combining constants with other ES6 features. 

11:34

In this section, we'll develop the UI for our contact app and combine our implementation with JQuery, Bootstrap, HTML5 and ES6. We'll write all the hooks for our call to actions with our app.

09:50

Now that we've set everything up, we'll integrate our ES6 code with Bootstrap and JQuery and intermix them with one another. We'll walk through implementing adding contacts. 

Article

Based on what you have learned so far in the course, implement an editContact function that can be invoked through the onlick event of the pencil icon. 


To complete the task, complete the following:

  • call the application class object from the window property
  • invoke the edit method on the application object
  • Launch the same modal in the previous exercise
  • Update the row's text based off the new contact that was added by using the getElementById, appendChild, insertBefore and createTextNode with JavaScript
  • Dismiss the modal programmatically
Article

Based on what you have learned so far in the course, implement an deleteContact function that can be invoked through the onlick event of the remove icon. 

To complete the task:

  • call the application class object from the window object
  • rename the delete method and invoke the new one on the application object
  • delete the set element using the delete method, assemble any objects (if necessary) and remove them from the list.
  • Update the row's text based off the new contact that was added by using the getElementById, appendChild, insertBefore and createTextNode with JavaScript

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Michael E. Vargas JR, Front End Developer/Engineer

Michael Edward Vargas Jr., is an American Software Engineer and Entrepreneur who is best known for his ongoing involvement in the development of federal and private enterprise application systems using the best of breed technologies. He is currently a member of the UXD Summit Developer Group and Chief Operating Officer of Intellipoint Corporation. He is a huge fan of Douglas Crockford and John Resig for their development in the JavaScript community.

On his mornings, nights and sometimes weekends, he is passionately devoted to the development of real world applications and teaching. Originally, he started out working for Motorola and has gone on to contribute to organizations such as ADT Security Services, Interval International and the Engility Corporation.

Ready to start learning?
Take This Course