1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: Introduction
slug: Web/JavaScript/Guide/Introduction
tags:
- Débutant
- Guide
- Intro
- JavaScript
translation_of: Web/JavaScript/Guide/Introduction
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}</div>
<p class="summary">Ce chapitre introduit JavaScript et présente certains de ses concepts fondamentaux.</p>
<h2 id="Ce_que_vous_devriez_déjà_savoir">Ce que vous devriez déjà savoir</h2>
<p>Pour lire ce guide, il est conseillé d'avoir :</p>
<ul>
<li>Une compréhension générale du fonctionnement d'Internet et du <a href="https://developer.mozilla.org/fr/docs/Glossaire/World_Wide_Web">World Wide Web</a> .</li>
<li>Une connaissance élémentaire du <em>HyperText Markup Language</em> ({{Glossary("HTML")}}).</li>
<li>Une expérience préalable en programmation. Si vous débutez la programmation, vous pouvez utiliser l'un des tutoriels listés sur la page <a href="/fr/docs/Web/JavaScript">JavaScript</a>.</li>
</ul>
<h2 id="Où_trouver_des_informations_concernant_JavaScript">Où trouver des informations concernant JavaScript</h2>
<p>La documentation MDN pour JavaScript comprend :</p>
<ul>
<li><a href="/fr/docs/Apprendre">Apprendre le Web</a> : cette section fournit des informations destinées aux débutants et présente les concepts de bases autour de la programmation et d'Internet.</li>
<li><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> (ce guide) fournit un aperçu du langage JavaScript et de ses objets.</li>
<li><a href="/fr/docs/Web/JavaScript/Reference">La référence JavaScript</a> fournit une référence détaillée sur les fonctionnalités de JavaScript.</li>
</ul>
<p>Si vous débutez en JavaScript, vous pouvez commencer par les articles de la section <a href="/fr/docs/Apprendre">Apprendre</a> et du <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a>. Une fois que vous maîtrisez les briques de bases, vous pourrez utiliser <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a> pour obtenir des informations détaillées sur chacun des objets natifs et des instructions.</p>
<h2 id="Quest-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2>
<p>JavaScript est un langage de script, multi-plateforme et orienté objet. C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement.</p>
<p>JavaScript contient une bibliothèque standard d'objets tels que <code>Array</code>, <code>Date</code>, et <code>Math</code>, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les structures de contrôles et les instructions. Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets, par exemple :</p>
<ul>
<li><em>JavaScript côté client</em> étend ces éléments de base en fournissant des objets pour contrôler le navigateur et le <em>Document Object Model</em> (DOM). Par exemple, les extensions du langage côté client permettent de placer des éléments dans un formulaire HTML, de réagir aux événements déclenchés par l'utilisateur (les clics, la saisie d'un formulaire, les actions de navigation, etc.).</li>
<li><em>JavaScript côte serveur</em> étend ces éléments de base avec des objets utiles pour le fonctionnement sur un serveur tels que la possibilité de communiquer avec une base de données, manipuler des fichiers, passer d'une application à une autre, etc.</li>
</ul>
<h2 id="JavaScript_et_Java">JavaScript et Java</h2>
<p>JavaScript et Java se ressemblent sur certains aspects mais ils sont fondamentalement différents l'un de l'autre. Le langage JavaScript ressemble à Java mais n'est pas typé statiquement et le typage de JavaScript est faible (alors qu'il est fort en Java). La syntaxe des expressions JavaScript est très proche de celle du Java avec les conventions de nommage et les constructions conditionnelles par exemple : c'est une des raisons qui a fait que le langage LiveScript a été renommé en JavaScript.</p>
<p>À la différence de Java qui est un système compilé et dont les classes sont déclarées, JavaScript est traité lors de l'exécution et possède quelques types de données pour représenter les nombres, les booléens et les chaînes de caractères (entre autres). JavaScript utilise un modèle basé sur les prototypes pour représenter les liens entre les objets alors que Java utilise un modèle plus courant basé sur les classes. Les prototypes permettent d'avoir un héritage dynamique. Ainsi, les caractéristiques héritées par un objet peuvent varier dans le temps. JavaScript supporte également les fonctions qui sont des objets à part entière et qui peuvent être des propriétés d'autres objets.</p>
<p>JavaScript est un langage plutôt « libre » comparé au Java. Il n'est pas nécessaire de déclarer toutes les variables, classes et méthodes. Il n'est pas nécessaire de savoir si une méthode est publique, privée ou protégée et il n'y a pas d'interfaces à implémenter. Les variables, les paramètres et les valeurs de retour des fonctions ne sont pas explicitement typés.</p>
<p>Java est un langage de programmation utilisant les classes, conçus pour être exécuté rapidement et garantir la sûreté du typage. Cela signifie par exemple qu'il n'est pas possible de transformer un entier Java en un objet ou qu'on ne peut pas accéder à des caractéristiques privées en corrompant le bytecode Java. Le modèle de classes utilisé par Java signifie qu'un programme n'est constitué que de classes et de méthodes. Cet héritage à base de classes, associé au typage fort font qu'on obtient des structures et des hiérarchies d'objets fortement couplées. Pour ces raisons, Java peut apparaître comme un langage plus complexe que JavaScript.</p>
<p>À l'inverse, JavaScript est un descendant de langages plus légers, dynamiquement typés tels que HyperTalk et dBASE. Ces langages de scripts visent un public plus large avec une syntaxe plus simple, des fonctionnalités natives spécialisées et des prérequis minimaux pour pouvoir créer des objets.</p>
<table class="standard-table">
<caption>Comparaison synthétique entre JavaScript et Java</caption>
<thead>
<tr>
<th scope="col">JavaScript</th>
<th scope="col">Java</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orienté objet. Aucune distinction entre les types et les objets. L'héritage est basé sur un mécanisme utilisant les prototypes et les propriétés et méthodes peuvent être ajoutées dynamiquement à n'importe quel objet.</td>
<td>Orienté objet, utilisant un modèle de classes. Les objets sont divisés entre les classes et les instances, l'héritage s'effectue via la hiérarchie des classes. Les classes et les instances ne peuvent pas recevoir de nouvelles propriétés ou méthodes dynamiquement.</td>
</tr>
<tr>
<td>Le type de données des variables n'est pas déclaré (typage dynamique).</td>
<td>Le type de données des variables doit être déclaré (typage statique).</td>
</tr>
</tbody>
</table>
<p>Pour plus d'informations sur les différences entre JavaScript et Java, voir le chapitre sur <a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails">les détails du modèle objet JavaScript</a>.</p>
<h2 id="JavaScript_et_la_spécification_ECMAScript">JavaScript et la spécification ECMAScript</h2>
<p>JavaScript est standardisé par <a href="https://www.ecma-international.org/">Ecma International</a> — une association européenne de standardisation des systèmes d'information et de communication (ECMA étant historiquement un acronyme pour <em>European Computer Manufacturers Association</em>) qui délivre un langage de programmation standardisé, international appelé ECMAScript. Ce langage se comporte de la même façon pour toutes les applications qui supportent ce standard. Les entreprises peuvent utiliser ce langage standard afin de développer leur implémentation de JavaScript. Le standard ECMAScript est documenté avec la spécification ECMA-262. Voir la page <a href="/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript">Nouveautés de JavaScript</a> pour en savoir plus sur les différentes versions de JavaScript et les différentes éditions de la spécification ECMAScript.</p>
<p>Le standard ECMA-262 est également approuvé par l'<a href="https://www.iso.ch/">ISO</a> (<em>International Organization for Standardization</em>) sous ISO-16262. La spécification peut également être trouvée sur <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">le site web d'Ecma International</a>. La spécification ECMAScript ne décrit pas le <em>Document Object Model</em> (DOM) qui est standardisé par le <a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> et <a href="https://whatwg.org">le WHATWG (Web Hypertext Application Technology Working Group)</a>. Le DOM définit la façon dont les documents HTML sont exposés aux scripts. Pour mieux comprendre les différentes technologies gravitant autour de JavaScript, voir l'article <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Aperçu des technologies JavaScript</a>.</p>
<h3 id="Documentation_JavaScript_et_spécification_ECMAScript">Documentation JavaScript et spécification ECMAScript</h3>
<p>La spécification ECMAScript est un ensemble de conditions à respecter pour implémenter ECMAScript : cela est utile lorsqu'on souhaite implémenter des fonctionnalités standard du langage au sein d'une implémentation ou d'un moteur ECMAScript (tel que SpiderMonkey pour Firefox, ou V8 pour Chrome).</p>
<p>La spécification ECMAScript n'a pas pour but d'aider les développeurs à écrire des scripts. La documentation JavaScript permet d'obtenir des informations pour écrire des scripts JavaScript.</p>
<p>La spécification ECMAScript utilise parfois une terminologie et une syntaxe qui peuvent sembler étranges aux yeux d'un développeur JavaScript. Bien que la description du langage diffère entre ECMAScript et la documentation JavaScript, le langage lui-même reste le même. JavaScript supporte l'ensemble des fonctionnalités mises en avant dans la spécification ECMAScript.</p>
<p>La documentation JavaScript décrit les aspects du langage qui pourront être utilisés par les développeurs JavaScript.</p>
<h2 id="Démarrer_avec_JavaScript">Démarrer avec JavaScript</h2>
<p>Pour commencer à développer en JavaScript, c'est très simple : il suffit d'avoir un navigateur web récent. Ce guide inclut certaines fonctionnalités de JavaScript qui ne sont disponibles que dans les dernières versions de Firefox, il est donc recommandé d'utiliser une version de Firefox à jour pour essayer les exemples fournis.</p>
<p>Deux outils faisant partie de Firefox seront utiles pour expérimenter et tester du code JavaScript : la console web et l'ardoise JavaScript.</p>
<h3 id="La_console_web">La console web</h3>
<p>La <a href="/fr/docs/Outils/Web_Console">console web</a> affiche des informations sur la page actuellement chargée, elle dispose également d'une <a href="/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande">ligne de commande</a> qui peut être utilisée pour exécuter des expressions JavaScript dans la page actuelle.</p>
<p>Pour ouvrir la console, dans le menu, sélectionner « Développement » puis « Console web » (en passant par la barre d'outils, ce sera « Outils » puis « Développement web » puis « Console web »). Avec le clavier, on pourra utiliser la combinaison de touche <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> sur Windows et Linux ou <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> sur Mac. Une fois lancée, la console apparaît en base de la fenêtre du navigateur. En bas de la zone occupée par la console, il y a une ligne de commande qui peut être utilisée pour saisir des instructions JavaScript, le résultat de ces instructions sera affiché dans le panneau au dessus :</p>
<p><img alt="Console web" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"></p>
<h3 id="Lardoise_JavaScript">L'ardoise JavaScript</h3>
<p>La console est pratique quand il s'agit d'exécuter des instructions ligne par ligne. Cependant dès qu'on souhaite exécuter un script plus complexe de plusieurs lignes, la console devient vite limitée. Pour ça, on pourra utiliser <a href="/fr/docs/Outils/Ardoise">l'ardoise JavaScript</a>.</p>
<p>Pour accéder à l'ardoise JavaScript, dans le menu « Développement », sélectionner « Ardoise JavaScript » (via la barre d'outils, sélectionner « Outils », « Développement web » puis « Ardoise JavaScript »). Cela ouvrira une fenêtre séparée qui est un éditeur qui permet d'écrire et d'exécuter du code JavaScript dans le navigateur. Il est aussi possible de sauvegarder les scripts saisis dans l'ardoise dans des fichiers et de charger des scripts depuis les fichiers.</p>
<p>Si vous utilisez le bouton « Afficher », le code contenu dans l'ardoise sera exécuté par le navigateur et le résultat sera affiché sous forme d'un commentaire à la suite du code :</p>
<p><img alt="capture d'écran de l'ardoise JS" src="https://mdn.mozillademos.org/files/10263/ardoise.png" style="display: block; height: 503px; margin-left: auto; margin-right: auto; width: 637px;"></p>
<h3 id="Coucou_monde_hello_world">Coucou monde (<em>hello world</em>)</h3>
<p>Pour commencer à écrire du JavaScript, ouvrez votre console web ou l'ardoise JavaScript et écrivez votre premier « <em>Hello world</em> » en JavaScript.</p>
<pre class="brush: js">function saluer(utilisateur) {
return "Bonjour " + utilisateur;
}
saluer("Alice"); // "Bonjour Alice"
</pre>
<p>Dans les pages qui suivent, ce guide introduira la syntaxe du langage JavaScript ainsi que ses fonctionnalités ; vous pourrez ainsi écrire des applications plus complexes.</p>
<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}</p>
|
