ES6 JavaScript
3.8 (20 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.
567 students enrolled
Wishlisted Wishlist

Please confirm that you want to add ES6 JavaScript to your Wishlist.

Add to Wishlist

ES6 JavaScript

Developing Apps Using EcmaScript2015
3.8 (20 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.
567 students enrolled
Last updated 4/2016
English
English
Price: $25
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Learn the latest version of EcmaScript6
Discover new shortcuts and language capabilities interactively
Create ES6 new keywords, modules, iterations, Collections and Classes
View Curriculum
Requirements
  • Know Before You Go: HTML
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.

Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 35 Lectures Collapse All 35 Lectures 02:14:37
+
Who's This Guy?
1 Lecture 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.

Preview 00:48
+
ES6 Overview
2 Lectures 06:52

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

Preview 02:20

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.

Preview 04:32
+
New Keywords In ES6
5 Lectures 20:56

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.

Preview 01:35

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

Preview 05:42

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

Constants In JavaScript
02:14

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

The Spread Operator
06:53

The Arrow Operator
04:32
+
Using Collections in ES6
5 Lectures 16:13
Collection Comparisons in ES5 vs ES6
02:00

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 Maps
03:32

ES6 Weak Maps
01:54

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

ES6 Sets
03:22

ES6 Weak Sets
05:25
+
Various New Flavors Of Iterations
3 Lectures 16:49

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

The New Primitive Symbol
05:01

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

Examples of The Iterable Protocol
04:07

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

Generators: Pause And Resume Executions
07:41
+
ES6 Classes
6 Lectures 21:53

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

Defining Classes!
02:17

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

Defining Methods On A Class
05:01

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

The Class Prototype Properties
00:55

Getters/Setters With ES6
01:25

Defining Methods and Properties in ES6
03:48

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

Inheritance W/ Classes
08:27
+
Developing Modules
3 Lectures 05:24

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

Creating Modules
01:25

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

The export Statement
02:59

The import statement
01:00
+
Creating A Contact App
10 Lectures 45:42

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.
Setting Up The Apps Directory Structure
06:16

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.

Running The Application With HTTP-Server
00:46

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

Defining Our Contact Model
04:01

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.
Importing And Exporting Our Contact
06:48

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.
Using LocalStorage in HTML5
03:40

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. 

Defining Labels Using Constants
02:11

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.

Updating Our UI With ES6/ECMAScript2015 And Some Friends
11:34

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. 

Updating Our UI With ECMAScript2015/ES6 Part 2
09:50

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
Coding Challenge: Implementing Edit
00:13

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
Coding challenge: Implement Delete
00:23
About the Instructor
Michael E. Vargas JR
4.4 Average rating
43 Reviews
1,419 Students
4 Courses
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.