JavaScript Basic HTML APIs

Web Storage APIs

Web Storage API

Web Storage API
- similar to HTTP session cookies
- two related mechanisms for storing structured data on the client side
  - sessionStorage:
    - erased when the tab/browser closed
    - tab specific and scoped to the lifetime of the tab
    - useful for storing small amounts of session specific information
    - used with caution: synchronous and blocking the main thread
    - limited to about 5MB and containing only strings
    - not accessible from web workers or service workers
    - data never transferred to the server
    - storage limit larger than a cookie
  - localStorage:
    - data remained until deleted
    - avoided due to synchronous to block the main thread
    - limited to about 5MB and containing only strings
    - not accessible from web workers or service workers
    - stored data w/o expiration date
    - get cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data
    - storage limit: the maximum among the three
- main difference: data longevity
- key-value store for localStorage
  - a simple key-value store
  - the keys and values: strings
  - only one store per domain
  - same applied to sessionStorage
  - functionality exposed through the globally available localStorage object
- example: save & restore form contents on the fly
Example for local storage API
- HTML button to activate the JS function: <button onclick="resetStore()">reset store (erase all key/value pairs)</button>
- retrieve all data: function getCountValue() { document.querySelector("#counter").innerHTML = localStorage.count; }
- view all stored data
- reset all stored data: function resetStore() { localStorage.clear(); document.querySelector('#list').innerHTML=""; }
- add/remove some data to local storage
Example to save/restore states
- save initial preferences
- load preferences

Cookie

Cookies & Web Storage
- main difference: size limit
- cookie:
  - a popular way to store key-value pairs
  - cookies limited to a few KBytes
  - generate additional HTTP request traffic: request a Web page, an image, a stylesheet, a JavaScript file, etc.
  - not used for storage
  - sent with every HTTP request
  - storing anything more than a small amount of data
  - significantly increasing the size of every web request
  - limited to only strings
- Web Storage: a more powerful technique than cookies
  - Web Storage extended to several MBytes
  - objects managed no longer carried on the network and HTTP
  - easily accessible (read, change and delete) from JavaScript
  - using the Web Storage API
sessionStorage key/values vs cookies
- store session-based data in a manner more powerful than cookies
- sessionStorage object working in exactly the same way as localStorage
- lifetime limited to a single browser session (lifetime of your tab/window)
- sessionStorage advantage: being scoped to a given browser tab (or similar execution context)
- Cookies' security drawback
  - two tabs open to the same site $\to$ share the same cookies
  - storing information about a given operation using cookies in one tab
  - probably leaking the information to the other side
  - confusing if performing different tasks in each
- sessionStorage data scoped and not leak across tabs

Set & Get Web Storage

getItem and setItem methods
- using var value = getItem(key) to retrieve a key's value and setItem(key, value) to set it
- a counter counting the number of times a given user loaded the application
- spaces acceptable: localStorage.setItem("Instructor's name", "Michel"); and var name = localStorage.getItem("Instructor's name");
- not acceptable: var name = localStorage.Instructor's name; will not work!
- syntax to set/get localStorage values within loop or iterator

Delete & Reset Web Storage

removeItem and clear methods
- removeItem(key): delete a key
- localStorage.clear():
  - reset the entire store
  - rare occasion to clear the entire store by the user in production software
  - a common operation needed during development
    - bugs may store faulty data the persistence of which can break your application
    - the way to store data may evolve over time
    - test the experience of the user when first using the application
- one way of reseting the entire store
  - add a user interface button that calls clear() when clicked
  - remember to remove it when you ship
- recommended approach: simply open the dev. tool's console and type localStorage.clear()
Example for generic functions
- calling init() function when the page loaded
- adding input listeners:
  - taking an input field as parameter and attaching an oninput listener to it
  - saving the field's content each time a value entered
