HTML5

Software Engineering ➼ Machine learning ➼ Data Science ➼ Product Leadership 🎯‎ > ‎Tools - Business‎ > ‎HTML‎ > ‎

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

canvas

draw graphics, on the fly, via javascript

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        //rectangle
ctx.fillStyle="#FF0000";
        ctx.fillRect(0,0,150,75);

       //line
        ctx.moveTo(0,0);                 //starting point
        ctx.lineTo(300,150);             //end point
        ctx.stroke();                      //ink method to draw the line

        //Circle
        ctx.beginPath();
        ctx.arc(95,50,40,0,2*Math.PI);    //specify a circle
        ctx.stroke();                              //draw the circle

        //Text
        ctx.fillStyle="#00FF00";         //change color
        ctx.font="30px Arial";
        ctx.strokeText("Hello World",10,50);

        ctx.font="10px Arial";
        ctx.fillText("Heyyy!",15,30);
    </script>
</body>
</html>

Other features include gradients, images, etc.

SVG

Scalable Vector Graphics, vector-based graphics, define graphics in XML, no resolution loss on zooms, animate-able

SVG vs Canvas

SVG is a language for describing 2D graphics in XML.

Every element is available within the SVG DOM.
Attach JavaScript event handlers for an element.
browser can automatically re-render the shape if its attributes change

Canvas draws 2D graphics, on the fly (with a JavaScript)

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser
If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Other differences

Canvas (very fast)	SVG (not fast but in control)
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

Drag 'n Drop

<head>
<script>
    function allowDrop(ev)
    { ev.preventDefault(); }   //enable Droping

    function drag(ev)
    { ev.dataTransfer.setData("Text",ev.target.id); }

    function drop(ev)
    {
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
</script>
</head>
<body>
     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
     <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)">
</body>

Geolocation

<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>

Video

manipulate <video> and <audio> elements using JavaScript. There are methods for playing, pausing, and loading, for example and there are properties (like duration and volume). There are also DOM events that can notify you when the <video> element begins to play, is paused, is ended, etc.

<body>

<video id="video1" width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<script>
var myVideo=document.getElementById("video1");

function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
myVideo.width=560;
}

</body>

Web Storage

With HTML5, web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. The data is stored in key/value pairs, and a web page can only access data stored by itself.

There are two new objects for storing data on the client:

localStorage - stores data with no expiration date

<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
}
else
{ document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; }
</script>
</body>
------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{ localStorage.clickcount=Number(localStorage.clickcount)+1; }
else
{ localStorage.clickcount=1; }
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
}
else
{ document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

sessionStorage - stores data for one session, The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
    {
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
else
    {
    sessionStorage.clickcount=1;
    }
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>

Application Cache

a web application is cached, and accessible without an internet connection. Application cache gives an application three advantages:
    Offline browsing - users can use the application when they're offline
    Speed - cached resources load faster
    Reduced server load - the browser will only download updated/changed resources from the server

Web Worker

a JavaScript running in the background, without affecting the performance of the page.
Since web workers are in external files, they do not have access to the following JavaScript objects:

    The window object
    The document object
    The parent object

Server-Sent Events

allow a web page to get updates from a server. This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically. Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

Object

A helper application is a small computer program that extends the standard functionality of the browser. Helper applications are also called plug-ins. Plug-ins are often used by browsers to play audio and video. Examples of well-known plug-ins are Adobe Flash Player and QuickTime.
Plug-ins can be added to Web pages through the <object> tag or the <embed> tag. Most plug-ins allow manual (or programmed) control over settings for volume, rewind, forward, pause, stop, and play.

Comments

What is this site?

Table of Contents