JavaScript: One language to rule them all

JavaScript while having a long and tedious history is hitting a new stride. Virtually all modern browsers are now closely adhering to the W3C's standards which makes for an exciting time for web developers. Over the course of the next few years there will be more and more projects to work on that are completely concerned with modern browsers which means less time cross-browser testing, and more time actually writing the code!

JavaScript is different from other programming languages in that it runs EVERYWHERE. With node.js now, it even runs on the server. You can right a full stack end to end now with nothing but JavaScript. That's a pretty incredible reality.

The other great part about where we are in the life of JavaScript is that the browser makers are doing a much better job of adhering to the W3C and ECMAscript standards. Therefore many of the new and future JavaScript features are working cross-browser. JavaScript is going to continue to grow and further gain ground as one of the most popular programming languages.

With HTML5 came many great improvements to HTML, the DOM, and JavaScript. The following is a quick list of a few of the new JavaScript APIs that you can use on practically any modern browser on practically any OS. At the end of the article, all of the pieces will be shown together in a quick sample app. The code below is fully functional in IE10, Chrome, and Firefox.

Canvas

The HTML5 canvas is a way to use JavaScript to draw graphics right inside of an HTML element. There's APIs for drawing lines, curves, shapes, text, and even images. For example if you wanted to draw text inside of an element, you'd first need a canvas element on the page.

<canvas id="canvas" width="640" height="480" style="border:1px solid #ccc"></canvas>

Now for the JavaScript...

var canvas = document.getElementById("canvas"),
    context = context = canvas.getContext('2d');

context.font = "bold 18pt arial";
context.fillStyle = "blue";
context.fillText("One does not simply draw on the screen", 0, 0);

The first thing to do is grab a reference to the DOM element with getElementById, then grab the 2dcontext of the canvas with getContext('2d'). The context is where the APIs for manipulating the canvas exist. From there a font, and a fillStyle (color). Then fillText is the function to draw text at x, and y as the second and third parameters.

There are many many things that can be done with the canvas and I recommend taking a look at http://www.html5canvastutorials.com/ for more.

FileReader

This one here is pretty cool. You're now able to use the browser to read files! This means that in browser uploading is now possible.

Say you have a file input...

<input id="uploadImage" type="file" name="photo" />

Then you can add the following code to upload an image...

var photo = document.getElementById("uploadImage"),
	fileReader = new FileReader(),
	img = new Image();

fileReader.onload = function (e) {
    img.src = e.target.result;
};

photo.addEventListener("change", function() {
    var file = this.files[0];  
    return file && fileReader.readAsDataURL(file); 
});

An even listener for the change event fires when an image is selected, Then the file element now has a files property containing an array of chosen files. An instance of the FileReader class then takes the file as an argument to the readAsDataUrl function.

When the readAsDataUrl function processes the image, the onload method fires. The event has a target referencing the fileReader which has a result on it. This result is a string of data representing the image. You can then actually set the src of an Image to this data and the image will be created.

When the image is done loading, you can actually listen for the onload just like the FileReader. This event listener can be set up and in tandem with the canvas can actually draw the uploaded image on screen!

img.onload = function() {  
    drawImage();
};

function drawImage() {
	context.drawImage(img, 0, 0);
};

Drag and Drop

Drag and drop has long been as Boromir Son of Denethor would say...

Fortunately, with HTML5's new drag events, it's not as bad as walking through festering stinking marshlands as far as the eye can see. In fact it's pretty darn simple now.

canvas.addEventListener('dragover', function(event) {
    event.preventDefault();
});

canvas.addEventListener('drop', function(event) {
    event.preventDefault();
    fileReader.readAsDataURL(event.dataTransfer.files[0]);
});

You're thinking to yourself right now... "That can't be it..." But, in fact, it is. Take a look at the MDN docs mentioned above for all of the other drag events.

LocalStorage

LocalStorage is another HTML5 JavaScript API for storing up to 5MB of data that will be persistent across page loads specific to the current domain. You can store any JavaScript object in LocalStorage and retrieve it right back out. Even after the user closes the browser and re-opens it. There's also SessionStorage as well that is storage per session in the current browser.

Two store and retrieve something in LocalStorage, there are getItem and setItem...

var ls = window.localStorage;

ls.setItem('text', currentText);
ls.setItem('color', color);
ls.setItem('image', img.src);

These items can then be retrieved with...

var lastImgData = ls.getItem('image'),
	currentText = ls.getItem('text') || "",
	color = ls.getItem('color') || "black";

This allows persisting data that can be retrieved at any point in time, unless the user clears their LocalStorage or runs window.localStorage.clear().

Sample App

Please checkout the sample app for this post at the following fiddle...

http://jsfiddle.net/jcreamer898/GPskd/10/

Conclusion

There are many other JavaScript APIs not covered here, so be sure and check them out on http://caniuse.com for a list of the APIs and their browser compatibility. There's things like GeoLocation for utilizing GPS, or IP address location, Cross Document messaging for posting messages into iframes, a FullSreen API, a getUserMedia API for capturing camera data, Hash change events, and several others.

It is worth noting though that there still are some features not fully implemented in all browsers, so again checkout Can I Use to make sure the feature you're trying to implement has good support.

For modern web standards and cross-browser questions, please tweet @iedevchat or visit the forums on useragents.ie.

jcreamer898/index.md