WebApps with LocalStorage and AppCache/JSON

A JSON file on you local is a text file that follows the JSON syntax. The FileReader API provides a string as input. In the general this feature will be used to upload a file to remote server. E.g. a text file of an essay as home work to the teacher or Octave or Maxima script that you have created as response to a learning task. Now we load the file just into the browser environment and process the JSON.

Learning Task

 * (FileReader API) The following programming task addresses the basic skills in Vanilla Javascript to handle a JSON file. In a second step we assume that basic steps integrated in a library LoadFile4DOM and will use the following steps by a library in more complex learning tasks.
 * create and index.html and add a script tag script tag and add your javscript code in between this tag.
 * use the FileReader API in a browser to load a JSON file into your browser (not to a remote server)
 * parse the JSON with JSON.parse(filedata) in Javascript in the onload handler of the load procedure (place the code into the script tag of your HTML file  index.html.
 * (optional) use a try-catch environment to check if the loaded input string has not a valid JSON format.
 * for the basic example the JSON should be a simple object with the attributes name and town
 * add a HTML text input element in which the user can add a name (e.g. "Peter")
 * add an update button that reads the new name from the input box.
 * update the name-attribute in the loaded and parsed JSON with the new name of the input box (e.g, Peter)
 * after that operation the JSON in the browser should contain the value "Peter" in the name attribute of the JSON
 * add also a HTML textarea in your HTML page
 * (optional) create a javascript file handlejson.js and import this library in the HTML file with the script tag.
 * (Image Handling) The next task is to create an AppLSAC that converts color image into a grey scale image.
 * First of all look for existing Javascript libraries that can to that for your.
 * Load your Javascript image into a HTML canvas with a FileReader or with LoadFile4DOM.
 * Then apply the image conversion into grey scale on the canvas.
 * (optional) Learn how to save the converted grey scale image with FileSaver.js library by Eli Grey.