Tag Archives: how to

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 …

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 …

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-5ce9570555aa4469071498/] Let’s update …

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

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 …

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 …

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 …

Let’s talk about nesting JSON data. We’ll learn about nesting objects and arrays. Let’s update our script to this. [crayon-5ce957055a12f793065219/] 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 …

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-5ce957055aca2783317797/] Nothing special going on here besides including our script. So, let’s get started! Open …

You’ve probably heard of JSON, but what is JSON? JSON stands for JavaScript Object Notation. It’s not a programming language. It’s not a markup language. It’s a lightweight text-data interchange format. So, what does that mean? To put it simply, it’s a file with data formatted to be readable by other programming languages. JSON by itself doesn’t really do anything. …