Learning JavaScript: (grab the book and install a development tool for a kickoff)

Standard

So finally I had some free time to sit and open my JavaScript book and start learning JavaScript. The book I’m reading is JavaScript: The Definitive Guide (6th Edition) by David Flanagan.

Its a great book that covers almost everything related to JavaScript language,  focusing on the standard language specification.  It can be considered as a JavaScript Bible and a reference book about the language. The sixth edition covers ECMAScript 5.0 (the latest JavaScript standard). I don’t recommend this book for someone new to programming, it is more suitable for people who already have experience in other programming languages (at least this is my opinion). I’m planning to write a brief review and feedback about the book once I finish it.

There are other books that might be easier to follow and cover the basics of the language without getting into the details of the language specification and advanced topics.

Obviously a JavaScript Interpreter is needed to execute JavaScript programs in order to try out the book example and any experimental code. The good news is that almost all web browsers come with a built in JavaScript Interpreter that compiles the code and executes it within the web browser host environment and its run-time.

Any editor can be used to write JavaScript code. For example in windows, notepad can be used to create a simple HTML file and embed the JavaScript code inside it then open the file in the web browser. The only caveat is that  in order for the browser to recognize the JavaScript code, it must be surrounded by//

A better option is to use a debugging tool or a development tool that integrate with the web browser that I can interact with directly without the need to use external HTML file.

Lucky enough, all web browsers comes with a development tools that are integrated with the browser and available for free to web developers to inspect HTML, CSS and also trace and debug JavaScript code of the current opened file in the browser. In addition to that, it allows interacting with the web browser run-time through a console by writing JavaScript code and view the output through the console output window.

This provide a great learning environment for me as I don’t need to leave the web browser to try out the book examples and experiment with the language, both the interpreter and development tools are integrated nicely with the browser and they all self contained. For production code, a more robust specialized integrated development environment (IDE) must be used as the development tools that come with the browsers are not meant for developing production solutions.

In this post I will cover Firefox web browser and its development tools options. Almost all browsers have similar development tools and comes with a built in JavaScript Interpreter with different flavors and can differ slightly in the UI layer but the framework is the same: Web Console to interact with the browser and write JavaScript code or commands, run the code and view the output either in the browser or using the console output window.

I personally prefer Firefox for below reasons:

  1. It is created by Mozilla, the same company that invented JavaScript and created the first web browser. So they are in the heart of web technologies. I like their policy and vision to keep the web open and supported by open source communities rather than bound it by cooperate greed.
  2. It supports ECMAScript 5.1 language standard. it also supports HTML5 and CSS3.
  3. It has more than one development tool or option to try out JavaScript code:
  • Web Console is the most basic tool which allow interacting with the browser through simple commands.
  • Scratchpad editor is some sort of simple lightweight JavaScript editor that I can write JavaScript code and execute it then see the results in the output window or embedded within the same code window.
  • Finally there is a cool open source add-on called Firebug that is well known among web developers community, it has comparable features as Mozilla Scratchpad and web console debugging tools.

I liked Scratchpad, it is straight forward basic editor and works perfectly for the purpose of trying out the book examples. Sometimes I may use Web Console for simple statements evaluations (i.e. built in JavaScript functions) or in case I want to view and inspect the JavaScript, HTML or CSS of an opened page. in regards to Firebug Add-on, I installed before I figure out there is Scratchpad, it seems provide similar functionality maybe with more advanced debugging feature. I will play with both before I settle on using one of them.

so let’s try out a sample JavaScript code and see how it can be run using Firefox development tools.

  1. Open Firefox web browser.
  2. Then using the main menu, choose Web Developer – > Scratchpad (or use the shortcut Shift+F4).
    Scratchpad
  3. the Scratchpad tool will be shown and opened in a separate window. There are few JavaScript comments to direct the user how to use the tool.
    Scratchpad Window
  4. Paste below code into the Scratchpad window. It is a simple function to calculate the summation of a series of the integer numbers less and equal to the input number, then I used console.log function to call the function and send the output to the web console output window. console.log is a handy function to debug and log code results.
    function sum(n) {
      var s = 0;
      for(var i=1;i<=n;i++)
        s = s + i;
        return s
        }
    
    console.log(sum(5));
    console.log(sum(10));

    function code

  5. In order to run the code, either use the Execute menu then click Run or use ” CTRL + R” shortcut. The result will be shown in the Web Console Logging window (because I used console.log function). Note (if Firebug add-on is installed and enabled , the output will be shown in the Firebug output window).
  6. Make sure the Web Console window is opened in order to see the console.log output after the program is run.  To open the window use “Ctrl+ Shift + k” shortcut.
  7. After the program is run, the output will be shown in the Web Console window. As shown in the output window the two console.log function calls with the corresponding function sum output.output

