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.

Basic AppLSAC with Browser as Runtime Environment

Learning Task Edit

  • (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[1] 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 Edit

References Edit

  1. LoadFile4DOM Git Repository (2019) Git Repository for this learning resource - URL: https://www.gitlab.com/niehausbert/loadfile4dom (2021/10/05)