JavaScript - A different beast, Part-1: Intro

I wrote this originally to train my project team on JavaScript.  Everyone in the team were good programmers, but JavaScript was still tough for most of them.  That’s when I realized that JavaScript has to be taught formally to even experienced programmers. Focus of this series is to introduce developers who are comfortable with other programming languages like Java or C to the idiosyncrasies of JavaScript. Basic JavaScript knowledge is assumed, but is not necessary as the code samples are simple and self-explanatory.

Topics: A different beast Types and Type Conversion Functions Scopes and Scope Chain Closures Objects without Classes Inheritance without Classes Arrays, Maps and the for..each loop Literals and JSON Dynamic Programming, Exceptions and Module Pattern

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.

The new era relied on enhancing the user experience of dumb HTML pages by providing animation, dialogs, new kind of controls like sliders, spinners, accordions, carousels, new techniques like auto-complete, quick search/validation on server and so on. All this was realized by a smart combination of HTML, CSS and JavaScript. Among this holy trinity, HTML remained stupid and dumb, and CSS got only a little bit smarter. So, obviously, everyone was looking up to JavaScript to deliver. And so it did – In the form of a number of popular JavaScript toolkits – jQuery, YUI, Dojo, Prototype and many more. Web developers not only need to use these toolkits, we often have to extend them too. We need to debug them at the least. So the bottom line is this: you cannot be a web developer unless you are an expert in JavaScript too.

Where is it heading?

The future also belongs to JavaScript. Upcoming HTML5 specification introduces new features to the browser like multi-threading, drag-and-drop, offline web applications, and offline storage with transactional support. JavaScript is the language to use all these features in your future applications too – even on mobiles devices! There are also several attempts to bring JavaScript outside the browser. (See http://www.commonjs.org/ )

Big deal! Everyone knows JavaScript

Wrong! JavaScript is the world’s most misunderstood language (tall claim, I know. Exaggeration is a fundamental right, at least for emphasis.). Typical Java/C++/C # developers are not familiar with the not so popular programming techniques used in JavaScript like closures, duck typing, prototypes etc. (Ruby developers would probably understand).

Developers misunderstand JavaScript largely because of the following factors:

• JavaScript has syntax and name like Java, but works more like Lisp
• JavaScript employs weak, dynamic typing and allows duck typing
• JavaScript is object-oriented, but it has no classes!
• JavaScript employs a few esoteric programming concepts like prototypical inheritance and closures
• JavaScript supports dynamic programming – data is code and code is data!
• And to top it all, most software engineers are neither taught JavaScript in their under-graduate courses or even the principles behind most such programming paradigms

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?

Most programmers know the ‘friendly neighbourhood JavaScript’ that:

• 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.

I shall not talk about these things in this tutorial. Instead, let us focus on the ‘Killer‘ JavaScript – all those stuff that makes it different from the ‘C of programming languages’:

• Types
• Functions
• Closures
• Object Orientated Programming
• Exceptions
• Dynamic Programming
• Module Pattern

Learn through code

There is nothing better than learning through code. Afterall, code is the only version of truth that finally matters. This tutorial attempts to explain the fundamental concepts of JavaScript using code samples that can be quickly run.
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.

1. Open the console view
2. Type-in the JavaScript code and
3. See the output on the console

Running examples using Firebug 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.

All set? Jump to the topic of your interest from here. ( I would suggest going through the 10 parts sequentially if you are completely new to JavaScript)

Next Topic in this series: Types and Type Conversion in JavaScript

Further Reading

1. JavaScript outside the browser – http://www.commonjs.org/

About these ads