- restore the last saved value for each input field, if present.
  - get the list of input fields: document.querySelectorAll("input");
  - iterate through the list: for(var i= 0; i < listOfInputsInForm.length; i++) {...}
  - get id of input fields as the key in localStorage for the previous data saved for this field: var fieldToRestore = listOfInputsInForm[i]; var id = fieldToRestore.id;
  - restore by setting the value of the input field if not undefined: if(savedValue !== undefined) { fieldToRestore.value = savedValue; }

Size of Web Storage

Size of Web storage
- related mechanism w/ user agents (browsers) according to Web storage specification
  - limiting the total amount of space allowed for storage areas
  - allowing the user to grant more space to a site, when reaching quotas
  - allowing users to see how much space each domain is using
  - giving at least 5Mb per origin
- local storage required for saving/loading data on demand in many cases
- more complex solutions:
  - processing transaction: require more available space than local storage
  - e.g., IndexedDB, a No SQL database
- limit amount of data to prevent from storing anything anything huge
- storage not necessarily permanent
- serious applications
  - synchronizing existing data with the server on a regular basis
  - avoid data loss when using the same service from multiple devices at once

File APIs

Interface of HTML5 File API specification
- FileList interface: the files property
- File interface: useful for getting details about a file
- Blob interface: read binary data (only) accessed slice by slice (as chunks of data, each one being a "Blob")
- FileReader interface: reading file content
File API
- features for accessing file metadata (name, size, type) from client-side JavaScript
- methods for reading file contents directly in the browser
- particularly interesting for displaying preview of images before uploading them
- much more interesting: developing Web applications work with local files w/o the need for a server
- File API Specification
- example: loading image files for preview

File Metadata

File metadata
- metadata: name, size, type and last modification date
- select one or more files: <input type="file" id="input" ... />
  - rendered as a "select files" or "browse files" button
  - file chooser dialog popped-up to select one file
  - do nothing in the client-side before HTML5 die to no access from JavaScript
- File API
  - define a file property on the DOM node corresponding to the <input type="file".../> input field
  - property as an array
  - the metadata related to selectedFile variable: selectedFile.name, selectedFile.size, selectedFile.type, selectedFile.lastModifiedDate
- example: read file metadata from <input type="file" id="input" onchange="displayFirstSelectedFileMetadata();"/>
- example: display metadata of multiple files w/ a filter on the file type
  - select several images: <input type="file" accept="image/*" multiple onchange="filesProcess(this.files)" name="selection"/>
  - accept="image/*" attribute: a filter restricting selection to images only
  - filesProcess(...) function: passing as parameter the list of selected files for the current element (this.files)
  - for loop builds all the rows that compose the table, adding HTML code to the selection string variable
    - prepare the HTML code for building a <table> with the results
    - build table and headings: var selection = "<table><tr><th>Name</th><th>Bytes</th><th>MIME Type</th> <th>Last modified date</th></tr>";
    - build rows iteratively
    - closing table: selection += "</table>";
  - table added to the page: document.getElementById("result").innerHTML = selection;
    - table appears on the page dynamically
    - use the innerHTML attribute of the DOM element corresponding to the <div id="result"> in order to insert the table as its child in the DOM tree

Bolb Object

Blob object
- a structure representing binary data available as read-only
- two properties, namely: size and type
- retrieving the size in bytes of the data handled by the Blob and their MIME type

File Object

File object
- useful for manipulating files
- inherit the properties and methods of Blob objects
- two additional properties
  - name: the file name
  - lastModifiedDate: the date of the last modification of the file
Procedure to read file contents
- create a FileReader object
  - several methods for reading file content, each taken from the FileReader interface
  - create a FileReader object: var reader = new FileReader();
- call a method of the FileReader object for reading the file content
  - three different methods available for reading a file's content: readAsText, readAsArrayBuffer and readAsDataURL
  - readAsArrayBuffer for binary data
  - readAsDataURL
    - content as a URL used to set the src field of an <img src=...>, <audio>, <video>
    - all existing methods/properties that accept a URL
  - start reading the file asynchronously: reader.readAsText(f);
  - executed by the browser in the background
  - reader.onload callback only when the file is read entirely
