Guide JavaScript, partie 1: premier programme, fonctionnalités linguistiques, normes

Nous avons récemment mené une enquête sur la faisabilité de la traduction de ce guide JavaScript. Il s'est avéré qu'environ 90% de ceux qui ont voté ont réagi positivement à cette idée. C'est pourquoi nous publions aujourd'hui la première partie de la traduction.



Ce guide, tel que conçu par l'auteur, est conçu pour ceux qui sont déjà un peu familiers avec JavaScript et qui souhaitent mettre leurs connaissances en ordre et aussi apprendre quelque chose de nouveau sur la langue. Nous avons décidé d'élargir un peu l'audience de ce matériel, afin d'inclure ceux qui ne connaissent absolument rien à JS, et de le commencer en écrivant plusieurs versions de «Hello, world!».

→ Partie 1: premier programme, fonctionnalités linguistiques, normes
→ Partie 2: style de code et structure du programme
→ Partie 3: variables, types de données, expressions, objets
→ Partie 4: caractéristiques
→ Partie 5: tableaux et boucles
→ Partie 6: exceptions, points-virgules, littéraux génériques
→ Partie 7: mode strict, ce mot-clé, événements, modules, calculs mathématiques
→ Partie 8: Présentation des fonctionnalités d'ES6
→ Partie 9: Présentation des normes ES7, ES8 et ES9

Bonjour tout le monde!

Le programme, qui est traditionnellement appelé " Hello, world! "C'est très simple. Il affiche quelque part l'expression "Bonjour, monde!", Ou une autre similaire, au moyen d'une certaine langue.

JavaScript est un langage dans lequel les programmes peuvent être exécutés dans différents environnements. Dans notre cas, nous parlons des navigateurs et de la plateforme serveur Node.js. Si jusqu'à présent vous n'avez pas écrit une seule ligne de code dans JS et que vous lisez ce texte dans un navigateur, sur un ordinateur de bureau, cela signifie que vous êtes littéralement en quelques secondes à partir de votre premier programme JavaScript.

Pour l'écrire, si vous utilisez Google Chrome, ouvrez le menu du navigateur et sélectionnez-y la commande > . La fenêtre du navigateur sera divisée en deux parties. Dans l'un d'eux, une page sera visible, dans un autre un panneau avec des outils de développement s'ouvrira contenant plusieurs signets. Nous sommes intéressés par l'onglet Console . Cliquez dessus. Ne faites pas attention à ce qui peut déjà être présent dans la console (vous pouvez utiliser la combinaison de Ctrl + L pour l'effacer). Nous souhaitons maintenant inviter la console. C'est ici que vous pouvez entrer le code JavaScript qui est exécuté en appuyant sur la touche Enter . Entrons ce qui suit dans la console:

 console.log("Hello, world!") 

Ce texte peut être saisi à partir du clavier, vous pouvez le copier et le coller dans la console. Le résultat sera le même, mais si vous apprenez à programmer, il est recommandé de saisir vous-même les textes des programmes et de ne pas les copier.

Une fois le texte du programme dans la console, appuyez sur Enter .

Si tout est fait correctement, le texte Hello, world! Apparaîtra sous cette ligne Hello, world! . Ne faites pas attention à tout le reste.


Le premier programme de la console du navigateur consiste à afficher un message dans la console

Une autre option de navigateur "Bonjour, monde!" consiste à afficher une boîte de message. C'est fait comme ceci:

 alert("Hello, world!") 

Voici le résultat de l'exécution de ce programme.


Afficher un message dans une fenêtre

Notez que la barre d'outils du développeur est maintenant située en bas de l'écran. Vous pouvez changer son emplacement en utilisant le menu avec trois points dans son titre et en sélectionnant l'icône appropriée. Vous y trouverez également un bouton pour fermer ce panneau.

Les outils de développement, y compris la console, sont également disponibles dans d'autres navigateurs. La console est bonne en ce qu'elle est toujours à portée de main lorsque vous utilisez le navigateur.

Il existe d'autres façons d'exécuter du code JS dans un navigateur. Donc, si nous parlons de l'utilisation normale des programmes JavaScript, ils sont chargés dans le navigateur pour assurer le fonctionnement des pages Web. En règle générale, le code est exécuté en tant que fichiers séparés avec l'extension .js , qui sont connectés aux pages Web, mais le code du programme peut également être inclus directement dans le code de la page. Tout cela se fait à l'aide de la <script> . Lorsque le navigateur détecte un tel code, il l'exécute. Les détails de la balise de script peuvent être consultés sur w3school.com. En particulier, considérez un exemple qui montre comment utiliser une page Web en utilisant JavaScript à l'aide de cette ressource. Cet exemple peut également être lancé en utilisant les ressources de cette ressource (recherchez le bouton Try it Yourself ), mais nous le ferons un peu différemment. À savoir, nous allons créer un nouveau fichier dans un éditeur de texte (par exemple, dans VS Code ou Notepad ++ ), que nous appellerons hello.html , et y ajouterons le code suivant:

 <!DOCTYPE html> <html> <body>   <p id="hello"></p>   <script>     document.getElementById("hello").innerHTML = "Hello, world!";   </script> </body> </html> 

