Javascript Essentials

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.

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?

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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!

Check out the bonus lecture to see additional deals.