- get the file content in an onload callback
  - called only when the file content loaded
  - the content: e.target.result
  - called only when the file content available: reader.onload = function(e) {...}
  - event e as a unique parameter
  - e.target.result = the file content

Text Files

Read text file
- read a single file's content
  - start reading the file asynchronously: reader.readAsText(files[0]);
  - call the onload callback when the file is read
  - called when the file content is loaded: reader.onload = function(e) {...}
    - the file content: e.target.result
    - display content in the textarea with id="fileContent": document.getElementById("fileContent").value= e.target.result;
- read multiple files
  - select multiple files: <input type="file" id="files" multiple onchange="readFilesAndDisplayAsText(this.files);"/><br/>
  - onload listener to print the name of the file...
  - iterate to read files
Character encoding for text file
- optionally indicate the encoding of the file going to read
- default: UTF-8
- e.g., reader.readAsText(file, 'UTF-8'); reader.readAsText(file, 'ISO-8859-1');

Binary Files

Read binary file
- rarely used, except for loading "raw" binary data
- HTML page for specific binary files
  - image files or drawing in a canvas: using the <img src= tag>
  - audio files: using the <audio> elements
  - video files: using the <video> elements
- image, drawing, audio, and video files: referable to use the readAsDataURL method
- readAsArrayBuffer method used for purposes
  - reading audio samples that should be loaded in memory
  - played using the WebAudio API
  - loading textures that you will use with WebGL for 3D animations
- WebAudio API
  - useful for reading audio sound samples from memory (no streaming)
  - designed for music application and games
