WebApps with LocalStorage and AppCache/JSON

Basic AppLSAC with Browser as Runtime Environment

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.

See also

• JSON
• AppLSAC/Load
• AppLSAC/Processing
• AppLSAC/Save