- Notifications
You must be signed in to change notification settings - Fork1
The-Assembly/intro_to_coding_with_HTML5_web_API
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
WebAPI is a term used to refer to a suite of device compatibility and access APIs that allow Web apps and content to access device hardware (such as battery status or the device vibration hardware), as well as access to data stored on the device (such as the calendar or contacts list). By adding these APIs, we hope to expand what the Web can do today to also include what only proprietary platforms were able to do in the past.
More on WebAPIs can be found onhttps://developer.mozilla.org/en-US/docs/WebAPI
- Battery Status
- Notification
- Geolocation
- Page Visibility
- Screen Orientation and Vibration
- Clipboard and IndexedDB/WebSQL/LocalStorage
- Device Motion (Using p5.js)
TheBattery Status API provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change. This can be used to adjust your app's resource usage to reduce battery drain when the battery is low, or to save changes before the battery runs out in order to prevent data loss.
The following demo shows how developers can access a user's battery information and show the battery level, the battery discharging time and if the device is charging or not.
<!DOCTYPE html><html><head><title>Battery Status</title></head><body><h2>What's my battery level?</h2><h3id="battery_level"></h3><br><h2>How long before my battery runs out?</h2><h3id="battery_discharge"></h3><br><h2>Is my laptop charging?</h2><h3id="battery_charging"></h3></body><script>navigator.getBattery().then(function(battery){// Displays the current battery leveldocument.getElementById('battery_level').innerHTML=battery.level*100+"%";// Get value in percentage// Displays time left before the battery runs outdocument.getElementById('battery_discharge').innerHTML=battery.dischargingTime/60/60;// Get time in hours// Displays if battery is charging (Yes!) or not (No)document.getElementById('battery_charging').innerHTML=(battery.charging==true) ?'Yes!' :'No';});</script></html>
For reference,visit this link.
TheNotifications API lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send information to a user even if the application is idle or in the background.
The following code demonstrates how a developer can get permission from the users to send notifications and send a simple notification.
<html><head><title>Notification</title></head><body><!-- Paragraph to display notification permission status --><pid="perm"></p><!-- Button to trigger the notification event --><buttononclick="notify()">Notify</button></body><script>// Function that displays a notification on click of buttonfunctionnotify(){// Get permission from user to display the notification// through the browserNotification.requestPermission().then(function(result){// Display the permission status on the screen// 'granted', 'denied' or 'dismissed'document.getElementById('perm').innerHTML=result;// If the permission was granted, send a notificationif(Notification.permission=="granted"){varnotification=newNotification("Hey there!");}});}</script></html>
For reference,visit this link.
TheGeolocation API allows the user to provide their location to web applications if they so desire.
The following code gets the latitude and longitutde of the user's location and outputs it on the screen.
<!DOCTYPE html><html><head><title>Geolocation</title></head><body><!-- Paragraph to display the user's current location --><pid="location"></p></body><script>// Get current positionnavigator.geolocation.getCurrentPosition(function(pos){// Display the latitude and longitude on the paragraphdocument.getElementById('location').innerHTML=pos.coords.latitude+", "+pos.coords.longitude;});// Check for change in positionid=navigator.geolocation.watchPosition(// On successfunction(pos){// Do something when the location is changedconsole.log('Changed');},// On errorfunction(){console.log('Error');});</script></html>
For reference,visit this link.
With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden.
Using thePage Visibility API, the following code shows how to perform actions when the user focuses out of the window or hides the window.
<!DOCTYPE html><html><head><title>Page Visibility</title></head><body></body><script>// Event listener to detect change in tab visibilitydocument.addEventListener('visibilitychange',function(){// Check if the tab has gone out of focus or is hiddenif(document.hidden){// Tab is hiddendocument.title="COME BACK!";}else{// Tab is visibledocument.title="Yay!";}});</script></html>
For reference,visit this link.
TheScreen Orientation API provides the orientation of the screen being used and theVibration API offers web apps the ability to access the vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake.
The following code combines the two APIs (Screen Orientation and Vibration) to make the device when its tilted to the right and stop the vibration when it is tilted to the left.
<!DOCTYPE html><html><head><title>Screen Orientation</title></head><body><!-- To be able to access the vibration API, the user must explicitly perform some event such as a button click. This is to make sure that developers do not misuse the vibration API to make it vibrate at any given time.--><!-- The button below allows the vibration API to be triggered on button click. Once the user allows this action, the developer can trigger vibration events at any time until the page is refreshed or destroyed.--><buttononclick="navigator.vibrate(0);"id="btn">Allow Vibrate</button><pid="orient"></p></body><script>// Add an event listener to check for a change in the orientationwindow.addEventListener('orientationchange',function(e){// Check if the device is tilted to the right// -90 -> Tilted to the right// 0 -> Straight/Portrait// 90 -> Tilted to leftif(window.orientation==-90){// Display tilt side on webpagedocument.getElementById('orient').innerHTML="Tilted Right";// Vibrate for 10 secondsnavigator.vibrate(10000);}elseif(window.orientation==90){document.getElementById('orient').innerHTML="Tilted Left";// Stop the vibrationnavigator.vibrate(0);}});</script></html>
For reference, visitScreen Orientation API andVibration API.
TheClipboard API (reference) is a modern API providing asynchronous functions and secure context support allowing developers to access the clipboard.
IndexedDB (reference) is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data.
WebSQL (reference) provides an SQL database on the client-side. Developers can use basic SQL transactions such asSELECT,INSERT,ALTER, etc., to access or modify the database contents.
LocalStorage (reference) is a lightweight way to store key-value pairs. The API is very simple, but usage is capped at 5MB in many browsers.
The codes below demonstrate how a user's copied text can be stored locally in client side database.
<!DOCTYPE html><html><head><title>Clipboard & IndexedDB</title></head><body><!-- Dummy paragraphs to be able to copy some text --><pid="para1">1. This is paragraph 1</p><buttonid="copy_btn"onclick="copy_store(1)">Copy</button><pid="para2">2. This is paragraph 2</p><buttonid="copy_btn"onclick="copy_store(2)">Copy</button><pid="para3">3. This is paragraph 3</p><buttonid="copy_btn"onclick="copy_store(3)">Copy</button><pid="para4">4. This is paragraph 4</p><buttonid="copy_btn"onclick="copy_store(4)">Copy</button><divid="container"></div></body><script>// In the following line, you should include the prefixes of implementations you want to test.window.indexedDB=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB;// DON'T use "var indexedDB = ..." if you're not in a function.// Moreover, you may need references to some window.IDB* objects:window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransaction||window.msIDBTransaction||{READ_WRITE:"readwrite"};// This line should only be needed if it is needed to support the object's constants for older browserswindow.IDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyRange;// Check if IndexedDB is supportedif(!window.indexedDB){window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");}// Open the databasevardb;// Name the database 'clipboard_db' and the version as 1request=window.indexedDB.open("clipboard_db",1);data=[];// In case there was an errorrequest.onerror=function(event){alert("Error in creating database");};// If the operation was successfulrequest.onsuccess=function(event){db=event.target.result;// Call the function to retrieve information and display itget_data();};// This event is only implemented in recent browsersrequest.onupgradeneeded=function(event){vardb=event.target.result;// Create an objectStore to hold information about our clips.objectStore=db.createObjectStore("clips",{keyPath:"id"});};// Function to select a specific paragraphfunctionselect(para_num){// Create a Range objectvarrange=document.createRange();// Gets the Selection objectvarselection=window.getSelection();// Specifies what is to be selectedrange.selectNodeContents(document.getElementById('para'+para_num));// Removes any previous selectionsselection.removeAllRanges();// Adds the selection to only the given rangeselection.addRange(range);}// Function to copy selected text and store informationfunctioncopy_store(para_num){// Get text from <p> tagvartext=document.getElementById('para'+para_num).innerHTML;// Store information on the data variabledata.push({id:para_num,para:text});// Create an object store to hold your copied text and open it for read/writevardataStore=db.transaction("clips","readwrite").objectStore("clips");// For each item in the data variable, add it to the databasedata.forEach(function(data){dataStore.add(data);});// Select text for the specific paragraphselect(para_num);try{// Trigger copy eventdocument.execCommand('copy');}catch(err){console.log('Error: '+err);}}// Function to retrieve data from database and display itfunctionget_data(){// Get a reference to the object store where our copied text is storedvarobjectStore=db.transaction(["clips"]).objectStore("clips");// Open cursor to iterate over the objects in the object storevarrequest=objectStore.openCursor();// Get reference to the HTML element where data is displayedvarcontainer=document.getElementById('container');container.innerHTML="<h1>Contents</h1>";// Handle errors in case object store couldn't be accessedrequest.onerror=function(event){// Handle errors!console.log('Error accessing data');};// If the request is successful, output it on the screenrequest.onsuccess=function(event){letcursor=event.target.result;// Get all recordsif(cursor){// Values on the databaseletvalue=cursor.value;// Display data in HTML element// value.para -> para is the column name given in the object storecontainer.innerHTML+=value.para+"<br>";// Move the cursor to the next item if anycursor.continue();}};}</script></html>
<!DOCTYPE html><html><head><title>Clipboard & WebSQL</title></head><body><!-- Dummy paragraphs to be able to copy some text --><pid="para1">1. This is paragraph 1</p><buttonid="copy_btn"onclick="copy_store(1)">Copy</button><pid="para2">2. This is paragraph 2</p><buttonid="copy_btn"onclick="copy_store(2)">Copy</button><pid="para3">3. This is paragraph 3</p><buttonid="copy_btn"onclick="copy_store(3)">Copy</button><pid="para4">4. This is paragraph 4</p><buttonid="copy_btn"onclick="copy_store(4)">Copy</button><divid="container"></div></body><script>// Open the database// Args list: openDatabase( db_name, version, description, size )vardb=openDatabase('clipboard','1.0','Clipboard DB',2*1024*1024);// Onloadcreate_local_table();// Create table called clipsget_data();// Retrieve data from table and display// Function to create a table in the databasefunctioncreate_local_table(){db.transaction(function(transaction){transaction.executeSql("CREATE TABLE IF NOT EXISTS clips(text TEXT NOT NULL)");});}// Function to retrieve information from the database and display itfunctionget_data(){db.transaction(function(transaction){transaction.executeSql('SELECT * FROM clips;',[],functiondataHandler(transaction,results){// Reference to the HTML element that'll hold the datavarcontainer=document.getElementById('container');// Add content to the container with retrieved rowsvarhtml="<h2>Contents</h2>";for(vari=0;i<results.rows.length;i++){html+=results.rows.item(i).text+"<br>";}container.innerHTML=html;});});}// Function to select a specific paragraphfunctionselect(para_num){// Create a Range objectvarrange=document.createRange();// Gets the Selection objectvarselection=window.getSelection();// Specifies what is to be selectedrange.selectNodeContents(document.getElementById('para'+para_num));// Removes any previous selectionsselection.removeAllRanges();// Adds the selection to only the given rangeselection.addRange(range);}functioncopy_store(para_num){// Select text for the specific paragraphselect(para_num);// Get text from <p> tagvartext=document.getElementById('para'+para_num).innerHTML;try{// Trigger copy eventdocument.execCommand('copy');}catch(err){console.log('Error: '+err);}// Added copied text to the DBdb.transaction(function(transaction){transaction.executeSql('INSERT INTO clips (text) VALUES ("'+text+'");');},);}// Detect when text is copieddocument.addEventListener('copy',function(e){alert('copied');});</script></html>
<!DOCTYPE html><html><head><title>Clipboard & Local Storage</title></head><body><!-- Dummy paragraphs to be able to copy some text --><pid="para1">1. This is paragraph 1</p><buttonid="copy_btn"onclick="copy_store(1)">Copy</button><pid="para2">2. This is paragraph 2</p><buttonid="copy_btn"onclick="copy_store(2)">Copy</button><pid="para3">3. This is paragraph 3</p><buttonid="copy_btn"onclick="copy_store(3)">Copy</button><pid="para4">4. This is paragraph 4</p><buttonid="copy_btn"onclick="copy_store(4)">Copy</button><divid="container"></div></body><script>// Display all the previously copied text on the screendisplay_clipboard();// Function to select a specific paragraphfunctionselect(para_num){// Create a Range objectvarrange=document.createRange();// Gets the Selection objectvarselection=window.getSelection();// Specifies what is to be selectedrange.selectNodeContents(document.getElementById('para'+para_num));// Removes any previous selectionsselection.removeAllRanges();// Adds the selection to only the given rangeselection.addRange(range);}// Function to copy selected text and store informationfunctioncopy_store(para_num){// Select text for the specific paragraphselect(para_num);vartext=document.getElementById('para'+para_num).innerHTML;// Store the key-value pair in local storage// Args list: setItem(key, value)localStorage.setItem('para'+para_num,text);try{// Trigger copy eventdocument.execCommand('copy');}catch(err){console.log('Error: '+err);}}// Function to display the clipboardfunctiondisplay_clipboard(){varhtml="<h1>Contents</h1>";// Get all stored keys from localStoragekeys=Object.keys(localStorage);// For each item, display it's valuefor(vari=0;i<localStorage.length;i++){html+=localStorage.getItem(keys[i])+"<br>";}document.getElementById('container').innerHTML=html;}</script></html>
The DeviceMotionEvent provides web developers with information about the speed of changes for the device's position and orientation. P5.js can be foundhere.
The following demo shows how to make a ball move according to the device's motion.NOTE: This demo requires p5.js. Use the given CDN or download the library
<!DOCTYPE html><html><head><title>Accelerometer using p5.js</title></head><body></body><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script><script>varx,y,z;varxpos,ypos;// Function to set up the canvasfunctionsetup(){// Set canvas sizecreateCanvas(400,400);// Default valuesxpos=200;ypos=200;x=0;y=0;}functiondraw(){// set background color to whitebackground(255);// Add/subract xpos and yposxpos=xpos+x;ypos=ypos-y;// Wrap ellipse if over boundsif(xpos>400){xpos=0;}if(xpos<0){xpos=400;}if(ypos>400){ypos=0;}if(ypos<0){ypos=400;}// Draw ellipsefill(255,0,0);ellipse(xpos,ypos,25,25);// Display variablesfill(0);noStroke();text("x: "+x,25,25);text("y: "+y,25,50);text("z: "+z,25,75);}// Accelerometer Datawindow.addEventListener('devicemotion',function(e){// Get accelerometer valuesx=parseInt(e.accelerationIncludingGravity.x);y=parseInt(e.accelerationIncludingGravity.y);z=parseInt(e.accelerationIncludingGravity.z);});</script></html>
For reference,visit this link.
About
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Contributors2
Uh oh!
There was an error while loading.Please reload this page.