- example: read audio file and play w/ WebAudio API
  - read a local audio file and play directly in the Browser
  - user selects file and read it as an ArrayBuffer and pass to the API: var fileInput = document.querySelector('input[type="file"]');
  - define a change listener: fileInput.addEventListener('change', function(e) {...}
    - after choosing a file, the listener executed
    - start the reading of the file content, as a binary file: reader.readAsArrayBuffer(this.files[0]);
    - once the file entirely read, the onload callback asynchronously called by the browser
  - executed the onload callback when the file content is loaded in memory
  - pass the file content to the initSound(e.target.result); function to play

dataURL method

Read file as dataURL
- data URL: a URL including type and content at the same time
- useful for in-lining images or videos in the HTML of a Web page
- mobile devices: speed up the loading of the page by reducing the number of HTTP requests
- example: the red square w/ dataURL
  - dataURL: data:image/png;base64,iVBOR...
  - src attribute of an image element <img src="data:image/png...."> with the data URL: <img src="data:image/png;base64,iVBORw..." alt="Red square" width=50 height=50/>
- dataURL format
  - enabling file content to be stored in a base64 format (as a string)
  - adding the MIME type specification of the content
  - able to store a file as a URL readable with modern browsers
  - commonly used on the Web
  - especially for mobile applications, in-lining images reducing the number of HTTP requests and making the Web page load faster
  - Image to Data URI converter
  - able to encode any type of file as dataURL
  - most frequently used with media files (images, audio, video)
- example: read images as data URL & display
  - starts the reading of the file f: reader.readAsDataURL(f);
  - when f read, the onload callback called: reader.onload = function(e) {...}
    - render thumbnail
    - e.target.result = the image content as a data URL
    - create a span with CSS class="thumb" for nicer layout: var span = document.createElement('span');
    - add an <img src=...> in the span, with src= the dataURL of the image: span.innerHTML = "<img class='thumb' src='" + e.target.result + "' alt='a picture'/>";
    - insert the span in the <output id="list"></output>: document.getElementById('list').insertBefore(span, null);
- example: read local image file and use it with drawImage in a canvas
  - create an image object to draw an image on a canvas: var img = new Image();
  - e.target.result as the dataURL
  - set the src attribute of the image object: img.src= e.target.result
  - asynchronously call the onload callback: img.onload = function(e) { ctx.drawImage(img, 0, 0, 400, 400); }

Geolocaltion APIs

Geolocation APIs

Geolocation API
- implemented by most modern Web browsers
- using different means to get the current location: GPS, GSM/3G triangulation, Wifi, IP address, etc.
- mobile phones:
  - prompt the user to activate the GPS and ask for a particular mean among those available
  - track the current position when it changes
  - useful for writing a navigation application
  - useful for tracking in real time the position of different participants
  - application involving several persons at the same time (using WebSockets, for example)
- typical usage
```
navigator.geolocation.getCurrentPosition(showPosition, onError);

function showPosition(position) {
    console.log("latitude is: " + position.coords.latitude);
    console.log("longitude is: " + position.coords.longitude);
}

function onError(err) {
    console.log("Could not get the position");
}
```
- Geolocation API Specification
- Geolocation API - WDN
coords object properties
- latitude: the latitude of the position
- longitude: the longitude of the position
- altitude: the altitude of the position
- accuracy: the accuracy of the measure of the longitude and latitude (in meters)
- altitudeAccuracy: the accuracy of the measure of the altitude (in meters)
- heading: giving the orientation relative to north, in degrees
- speed: current speed in meters/second

Geolocation error codes

navigator.geolocation.getCurrentPosition method possible to pass a second parameter in case of error

example: error handler

get location: navigator.geolocation.getCurrentPosition(showPosition, errorPosition);

error handling

function errorPosition(error) {
  var info = "Error during geolocation: ";
  switch(error.code) {
    case error.TIMEOUT:
        info += "Timeout !";
        break;
    case error.PERMISSION_DENIED:
        info += "Permission denied, geolocation could not be obtained...";
        break;
    case error.POSITION_UNAVAILABLE:
        info += "Location could not be obtained though the available means...";
        break;
    case error.UNKNOWN_ERROR:
        info += "Unknown error";
        break;
  }
  displayCoords.innerHTML = info;
}

Geolocation HTML5 API
- implemented by most modern Web browser
- using different means to get the current location, including GPS, GSM/3G triangulation, WiFi, IP address, etc.
- possible to promot the user to activate the GPS
- possible to track the current position when it changes, e.g., useful for
  - a navigation application
  - tracking in real time the position of different participants
- Interfaces
  - Geolocation: containing methods to retrieve the user's current position, watch for changes in their position, and clear a previously-set watch
  - GeolocationPosition: representing the position of a user
  - GeolocationCoordinates: representing the coordinates of a user's position
  - GeolocationPositionError: returned by an unsuccessful call to one of the methods contained inside Geolocation, inside an error callback, and containing an error code and message
  - Navigator.geolocation: return a Geolocation object instance, from which all other functionality accessed

Tracking Position

Tracking position
- syntax: watchPosition(onSuccess, onError)
  - get the callback function only when the current position changes
  - return an id to use the clearWatch(id) method to stop the current tracking
- track the current position
- typical usage:
  - get an id of the current tracking: var watchPosId = navigator.geolocation.watchPosition(showPosition);
  - stop the tracking: navigator.geolocation.clearWatch(watchPosId);
Properties of the coords object for real time tracking
- enableHighAccuracy:
  - a boolean (true/false) indicating to the device wish to obtain its most accurate readings
  - using the GPS
  - probably making a difference, depending on your hardware, GPS availability, etc.
- maximumAge:
  - the maximum amount of time (in milliseconds) the position in the cache
  - appropriate as the device may cache readings to save power and/or bandwidth
- timeout:
  - the maximum time (in milliseconds)
  - prepared to allow the device to try to obtain a Geo location
  - after this timeout, call the onError callback

Geolocation libraries

Get a map centered on given longitude and latitude
- rendering a map with the Leaflet API for OpenStreetMaps
- required files to use the Leaflet API :
  - <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
  - <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
- container to display the interactive map: <div id="map"></div>
- using the Geolocation API to get the current position: navigator.geolocation.getCurrentPosition(success, error);
- successfully get the location: function success(position) {...}
  - get the longitude and latitude properties from the location: latitude = position.coords.latitude, longitude = position.coords.longitude;
  - instance map using leaflet w/ id='map': map = L.map('map').setView([latitude, longitude], 13);
  - tile layer using key API at cloudmade.com
  - marker using leaflet: marker = L.marker([latitude, longitude]).addTo(map);
  - popup in leaflet: marker.bindPopup('<p>Your location</p>').openPopup();
- get current position fail: alert('Get current position fail. Please access codepen to get geolocation.');
The Leaflet API for OpenStreetMap
- Leaflet API reference
- example: centering location on map
  - button to trigger map: <button class="btn" onclick="getLocation(event)">Click to show your location with OpenStreetMap</button>
  - container for map: <div id="map" class="map"></div>
  - get current location: function getLocation(e) {...}
    - avoid default behavior: e.preventDefault();
    - retrieve the position: if (!navigator.geolocation) { alert("Browser doesn't support geolocation"); } else { navigator.geolocation.getCurrentPosition(success, error); }
  - get current position successfully: function success(position) {...}
    - global variables for current position: var latitude = position.coords.latitude, longitude = position.coords.longitude;
    - map instance using leaflet: map = L.map('map').setView([latitude, longitude], 13);
    - tile layer using key api at coludmade.com: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { key: '760506895e284217a7442ce2efe97797', styleId: 103288, maxZoom: 16 }).addTo(map);
    - add marker: marker = L.marker([latitude, longitude]).addTo(map);
    - popup in leaflet: marker.bindPopup('<p>Your location</p>').openPopup();
  - get error position: function error() { alert('Get current position fail. Please access codepen to get geolocation.'); }

