Full Circle Magazine FR

You could ask why I chose to present JavaScript in this series of articles. The response is simple, JavaScript is the most trending and the most significant growth language in the past few years; there are very many open source projects which are using it, and you can find a lot of tutorials and guides on the Internet to learn it. Nowadays, you can develop anything in JavaScript; it does not matter if we are talking about web pages, single page applications (SPA), mobile applications for Android, iOS and Windows Phone, or IoT (http://en.wikipedia.org/wiki/Internet_of_Things) devices. Even a Linux emulator (http://bellard.org/jslinux) was written in JavaScript. It is well known that JavaScript (usually) runs in the browser, but not only. Through the years, each browser had its own JavaScript engine and runtime; there was no standard for the language which the browsers could implement. In many cases, the difference was not only in the JavaScript engine, but in other functions of the browsers, like how these displayed content on the page, how was the styling applied, and so on. Because of these differences, if a developer wanted to address users worldwide, he had to support all the browsers, write the JavaScript code for each browser, test it, maintain it, etc. The segregation of JavaScript implementations did not help the language to get embraced by the community and web developers. This was the situation until 2006, when the first stable version of the jQuery (http://jquery.com) JavaScript library appeared. This library helped developers to support different browsers, because it offered a unique way to apply JavaScript logic.

Vous pourriez vous demander pourquoi j'ai choisi de présenter JavaScript dans cette série d'articles. La réponse est simple : Jacascript est le langage le plus à la page et avec la croissance la plus significative des quelques dernières années. Il y a vraiment beaucoup de projets Open Source qui l'utilise et, pour l'apprendre, vous trouverez pas mal de tutoriels et de guides sur le Net. De nos jours, n'importe quoi peut être développé en JavaScript ; peu importe si l'on parle de pages Web, d'applications à une page (Single Page Applications ou SPA), d'applications mobiles pour Android, iOS et Windows Phone ou des appareils IdO (http://en.wikipedia.org/wiki/Internet_of_Things). Même un émulateur de Linux (http://bellard.org/jslinux) fut écrit en JavaScript.

C'est bien connu que (habituellement), JavaScript s'exécute dans un navigateur, mais pas seulement. Au cours des années, chaque navigateur avait son propre moteur et Runtime ; il n'y avait pas de normes pour le langage que les navigateurs pouvaient mettre en œuvre. Dans pas mal de cas, la différence se trouvait non seulement dans le moteur JavaScript, mais aussi dans d'autres fonctions des navigateurs, comme leur façon d'afficher le contenu d'une page, l'application des styles et ainsi de suite. À cause des ces différences, si un développeur voulait atteindre des utilisateurs partout dans le monde, il devait prendre en charge tous les navigateurs, écrire du code JavaScripte pour chaque navigateur, le tester, le maintenir, etc.

La ségrégation des implémentations de Javascript n'a pas vraiment incité la communauté et les développeurs Web de l'accueillir les bras ouverts. Telle était la situation jusqu'en 2006, quand la première version stable de la bibliothèque jQuery (http://jquery.com) de JavaScript est arrivée. Cette bibliothèque aidait les développeurs de prendre en charge divers navigateurs, parce qu'il offrait une façon unique d'appliquer la logique de JavaScript.

Nowadays, the three most widely used browsers (Google Chrome, Firefox and Internet Explorer) got to a point when these can support the standard of the language, so developers and users have a more unified programming and running environment. The first version of JavaScript was developed by Brendan Eich (http://en.wikipedia.org/wiki/Brendan_Eich); at that time he was working at Netscape (now it’s called Mozilla). During the development phase, the language was called Mocha, but when they officially released it in 1995, it was called LiveScript and afterwards when the Netscape Navigator browser (ancestor of Firefox) 2.03B version was released, they renamed the language to JavaScript. In the past twenty years, there were different versions of the language and there was a need to define a standard. The standardization was done by ECMA International and the standard for the language is called ECMAScript (http://www.ecma-international.org/memento/TC39.htm) During the years, each platform and browser had its own version of JavaScript; for example Microsoft had released their version named JScript. In the meantime, Netscape was starting to use JavaScript on the server side too (SSJS – server side JavaScript). Nowadays, node.js is the de facto for server side development using JavaScript.

As the language’s name suggests, this is a script language; it needs a runtime (engine) to be executed. We call this the JavaScript engine, and these runtime environments (try to) implement the ECMA standard. The most widely known and used JavaScript engine is V8 (https://code.google.com/p/v8/), SpiderMonkey (https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), Rhino (http://en.wikipedia.org/wiki/Rhino_(JavaScript_engine)), Nitro, and Chakra (http://en.wikipedia.org/wiki/Chakra_(JScript_engine)). V8 was developed by Google, SpiderMonkey and Rhino are supported by Mozilla, Nitro is backed by Apple, and Chakra is developed by Microsoft. Today, V8 is the fastest JavaScript engine. Nowadays, there is no webpage which would not use some kind of JavaScript for displaying content, modifying the layout, loading data, displaying charts, generating PDF files or even editing images. So, in case you want to build web pages or build your own web site, learning a little bit of JavaScript (JS) will help to do the job. The purpose of this series is to present the JavaScript language using simple examples. In the beginning we will need only a text editor, it’s good if it has syntax highlighting. It can be Notepad++, Gedit, Vim, Emacs, but you may use anything you like. Syntax highlighting helps to visually separate different parts of the code (keywords, values, comments, types) and spot coding errors quickly. We will need a browser too. I prefer Google Chrome, but you are free to use any browser; the examples in the beginning will run in the same way in every browser. The JS’s syntax is C-based, and it supports object oriented (http://en.wikipedia.org/wiki/Object-oriented_programming), functional (http://en.wikipedia.org/wiki/Functional_programming) and imperative (http://en.wikipedia.org/wiki/Imperative_programming) programming paradigms.

In the beginning, we will focus only on client side JS, so we will need a minimalistic web page to run our JavaScript. On the client side, besides JavaScript, other technologies, like HTML, CSS, XML, JSON are used too; we will talk about these later. Let’s start the series with the traditional hello world program. First we create a new JavaScript file, let’s name it hello_world.js. The extension of JavaScript files is .js. Content: //everything after the // characters will be ignored by the JavaScript engine, this is used for comments //within your code alert(“Hello JavaScript World!”); Now (below) we need to create the html webpage, let’s name the file hello.html. HTML is a markup language which is used in web development. As we advance with the series, I will present more and more HTML elements besides JavaScript programming.

The HTML files contain tags (also called HTML elements), which are present in the form of: <element_name></element_name> These tags are interpreted and rendered by the browser and display the content on our webpages. HTML files have three main parts: • HTML File version – this is the first line in the HTML web page, usually the version is between <!…> symbols. The current version of HTML is HTML5, which has a very simple version notation: <!DOCTYPE html>. Although browsers usually do not complain if this tag is missing, it is a good practice to add it as the first line in our webpage. • HTML head element (<head>…</head>), this element is special, because the browser uses it to gather important information about the webpage, like the title (can be added with <title>…</title> tag), and meta data, like the charset. But there are other options like author: <meta author=”John Doe”> and many others. The meta tags also help search engines to get information about your website and rank it in the search results. • HTML body (<body>…</body>) element, this is the content of the webpage, everything within the body tag is displayed to the user, we will cover more on this later.

We can run our Hello World application by opening the hello.html file in a browser and we should see something like this: The execution flow in the browser is the following: when the browser loads the hello.html file, in the first line it can see that this is an HTML5 file, it reads the head element and, as specified in the meta tag, it loads an UTF-8 charset. The next line is the script tag: <script src=“hello_world.js” type=“text/javascript”></script>. With the help of the <script> html element, we can include external script files (like we did in this case) or define new code blocks within the html file. As the browser loads the hello_world.js file, it executes the code line: alert(“Hello JavaScript World!”); The alert() function is available in every browser, it shows a pop-up window with the message as its parameter. We have two other options to log or show messages to the user. One of the options is the console object; this prints values to the Console output of the Developer Tools within the browser. In that case the JavaScript code would be: console.log(“Hello JavaScript World!”);

In Chrome, you can fire up the developer tools by pressing the F12 key. In case you are using Firefox, you can install an add-on, called FireBug (https://addons.mozilla.org/en-us/firefox/addon/firebug/) which is an awesome tool for developers. The second option to display messages to the user is by adding those to the html page using the document.write() method. I will leave this for you to explore. In the next part, we will look at JavaScript objects and functions; how can these be created, what are they, and why are they good to use. In case you would like to read about a particular topic, please email me at: greg@grelution.com. BIO : Gergo Bogdan is a software engineer, blogger, tech enthusiast from Budapest who is riding the waves of the constantly changing IT ocean. You can check his website at: http://grelution.com.