Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Wednesday, October 10, 2012

WebWorker in HTML5

 Hi Friends
This blog post  is because of Girish :) He enquire about Worker process and help me out to understand the concept. Thanks to Girish.

Webworker is new concept in HTML5. In earlier days when we execute scripts in HTML page , the page become unresponsive if use start clicking all over the page and script is taking time to execute.

A webworker is a javascript that runs in background ,independent of other scripts and without affecting the performance of the page. User can continue with whatever he wants, webworker works in background.

All major browser which support HTML5 will support this concept.

Before creating webwork you can use this function to check if your broswer support it or not.

function Checkwebworker()
{
if(typeof(Worker)!=="undefined")
  {
  }
else
  {
    alert('Your browser don't support webworker");
  }
}

PostMessage() method is used to post a messageback to HTML page.

you can create web worker object using below code
Worker oWorker= new Worker("javascript file name");

onmessage event listener can be used to send and receive message to the web worker.

oWorker.onmessage=function(event){
document.getElementById("txtresult").innerHTML=event.data;
};

When the webworker posts a message , the code in event listener is executed.

when webworker object is created ,it will continue to listen the messages until it is terminated.

we can use below syntax to terminate web worker process.
oWorker.terminate();

below is a simple html example of web worker process
<html>
<body>

<p>Count value: <output id="txtresult"></output></p>
<button onclick="startWorkerprocess()">Start Worker</button>
<button onclick="stopWorkerprocess()">Stop Worker</button>
<br><br>

<script>
var oWorker;

function startWorkerprocess()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    oWorker=new Worker("demoworkers.js");
    }
  oWorker.onmessage = function (event) {
    document.getElementById("txtresult").innerHTML=event.data;
  };
}
else
{
document.getElementById("txtresult").innerHTML="Your browser does not support Web Workers.";
}
}

function stopWorkerprocess()
{
oWorker.terminate();
}
</script>

</body>
</html>

Wednesday, June 29, 2011

HTML5

Hi friends
i am back with a new thing:) might be the old one for code guru. Today i was looking into the new HTML version HTML5.

This is the latest version on HTML which is launched to make sure that HTML is not legging behind with the world. In today's net savvy world we have different type of videoes, audioes,pictures showing on the websites. These all items need different plug in to run with like flash player, but now no plugin is required:)

below are some of the tags which make your life so much easy in the world of html.
1) audio- For playing sounds, music or other audio streams
2) video- For showing video content, such as a movie clip or other video streams
3) source- For media resources for media elements, defined inside video or audio elements
4) embed- For embedded content, such as a plug-in
5) Canvas - The HTML5 canvas element uses JavaScript to draw graphics on a web page. using this you can create images on the webpage itself file filled rectangle
6) localStorage - stores data with no time limit, this will be the replacement for cookies so that you can keep the big data on client side also without hammpering the performance of the application
7)SessionStorage - stores data for one session and when you close the browser all the data will be lost.

Here are some of the new input types which is supported in HTML5. These type will life of developer much simpler as developer don't have to write javascript for validation of these types.

1) email= if you put the input type as email then this type will make sure that user enter the email address only. another words it will do validation for email address format and if your browser don't support it it will show as simple input type.
2) url= It will validate the text box for URL format
3) number= It will validate the number format. it also support the max and min number user can enter in input box. there is one more feature call step so it will show the number as the step value you have defined.
4) range= this will make the range for the number like min to max value.
5) Date pickers (date, month, week, time, datetime, datetime-local)- it will set date time value in text box and user can select the appropriate date time values
6)search-The search type is used for search fields, like a site search, or Google search.
7) color- validation for color number values (Chrome support hexadecimal values and safari will show the color picker it self for user to select any of the colors)
8) placeholder- this will show the message in text box and when user click on the text box the value goes off. this will be like information for the content of the input text box.

check the below site for more and better understanding.