| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | 
| issue96:programmation_javascript [2015/05/21 15:16]  – [7]  auntiee | issue96:programmation_javascript [2015/05/22 15:31] (Version actuelle)  –  andre_domenech | 
|---|
| 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. ** | 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. | 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 JavaScripte pour chaque navigateur, le tester, le maintenir, etc.  | 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 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. |  | 
 |  | 
|   | 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 ===== | ===== 2 ===== | 
| 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. | 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 plateforme et navigateur avait sa propre version de JavaScript - Microsoft, par exemple, avait sorti leur 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. | 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 ===== | ===== 3 ===== | 
| 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.** | 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, etChakra (http://en.wikipedia.org/wiki/Chakra_(JScript_engine)). V8 a été développé par Google, SpiderMonkey et Rhino sont pris en charge by Mozilla, Nitro est supporté par Apple et Chakra est développé par Microsoft. Aujourd'hui, le moteur JavaScript le plus rapide est V8. | 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. | 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 il prend en charge des paradigmes de programmation, notamment 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). | 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 ===== | ===== 4 ===== | 
| 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.** | 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 concentrons seulement sur le JS côté client ; nous aurons donc besoin d'une page Web minimaliste pour exécuter le JavaScripte. Coté client, outre JavaScript, d'autres technologies, comme HTML, CSS, XML et JSON sont également utilisées ; nous en parlerons plus tard. | 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 appelerons hello_world.js. L'extension des fichiers JavaScript est .js. Le contenu : | 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 : | 
 |  | 
| <nowiki>//tout ce qui vient après les caractères // sera ignoré par le moteur Javascript, car c'est utilisé pour les commentaires | <nowiki>//tout ce qui vient après les caractères // sera ignoré par le moteur Javascript, car c'est utilisé pour les commentaires ; | 
 |  | 
| //</nowiki>à l'intérieur de votre code | //</nowiki>à l'intérieur de votre code ; | 
 |  | 
| alert(“Hello JavaScript World!”); | 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 ===== | ===== 5 ===== | 
 |  | 
| •  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 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.** | •  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 : | Les fichiers HTML contiennent des balises (appelées également des éléments HTML), qui s'affichent sous forme de : | 
 |  | 
| Les fichiers HTML sont composés de trois parties principales : | 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 <!...> 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.  | •  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.  | 
| •  HTML élément « head » (<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 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 et lui attribuer un rang dans les résultats d'une recherche.  | •  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.  | 
| •  HTML élément « body » (<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. | •  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 ===== | ===== 6 ===== | 
 |  | 
| Nous pouvons lancer notre application Hello World en ouvrant le fichier hello.html dans un navigateur ; nous devrions voir quelque chose comme ceci : | 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'élément head 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 nouveau 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 : | 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!”); | alert(“Hello JavaScript World!”); | 
 |  | 
| La fonction alert() est disponible dans tous les navigateurs, il affiche une fenêtre sont le paramètre est le message. | 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 :  | 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 :  | 
| Dans Chrome, vous lancez les outils du développeur en appuyant sur la touche F12. | 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é FireBug (https://addons.mozilla.org/en-us/firefox/addon/firebug/), un outil génial pour les développeurs. | 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, qui affiche des messages à l'écran, se fait en ajoutant les messages à la page html en utilisant la méthode document.write(). Je vous laisse le soin de l'explorer. | 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 un sujet particulier sur lequel vous aimeriez avoir des renseignements, prière de m'envoyer un courriel à : greg@grelution.com. | 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 Bogdans est un ingénieur logiciel, un blogueur et un passionné de la technologie, qui surfe les vagues de l'océan informatique, qui évolue sans cesse. Vous pouvez consulter son site Web ici : http://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. | 
 |  | 
 |  |