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
Advertisements