Javascript Essentials

Visit Tutorial Page ( Report)
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 is the target audience? Someone who already understands and has knowledge of basic syntax in Javascript.
  • Introduction
    • Introduction

      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!

    • What is Javascript?

      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

      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.

    • Javascript console

      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!

    • What is an object

      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 syntax

      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.

  • Basic Syntax
    • Primitive data

      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.

    • Arithmetic operator’s, BODMAS & concatenation

      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.

    • Variables & assignment

      Variables 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

      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.

    • Arrays

      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.

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

    • Objects

      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.

    • Key creation, assignment, deletion & embedded objects

      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.

    • Functions

      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.

    • Prototype

      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!

    • Constructors

      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.

    • Constructors Part 2

      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?

    • Scoping

      Scoping, as most things, confused a simpleton like me. If you're new to programming you'll need to know what we call scoping. In fact we've even been exposed to the global scope or window object already. So now it's time to really look further into scoping.

  • Conditional Functions
    • Conditional operators

      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 statements

      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 Part 2

      Continuing on we want to review even more about the or / and operators and how to use multiple operators in a single statement. This will allow us to see the order of precedence on differing operators in a single statement. MDN Operator Precedence:

    • For loop

      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!

    • Practical for loops

      Practical for loops are very important to really understand why we want to use for loops in our day to day lives. Programming is not only about learning the syntax but also understanding the why you want to put something like the for loop into practice.

  • DOM Manipulation
    • Understanding the document object

      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.

    • Targeting DOM element’s

      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.

    • Event handlers

      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.

    • This keyword explained

      The this keyword can be elusive to the new comers in programming. That's because we can understand context of the this keyword very easily in a simple conversation. We should however understand the this keyword and never be confused about what the this keyword is. That way we really begin to understand the truth about the programming context of Javascript and as always there is gotchas.

    • Changing elements' content

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

    • Create and append DOM element

      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.

    • Final project

      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 Overview
    • Conclusion and Goodbye

      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!

    • Bonus Lecture: Discount courses

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

Write Your Review