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
|
---
title: Ardoise JavaScript
slug: Outils/Ardoise
tags:
- Firefox
- Tools
- Web Development
- 'Web Development:Tools'
translation_of: Archive/Tools/Scratchpad
---
<div>{{ToolsSidebar}}</div>
<div class="blockIndicator warning">
<p>L'ardoise est dépréciée depuis Firefox 70 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1565380" rel="noopener" title="FIXED: Add deprecation warning to Scratchpad">bug 1565380</a>), et a été supprimée dans Firefox 72 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1519103" rel="noopener" title="FIXED: Remove Scratchpad panel">bug 1519103</a>). Comme alternative, depuis Firefox 71, vous pouvez utiliser <a href="https://wiki.developer.mozilla.org/fr/docs/Outils/Console_Web/The_command_line_interpreter#Le_mode_%C3%A9diteur_multiligne">le mode éditeur multiligne de la console JavaScript</a>, ce mode posséde des fonctionnalités d'ouverture et de sauvegarde dans un fichier.</p>
</div>
<p>L'ardoise JavaScript propose un environnement pour expérimenter avec du code JavaScript. Vous pouvez écrire du code qui interagit directement avec le contenu d'une page web.</p>
<p>Contrairement à la <a href="/fr/docs/Outils/Web_Console" title="fr/Utiliser_la_Console_Web">Console Web</a> qui ne peut interpréter qu'une ligne de code à la fois, l'ardoise JavaScript permet d'éditer des extraits de code plus importants et de les exécuter de manières diverses, en fonction de l'utilisation désirée.</p>
<p>{{EmbedYouTube("Pt7DZACyClM")}}</p>
<div class="blockIndicator note">
<p>Le tutoriel vidéo ci-dessus montre un cas d'utilisation de l'Ardoise JavaScript avec une page tournant sur un serveur web local. Il est également possible d'utiliser l'Ardoise JavaScript sur des pages ouvertes depuis le système de fichier local, si les permissions courantes le permettent. Mais même avec des restrictions en place, le code HTML peut être soit édité manuellement soit copiés de la source et collés dans la page "about:blank" (nouvel onglet) avec l'usage du menu contextuel "Éditer en tant qu'HTML" de <a href="/fr/docs/Tools/Page_Inspector">L'Inspecteur.</a></p>
</div>
<h2 id="Utilisation">Utilisation</h2>
<h3 id="Ouvrir_lardoise_JavaScript">Ouvrir l'ardoise JavaScript</h3>
<p>Il y a différentes façons d'ouvrir l'ardoise JavaScript dans une fenêtre dédiée :</p>
<ul>
<li>Utiliser le raccourci clavier <kbd>Maj</kbd> + <kbd>F4</kbd>, ou aller dans le menu "Développement" (qui est un sous-menu du menu outils sur macOS et Linux), et sélectionner ensuite "Ardoise JavaScript"</li>
<li>cliquer sur l'icône (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), dans la barre d'outils principale ou dans le menu principal (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), puis sélectionner "Ardoise JavaScript".</li>
</ul>
<p>Cela ouvrira l'ardoise JavaScript dans une nouvelle fenêtre.</p>
<h3 id="Ouvrir_lardoise_JavaScript_dans_la_boite_à_outils">Ouvrir l'ardoise JavaScript dans la boite à outils</h3>
<div class="geckoVersionNote">Nouveau dans Firefox 47.</div>
<p>Depuis Firefox 47, il est possible d'ouvrir l'ardoise dans les <a href="/fr/docs/Tools/Tools_Toolbox">outils de développement</a>. Il faut pour avant tout cocher la case "Ardoise" dans la section "Outils de développement par défaut" des <a href="/fr/docs/Tools/Tools_Toolbox#Settings_2">options des outils</a> page.</p>
<p>L'ardoise est maintenant disponible dans la boite à outils aux cotés des autres outils tels que l'Inspecteur et la Console. Ce mode est particulièrement utile combiné avec la <a href="/fr/docs/Tools/Web_Console/Split_console">console scindée </a>: Il est alors possible d'utiliser l'ardoise pour avoir un éditeur multiligne persistant, et la Console pour interagir avec la page.</p>
<h3 id="Édition">Édition</h3>
<p>La fenêtre de l'ardoise ressemble à ceci (sur macOS la barre de menu est en haut de l'écran) :</p>
<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/5983/scratchpad.png"></p>
<p>Le menu « <em>Fichier</em> » propose des options pour charger et sauvegarder les extraits de code JavaScript, permettant leur réutilisation ultérieure.</p>
<h4 id="Complétion_de_code">Complétion de code</h4>
<p>L'ardoise JavaScript intègre le <a href="http://ternjs.net/">moteur d'analyse de code tern</a>. Il est utilisé pour fournir des suggestions d'autocomplétion et des popups d'information sur le symbole courant. Pour lister les suggestions d'autocomplétion, appuyez sur <kbd>Ctrl</kbd> + <kbd>Espace</kbd>.</p>
<p>Par exemple, essayez de taper "d", puis d'appuyer sur <kbd>Ctrl</kbd> + <kbd>Espace</kbd>. Vous devriez voir :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7933/scratchpad-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>L'icône à côté de chaque suggestion indique le type, et la suggestion mise en évidence affiche la popup avec plus d'information. Les touches <kbd>↑</kbd> et <kbd>↓</kbd> permettent de défiler parmi les suggestions et la touche <kbd>Entrée</kbd> ou <kbd>Tab</kbd> sélectionne la suggestion en surbrillance.</p>
<h4 id="documentation_popup">documentation popup</h4>
<p>Pour afficher la popup de documentation; il faut appuyer sur <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Espace</kbd> lorsque le curseur est sur un identifieur. Par exemple si vous tapez <code>document</code>.<code>addEventListener</code>, puis appuyer sur <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>Espace</kbd>, affichera une popup contenant le résumé de la syntaxe de la fonction ainsi qu'un court résumé :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7935/scratchpad-symbolinfo.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Le lien "[docs]" pointe sur la documentation MDN pour le symbole.</p>
<h3 id="Exécution">Exécution</h3>
<p class="note">Une fois que vous avez écrit votre code, sélectionnez le code à exécuter. Si vous ne sélectionnez rien, tout le code de la fenêtre sera exécuté. Puis choisissez comment vous voulez que le code soit exécuté : en utilisant les boutons en haut de la fenêtre ou par le menu contextuel (accessible avec le clic droit de la souris). Le code est exécuté dans le contexte de l'onglet actuellement sélectionné. Toutes les variables que vous déclarez en dehors d'une fonction seront ajoutées à l'objet global de cet onglet.</p>
<h4 id="Exécuter">Exécuter</h4>
<p>Lorsque vous choisissez l'option "Exécuter", le code sélectionné s'exécute. C'est ce que vous utilisez si vous voulez exécuter une fonction ou du code qui manipule le contenu de la page sans avoir besoin de voir le résultat.</p>
<h4 id="Examiner">Examiner</h4>
<p>L'option "Examiner" exécute le code comme l'option précédente ; cependant, après l'exécution, un inspecteur d'objet s'ouvre pour vous permettre d'examiner la valeur retournée.</p>
<p>Par exemple, si vous entrez le code :</p>
<pre>window
</pre>
<p>Et que vous choisissez « <em>Examiner</em> », vous obtenez une fenêtre d'inspecteur qui ressemblera à ceci :</p>
<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/5985/scratchpad-inspect.png"></p>
<h4 id="Afficher">Afficher</h4>
<p>L'option « <em>Afficher</em> » exécute le code sélectionné, puis insère le résultat directement dans la fenêtre de l'ardoise, dans un commentaire. Ainsi, il est possible de l'utilisé en tant que <a href="http://fr.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop">REPL.</a></p>
<h4 id="Recharger_et_exécuter">Recharger et exécuter</h4>
<p>L'option "Recharger et exécuter" est seulement disponible dans le menu contextuel (clic droit). Il recharge tout d'abord la page, puis exécute le code lorsque la page déclenche l'évènement "load". C'est utile lorsque vous vous voulez exécuter dans un environnement sans modification.</p>
<h2 class="editable" id="Exécuter_lArdoise_JavaScript_dans_le_contexte_du_navigateur">Exécuter l'Ardoise JavaScript dans le contexte du navigateur</h2>
<p>Il est possible d'exécuter l'ardoise dans le contexte du navigateur lui-même. Pour cela, il est nécessaire de cocher l'option «Activer le débogage du chrome et des modules » dans les <a href="/fr/docs/Tools/Tools_Toolbox#Settings_2">options des outils de développement</a> . Une fois cela fait, le menu « <em>Environnement</em> » a une option « <em>Navigateur</em> » . Lorsqu'elle est sélectionnée, le contexte est le navigateur entier et non plus uniquement le contenu de la page courante. Il est facile de le constater en examinant ces globales :</p>
<pre class="brush: js">window
/*
[object ChromeWindow]
*/
gBrowser
/*
[object XULElement]
*/</pre>
<p>Le contexte d'exécution de l'Ardoise JavaScript est sur le navigateur lorsqu'un fichier a le commentaire<br>
<code>// -sp-context: browser</code><br>
sur sa première ligne.</p>
<h2 id="Raccourcis_clavier">Raccourcis clavier</h2>
<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p>
<h3 id="Éditeur_de_source">Éditeur de source</h3>
<p>{{ Page ("fr/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
|
