JavaScript and JSON Essentials

Now that we have built a Hello World program, let us take the next step and perform a few arithmetic operations on two numbers.

Let us take a look at another program, alert_script.html:

The previous program would run and produce four pop-up windows, one after the other, displaying their respective values. A glaring problem here is that we are repetitively using the same numbers in multiple places. If we had to perform these arithmetic operations on a different set of numbers, we would have had to replace them at multiple locations. To avoid this situation, we would assign those numbers to temporary storage locations; these storage locations are often referred to as variables.

The keyword var is used to declare a variable in JavaScript, followed by the name of that variable. The name is then implicitly provided with a piece of computer memory, which we will use throughout the program execution. Let us take a quick look at how variables will make the earlier program more flexible:

//This program would alert the sum of 5 and 3;
alert(5+3);

/* This program would generate two alerts, the first alert would display the sum of 5 and 3, and the second alert would display the difference of 5 and 3 */
alert(5+3);
alert(5-3);

Let us continue with the program:

Now let us alter the value from 5 to 6; the amount of change that we will make here is minimal. We assign the value of 6 to our variable a, and that takes care of the rest of the process; unlike our earlier script where changes were made in multiple locations. This is shown as follows:

In JavaScript, we declare a variable by using the keyword var and until a value is assigned to it, the value of the variable will be implicitly set to undefined; that value is overwritten on variable initialization.

Variables are good to hold single values, but for cases where a variable should contain multiple values, we would have to rely on arrays. A JavaScript array is a collection of items arranged in an order, according to their index. Each item, in the array, is an element and has an index, which is used to access that element. Arrays are like a bookshelf that holds more than one book; each book having its unique location. Arrays are declared using the array literal notation [].

Let us look at a simple array declaration:

Let us initialize the array:

To access the value of a specific element, the reference index of that element is used. Once the reference index is identified, it can be outputted using the alert statement, as shown in the following screenshot:

Unlike variables, arrays are not typed, therefore, they can contain various types of data, as shown in the following screenshot:

A much more complex example of a JavaScript array is a multidimensional array, where there is a combination of arrays inside an array, as seen in the following screenshot:

To retrieve an element from a multidimensional array, we would have to use as many indexes as the levels in that array. If the multidimensional array contains an array that has the values that we want to access, we will have to choose the index where the array element exists, and then choose the index of the value inside the array that we are searching for. To retrieve the string Three from the multidimensionalArray example, we will have to first locate the index of the array containing the value Three, and then find the index of the value Three inside that array. This is shown as follows:

var bookshelf = new Array()

Objects are another way of handling data. In arrays the indexes are commonly numerical; objects give us a robust way of assigning and retrieving data. Objects are derived from the object-oriented programming concept; a programming paradigm that is very popular. Objects are a virtual representation of real-time data; they allow us to organize our data into logical groups via properties and methods. Properties describe the state of the object, while methods describe the behavior of the object. Properties are a key-value pair that holds the information. Take a look at the following:

In the previous example, we have instantiated a person object, and then added the firstname and lastname properties that described the object. We added behavior to the object by creating a method called getFullName, the method accessed the object properties, retrieved the data, and alerted the output onto the screen. In this example the properties are accessed by the dot notation; we could also access a property by putting the property name in square brackets similar to an array, but it is not popular. This is shown as follows:

The second way of creating an object is by using the curly braces. Here we are introduced to the this keyword, which provides a reference to the object's properties and methods, as shown in the following:

We will be working on a Carousel application, which is powered by a JSON feed. We will be using HTML, JavaScript, and JSON to build this application. This application will have its very own navigation system coupled with a timer event in the background, which will rotate the items at a given interval. We will also be discussing how user experience plays an important role in developing such an application.

This chapter is a basic introduction to the principles of JavaScript that we will be utilizing in our journey towards mastering JSON. Variables, arrays, and objects play a very important role in carrying the data across the network. If this is your first encounter with JavaScript, go through the examples another time and practice them. We will need a strong foundation in order to build a solid understanding of JSON, and how it can be used in real-time web applications.