JSON

In this section, we are going to talk about JSON. What is JSON? It stands for JavaScript Object Notation. JSON is another way to store data. It allows us to store organized groups of data into one object. It’s essential that we cover a couple of background items first, however. Keep in mind; we will discuss this in greater detail next week.

Object-oriented Programming (OOP)

What is this? OOP is where we look at the real world and mirror it in programming. It’s quite ingenious because its basis is on how we already view the world. So, how is it done?

First, we create classes. A class is a generic template or blueprint. What?! What does that mean? It means we can use classes to build many things. For example, a house uses a diagram, and from that blueprint, you can make many homes. As a result, we need one class, and from that class, we can create many objects

You can see this in many places in the world. I encourage you to look around and see if you can spot more classes.

All classes contain three things. They include a constructor(s), attributes, and methods (functions).

From classes, we can create objects. These are the specific instances of classes. We have interacted with these objects already.

I know this is a lot of terms right at first, but I promise we will go into more depth about this next week. I just wanted to introduce you to it. So, as long as you get Classes are generic templates or blues and objects are specific instances of those classes, that’s great!

We have used classes (even if you didn’t realize it).

Remember the math.random? math is a class.

Array is also a class. However, we needed to use a keyword new to create a new array, resulting in a new object.

Once we have an object, then we can get to its attributes and methods through the dot notation. For example, myArray.push(“more stuff”)

So, how does JSON play into this?

We can create JSON objects like this:

<html>
    <head>
        <title>
            JSON
        </title>
        <script>
            function setInformation()
            {
                var information = {"bike": "Santa Cruz", "model":"5010", "year":"2019"};
                document.getElementById("info").innerHTML = "Bike: " + information.bike;    
            }
        </script>
    </head>
    <body onload="setInformation();">
        <div id="info"></div>
        <br>
    </body>
</html>

Notice we use curly braces to put together value-key pairs like bike and Santa Cruz.

We can access a value out of JSON by using the dot operator and the key. The dot operator returns the value associated with the key. For example information.bike