In this JavaScript article tutorial, we're together to enjoy awesome experiments on HTML5 with new hot JavaScript APIs. With a lot of JavaScript/Web application live demos in this JavaScript HTML5 tutorial, we can learn:

- New JavaScript selectors, JavaScript CSS selectors, jQuery selectors to select HTML elements better.
- New Web storage function and new Web SQL database storage.
- New API for caching offline application data, cache JavaScript files
- How to use Web workers and Web sockets.
- Geolocation API
- Audio, Video and Canvas manipulation on HTML5.

That's so cool! HTML5 is really new cool web technology, supported by many giant web/internet companies. Try it, master it now asap.

• Demo
• Enlarge
• Reload
• New window

Web workers

Workers are API for running scripts in the background independently of any user interface scripts. Generally, workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost. Moreover they might be partially replaced by window.setTimeout() function. So have they any advantages? Yes, of course.

• workers are separate JS processes () running in separate threads,
• workers execute concurrently,
• workers don't block the UI,
• workers allow you to extract up to the last drop of juice from a multicore CPU,
• workers can be dedicated (single tab) or shared among tabs/windows,
• workers can be persistent too (coming soon): they'll keep running after the browser has quit.

If we call function by setTimeout, the execution of script and UI are suspended. When we call function in worker, it doesn't affect UI and execution flow in any way.  Enough said.

To create Worker, we put JavaScript in separate file and create new Worker instance:

var worker = new Worker('extra_work.js');

That's it. We can communicate with worker using postMessage function and onmessage listener. Messages are sended to all threads in our application:

main.js:
  var worker = new Worker('extra_work.js');
  worker.onmessage = function (event) { alert(event.data); };

extra_work.js:
  // do some work; when done post message.
  // some_data could be string, array, object etc.
  postMessage(some_data);

There are also so called Shared Workers. Thay use slightly different APIs, since each worker can have multiple connections. An example purpose is logger or application manager. If you are intrested follow fakeworker-js from Google Code.

See demo using workers and similar one without them (will hang your browser).

Web sockets

Let me quote Chromium Blog:

----

Web Sockets are "TCP for the Web," a next-generation bidirectional communication technology for web applications. They allow a web server to push data to a browser (COMET). Developers have been using XMLHttpRequest (known as persistent Ajax connection) for such purposes, but XHR makes developing web applications that communicate back and forth to the server unnecessarily complex.

Web Sockets provide a real bidirectional communication channel in your browser. Once you get a Web Socket connection, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler. A simple example is included below.

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://example.com/service");
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); ....
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; ... };
  ws.onclose = function() { // websocket is closed. };
} else {
  // the browser doesn't support WebSocket.
}

In addition to the new Web Sockets API, there is also a new protocol (the "web socket protocol") that the browser uses to communicate with servers. We also developed pywebsocket, which can be used as an Apache extension module, or can even be run as standalone server.

----

Personally, there's long way for web sockets to be fully supported by browsers. At this time I would recommend NodeJS or APE Project.

Notifications

Google Chrome has introduced new way to show notifications. They are popping outside browser window and user could see them even if browser is minimalized. Before showing notifications you must ask user for permission to do so. Look at code below and try demo:

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title,
      tweet.text).show();
} else {
  window.webkitNotifications.requestPermission();
}

Show tweets Set notification permissions

Drag and Drop

Everyone knows what is it. Thanks to HTML5 we are able to drag and drop any element into any element, without heavy JavaScript frameworks. There's also possibility to drag and drop text/images/files from other windows and desktop.

Go to demo

Drag and drop anything

Geolocation

Probably anything special, but since now we may recognize user's location on frontend as well as backend. Nowadays geolocation is not always accurate and is supported only by Firefox and Safari Mobile.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    map.setCenter(new GLatLng(lat, lng), 13);
    map.addOverlay(new GMarker(new GLatLng(lat, lng)));
  });
}

Go to demo

Audio and Video manipulation

We can easily embed audio or video on page and super-duper-easily manipulate them with JavaScript.

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;

<video src='movie.mp4' autoplay controls></video>

document.getElementById("video").play();

For non-modern browsers you may include html5media. You may also be intrested in HTML5 video player.

Go to audio demo
Go to video demo

Canvas

The best of all! We are able to actually draw in browser. Even second Mac OS if we have patience. Canvas is supported by any browser (even IE thanks to ExplorerCanvas). There's huge set of canvas demos at ChromeExperiments.com. There's CAKE (scenegraph library for the canvas tag). We could write games, physics engines, editors and even whole UI. Flash CS5 will export to HTML5 Canvas and even now we are able to run swf files using pure JavaScript and <canvas> tag (yes, now we can run flash on iPhone).

Useful links

1. Check browser support for HTML5 features and view some demos
2. Current HTML specification
3. HTML5 Presentation
4. Detect support for HTML5 features with Modernizr

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New