Ici, nous sommes plus intéressés par la ligne document.getElementById("hello").innerHTML = "Hello, world!"; , qui est un code JS. Ce code est inclus dans les balises d'ouverture et de fermeture <script> . Il trouve un élément HTML avec l'identifiant hello dans le document et change sa propriété innerHTML (c'est-à-dire le code HTML contenu dans cet élément) en Hello, world! . Si vous ouvrez le fichier hello.html dans un navigateur, le texte spécifié sera affiché dessus.


Sortie JavaScript vers un élément HTML

Comme déjà mentionné, les exemples fournis sur w3school.com peuvent être essayés ici. Il existe des environnements en ligne spécialisés pour le développement Web et, en particulier, pour exécuter du code JS. Parmi eux, par exemple, codepen.io , jsfiddle.net , jsbin.com .

Ici, par exemple, ressemble à notre exemple, recréé au moyen de CodePen.


Le champ HTML contient du code qui décrit l'élément HTML, le champ JS contient du code JavaScript et le résultat est affiché en bas de la page.

Nous avons dit ci-dessus que les programmes JavaScript peuvent être exécutés sur différentes plates-formes, dont l'un est l'environnement de serveur Node.js. Si vous allez apprendre JavaScript, en vous concentrant spécifiquement sur le développement côté serveur, vous devriez probablement exécuter les exemples en utilisant Node.js. Veuillez noter que, de manière simplifiée, et sans tenir compte de la prise en charge particulière des fonctionnalités linguistiques spécifiques utilisées par les versions de Node.js et du navigateur, le même code fonctionnera dans Node.js et dans le navigateur, en utilisant les mécanismes de base de la langue. C'est-à-dire, par exemple, la commande console.log("Hello, world!") la fois là et là. Les programmes qui utilisent des mécanismes spécifiques au navigateur ne fonctionneront pas dans Node.js (il en va de même pour essayer d'exécuter des programmes conçus pour Node.js dans un navigateur).

Afin de lancer notre "Hello, world!" dans l'environnement Node.js, installez Node.js en téléchargeant le package de distribution approprié à partir d'ici . Créez maintenant le fichier hello.js et insérez-y le code suivant:

 console.log('Hello, World!'); 

En utilisant la ligne de commande, nous allons aller dans le dossier dans lequel ce fichier est stocké et exécuter la commande suivante:

 node hello.js 

Voici le résultat de sa mise en œuvre:


Message imprimé par Node.js

Soit dit en passant, vous avez peut-être remarqué (et probablement remarqué si vous avez tapé le code vous-même) que certains des exemples ci-dessus utilisent un point-virgule à la fin des lignes, et d'autres non. Dans certains, le texte que nous voulons afficher dans la console ou sous forme de message est entouré de guillemets doubles et dans certains, simple. Peut-être vous demandez-vous maintenant pourquoi il en est ainsi et comment, si différentes versions du code fonctionnent sans erreur, écrivez ce code correctement. Si vous répondez à cette question sans entrer dans les détails et sans prendre en compte quelques petits détails, alors nous pouvons dire que les deux options d'utilisation des guillemets et des points-virgules sont acceptables et qu'elles fonctionnent de la même manière. Le choix d'une option particulière dépend du style d'écriture du code auquel le programmeur adhère et des besoins d'une certaine partie du programme. De plus, avec ces exemples simples, vous pourriez ressentir l'une des caractéristiques de JavaScript, à savoir que le langage donne au programmeur une certaine liberté.

Maintenant, après votre première connaissance de JavaScript, nous vous proposons de parler davantage de ce langage.

Présentation de JavaScript

JavaScript est l'un des langages de programmation les plus populaires au monde. Créée il y a plus de 20 ans, elle a parcouru un long chemin dans son développement. JavaScript a été conçu comme un langage de script pour les navigateurs. Au tout début, il avait des capacités beaucoup plus modestes qu'aujourd'hui. Il était principalement utilisé pour créer des animations simples, telles que des menus déroulants, ils le connaissaient dans le cadre de la technologie Dynamic HTML (DHTML, HTML dynamique).

Au fil du temps, les besoins de l'environnement Web ont augmenté, en particulier, de nouvelles API sont apparues, et JavaScript, afin de soutenir le développement Web, il était nécessaire de suivre les autres technologies.

De nos jours, JS est utilisé non seulement dans les navigateurs traditionnels, mais aussi au-delà. En particulier, nous parlons de la plate-forme serveur Node.js, des possibilités d'utilisation de JavaScript dans le développement d'applications intégrées et mobiles, de la résolution d'un large éventail de tâches pour lesquelles JavaScript n'était pas utilisé auparavant.

