Story so far
A long time ago, most of the GUIs for applications were written in Visual Basic, Visual C++, Power Builder and Java Swing. Then came the era of web applications, where the GUIs were written using a static markup language called HTML with dynamism provided by server-side and client side scripting.The new kind of GUI appealed to application administrators and developers as it liberated them from worrying about distributing the GUI code to each user, patch roll-out etc. and was greatly liked by the GUI users who could now access the application from anywhere in the world. The world became a happy place where all you need is a browser! However, there were cracks in this new happy world – the HTML GUIs weren’t even half as rich as the earlier ones. The ‘click-wait’ GUIs were quite dumb and boring. If you consider the aspect of end-user experience, browser-based applications were actually a step backward. A solution for this was found during the last decade in the form of a technique called Ajax. The enabling technology – XMLHttpRequest – was around for some time (from 1999), but it took a while before someone realized they could use it for providing Rich User Experience on browser-based applications (Jesse James Garret coined the word Ajax in 2005). Thus was born a new era in application GUIs.
Where is it heading?
By the end of this tutorial you should have learned all the above concepts and, hopefully, be able to write smarter programs.
So, what are we going to learn?
- looks like Java – if..else, switch, for, for..in, while, do..while, break, continue
- loves the browser
- accessing HTML DOM using DOM APIs – document.getElementById, createElement, setAttribute
- listening to events – onClick, onBlur etc.
- Object Orientated Programming
- Dynamic Programming
- Module Pattern
Learn through code
To run the examples in this tutorial:
Required Software: You need to install Firefox and the Firebug plugin for firefox.
To run the examples open firebug from Firefox by clicking on the little bug icon on the status bar area. After maximizing firebug you should see a screen similar to Figure-1.1 below.
- Open the console view
- See the output on the console
The output shows three things mainly – the first line shows the code that was executed, the last line shows the return value of the entire program and all the lines in between are printed from the code by the call to console.log() function.