JavaScript
Remember that as new elements are introduced, new JavaScript methods will be created for more control to make them more dynamic. For that reason, you've already seen some smaller examples of JavaScript with the <canvas> tag. Also, the interfacing with local device storage is completely controlled by JavaScript interaction. As well, the new <audio> and <video> tags are easily controlled by new JavaScript calls.
document.getElementById("videoTagID").play();
document.getElementById("videoTagID").pause();
document.getElementById("videoTagID").volume = 0.75; // 0 = low 1 = high
This is just one small example of how new elements can create new JavaScript calls. There's no way I could explain every single existing one in this article. So to find more specific examples, you will need to look into the documentation on w3.org.
Events
The biggest additions to JavaScript come in the form of window events. There's no need to teach much here since they all are called the exact same way any event has ever been called in JavaScript. That being said, here's the list of new events.
Remember that some of these have already existed in some browsers and some still don't exist in some browsers.
| Window |
Form |
Mouse |
Media |
| onafterprint |
oncontextmenu |
ondrag |
oncanplay |
| onbeforeprint |
onformchange |
ondragend |
oncanplaythrough |
| onbeforeonload |
onforminput |
ondragenter |
ondurationchange |
| onerror |
oninput |
ondragleave |
onemptied |
| onhaschange |
oninvalid |
ondragover |
onended |
| onmessage |
|
ondragstart |
onerror |
| onoffline |
|
ondrop |
onloadeddata |
| ononline |
|
onmousewheel |
onloadedmetadata |
| onpagehide |
|
onscroll |
onloadstart |
| onpageshow |
|
|
onpause |
| onpopstate |
|
|
onplay |
| onredo |
|
|
onplaying |
| onresize |
|
|
onprogress |
| onstorage |
|
|
onratechange |
| onundo |
|
|
onreadystatechange |
| onunload |
|
|
onseeked |
|
|
|
onseeking |
|
|
|
onstalled |
|
|
|
onsuspend |
|
|
|
ontimeupdate |
|
|
|
onvolumechange |
|
|
|
onwaiting |
HTMLGoodies: HTML5 Development: Form & Keyboard Events
HTMLGoodies: HTML5 Development Class: Media Events
HTMLGoodies: HTML5 Development Class: Mouse Events
W3Schools: HTML5 Event Attributes
Local Device Storage
Currently, there are 3 proposed ways to implement new data storage methods: localStorage, sessionStorage, and local database.
Both localStorage and sessionStorage act the exact same way. The major differences are in scope and persistence. localStorage is available to all instances of the browser and will remain until removed programmatically or through the browser preferences. sessionStorage is only accessible in the browser instance in which it was created and is deleted when that instance is closed.
localStorage.setItem("theVariable", "theValue");
localStorage.removeItem("theVariable");
sessionStorage.setItem("theVariable", "theValue");
sessionStorage.removeItem("theVariable");
Local databases within browsers are in SQLite format. It's a more compact, yet powerful SQL based database system. Each database is confined within one file and is completely portable. Most developers should have a good background in SQL and understand the needs such a database system fills, so I'll just provide a simple source code example.
// write example
var db = openDatabase("theDatabase", "1.0", "Database description", 1.0 * 1024 * 1024);
db.transaction(function(transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS people (id unique, first, last)', []);
transaction.executeSql('INSERT INTO people (id, first, last) VALUES (1, "John", "Smith")', []);
transaction.executeSql('INSERT INTO people (id, first, last) VALUES (2, "James", "Sullivan")', []);
transaction.executeSql('INSERT INTO people (id, first, last) VALUES (3, "Joe", "Starker")', []);
});
// read example
db.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM people', [], function (transaction2, results) {
for (var i = 0; i < results.rows.length; i++) {
alert(results.rows.item(i).first + " " + results.rows.item(i).last);
}
});
});
The only major problem I see with local databases is that most implementations are based on accessible information from multiple locations. Any implementation of this form can only ever be small-scale since this database implementation is only accessible to the browser in which it was created.
For more information, please see the following links.
W3C: Web SQL Database/
Web Workers
One of the most valuable additions to the prospect of greater web applications is Web Workers. Just like multicore processing happens on a computer, finally JavaScript can do the same thing. Executing JavaScript no longer means that the window has to process and then come back before the user can have control. Now, you can set scripts to run behind with Web Workers.
Note: Since Web Workers run on a separate thread, the executed code must be contained within a separate JavaScript file.
var worker = new Worker("webworker.js"); // reference the external script
worker.onmessage = function(e) { // manage information passed back
alert(e.data);
};
worker.postMessage("Hello World"); // pass data to worker
Now, the referenced script can also handle data and pass back so long as the onmessage event is handled for the worker as in the previous example.
self.onmessage = function(e) { // self refers to the worker object
self.postMessage(e.data);
// do other script processing here
};
Remember that this is simply a basic example. If you want more control over the processing, it's best to pass JSON objects as the message.
Note: Web Workers do not have access to the DOM nor window, document, nor parent objects. Other than that, other JavaScript features are accessible.
Geolocation
The ever growing mobile device market has also contributed to certain JavaScript additions. Primarily, this has resulted in the addition of geolocation. While this is more accurate for mobile devices, it is not only constrained to such devices.
if (navigator.geolocation) { // check for geolocation support
var g = navigator.geolocation;
g.getCurrentPosition(processPosition);
}
function processPosition(p) {
var c = p.coords;
// coords are returned as an object with the following information
// latitude, longitude, altitude, accuracy, altitudeAccuracy, heading, speed
}
Digg
del.icio.us
Newsvine
Facebook
Google
LinkedIn
MySpace
Reddit
Slashdot
StumbleUpon
Technorati
Twitter
Windows Live
YahooBuzz
FriendFeed
Comments
There are no comments yet. Be the first to comment!