1
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 : JavaScript 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'utilisent 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 JavaScript 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 à l'accueillir à 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 à prendre en charge divers navigateurs, parce qu'elle offrait une façon unique d'appliquer la logique de JavaScript.
2
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.
Aujourd'hui, les trois navigateurs les plus utilisés (Google Chrome, Firefox et Internet Explorer) sont arrivés à un stade où ils peuvent prendre en charge la norme du langage ; ainsi, les développeurs et les utilisateurs ont un environnement de programmation et d'exécution plus unifié.
La première version de JavaScript fut développée par Brendan Eich (http://en.wikipedia.org/wiki/Brendan_Eich) ; à cette époque, il travaillait chez Netscape (qui s'appelle maintenant Mozilla). Pendant la phase de développement, le langage s'appelait Mocha, mais quand il fut publié officiellement en 1995, il s'appelait LiveScript. Plus tard, quand la version 2.03B du navigateur Netscape Navigator (l'ancêtre de Firefox) est sortie, ils ont renommé le langage JavaScript.
Au cours des dernières vingt années, il y a eu diverses versions du langage et le besoin de définir un standard s'est fait sentir. La standardisation fut faite par ECMA International et le standard pour le langage s'appelle ECMAScript (http://www.ecma-international.org/memento/TC39.htm). Pendant ce temps, chaque plate-forme et navigateur avait sa propre version de JavaScript - Microsoft, par exemple, avait sorti sa version, appelée JScript. Entre-temps, Netscape commençait à utiliser JavaScript côté serveur aussi (SSJS - server side Javascript). Actuellement, node.js est utilisé pour le développement côté serveur avec JavaScript.
3
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.
Comme le nom du langage laisse supposer, c'est un langage de script ; il a besoin d'un runtime (moteur) pour s'exécuter. Nous l'appelons le moteur JavaScript et les environnements runtime mettent en œuvre le standard ECMA (ou essaient de le mettre en œuvre). Les moteurs javaScript les plus connus et utilisés sont 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, et Chakra (http://en.wikipedia.org/wiki/Chakra_(JScript_engine)). V8 a été développé par Google, SpiderMonkey et Rhino sont pris en charge par Mozilla, Nitro est supporté par Apple et Chakra est développé par Microsoft. Aujourd'hui, le moteur JavaScript le plus rapide est V8.
De nos jours, aucune page Web n'existe qui n'utiliserait pas un type de JavaScript pour en afficher du contenu, modifier la mise en page, charger des données, afficher des graphiques, générer des fichiers PDF ou même retoucher des images. Ainsi, dans le cas où vous voulez créer des pages Web ou construire votre propre site Web, l'apprentissage d'un peu de JavaScript (JS) pourra vous être très utile.
L'objectif de cette série est de présenter le langage JavaScript au moyen d'exemples simples. Au départ, nous n'aurons besoin que d'un éditeur de texte ; ce serait bien s'il peut faire de la coloration syntaxique. Cela peut être Notepad++, Gedit, Vim, Emacs, mais vous pouvez utiliser ce que vous voulez. La coloration syntaxique aide à distinguer visuellement différentes parties du code (mots clés, valeurs, commentaires, types) et à voir des erreurs de codage rapidement. On aura également besoin d'un navigateur. Je préfère Google Chrome, mais libre à vous d'utiliser ce que vous voulez ; au début, les exemples s'exécuteront de la même façon dans tous les navigateurs. La syntaxe de JS est basée sur C et elle prend en charge des paradigmes de programmation ; elle est notamment orientée objet (http://en.wikipedia.org/wiki/Object-oriented_programming), fonctionnelle (http://en.wikipedia.org/wiki/Functional_programming) et impérative (http://en.wikipedia.org/wiki/Imperative_programming).
4
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.
Au départ, nous nous concentrerons seulement sur le JS côté client ; nous aurons donc besoin d'une page Web minimaliste pour exécuter le JavaScript. Côté client, outre JavaScript, d'autres technologies, comme HTML, CSS, XML et JSON sont également utilisées ; nous en parlerons plus tard.
Commençons la série avec le programme traditionnel Hello World. D'abord nous créons un nouveau fichier JavaScript que nous appellerons hello_world.js. L'extension des fichiers JavaScript est .js. Le contenu :
//tout ce qui vient après les caractères // sera ignoré par le moteur Javascript, car c'est utilisé pour les commentaires ; //à l'intérieur de votre code ;
alert(“Hello JavaScript World!”);
Maintenant (ci-dessous), nous avons besoin de créer la page Web html ; donnons-lui le nom Hello.html.
HTML est un langage structuré qui est utilisé pour le développememt Web. En avançant dans la série, je vous présenterai de plus en plus d'éléments html en marge de la programmation JavaScript.
5
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.
Les fichiers HTML contiennent des balises (appelées également des éléments HTML), qui s'affichent sous forme de : <element_name></element_name>
Ces balises sont interprétées et rendues par le navigateur pour afficher le contenu de nos pages Web.
Les fichiers HTML sont composés de trois parties principales : • Version du fichier HTML : il s'agit de la première ligne de la page Web HTML et, d'habitude, la version se trouve entre les symboles <!…>. La version actuelle de HTML est la HTML5, dont la notation de version est très simple : <!DOCTYPE html>. Bien que, en règle générale, les navigateurs ne se plaignent pas si cette balise est absente, l'ajouter comme première ligne de notre page Web est une bonne pratique. • L'entête HTML (<head>…</head>), est un élément particulier parce que le navigateur l'utilise pour rassembler des informations importantes concernant la page Web, comme le titre (que vous pouvez ajouter avec la balise <title>…</title> et les méta-données comme le jeu de caractères. Mais il y a d'autres options comme l'auteur : <meta author=”John Doe”> et beaucoup d'autres. Les balises meta aident les moteurs de recherche voulant récupérer des informations sur votre site à lui attribuer un rang dans les résultats d'une recherche. • Le corps HTML (<body>…</body>), qui est le contenu de la page Web : tout ce qui se trouve à l'intérieur de la balise body peut être lu par l'utilisateur et nous en dirons davantage plus tard.
6
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!”);
Nous pouvons lancer notre application Hello World en ouvrant le fichier hello.html dans un navigateur ; nous devrions voir quelque chose comme ceci :
Le flux d'exécution dans le navigateur est le suivant : quand le navigateur charge le fichier hello.html, il peut voir, dans la première ligne, qu'il s'agit d'un fichier HTML5, il lit l'entête et, comme spécifié dans la balise méta, il charge le jeu de caractères UTF-8. La ligne suivante est la balise script : <script src=“hello_world.js” type=“text/javascript”></script>. Avec l'aide de l'élément html <script>, nous pouvons inclure des fichiers script externes (comme nous avons fait dans ce cas) ou définir de nouveaux blocs de code à l'intérieur du fichier html. Tout en chargeant le fichier hello_world.js, le navigateur exécute la ligne de code : alert(“Hello JavaScript World!”);
La fonction alert() est disponible dans tous les navigateurs ; elle affiche une fenêtre dont le paramètre est le message.
Il existe deux autres options pour générer ou afficher des messages. L'une de ces options est l'objet console ; cela imprime des valeurs vers la sortie Console des Outils de développement à l'intérieur du navigateur. Dans ce cas, le code JavaScript serait :
console.log(“Hello JavaScript World!”);
7
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.
Dans Chrome, vous lancez les outils du développeur en appuyant sur la touche F12.
Dans le cas où vous utilisez Firefox, vous pouvez installer une extension appelée FireBug (https://addons.mozilla.org/en-us/firefox/addon/firebug/), un outil génial pour les développeurs.
La deuxième option pour afficher des messages à l'écran, se fait en les ajoutant à la page html, en utilisant la méthode document.write(). Je vous laisse le soin de l'explorer.
Dans la prochaine partie, nous allons examiner les objets et les fonctions JavaScript ; comment les créer, ce qu'ils sont et pourquoi c'est bien de les utiliser. S'il y a un sujet particulier sur lequel vous aimeriez avoir des renseignements, prière de m'envoyer un courriel à : greg@grelution.com.
BIO : De Budapest, Gergo Bogdan est un ingénieur logiciel, un blogueur et un passionné de technologie, qui surfe sur les vagues de l'océan informatique, en constante évolution. Vous pouvez consulter son site Web ici : http://grelution.com.