Reverse Geocoding

Reverse Geocoding
- Web services:
  - used to get an address from longitude and latitude
  - mostly free of charge, but ask to register an API key and enter your credit card number
  - if too many requests, you will be charged
  - examples:
    - the Google Reverse Geocoding JavaScript API
    - Leaflet plugin (an extension to Leaflet) based on the Gisgraphy (free open source framework)
Reverse geolocation
- used to get an address from longitude and latitude
- Web service free charge but limited requests
  - register required w/ credit card
  - charged once exceeding limitation
  - examples:
    - Google Reverse Geocoding JavaScript API
    - Gisgraphy: base of Leaflet plugin, free open source framework

Examples

Example: get location
Example: tracking position
Example: get address from longitude & latitude
Example: get address from longitude and latitude w/ Google service
Example: reverse geolocation
Example: showing address
Example: geolocation, map and reverse geoencoder in a HTML form

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS-HTMLBasics.md

JS-HTMLBasics.md

JavaScript Basic HTML APIs

Web Storage APIs

Web Storage API

Cookie

Set & Get Web Storage

Delete & Reset Web Storage

Size of Web Storage

File APIs

File APIs

File Metadata

Bolb Object

File Object

Text Files

Binary Files

dataURL method

Geolocaltion APIs

Geolocation APIs

Tracking Position

Geolocation libraries

Reverse Geocoding

Examples

Files

JS-HTMLBasics.md

Latest commit

History

JS-HTMLBasics.md

File metadata and controls

JavaScript Basic HTML APIs

Web Storage APIs

Web Storage API

Cookie

Set & Get Web Storage

Delete & Reset Web Storage

Size of Web Storage

File APIs

File APIs

File Metadata

Bolb Object

File Object

Text Files

Binary Files

dataURL method

Geolocaltion APIs

Geolocation APIs

Tracking Position

Geolocation libraries

Reverse Geocoding

Examples