Total Followers 132,503
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.
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.
UI is probably what JavaScript is best known for, whether is adding Animation to a site, or Form Validation
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.
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.
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 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 is a simple, unobtrusive script used to overlay images on the current page.
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.
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’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.
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 are simple JavaScript programmes that can be installed to your browser using an add-on.
For FireFox use:
for Chrome:
Internet Explorer:
Safari:
Removes the righthand side sidebar on Facebook, really de-cluttering the site.
Changes the favicon on Google calendar to display the days date
Adds the ability to download YouTube videos directly on YouTube.
Changes Gmails favicon to alert you of new mail
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)
An introduction to Quix from Joost de Valk on Vimeo.
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.
Can add the after the deadline spell check to any page online, with just one click!
This bookmarklet is extremely useful, and makes Evernote even quicker and easier to use.
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 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.
Get The Only Freelancer crash course you will ever need to read!
I'm Darren ,A teenager living in Ireland.I run a few different sites around the web, zomghow.com being my newest addition Connect with me on twitter. Look forward to hearing form you!
Saturday, January 29th, 2011 00:52
These are really cool examples! Thank you for the collection.
Monday, November 8th, 2010 07:10
Im a beginner to javascript n u really helped out giving gud real-time examples..thank u!
Monday, September 20th, 2010 04:44
Mostly I liked the sexy sliding sidebar, I will definitely learn to design such things.
Good work by mentioning known examples.
Thursday, September 9th, 2010 06:43
I see a lot of awesome stuff :D Thanks for sharing. Can’t wait to implement these into my projects
Thursday, September 9th, 2010 01:06
Thats a really wonderful post !!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Hastimal Shah
Thursday, September 9th, 2010 06:35
Nice example lists..
Thanks for sharing
SiewShuen
Thursday, September 9th, 2010 06:43
I see a lot of awesome stuff :D Thanks for sharing. Can’t wait to implement these into my projects
Shikeb Ali
Thursday, September 9th, 2010 01:06
Thats a really wonderful post !!
Kevin Roast
Friday, September 10th, 2010 14:31
You missed one! http://bit.ly/asteroids :)
Shrikrishna Meena
Monday, September 20th, 2010 04:44
Mostly I liked the sexy sliding sidebar, I will definitely learn to design such things.
Good work by mentioning known examples.
Brett Widmann
Saturday, January 29th, 2011 00:52
These are really cool examples! Thank you for the collection.
P.A
Monday, November 8th, 2010 07:10
Im a beginner to javascript n u really helped out giving gud real-time examples..thank u!