Firefox web browser and Firebug add-on can be installed from below links:

  1. http://www.mozilla.org
  2. http://www.getfirebug.com

The reason I’m getting obsessed with JavaScript

Standard

The main reason that I’m taking JavaScript seriously is that I got inspired by the rapid adoption of JavaScript and the related evolved vibrant frameworks built on top of it, in addition to that, the attraction and support JavaScript is getting from both the open source community and the majority of cooperate software companies a like.

I was amused by the language and its features when I started learning and experimenting with Node.js networking platform that is based on JavaScript event loop concurrency model. I got hooked instantly on Node.js lean approach to develop scalable lightweight server applications and its use of Google V8 JavaScript Engine and adoption of JavaScript as the main programming language for the platform. Until recently JavaScript was only popular and always attached to client side environments and never thought to be leveraged by server platforms.

But the main pragmatic reason I choose JavaScript over other languages is the vibrant ecosystem and frameworks build on top of it. It appeals to me the fact that I can use one portable language that is platform independent and spans both the client and server platforms cohesively which does not require a mind shift to switch between two different languages which is the case with the current traditional web applications development (use a different native language on the server “i.e. C#, JAVA ..etc).

The JavaScript and related frameworks had been always the de facto portable programming language and platform running on client side. But the JavaScript users took an innovative leap steps recently to be adopt and leverage it beyond the browser support and use it as a viable option to develop applications that can run on a server platform (in the case of Node.js); and also to develop native applications that run outside of the browser (for example in the case of Windows 8 applications). Microsoft also supports JavaScript language to write Map/Reduce jobs that run on Windows Azure HDInsight Service which is an implementation of Apache Hadoop running on Azure.

Netscape the company that invented JavaScript worked with ECMA International to standardized the language under the name ECMAScript. With the latest stable release of ECMAScript 5.0 standard and the rapid support by modern web browsers with the parallel evolution of HTML5 API, JavaScript becomes no longer a scripting language living in the web browser focusing only on dynamic interactions; it becomes a powerful tool to build modern web applications and be part of a vibrant ecosystem and platform that empower both the client and server environments seemingly. it makes the programming experience a more cohesive and consistent process.

I believe JavaScript has a promising future and it is happening now already and for that I got inspired to learn it and experience its capabilities and the mechanics of its vibrant ecosystem.

My core experience in the last years has been in .NET platform and C# language, I also used VBScript, VB.NET, C++ and even FORTRAN and Pascal in collage but something about JavaScript dynamic nature and portability is appealing. I can relate to it more than other languages though they can be more sophisticated and faster at runtime but I see it more relative to the real world and how it functions, its treatment of functions as first class citizens and its dynamic nature makes it closer to our brain functional model that depends on input/output to process and model data rather than objects abstractions through inheritance and hierarchical relationship as it the case in traditional object oriented programming languages.

The evolution of JavaScript is happening beyond the competition of major players in the software industry as it was born around the same time the internet was born so it becomes part of the web platform DNA and since then it continued to be implemented in each new generation of web browsers as a the default language regardless of the web browser brand or type. Its ECMAScript standards compliance assured portability and enforced consistency to some extent across all browsers and platforms, mutations may happen during its life-cycle of the language evolution but it always picked up by ECMA and everyone rush to catch up and support new emerged features. Its becoming a win win case for competitors to support it in their ecosystems and development platforms, it raises above their proprietary languages and technologies. And this by its own makes it a sustainable programming language that provides a safe heaven for programmers at least for the near future.