Wednesday , 14 November 2018
Timing Events

Timing Events – Advanced JavaScript Tutorial

There are 2 kinds of timing events. There’s one with timeouts and another with intervals. Timeouts execute once after a certain amount of time has passed by. Intervals execute repeatedly after a certain amount of time has passed by. Timeouts Clear your script and add this bit of code. [crayon-5bec0142ca960059605966/] To create a timeout you use the setTimeout() method. This …

Read More »
Window Object

Window Object – Advanced JavaScript Tutorial

There’s one object to rule them all. That is the global object. Every variable, object and function is part of the global object. The global object can’t be accessed directly. However, most JavaScript host environments create an object that act as the global object. For browsers, this is known as the window object. Let’s take a look at how the …

Read More »
Closures

Closures – Advanced JavaScript Tutorial

Closures allow you to take your JavaScript skills to the next level. Closures are used in almost every JavaScript code you’ve ever seen. You’ve probably ended up using it without knowing it. So, what are closures? A closure is a function inside a function. So, what’s so special about this? Well, you can actually access the variables outside of the …

Read More »
Recursive Functions

Recursive Functions – Advanced JavaScript Tutorial

We’re going to stop talking about object oriented programming for now. Let’s focus on functions. There’s a thing called recursive functions. It’s just a function that calls on itself until a condition has been met. Almost like a loop. Setting Up The Script Clear your script and add this bit of code. [crayon-5bec0142d1020757845621/] If you don’t know what factorials are, …

Read More »
Inheritance

Inheritance – Advanced JavaScript Tutorial

Another advantage to using prototypes is that you can have inheritance in your scripts. What is inheritance? Well, first let me show you and then I’ll explain. Clear your script and add this bit of code. [crayon-5bec0142d1589106129566/] Alright, let’s break this done. We have 2 objects. One is BankAccount and the other is SavingsAccount. We add a method to the …

Read More »
Prototypes

Prototypes – Advanced JavaScript Tutorial

Prototypes are a must know for any JavaScript developer. As you may know, JavaScript is classless. Instead, it uses prototypes. However, this subject confuses a lot of people.  In this tutorial, we’ll go more in-depth of what prototypes are. First, we’ll learn how to use them and then why you should use them. Clear your script and add this bit …

Read More »
Object Oriented Programming

Object Oriented Programming – Advanced JavaScript Tutorial

Object oriented programming in JavaScript is different than most programming languages. JavaScript has no acknowledgement of classes. All properties and methods inside an object are just name-value pairs. We’ve discussed object oriented programming before in the JavaScript beginner tutorial series. Now, we’ll go more in-depth of what OOP is. They way we’ve been writing code is what’s called procedural code. …

Read More »
Array Methods

Array Methods – Advanced JavaScript Tutorial

If you’ve seen my beginner JavaScript tutorials, then you already know about arrays. In this tutorial, we’ll discus a couple of handy array methods for iterating through arrays. Iterative Methods As you may know, the for in loop is a great way to loop through all the items in an array. However, arrays come with 5 methods for looping through …

Read More »
Garbage Collection

Garbage Collection – Advanced JavaScript Tutorial

It’s time to take out the trash! No, not the one in your home. I’m talking about the one in your programs. For every object you create, you take up memory in the visitor’s computer. It isn’t just in some imaginary storage. JavaScript will free up space when you have objects that are no longer in use. This is what’s …

Read More »
Converting Data Types

Converting Data Types – Advanced JavaScript Tutorial

As you may know, each value has a data type. Since JavaScript supports dynamic datatypes you can change a value’s data type like so. [crayon-5bec0142d5b6a400222759/] In some situations, you’ll want to convert the value to another data type instead of just changing the value. JavaScript offers a variety of functions and methods to do so. Let’s set up things to …

Read More »
Script Tag

Script Tag – Advanced JavaScript Tutorial

The script tag is how you include JavaScript into your document. However, there are a couple more things to know that can really optimize the performance of your site. Script Tag Attributes As you already know, placing your scripts at the bottom of your document allows everything else to load first before you start dynamically updating content. There’s another technique …

Read More »
History Of JavaScript

History of JavaScript – Advanced JavaScript Tutorial

A little history lesson wouldn’t be so bad. JavaScript has come a long way to become what it  is today. The history of JavaScript isn’t necessary to know, but having some background knowledge will help you better understand what JavaScript is and how it came to be. It All Started With An Orange Basketball…. It actually didn’t, but if you …

Read More »
Paths and More Expressions

Paths and More Expressions – Handlebars.js Tutorial

In this last tutorial, we’ll talk about paths and more expressions. So far, we’ve been dealing with plain text, but what if we had HTML inside our strings? Handlebars will naturally escape these values to prevent XSS injections. However, you can stop Handlebars from doing so simply by using 3 staches. Update your menuData variable to this. [crayon-5bec0142d73a2721434424/] Let’s update …

Read More »
Custom Helpers

Custom Helpers – Handlebars.js Tutorial

You can extend handlebars with your own custom helpers. This allows you to create complex logic using handlebar’s expression system. There are 2 kinds of helpers, a function helper and a block helper. The difference is that one is meant for a single expression and the other uses a block expression. Custom Function Helpers Creating function helpers is relatively easy. …

Read More »
Built-in Helpers

Built-in Helpers – Handlebars.js Tutorial

Handlebars comes with built-in helpers to make executing complex logic simple. They’re conditionals and loops. Let’s take a look at some of the built-in helpers that come with it. #Each Helper Right now, it’s required that we hard code each menu item in our HTML document, but what if the list was updated? Looping through a menu list is easier …

Read More »