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

Lets not to get confused, JavaScript is not JAVA.

Standard

Most of us, the programmers are less confused about JavaScript brand name, we can figure out quickly that JavaScript is a completely different language than Java, once we start using it.

On the other hand, people who are first introduced to the language; mostly end users or clients are more confused about JavaScript sometimes, the perception or first impression of the language based on its name, is that it is a subset or another flavor of Java. That actually turned out to be a good thing for us and we got lucky to get paid for just explaining the differences and resolve the confusion to clarify to that there is no relationship whatsoever between the two, it is just a weird intruder instance of “Java” word that stuck in a brand name of a totally different language.

So here is part of the historical story on how we ended up with this mess of naming conflicts or intentional mix.

JavaScript is invented by Brendan Eich at Netscape (now Mozilla)The language originally known as Mocha then changed to LiveScript and finally it becomes JavaScript which happened to be the most controversial language name in programming history (though I like the name). Is might be the marketing team who decided to have the Java word in the brand name of JavaScript to push it out the door and takes part of that the glory that surrounded Java language at that time.

Java was getting popular and viral for its portability and flexibility during that time on both the server and client environments. Web browsers supported Java through Applets (local Java run inside a web browser). So JavaScript was meant to be a lightweight complementary language that is easier to learn and pick up by beginners to develop dynamic web content without the need to use Applets or learn Java.

To pour more confusion to the mix, Microsoft has its own implementation of JavaScript called JScript because they did not want to run into trademark dispute problems. So here we go, we have now JScript and JavaScript which represent the same core language but in different dialects.

Netscape worked on standardizing the language specification through Ecma International (an international standards organization for information and communication systems). The standard number for the specification is “ECMA – 262 Specification”. Obviously neither Microsoft nor Sun Microsystems (who own the license for the JavaScript trademark) were willing to give up or donate the trademark so Ecma through its own innovative naming creativity came up with another name!! and they called the language ECMAScript which Eich sarcastically commented about its name saying: so they ended up inventing ECMAScript, which sounds a little like a skin disease”.

ECMAScript is used now more to refer to the standard edition of the JavaScript language, and JavaScript is still the common used name to refer to the dialect implementation of the language. Since then both the standard committee and dialects implementers of the language feed each other and (try to agree) to enhance the standard language and enrich its features which eventually reflected in new editions of the standard and its new dialects implementation version, with that cycle the language continued its evolution since then.

below diagram is some sort of an object oriented diagram (hope the abstraction makes sense) of how Ecma organization, the standard, ECMAScript and various dialects are related.

image

JavaScript is a standalone language and has nothing to do with Java language except that it uses some of the design concepts and programming style, in reality JavaScript major influence came from Scheme, Self and C programming languages.

Also Java compiles eventually to a native code (sort of) that can be executed by its own JVM and runtime while JavaScript needs a host environment in order to run and execute (like a web browser or Node.js process in case of Node network applications) and it depends on its host for IO operations.

I always try to embrace and talk about the powerful features of the language like dynamic typing, closure, Lambda, and its prototype-based aspects which are design concepts and features brought from other languages like Scheme, Self, C and Java too which collectively may exceed the capability of those individual languages in certain scenarios.

I also try to expose how the language got standardized, matured and grown in recent years. By doing that I hope I can change the inherited dominant wrong perception of the language which is: JavaScript is a scripting language at the end so its not as fast and powerful as other native languages. Sometimes bad names or nicknames have really terrible consequences on things!!.

That being said, JavaScript has some inheritance of bad features and practices that sometimes make it harder for developers to maintain and spot silent errors at compile time and can only be discovered at runtime during program execution; but those errors can be minimized and totally eliminated by following best practices and design patterns that protect the application or program from language design and implementation flaws.

Also there are some code analysis tools like JSLint that helps writing standard code that follow best practices and help eliminating using a language feature or construct that might cause problems at runtime.

I intentionally did not put any timeline or associated dates to when those different evolutionary steps happened to the language because there are many resources online and references that talk in depth of the history of the language. I listed below the resources that I used for this post in case your inner history nerd wants to dig into further details.

Happy Coding!

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.