• JSON is the newer verison of XML. It is similar to native JS objects, with a few methods to go along with it.
  • JSON.parse() converts raw JSON data to data to we can deal with.
  • JSON.stringify() allows us to convert JSON to a string.
  • We've already discussed APIs, but I'd like to do some practice with one.
  • Let's try it!
    • Clone my repository here
    • Let's look through the JS code.
    • Do you recognize any of this?
    • How can we make the second example dynamic?

Now that we know what Objects look like, let's look at how to effect objects...

  • This is a comprehensive list of open source projects you can use in your contracts.
  • These APIs can be used to gather data from several sources, tying multiple datapoints together for one website or application.
  • Let's try one out!
    • Pick an API from the list (don't pick one that needs auth)
    • Take about 20 mins and see if you can read through the documentation and get a JSON response
    • Try to display your data on the DOM
  • Closure is one of the more complicated peices of JavaScript, but it is also very useful to understand.
  • Closure, as simply put as possible, is the access to a certain scope block, outside of that scope block.
  • For brevity, I will demonstrate in code: 
                                
    function showMeClosure() {
        var bestNumber = 42;

        function proveClosureExists() {
            console.log( bestNumber );
        };

        return proveClosureExists;
    };

    var outsideScope = showMeClosure();

    outsideScope(); // 42 -- Whoa, closure was just observed, man.
  • That was a lot to digest, but let me break it into its component pieces: 
    1. 
    function showMeClosure() { //Here we see a function, declared in the global space.
        var bestNumber = 42; //This var is scoped lexically to the inside of this fn.

        function proveClosureExists() {//This function is also lexically scoped inside showMeClosure();
            console.log( bestNumber ); //Best number is still 42 here, because bestNumber and proveClosureExists() share the scope of showMeClosure();
        };

        return proveClosureExists; //This will return the value that proveClosureExists() returns (namely, the value of bestNumber.)
    };
                                
    2.                                     
    // In the global scope (outside of the showMeClosure() scope), we assign the value that
    // showMeClosure(); returns to us to a global var. This is where we observe the closure because
    // even though this is in the global scope, JS allows the reference to that lexical scope (i.e.
    // the inner scope of showMeClosure();) to be passed, in this var ONLY, to a global location.
    var outsideScope = showMeClosure();
                                    
                                
    3. 
    //Finally, we see the result of closure. We call the var outsideScope
    // as a function (this is possible because it is a pointer/reference to a function)
    // and we see that even though the calling context is the global scope, closure
    // has allowed the definition of bestNumber to be passed outside of lexical scope, to the global scope.
    // NEAT!
    outsideScope(); // 42 -- Whoa, closure was just observed, man.
  • In it's most basic and understandable form, that is closure. There is more to closure, and I highly recommend reading the chapter from You Don't Know JS about Scope and Closures.

For some reason, JavaScript decided that it needed classes to fit in with other, older languages. So I'll have to teach it to you, I suppose...

  • The good news is, classes aren't brittle and potentially devestating to your code as they are in other languages. In short they are:
    1. Special Functions that are NOT hoisted
    2. Contains a special method named "constructor" that is used to define and initialize the class.
    3. Can be "extended" to be declared as a child of another class, but not as a child of another Object.
    4. Inferior to prototypes...in my humble opinion!

Now that you know JS in all it's introductory glory, you can write anything from a simple, modern website, to entire web applications. You will find that there are many frameworks that make the development of applications much easier for you.

  • In general, expect frameworks to:
    1. Have their own syntactic "sugar" that may make them seem like thier own separate language.
    2. Obscure the actual "native" JavaScript they are using behind thier own code.
    3. (In some cases) Cut down on your development time significantly.
    4. Be a major boon when it comes to job searches/hiring.

Some stats for you, after all this time!

Bureau of Labor Statistics

Eric Elliot's hard-hitting look at the JS job market.

Job Outlook for web devs.

This week you should be finishing up your todo application. Hopefully your HTML is complete, including:

  1. A checkbox to mark each item as done
  2. An edit button for each item.
  3. A delete button for each item.
  4. Your JavaScript should be functioning at some level. At the least, you should be able to add your todo items, edit them, and delete them.
  5. Don't forget about your Ul that is going to hold all the items on your todo list, and the second that will hold the ones your user has marked complete.