JavaScript Operations 0 - JSON


The menu links for these SVG pages uses JSON - JavaScript Object Notation - to hold the data for the HTML code. Then JavaScript is used to read the menu file and display it.

I chose this method of maintaining the menu since new files were always being added or moved around. Rather than hard-code the menu system in over two dozen files, this method requires only 1 file to maintain. In that sense it is like having a CSS file to control a web site.

Any time you have lots of web files with data that may change often during development (like a menu system) this method will save you a ton of time and headache.

JSON is typically described as a data interchange or data exchange format.

The words 'interchange' and 'exchange' imply that something (data) is moving from one place to another.

When data is moved from one computer (a server) to another (your home computer), this is data interchange. But the data we are talking about here is not simply images, music or video files (although it could be).

The 'Object' in the name refers to a special JavaScript construction. Basically everything in JavaScript is an object.

If our object happens to be a car for sale on our web site, we would obviously like to know a few things about it. For example:

  1. make
  2. model
  3. year
  4. colour
  5. price

... at the very least.

This is where JSON comes in - it allows us to pass meta information back and forth, in a standard, structured format.

'Meta' information is 'information about information'. In our case we want to know a few things about this car.

  1. make:Volkswagen
  2. model:Jetta
  3. year:1995
  4. colour:white
  5. price:$5,000

To put this into our JSON format:

var MyCar =
{"make":"Volkswagen",
"model":"Jetta",
"year":"1995",
"colour":"white",
"price":"$5,000"
};

Now we can walk through this data with JavaScript and display specific information, such as the price or model.

In this sense JavaScript Objects are similar to hashes or associative arrays in Perl and Python.

While arrays are indexed numerically, Ojects are indexed by a string. So we actually use the term 'model' to get that data.

Going back to our menu, here are the first few items in the list:

newFiles =
{
"Web Mechanic":"../",
"SVG Home":"index.html",
"Paths #0":"paths.html",
"Paths #1":"paths1.html",

The menu is displayed by a jQuery script in a special div with 2 columns.

View the source code to see how it all fits together.