<!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.
SVGScalable Vector Graphics, vector-based graphics, define graphics in XML, no resolution loss on zooms, animate-able
<body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body>
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>
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 StorageWith 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 Cachea 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 Workera 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.
ObjectA 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.
|