JavaScript and JSON Essentials

5 (3 reviews total)
By Sai Srinivas Sriparasa
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies

About this book

The exchange of data over the Internet has been carried out since its inception. Delimiter-separated lists such as CSV and tag-separated languages such as XML are very popular, yet they are considered to be verbose by a section of developers. JSON (JavaScript Object Notation) is a lightweight text-based code to create objects to transfer data over the Internet. It is a data exchange format that is human-readable (like XML, but without the markup around your actual payload) and its syntax is a subset of the JavaScript language that was standardized in 1999.

JavaScript and JSON Essentials is a step-by-step guide that will introduce you to JSON and help you understand how the lightweight JSON data format can be used in different ways either to store data locally or to transfer data over the Internet. This book will teach you how to use JSON effectively with JavaScript.

This book begins with a brief refresher course on JavaScript before taking you through how JSON data can be transferred via synchronous, asynchronous, and cross-domain asynchronous HTTP calls. JSON is not just about data transfer; this book throws light on the alternate implementations of JSON as well.

You will learn the data types that JavaScript uses and how those data types can be used in JSON. You will go through the concepts of how to create, update, parse, and delete a JSON object. You will also look at the different techniques of loading a JSON file onto a web page, how to use jQuery to traverse through an object, and how to perform access operations. You will also go over a few resources that will make debugging JSON quick and easy.

Publication date:
October 2013
Publisher
Packt
Pages
120
ISBN
9781783286034

 

Chapter 1. JavaScript Basics

JavaScript, which was introduced as LiveScript by Netscape Communications Corp, has grown leaps and bounds in the last few years. JavaScript was originally developed to make web pages more interactive, and control the behavior of the page. JavaScript programs are commonly embedded inside an HTML file. HTML is a markup language, and does not manipulate the behavior of a page once its loaded. Using JavaScript, web developers can set rules and verify if the rules were followed, avoiding any remote server resources for input validation or complex number crunching. Today JavaScript is not just used for basic input validation; it is used to access the browser's Document object, to make asynchronous calls to the web server, and to develop end-to-end web applications using software platforms such as Node.JS, which is powered by Google's v8 JavaScript engine.

JavaScript is considered to be one of the three building blocks that are required to create interactive web pages; it is the only programming language in the trinity that is HTML, CSS, and JavaScript. JavaScript is a case sensitive and a space insensitive language, unlike Python and Ruby. A JavaScript program is a collection of statements and those statements have to be included inside the <script>> tags.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

JavaScript has to be invoked from another application such as a browser. Browsers have a built-in JavaScript engine that interprets and executes the JavaScript on the webpage. The interpretation of JavaScript is from top to bottom and goes from left to right. SpiderMonkey and Rhino are few of the early JavaScript engines that were implemented by different browsers, such as Netscape Navigator and Mozilla Firefox.

Next is our simple Hello World program; the JavaScript program is in between the <script> tags in the head section. The script tags can either be added to the head tag or to the body tag. As JavaScript is not non-blocking, the scripts hold the page until they are loaded. It is common to see the scripts being loaded at the end; this would work if there were no dependencies to other files or elements. One such example of a dependency would be a library that is used from a different location. We will be looking at a lot of these examples in the later chapters. We will be discussing the role of Unobtrusive JavaScript at a later point. For our Hello World program, use a text editor of your choice, and save this program with an HTML extension. Load the file in a web browser, and a pop-up box with the text Hello World! should be loaded on the page.

The following code snippet is the first_script.html file:

The output is as follows:

 

Variables in JavaScript


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

Note

The semi colon (;) is a statement terminator, it tellsthe JavaScript engine that a statement has ended.

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:

Note

Code commenting can be done in two ways: one is single line, and the other is multiline.

Single line comments:

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

Multiline comments:

/* 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:

Note

Code commenting is a recurring and an extremely important step in the development life cycle of any application. It has to be used to explain any assumptions and/or any dependencies that our code contains.

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.

 

Arrays


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:

Note

Arrays in JavaScript are zero based.

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:

Note

The second way of declaring an array is by using the Array class.

var bookshelf = new Array()
 

Objects


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:

 

The Carousel application


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.

 

Summary


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.

About the Author

  • Sai Srinivas Sriparasa

    Sai Srinivas Sriparasa is a web developer and an open source evangelist living in the Stamford area. Sai was the lead developer for building Dr. Oz’s website, and has led teams for companies such as Sprint Nextel, West Interactive, and Apple. Sai’s repertoire includes JavaScript, PHP, Python, HTML5, responsive web development, ASP.NET, C#, and Silverlight.

    Browse publications by this author

Latest Reviews

(3 reviews total)
Helps me learn new technologies and stay up-to-date with my knowledge.
Tolles Buch, gibt in übersichtlicher Weise einen guten Überblick über das Thema
JavaScript and JSON Essentials
Unlock this book and the full library FREE for 7 days
Start now