Javascript Essentials

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.

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 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 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.

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 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?

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.

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.

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.

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.

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?

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.

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!

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.

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.

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.

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.

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.