Principales fonctionnalités JavaScript

JavaScript est un langage qui présente les fonctionnalités suivantes:

• De haut niveau. Il donne au programmeur des abstractions qui vous permettent de ne pas prêter attention aux fonctionnalités du matériel sur lequel les programmes JavaScript sont exécutés. Le langage gère automatiquement la mémoire à l'aide du garbage collector. En conséquence, le développeur peut se concentrer sur la résolution des tâches auxquelles il est confronté, sans être distrait par des mécanismes de bas niveau (bien que, il convient de noter, cela n'élimine pas la nécessité d'une utilisation rationnelle de la mémoire). Le langage offre des outils puissants et pratiques pour travailler avec des données de différents types.
• Dynamique. Contrairement aux langages de programmation statiques, les langages dynamiques sont capables, pendant l'exécution du programme, d'effectuer des actions que les langages statiques effectuent lors de la compilation du programme. Cette approche a ses avantages et ses inconvénients, mais elle met à la disposition du développeur des fonctionnalités puissantes telles que la frappe dynamique, la liaison tardive, la réflexion, la programmation fonctionnelle, la modification d'objets pendant l'exécution du programme, la fermeture, et bien plus encore.
• Typé dynamiquement. Les types de variables de développement JS sont facultatifs. Dans la même variable, par exemple, vous pouvez d'abord écrire une chaîne, puis un entier.
• Faiblement tapé. Contrairement aux langages à typage fort, les langages à typage faible n'obligent pas le programmeur, par exemple, à utiliser des objets de certains types dans certaines situations, effectuant, si nécessaire, des conversions de types implicites. Cela donne plus de flexibilité, mais les programmes JS ne sont pas sécurisés, ce qui complique les tâches de vérification de type (TypeScript et Flow visent à résoudre ce problème).
• Interprété. Il est largement admis que JavaScript est un langage de programmation interprété, ce qui signifie que les programmes qui y sont écrits n'ont pas besoin d'être compilés avant d'être exécutés. JS à cet égard est opposé aux langages tels que C, Java, Go. En pratique, les navigateurs, pour améliorer les performances du programme, compilent le code JS avant de l'exécuter. Cette étape, cependant, est transparente pour le programmeur; elle ne nécessite pas d'efforts supplémentaires de sa part.
• Multiparadigm. JavaScript n'impose pas au développeur l'utilisation d'un paradigme de programmation particulier, contrairement, par exemple, à Java (programmation orientée objet) ou C (programmation impérative). Vous pouvez écrire des programmes JS en utilisant un paradigme orienté objet, en particulier, en utilisant des prototypes et des classes qui figuraient dans la norme ES6. Les programmes en JS peuvent également être écrits dans un style fonctionnel, car les fonctions ici sont des objets de première classe. JavaScript permet le style impératif utilisé en C.

Oui, au fait, il convient de noter que JavaScript et Java n'ont rien en commun. Ce sont des langues complètement différentes.

JavaScript et normes

ECMAScript, ou ES, est le nom de la norme qui guide les développeurs de moteurs JavaScript, c'est-à-dire les environnements où s'exécutent les programmes JS. Diverses normes introduisent de nouvelles fonctionnalités dans le langage, en parlant du nom des normes sous forme abrégée souvent mentionné, par exemple - ES6. ES6 est identique à ES2015, seulement dans le premier cas le numéro signifie le numéro de version de la norme (6), et dans le second - l'année d'adoption de la norme (2015).

Il se trouve que dans le monde de la programmation Web depuis très longtemps, la norme ES3, adoptée en 1999, était pertinente. La quatrième version de la norme n'existe pas (ils ont essayé d'y ajouter trop de nouvelles fonctionnalités et ne l'ont jamais acceptée). En 2009, la norme ES5 a été adoptée, ce qui était une énorme mise à jour de la langue, la première en 10 ans. Après cela, en 2011, la norme ES5.1 a été adoptée, elle a également eu beaucoup de nouvelles choses. La norme ES6 adoptée en 2015 est également devenue très significative en termes d'innovation. À partir de 2015, de nouvelles versions de la norme sont adoptées chaque année.

La dernière version de la norme au moment de la publication de ce document est ES9 , adoptée en juin 2018.

Résumé

Aujourd'hui, nous avons écrit "Bonjour tout le monde!" sur JavaScript, a examiné les principales caractéristiques du langage et a parlé de sa standardisation. La prochaine fois, nous parlerons du style des textes JavaScript et de la structure lexicale des programmes.

Chers lecteurs! Si vous, avant de lire ce document, n'étiez pas familier avec JavaScript, veuillez nous dire si vous avez réussi à exécuter «Bonjour, monde!».