Javascript Essentials
4.4 (16,214 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
152,338 students enrolled

Javascript Essentials

Learn how Javascript works, some basic API's and finally create a mini project.
4.4 (16,214 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
152,338 students enrolled
Created by Lawrence Turton
Last updated 12/2017
English [Auto-generated]
Price: Free
This course includes
  • 6.5 hours on-demand video
  • 19 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What you'll learn
  • Learn basic syntax that can apply to any language.
  • Learn what is a programming language and the basic concepts for beginners.

  • Understand what is Javascript in it's truest form.

  • Know the basic syntax of Javascript.
  • Know some hidden quirks in Javascript.
Course content
Expand all 39 lectures 06:29:31
+ Introduction
6 lectures 29:51

Welcome to this course that'll teach you about Javascript and programming in general. We'll first start off easy with the history and Javascript and then move onto how Javascript works in your browser. This is paramount for your understanding as it was mine. Then we'll look at primitive data, grouping primitive data together in an array or object. Then we'll be looking even further into Javascript by discovering how prototype inheritance works. We'll also be looking at ton of stuff throughout this course and if you are a new comer to this language then you'll be more than happy with the knowledge you'll learn!


I’ve decided to start a new venture even though I have another project in the wings as well as many more. Never mind at least I’ll stay busy helping other people with their education and honing their talent.

What is Javascript?

How Javascript works is a must in understanding Javascript itself. I was always struggling with the concept of Javascript until I learned how the browser interprets my script into byte code. One could ask, ‘what’s more important than understanding how Javascript is compiled?’. This lecture will give you a clear understanding with how Javascript works and how the browser through its Javascript engine converts your code to byte code that can be executed on your computer.

How Javascript Works

How does the Javascript console work? Firstly, to understand this question we must understand what is a console. Whenever you think of consoles don't think about Playstations or Xboxes think of the 80's when computers didn't have graphical user interfaces. Instead they only allowed direct input from the keyboard; this is a standard text or console interface. Thus we have the answer, a console is simply where we can execute text commands directly. There's no buttons or cursor, its all keyboard!

Javascript Console

Javascript is heavily object oriented. Many believe Javascript not to be object oriented but they couldn't be further from the truth. If any instructor tells you Javascript isn't object oriented they do NOT understand this language. Ever since I heard Douglas Crockford who is one of the main players in the evolution of Javascript, I knew this is the individual I wanted to learn from because he understood this language like the back of his hand.

Objects in Javascript

Javascript has a very unique syntax, however it can be very confusing even for seasoned professionals to understand this language. First what do I mean by 'syntax'? Syntax is simply the way in which a programming language is written, for example CPP, C#, Java, HAXE, ActionScript and many other languages are written in a certain way. This is the syntax and Javascript has it's own syntax.

Javascript Syntax
+ Basic Syntax
20 lectures 03:36:22

Javascript has many primitive types that make up a program. In fact any language must provide a standard set of primitive values, Javascript is no different. In order to further understand this language we must start with the primitive (basic) values that Javascript offer's. This lecture will cover string, number, boolean, null, undefined and NaN primitive types.

Primitive Data

Variables and constants in Javascript are vital for storing data. This lecture will review how to setup a variable which is extremely easy and storing primitive data in that variable. Also we'll go a little further than that. What happens when you create a variable? Do you know?

Variables, Constants & Assignment
Arithmetic will always be important, writing equations is what programmers will ultimately do when creating more complex applications. But understanding all the arithmetic operator's can be a little difficult to begin with. This lecture will first show you all the arithmetic operator's from addition, subtraction, multiplication, division and modulus.
Arithmetic Operator’s & BODMAS

Assignment operator's are very important in Javascript. We've already seen how to initialise (create) a variable. After creating or initialising that variable we assign a new value to that variable; but just using the equals assignment operator means we replace the existing data. Using certain other operators allows us to manipulate and work with the existing data stored in the variable.

Assignment Operator’s
Code Editors & Debugging

Functions are vital in any language to create verbs, actions performed in our program. Without functions we would be hopeless in making our app move and do certain tasks. This is why it's so important to understand what a function is. Also we'll answer important questions like. What is the difference between instantiating a function and invoking a function? What is an argument and what is a parameter? These questions must be answered, many even today get the terminology of arguments and parameters mixed up. Also what can you pass into a function? Can you control the final output of a function, and so on.

Functions or Subroutines

Arrays always used to baffle me even though now I know and quietly never wanted to tell anyone I didn't know! Well in my case this is no more. An array is a collection of values grouped together. Javascript allows us to group data together in the most simplest fashion. This lecture will group primitive data together in an array, remember when grouping data together it allows real structure in your application.

Objects & Arrays
Arrays are objects in Javascript as we have seen. Arrays group data together, like an object, that allows our application's to be more powerful. Simply put, without grouping data together we could have no possible way of creating advanced data structures or apps. So all we've done is create a basic array however, we want to take this knowledge a little further and embed arrays inside of arrays to learn more about object hierarchy.
Embedding Objects & Arrays

You've already been exposed to objects in this course however now it's time to take this exposure and actually create an object in Javascript. We'll look at first creating an object with nouns for now but in a future lecture we'll actually be creating an object with both nouns and verbs, or properties and methods don't forget. However we'll be embedding objects inside of objects and arrays into an object as well.

Member Access
Computed Member Access

We can use the analogy of boxes inside of boxes, a grouping together of variables or smaller boxes. Variables can contain primitive data and functions just like keys can do in objects. So the best analogy we can use is boxes inside of boxes, each box has a key and we can access each box when requesting that key. This very simple concept can evolve our application's to have an amazing amount of potential and give more flexibility and structure.

Member Creation, Assignment & Deletion

In this lecture we'll review modifying an array which is an object using the standard member and computed member access operators. However I'll demonstrate to you why you shouldn't do this and how to avoid problems later on.

Array Modification

Functions in Javascript are treated as first class citizens or callable objects. In other words they are objects. A standard object's context is made up of properties and methods. However callable objects have an executable context made up of a list of instructions to run on the computer.

Just like objects, callable objects can be placed within a variable, constant or even a parameter. Yes you can even pass a function to another function if you wish.

Callable Objects

Functions in Javascript are treated as first class citizens or callable objects. In other words they are objects. A standard object's context is made up of properties and methods. However callable objects have an executable context made up of a list of instructions to run on the computer.

Just like objects, callable objects can be placed within a variable, constant or even a parameter. Yes you can even pass a function to another function if you wish.

Memory Hoisting
Scope & Closures
Inferred Globals & Scope
This Context
We've already learn't that objects are important as well as functions. However what about creating an object via a constructor function? This is extremely common place in Javascript as ES5 (or Javascript version 5) doesn't have any class syntax. However the next version of Javascript will include the class syntax, but however for now lets review how to make a constructor function.

Prototype is an amazing concept for memory conservation and management. Yes even your higher level JS application's need to think about conserving memory at times. Also this will allow you to simplify your code base so this is a win, win situation.

Prototypal inheritance has confused many, even seasoned developers coming from another language. This isn't necessary as it's actually very simple, don't let the name confuse you. It just means Javascript uses a literal object inheritance, it's a shared object!

After reviewing why we want constructor function's and how they work in a general way. We need to get more context, which context is very important in any programming language not just Javascript. What is that all important 'this' keyword, why should we use it and what does it contain?
Constructors with Prototype
+ Comparison & Conditional Execution
4 lectures 49:21

When you cross a road your mind automatically asks itself questions and compares data. You don't necessarily notice this happening in your mind however asking questions is important. Your program's likewise need to adapt to certain situations and ask questions by comparing data. That way they are flexible and depending on the data the app receives our program can respond.

Comparison Operators

If statement's will allow us to ask question's and, depending on the circumstances, execute its context. An if statement is in-fact a function, however its execution context isn't executed by invoking it directly like a regular function. This time the context is only executed when a condition or set of conditions is met. In this lecture we'll look at the if and else statements and how they allow us to chain execution contexts together.

If Statements
Loops in any programming language allow us to perform a repetitive action. What's great about loops in Javascript, is the fact that there execution context is compiled into memory and then run repeatedly. This makes them very fast at what they do!
For & For In Loop's
Let ES6
+ DOM Manipulation
7 lectures 01:27:01

The document object model is very important for understanding how Javascript interprets the DOM into JS objects. All DOM nodes or elements are in fact converted into Javascript objects. The JIT-compiler will look at the HTML and CSS separately and link everything together in one JS object containing a wealth of information about that element.

Understanding the Document Object Model
Returning the entire document object is not beneficial when working with the DOM. In this case we'll run some methods on the document object and have a single object returned for one DOM node. Modifying this object will effect the DOM element itself, also we'll look at targeting multiple DOM element's that are returned in an array.
Targeting DOM Element’s

Javascript works hand in hand with the DOM as we know. So how about changing text and information within the DOM. Well we can easily do this by targeting an object that represents a DOM element in Javascript and modify the innerHTML and innerText properties.

Changing Element's Content's
The style attribute will allow us through Javascript to apply styles to our DOM element's. We manipulate the style attribute via the style object, every DOM object has an embedded style object that'll allow us to manipulate css properties.
Changing Element Style's

Events are listening out for interactivity by the user. It also could include a change in state; for example you could trigger an event if the HTML5 video player was playing, paused or in the stop position. This allows us to create interactive pages and show, hide or update content to notify the user. This is why it's so important to understand events.

Event Handlers

In this lecture I'll be making a virtual DOM object within Javascript. Then I'll tell the DOM to add the relevant element using the information from our virtual DOM object. This will allow me to produce an element from Javascript.

Create & appendChild & insertBefore method's

This final project will sum up most of what we’ve already learn’t throughout this course. It will consist of three simple drop down menus with each menu changing a CSS property on a div element. We’ll be looking at adding an event onto each select drop down via a for loop. Once the events have been added we can then review the callback function or what’s know as a higher order function.

Final Project
+ Final Overview
2 lectures 06:56

Thank you for watching my course and here I'll quick give an overview and go over a few things. Thank you all for watching!

Conclusion & Goodbye

Use the coupon code avelx5050 to purchase any of my course for 50% of the retail value!

Bonus Lecture: Discount Courses
  • Basic knowledge of HTML & CSS.

Learn the Javascript essentials for web development or any type of programming. Learn all the basics of Javascript including primitive types, arrays, functions, assignment operators, the window object and much more. Also I'll provide clear explanations of objects, constructors and arrays in a clear way for anyone to understand. We'll also dive into some more detail about how Javascript works and even advanced topics like prototype inheritance, scope, execution context and much more. So why should you learn Javascript? Well it's everywhere and is getting even bigger in 2016. It's available to mobile apps, desktop apps, server side nodeJS technology and as always in every single browser around the world. There has never been a better time to learn the basics of Javascript!

Who this course is for:
  • Someone who already understands and has knowledge of basic syntax in Javascript.