• Tweet
• Buffer
• Pin It
•  11

JavaScript is something I have been planning to start learning properly for the last few months.To really motivate me, I thought it would be a good idea to look into some interesting uses of the language. I thought I’d share these interesting uses with you in this post. Though none of these examples are really JavaScript only, most put HTML and CSS, to be more exact HTML5, and possibly a few different languages and APIs.

Games

JavaScript is proving itself as an extremely powerful language with browser games, developers are able to make games using JavaScript that are on par with flash games.

Quake II GWT Port

HTML5 Chess Game

Akihabara CapMan

Akiba Hero

Minesweeper

User Interface

UI is probably what JavaScript is best known for, whether is adding Animation to a site, or Form Validation

Gmail

Everytime you check your inbox using the refresh button, you’re saving time not needing to fully reload the whole site. This is thanks to AJAX, which JavaScript plays a big part in.

Google Homepage

When Google’s homepage is first loaded, a clean minimalist design is loaded, showing nothing but the Google logo, and the search box. By using JavaScript Google has cleaned up their homepage even more than before. The Gmail links etc are displayed with a movement of the mouse.

Sexy sliding JavaScript side bar menu using mootools

Sliding Boxes and Captions with jQuery

Fancy Thumbnail Hover Effect

Swfir

swfIR (swf Image Replacement) uses a combination of JavaScript and Flash to apply an assortment of visual effects to any or all images on your website.

PlotKit – JavaScript Chart Plotting

PlotKit is a Chart and Graph Plotting Library for JavaScript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page.

Form Validation

Login for Digg.com

Even as I uploaded the above image it was a pop up using JavaScript that the media upload was in! JavaScript was also used to dull away the rest of the Digg site, increasing the focus on the Login box.

Tracking

Google Analytics

Many of us more than likely use Google Analytics to keep tabs on our sites traffic, it uses JavaScript on your site to track your sites performance.

Facebook Social Plugins

Facebook’s new API allows web masters to check if visitors to their sites are logged into Facebook, and if they are to place more emphasis on their Facebook integration.

SocialHistory.js

By using the a:visited css bug in browsers Social History can check if your visitors have been to a certain website, Reddit for example, it can then show a share on Reddit link depending on the result. There is no real need to include 20 different sharing link now!

User Scripts

User scripts are simple JavaScript programmes that can be installed to your browser using an add-on.

For FireFox use:

for Chrome:

Internet Explorer:

Safari:

Minimalist Facebook

Removes the righthand side sidebar on Facebook, really de-cluttering the site.

Google Calendar Dynamic Icon

Changes the favicon on Google calendar to display the days date

Keep Tube: Download Youtube Videos (HD 1080p & 720p)

Adds the ability to download YouTube videos directly on YouTube.

Gmail Favicon Alerts 3

Changes Gmails favicon to alert you of new mail

@troynt’s Twitter Script

Firefox add ons

Better Gmail 2

Bookmarklets

Bookmarklets are tiny JavaScript programmes that are contained in a bookmark in your browser. They’re javascript: urls which you can drag to your bookmark toolbar, just like a normal bookmark. Though so small, and easy to install (you only need to drag them to your toolbar to install them)

Quix by Yoast

An introduction to Quix from Joost de Valk on Vimeo.

Spriteme

Sites that include several images in the design should consider using css sprites. Making sprites manually can be time-consuming, sprite me is an extremely useful bookmarklet that will add all selected images on any given site, and generate the required sprite and css.

After the deadline

Can add the after the deadline spell check to any page online, with just one click!

Evernote Web Clipper

This bookmarklet is extremely useful, and makes Evernote even quicker and easier to use.

Rollyo RollBar

With one click it adds a search box for any site, handy when you’re looking for a post on a site that you just cant seem to find again.

Readability

Readability is a great service that removes all the clutter for a website, leaving the article formatted in such a way that its allot easier to read.

As you can see the uses for JavaScript can greatly vary. Adding JavaScript to your list of known languages could greatly improve the quality and functionality of any site you work on. Something I am now learning myself after seeing these different examples.