# Ш++ IDE

Код задач Zero ми радимо писати в нашому редакторі: [https://js.ide.shpp.me](https://js.ide.shpp.me/).

Він ідеально відповідає задачам курсу, а головне - працює "з коробки". Не потрібно нічого встановлювати: просто відкриваєте сторінку в браузері й одразу пишете код. 

## Запуск програми

Щоб запустити написану програму — тисніть "Запустити". Код виконається - і... все :slight\_smile:

<figure><img src="/files/yFJcUA81j9KavLQE1PkH" alt=""><figcaption></figcaption></figure>

## Автотести

Коли вирішили задачу — можете протестувати ваше рішення. Для цього потрібно обрати задачу в переліку вгорі:

![](/files/I5jkIdNV9FjS9Qf74uEJ)

І тиснемо "Протестувати": так побачите, чи вірно працює ваша програма

![](/files/z9KhAS52XJvtQMZLGHnC)

**Зверніть увагу**: якщо обираєте задачу — посилання на неї має автоматично додатись в перший рядок кода (як комент).

**Про всяк випадок**: задачі — в кінці кожного розділу після теорії. Також вони є прямо в боковому меню. Наприклад:

<figure><img src="/files/pLyhrEtSkoSzUo5Mp54n" alt=""><figcaption></figcaption></figure>

А ось вони ж у меню вибору тестів Ш++ IDE (відповідно розділені на частини):

<figure><img src="/files/Lf7ivUsyI3JcRSu0Efnb" alt=""><figcaption></figcaption></figure>

Автотести є для більшості задач, але не для всіх. Якщо для даної задачі автотести не передбачені, з'явиться таке повідомлення:

<figure><img src="/files/tDQamUGwuQsJMYLo3yC8" alt=""><figcaption><p> </p></figcaption></figure>

Наразі таких задач лише дві, тому не переймайтесь: без тестів протягом курсу ви не залишитесь.

### Якщо рішення вірне

Якщо ваша програма пройшла всі закладені тести і жодного разу не видала помилку, на консолі з'явиться відповідне повідомлення, а також код "еталонного" рішення. Його можна порівняти із власним кодом та моментельно отримати "неявні поради" щодо оптимізації :wink:

![](/files/KY4mPXySKc9clQ2KjYUM)

### Якщо рішення невірне

Якщо хоч один тест із переліку не проходить - тестування зупиняється, а на консоль виводиться інформація про те, який саме тест провалився найпершим. Під ним буде два блока: що видав ваш код на цьому тесті, та як мало бути:

<figure><img src="/files/nIxGWNjGe3lzIeo9aM9A" alt=""><figcaption></figcaption></figure>

Уважно порівняйте результат з "еталоном" і робіть висновки, де помилились, та що саме в коді треба виправляти :wink:

## Невидимі символи

Якщо ви були уважними, то помітили сірі символи, яких немає ані в коді, ані на консолі в звичайному режимі запуску коду, але які з'являються на провалених тестах.

<figure><img src="/files/wYRNZMCa88YnzVqQDD3w" alt=""><figcaption></figcaption></figure>

&#x20;Ц&#x435;**·**&#x442;очк&#x438;**·**&#x43C;і&#x436;**·**&#x441;ловами та **↵** в кінці кожного рядка.

<figure><img src="/files/IIv9nA2p4ihPYVY3s0ZS" alt=""><figcaption></figcaption></figure>

Це візуалізація пробілів та переносів рядка. Тести перевіряють, чи виведені на консоль символи збігаються з "еталоном". А пробіли та переноси - це теж символи, хоч і невидимі. Тож, якщо ваш код виводить на консоль більше чи менше пробілів / переносів, ніж треба за умовою задачі - тест провалиться.

<figure><img src="/files/IYItK9oHxrtjagpZmGAY" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RJ0o4EMr6HgpWTJp7euy" alt=""><figcaption></figcaption></figure>

Оскільки побачити пробіли та переноси рядків не можна, Ш++ IDE візуалізує їх для вас у тому разі, якщо тест не пройшов. Завдяки цьому, якщо проблема буде саме в невидимих символах, ви легко це побачите.

## Автоформатування

Коли запускатимете автотести, код автоматично відформатується за прийнятим у Ш++ стилем: IDE  прибере зайві пробіли, рознесе "здвоєні" команди по окремим рядкам і т.д.

![До автотестів](/files/oGnwV01fakOHT4SUvKrH)

![Після автотестів](/files/5RGigambMSYyaxsa7qPt)

Автоформатування виправляє лише взаємне розташування елементів, але не чіпає їх "нутрощі". Рядки в лапках залишаться без змін, і на консоль виводитиметься те ж, що і до автоформатування, тому воно ніяк не вплине на проходження тестів.

## Посилання на код

Якщо вам знадобиться допомога з кодом, або ви захочете скинути рішення на рев'ю — цей код треба показати. Оскільки весь код зберігається локально в cookies, ви не зможете просто скинути посилання на [https://js.ide.shpp.me](https://js.ide.shpp.me/) - на іншому комп'ютері за цим посиланням буде інший код. Тому ми додали кнопку "поділитись посиланням".

![](/files/k9upRQrCo0Um7qOfDVZv)

Коли ви тиснете її - наш бот заливає ваш код на наше сховище і генерує URL.

<figure><img src="/files/xxw5g4nsseUGvXwu9BuT" alt=""><figcaption></figcaption></figure>

При цьому він автоматично копіюється у ваш буфер обміну, його можна одразу вставляти в повідомлення. За цим посиланням буде сторінка IDE з кодом.

<figure><img src="/files/HRNnNAsuwgLaHX2HHVSh" alt=""><figcaption></figcaption></figure>

І от цей URL вже можна скидати іншим: відкривши його, людина бачитиме той код, який ви зберегли.

### Обмеження при створенні посилань

Вам потрібно обрати задачу, код до якої ви написали - інакше IDE не дозволить створити посилання:&#x20;

<figure><img src="/files/6vPeILK3qknOpx8ShUrU" alt=""><figcaption></figcaption></figure>

Також, щоб люди не забували тестувати власний код, коли скидають його на рев'ю, IDE автоматично тестує і автоформатує його, коли створює посилання. І якщо тести не пройшли - видає таке попередження:

<figure><img src="/files/eoScRWlYIZHzV5hUzNNR" alt=""><figcaption></figcaption></figure>

Ви можете створити посилання і для неробочого коду - наприклад, якщо застрягли або не можете зрозуміти, де помилка, і треба показати комусь код. Але це нагадування допомагає уникнути ситуацій, коли студент забув обрати задачу або протестувати код. Тому воно є :wink:

## Зум

Якщо шрифт для вас занадто маленький, або навпаки — завеликий, можна змінити розмір цими кнопками

![](/files/lvKiCmxw22AoIx9yyiWB)

Вони працюють незалежно: у консолі - свій розмір, у полі для коду - свій.

<figure><img src="/files/r6yeOIKpqVbp0QtaMaWA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lsW9tXMYqc4DT1vxsU8J" alt=""><figcaption></figcaption></figure>

Тобто пропорції ви обираєте окремо для кожної половини, і це доволі зручно.

## Про підлітковий курс

Пункт про підлітковий курс прибирає кнопку автотестів.&#x20;

<figure><img src="/files/6qvL9u6IGsUhqyseLS93" alt=""><figcaption></figcaption></figure>

А замість посилання на задачу додає посилання на Google Doc для підліткового курсу

<figure><img src="/files/BeWoy2nVAAIUkEcOi1pm" alt=""><figcaption></figcaption></figure>

У підлітків задачі схожі, але не ідентичні. А IDE у всіх одна й та сама. Тому цей "костиль" потрібен, щоб ніхто не плутався.

## Збереження коду

Якщо ви перезавантажите браузер - код в редакторі збережеться. Майже завжди. "Майже" - бо він зберігається у вас на комп'ютері, і ви можете випадково видалити файли коду разом зі службовими файлами браузера.

Тому, якщо ви хочете зберегти код гарантовано - краще дублюйте його на [Pastebin](https://pastebin.com/), [Replit](https://replit.com), [JSFiddle](https://jsfiddle.net/) чи будь-який інший сервіс на ваш смак. Або створіть посилання на власний код і зробіть закладку в браузері.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shpp.gitbook.io/zero/arrangements/sh++-ide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.