Tuesday , 28 March 2017
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-58da9f2ebcbeb343132381/] 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-58da9f2ec5541851841745/] 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-58da9f2ec6fc7137565020/] 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 »
Basic Expressions

Basic Expressions – Handlebars.js Tutorial

Let’s kick things off with basic expressions. Expressions are the base of handlebars. They’re basically placeholders for your data. You insert them into your template and then handlebars will search  and replace for the data that corresponds with your expression. Let me show you how this is done. Setting Up The HTML Document Create a file called index.html. Inside this …

Read More »
External JSON File

External JSON File – JSON Tutorial

In this tutorial, we’ll learn how to create an external JSON file. By doing this, our data can be accessed from various languages or multiple sources without having to filter the data. Let’s set up our file. To create a JSON file, first create a file called people.json. The .json is a file extension for JSON based files. Place this …

Read More »
Nesting objects and arrays

Nesting Objects and Arrays – JSON Tutorial

Let’s talk about nesting JSON data. We’ll learn about nesting objects and arrays. Let’s update our script to this. [crayon-58da9f2ece67b699095091/] Inside our JSON object, we store 2 other JSON objects. Since we do it this way, we now have access to the other JSON objects. This makes it easier to manage and store data. Let’s learn how to access the …

Read More »
Creating JSON Data

Creating JSON Data – JSON Tutorial

So, let’s get started with creating JSON data. Before we do, let’s set up our files and folders. Create a file called index.html and a folder called js. Inside your js folder, create a file called script.js. Inside your index.html add this bit of code. [crayon-58da9f2ed1c41084773411/] Nothing special going on here besides including our script. So, let’s get started! Open …

Read More »