18/01/2011
0
Dans ce tutorial JavaScript, nous sommes ensemble pour profiter des exp?riences impressionnantes sur HTML5 avec les nouvelles API JavaScript chaude Avec beaucoup de JavaScript/d?mos d'applications Web en direct dans ce HTML5 JavaScript tutorial, nous pouvons apprendre:
? JavaScript s?lecteurs CSS, s?lecteurs jQuery pour s?lectionner les ?l?ments HTML mieux - Nouvelle fonction de stockage Web et des nouvelles de stockage Web base de donn?es SQL - Nouvelle API pour la mise en cache de donn?es hors application, cache des fichiers JavaScript - Comment utiliser les travailleurs Web et prises de courant sur le Web - API de g?olocalisation - Audio, vid?o et manipulation Toile sur HTML5.
- Demo
- Agrandir
- Recharger
- New window
G�n�rez vos vid�os d'entreprise par l'IA avec la voix ou simplement du texte
Votre premi�re application vid�o AI GRATUITE ! Automatisez votre premi�re vid�o AI. Cr�ez votre vid�o professionnelle en 5 minutes gr�ce � l'IA. Aucun �quipement ni comp�tence en montage vid�o requis. Production vid�o sans effort pour les sp�cialistes du marketing de contenu.
HTML5 has a lot of new features. There's new HTML, CSS and, of course, JavaScript. Officially HTML5 specification and implementation won't be ready until 2022. Personally I don't believe in this. Majority of JavaScript features described further are already implemented in modern browsers (e.g. Sarafi, Chrome, Firefox, Opera). Even Internet Explorer gained capability to render canvas and other stuff (supposing we use ExplorerCanvas or Chrome Frame). Take a closer look at what's going to make your live better and happier :
New Selectors
How many times have you wondered why there's getElementById, getElementsByTagName, but there is not getElementByClassName? New JavaScript API solves this issue:
var elements = document.getElementsByClassName('entry');Moreover there's now possibility to fetch elements that match provided CSS syntax!
var elements = document.querySelectorAll("ul li:nth-child(odd)");
var first_td = document.querySelector("table.test > tr > td");Web Storage
Cookie mechanism has some disadvantages. As W3C said:
- A user could be buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.
- Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons. Again, cookies do not handle this case well, because they are transmitted with every request.
Well, sessionStorage has been created to let developers cope with first of above troubles. It keeps data in per tab storage. To get along with second one, W3C has introduced localStorage - the persistent storage that never expires.
Look, how simple is saving draft every new character is pressed:
textarea.addEventListener('keyup', function () {
window.localStorage['value'] = area.value;
window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];Web SQL Database Storage
What about database accessible directly from JavaScript? Since now we no longer parse, sort, filter data using consuming-lot-of-memory-and-cpu JavaScript loops. We fetch data using well know SQL queries. Look at example:
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});Database is stored on client's computer so it's secure.
Offline Application Cache API
Web SQL Storage is available even if client went offline. But if we want create fully-functional offline aplication, we must care about resources like images, CSS, JS and et caetera. It's high time to familiarize with Application Cache API.
We create cache.manifest file and link to it from html element.
<html manifest="cache.manifest">File must be served with text/cache-manifest mimetype and contain body like this:
CACHE MANIFEST
CACHE:
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgiFiles listed below CACHE will be cached by browser and available even offline. Files listed after NETWORK are never going to be cached. The application cache automatically updates only if the manifest file changes. It does not automatically update if resources listed in the manifest file change. You may do it manually with JavaScript:
cache = window.applicationCache;
var cacheUpdatereadyListener = function() {
// Swap cache with updated data
cache.swapCache();
}
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
if(cache.status == cache.UPDATEREADY) {
// Update cached data and call updateready listener after
cache.update();
}You may find full list of Application Cache Event Listeners here.
There is also new window event handler: onOffline. It is fired when internet connection goes down and up . See how we may notice user if there's change in user's network connection:
window.addEventListener('offline', function() {
if(navigator.onLine == false) {
alert('We went offline');
} else {
alert('We are online again!');
}
}, true);
par Avant-premi�re- Sent (0)
- Nouveau
Auteur:
Previews:
Commentaire:
Votes:
Sent:
Taille:
Rang:
Frontend Force Blog [more]
88,767
0
0
0
22.95 KBytes
0 votes / 88,767 previews / 0 commentaire
18/01/2011
Dans ce tutorial JavaScript, nous sommes ensemble pour profiter des exp?riences impressionnantes sur HTML5 avec les nouv...HOT nouvelles API JavaScript avec HTML5 - HOT nouvelles API JavaScript avec HTML5 - Langue: Fran�aise
