As probably most of you know HTML 5 is currently under development as the next major revision of the HTML standard and is expected to be the next step that will change how the web looks.

I will try to show you a couple of the new things added in HTML5 and how much jQuery influenced the HTML5 development.

So what is new:

New selectors

-Finding elements by class:

  1. document.getElementsByClassName("test");

-Finding elements by CSS syntax – very similar with jQuery selectors

  1. document.querySelectorAll("table.test > tr");

Drag and drop

  1. document.addEventListener('dragstart', function(event) {
  2.    event.dataTransfer.setData('text', 'Customized text');
  3.    event.dataTransfer.effectAllowed = 'copy';
  4. }, false);

In this HTML5 javascript example you can see the callback style use like in jQuery.

Web Workers

  1. main.js:
  2.   var worker = new Worker('extra_work.js');
  3.   worker.onmessage = function(event) { alert(event.data); };
  4.  
  5. extra_work.js:
  6.   self.onmessage = function(event) {
  7.     // Do some work.
  8.     self.postMessage(some_data);
  9.   }

So we will have easy-to-use multi-thread support in HTML5.

Web Storage

  1. // use localStorage for persistent storage
  2. // use sessionStorage for per tab storage
  3.  
  4. textarea.addEventListener('keyup', function () {
  5.   window.localStorage['value'] = area.value;
  6.   window.localStorage['timestamp'] = (new Date()).getTime();
  7. }, false);
  8. textarea.value = window.localStorage['value'];

Session support in Javascript.

Application Cache

  1. window.applicationCache.addEventListener('checking', updateCacheStatus, false);

This will be very useful.

And this are just a couple of the new and interesting things added to javascript in HTML5. Also HTML5 adds new tags and changes in the CSS structure.

Now that we have seen how jQuery has influenced the next generation HTML5 javascript with cool CSS selectors and the standard use of callback’s in method calling let’s see how jQuery handles the changes in HTML5.

A new tag added in HTML5 is the “video” tag, that can play movies. I will show you how you can use jQuery to work with this tag and customize/change it. Now let’s say you added a video to your web page.
Just use the ‘video’ tag and add a ‘source’ tag with the link to the movie that you want played. Add controls=”controls” attribute to the video tag to have default browser controls for the video. Like this:

  1. <video width="300" height="300" controls="controls">
  2.    <source src="test.ogg" type="video/ogg" />
  3.    This browser is not compatible with HTML 5
  4.   </video>

Now you have acces to events of the video tag like: timeupdate, volumechange, seeking, waiting ,durationchange, ended.

So let’s say you want to show a message when seeking takes place, you could do that like this:

  1. $('video').bind("seeking" ,function(){
  2.      $('#test').html('Seeking').fadeIn();
  3. });
  4. $('video').bind("timeupdate" ,function(){
  5.      $('#test').fadeOut();
  6. });

Now let’s say you don’t want to use the browser’s default controls and use your one on, and have same effect on all browsers. You can do this by removing the default controls, and then adding different effects on different events, and they start the movie. This is how you can do this:

  1. $('video').attributes("controls,"").bind("timeupdate" ,function(){
  2.                      //use your own time change function/effects
  3.  }).get(0).play();

Here small live example (just press play then try moving forwards/backwards -seeking) you will see a message in the middle of the video custom generated by us: