Skip to content

Spring 2014: Week 4

Jump to bottom Edit New page
lmccart edited this page Oct 21, 2014 · 2 revisions

##Loading external files

  • JS is single threaded and synchronous, however there are asynchronous functions used that make the program flow faster. Loading images, external files, and URLs are generally handled by async functions.
  • preload() - loadImage() example
  • preload() - loadStrings() example
  • FYI: XMLHttpRequest
    • API used to retrieve data from other URLs/files without requiring a page reload. It can load file types besides XML, including JSON and plain text.
    • An XMLHttpRequest is used behind the scenes in functions like loadJSON, loadXML, and loadStrings.

##JSON

  • JSON is a data-interchange format. It closely resembles a subset of Javascript syntax, although it is not a strict subset.

  • JSON is often used in creating JS applications to store data.

  • JSON is capable of representing numbers, booleans, strings, null, and arrays (ordered sequences of values) and objects (string-value mappings) composed of these values (or of other arrays and objects). It doesn't natively represent more complex data types like functions, regular expressions, dates, etc.

    {
     "firstName": "John",
     "lastName": "Smith",
     "age": 25,
     "address": {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": "10021"
     },
     "phoneNumber": [
         {
             "type": "home",
             "number": "212 555-1234"
         },
         {
             "type": "fax",
             "number": "646 555-4567"
         }
     ],
     "gender":{
          "type":"male"
     }
}

  • There is a JSON object in JS.

    • JSON.stringify() -- serializes a JS object, creating a JSON string
    var foo = {};
foo.bar = "new property";
foo.baz = 3;
var JSONfoo = JSON.stringify(foo);
print(foo);
print(JSONfoo);
JSON.parse() -- parses a JSON string, creating a JS object
var backToFoo = JSON.parse(JSONfoo);
print(backToFoo);

  • JSON.stringify and JSON.parse are often used for passing data through a communication channel, like a socket, for example. It works within a JS file, but when loading external files, you will need to use the XMLHttpRequest (loadJSON function in p5).

  • preload() - loadJSON() example

  • https://developer.mozilla.org/en-US/docs/JSO

##Callbacks, passing functions

  • Using preload() makes the program wait until everything is loaded, but if this is not necessary, you could also use a callback. This lets your program load and begin running even before all data is loaded.

  • Remember, in JS functions are first-class objects, meaning they can be used just like objects since they are objects. They can be stored in variables, passed as arguments to functions, created within functions, and returned from functions.

  • Also remember, these are identical:

    var doStuff = function() {};
function doStuff() {}

  • A callback function (or higher-order function), is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (executed) inside otherFunction.

  • A callback function is essentially a pattern (an established solution to a common problem), and therefore, the use of a callback function is also known as a callback pattern. DOM example from last week:

    var elt;
elt = createHTML(“hello world”);
elt.mousePressed(changeText);

function changeText() {
   elt.html(“goodbye world”);
}

  • Example using setTimeout:

    function callback() {
   console.log("Done!");
}
setTimeout(callback, 5000);

  • You can also pass a callback function in without naming it. This is called an anonymous function.

    var elt;
elt = createHTML(“hello world”);
elt.mousePressed(function() {
   elt.html(“goodbye world”);
});

##Using external APIs

##Homework

Add a custom footer
Add a custom sidebar
Clone this wiki locally