diff options
Diffstat (limited to 'files/fr/tools/web_console/the_command_line_interpreter/index.html')
| -rw-r--r-- | files/fr/tools/web_console/the_command_line_interpreter/index.html | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/files/fr/tools/web_console/the_command_line_interpreter/index.html b/files/fr/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..631bcd0ef8 --- /dev/null +++ b/files/fr/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,161 @@ +--- +title: Interpreteur de ligne de commande +slug: Outils/Console_Web/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.</p> + +<h2 id="Le_mode_ligne_unique">Le mode ligne unique</h2> + +<p>Pour ce mode se saisie, vous pouvez écrire des expressions JavaScript dans le champ de saisie qui se situe en bas de la console, à droite de <strong>>></strong>.</p> + +<p><img alt="Mode ligne unique, on constate que la zone de saisie se situent en bas, à la fin des message de la Console Web" src="https://mdn.mozillademos.org/files/16672/web_console.png"></p> + +<p>Pour ajouter des expressions il suffit de les saisir dans la ligne de commande et d'appuyer sur <kbd>Entrée</kbd>. Pour sauter des lignes et ainsi pouvoir entrer des expressions multiligne, il suffit d'utiliser <kbd>Maj</kbd><kbd>Entrée</kbd> au lieu de <kbd>Entrée</kbd>.</p> + +<p>L'expression entrée s'affiche alors dans la fenêtre d'affichage de message, et est suivie par son résultat :</p> + +<p><img alt="Retour de la Console Web avec coloration syntactique" src="https://mdn.mozillademos.org/files/16670/console_01.png"></p> + +<p>Si votre expression n'a pas l'air d'être complète lorsque <kbd>Entrée</kbd> est pressée, alors la console considère qu'il s'agit en fait d'un <kbd>Maj</kbd>+<kbd>Entrée</kbd> , permettant ainsi de finir l'expression.</p> + +<p>Par exemple, si vous tapez :</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> toto<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span></code></pre> + +<p>et que vous appuyiez sur <kbd>Entrée</kbd>, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé <kbd>Maj</kbd>+<kbd>Entrée</kbd> , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.</p> + +<h2 id="Le_mode_éditeur_multiligne">Le mode éditeur multiligne</h2> + +<p>Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" <img alt="Icone passer en mode éditeur multiligne" src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17176/2ca78324ebc4b5c4666959a5ed606dfd/icone-multiligne.png"> à droite de la zone de saisie du mode ligne unique ou pressez <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). L'éditeur multiligne s'ouvre à gauche de la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. </p> + +<p><img alt="Editeur multiligne, avec deux colonnes, à gauche la zone de saisie et à droite la liste des message de la Console Web" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png"></p> + +<p>À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche <kbd>Entrée</kbd>. Pour exécuter le morceau de code que vous avez saisi, cliquez sur <img alt='le bouton "Exécuter"' src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17177/4778932832bd7aaae5ad75968643f4c7/executer.png"> au dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>Entrée</kbd> (ou <kbd>Cmd</kbd>+<kbd>Return</kbd> sur MacOS).</p> + +<p>Vous pouvez ouvrir des fichiers avec le mode éditeur multiligne et sauvegarder dans un fichier le contenu présent dans la zone d'édition :</p> + +<ul> + <li>Pour ouvrir un fichier, appuyez sur <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner le fichier à ouvrir. </li> + <li>Pour sauvegarder le contenu de la zone d'édition, appuyez sur <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner l'emplacement de sauvegarde.</li> +</ul> + +<p>Pour revenir au mode ligne unique, cliquez sur l'icône <strong>X </strong>au-dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p> + +<h2 id="Accéder_à_des_variables">Accéder à des variables</h2> + +<p>Il est possible d'accéder à des variables définies dans la page, par exemple des variables préconstruites comme <code>window</code> et des variables ajoutées par du code JavaScript comme <code>jQuery </code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png"></p> + +<h2 id="Autocomplétion">Autocomplétion</h2> + +<p>La ligne de commande possède de l'autocomplétion : il suffit d'entrer quelques lettres et une pop-up apparait avec les complétions possibles (s’il y en a) :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png"></p> + +<p>Appuyer sur <kbd>Entrée</kbd>, <kbd>Tab</kbd>, ou Flèche Droite, acceptera la suggestion sélectionnée. Pour changer de sélection, il faut utiliser les flèches haut/bas ou continuer à taper pour affiner les suggestions.</p> + +<p>Les suggestions d'autocomplétion sont sensibles à la case.</p> + +<p>La console suggère des complétions depuis le scope qui s'exécute actuellement dans la stack frame. Cela signifie que si la console s'est arrêtée sur un point d'arrêt, l'autocomplétion suggérera des objets de la fonction locale.</p> + +<p>Les suggestions fonctionnent pour les tableaux également :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png"></p> + +<h2 id="Définir_des_variables">Définir des variables</h2> + +<p>Il est possible de définir ses propres variables et d'y accéder par la suite :</p> + +<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png"></p> + +<p>Une fois qu'il aura été interprété, le texte entré aura de la coloration syntaxique, de même que le résultat si approprié.</p> + +<div class="blockIndicator note"> +<p>Note: La coloration syntaxique ne sera pas visible dans votre navigateur si certaines fonctionnalités d'Accessibilité sont activées.</p> +</div> + +<h2 id="Historique_de_commandes">Historique de commandes</h2> + +<p>La ligne de commande se souvient des commandes qui ont été entrées : pour naviguer dans l'historique, il faut utiliser les flèches haut/bas.</p> + +<p>Cet historique persiste entre les sessions. Pour nettoyer l'historique, il faut utiliser <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">fonction d'aide</a> <code>clearHistory()</code>.</p> + +<p>À partir de Firefox 65, il est possible d'initier une recherche inversée dans l'historique, à l'instar de ce qui est possible dans le bash Linux/Mac ou du PowerShell de Windows.<br> + <br> + Sur Windows et Linux, F9 lance la recherche inversée. Sur Mac il s'agit de Ctrl + R</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png"></p> + +<p>Il faut ensuite entrer le texte recherché dans la ligne de commande en bas de la Console. Lors de la frappe, la première occurrence correspondante sera affichée dans la Console.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png"></p> + +<p>Appuyer de nouveau sur F9 (Ctrl + R sous Mac) itère à l'envers parmi les occurrences. Utiliser Maj + F9 (Ctrl + S sur Mac) itère à l'endroit parmi les occurrences. Lorsque la commande cherchée est trouvée, appuyer sur Entrée exécute l'expression.</p> + +<h2 id="Travailler_avec_des_iframes">Travailler avec des iframes</h2> + +<p>Si une page contient des <a href="/fr/docs/Web/HTML/Element/iframe">iframes</a>, il est possible d'utiliser la commande <code>cd()</code> pour changer le scope de la console vers celui d'une iframe spécifique. Il est alors possible d'exécuter des fonctions définies dans le document hosté par cette iframe. Il y a trois façons d'accéder à une iframe en utilisant <code>cd()</code>:</p> + +<p>Il est possible de passer l'élément DOM de l'iframe :</p> + +<pre class="brush: js notranslate">var frame = document.getElementById("frame1"); +cd(frame);</pre> + +<p>Il est possible de passer un sélecteur CSS qui correspond à l'iframe :</p> + +<pre class="brush: js notranslate">cd("#frame1");</pre> + +<p>Il est possible de passer l'objet global window de l'iframe :</p> + +<pre class="brush: js notranslate">var frame = document.getElementById("frame1"); +cd(frame.contentWindow);</pre> + +<p>Pour revenir au contexte de la fenêtre principale, il suffit d'appeler <code>cd()</code> sans paramètres :</p> + +<pre class="brush: js notranslate">cd();</pre> + +<p>Par exemple, supposons que nous avons un document qui inclut une iframe :</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>Cette iframe définit une nouvelle fonction :</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "I'm frame1"; + } + </script> + </head> + <body> + </body> +</html></pre> + +<p>Il est possible de changer de contexte comme ceci :</p> + +<pre class="brush: js notranslate">cd("#frame1");</pre> + +<p>Le document de l'objet global window est maintenant celui de l'iframe :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png">Et il est alors possible d'appeler la fonction définie dans l'iframe :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png"></p> + +<h2 id="Commandes_daide">Commandes d'aide</h2> + +<p>{{ page("/fr/docs/Outils/Console_Web/Fonctions_d_aide", "Les commandes") }}</p> |