Outils pour utilisateurs

Outils du site


issue96:programmation_javascript

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
issue96:programmation_javascript [2015/05/22 15:02] d52frissue96:programmation_javascript [2015/05/22 15:31] (Version actuelle) andre_domenech
Ligne 7: Ligne 7:
 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 JavaScript 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 à 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.+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 =====
Ligne 25: Ligne 25:
 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 =====
Ligne 39: Ligne 39:
 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 elle prend en charge des paradigmes de programmation ; elle est notamment orienté-objet (http://en.wikipedia.org/wiki/Object-oriented_programming), fonctionnelle (http://en.wikipedia.org/wiki/Functional_programming) and impérative (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 =====
Ligne 57: Ligne 57:
 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 concentrerons seulement sur le JS côté client ; nous aurons donc besoin d'une page Web minimaliste pour exécuter le JavaScript. 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!”);
Ligne 89: Ligne 89:
  
 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 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. +•  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.+•  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. •  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.
  
Ligne 130: Ligne 130:
 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 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. 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.
issue96/programmation_javascript.1432299744.txt.gz · Dernière modification : 2015/05/22 15:02 de d52fr