Спосіб 1: PlayCode
PlayCode &8212; вдосконалений редактор коду, що підтримує JavaScript та всі основні функції, властиві повноцінним середовищам розробки. У ньому ви можете поєднувати розробку на HTML, CSS і JS, перемикаючись між документами в будь-який зручний момент.
- Для запуску редактора клікніть по кнопці &171;Open Editor&187; .
- Створиться базовий шаблон, який за необхідності можна видалити і почати написання скриптів з чистого аркуша в цьому ж блоці редактора.
- Доступно зміна розмірів всіх присутніх блоків, що здійснюється шляхом пересування крайньої рамки. Підготуйте робочий простір заздалегідь, щоб зручніше було займатися подальшою розробкою.
- Всі внесені зміни відображаються на екрані відразу ж, оскільки за замовчуванням активований режим Live.
- Вимкніть його, деактивувавши відповідну кнопку, яка розташована вгорі праворуч. Тоді компілювання доведеться запускати самостійно, клікаючи по іконці з трикутником.
- Використовуйте вбудовані підказки для швидкого набору важливих команд. Досить написати лише кілька букв, а все інше вміст буде підставлено автоматично. Це ж стосується лапок або скобочек, які проставляються автоматично.
- Зліва внизу відображається консоль. Якщо під час обробки коду виникнуть будь-які помилки, там відразу ж з'явиться повідомлення з розбором неточностей.
- Перемикайтеся між файлами JS, HTML та CSS через ліву панель.
- Додатково в PlayCode присутні інші шаблони, показані у вигляді простих скриптів або навіть ігор з користувальницьким взаємодією. Перейти до них можна шляхом натискання на кнопки праворуч.
- Ви відразу ж будете ознайомлені з результатом виведення і зможете вручну відредагувати код, застосувавши його в майбутньому проекті.
- Якщо планується працювати з PlayCode і далі, рекомендується створити новий аккаунт. Після цього інструменти збереження, публікації та розповсюдження проектів стануть доступними.
![Переход к редактированию кода JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/005b5f5f89ca1f46f8682a5591e54cf5.png)
![Просмотр примера кода JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/86bbc3813d4a8af5b1972a71788b8335.png)
![Изменение размера областей для редактирования JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/874a2926b001bee0963c9d7957244f53.png)
![Автоматическое компилирование результата редактирования JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/29d7b23623a7e82c38feee588b35cbc4.png)
![Отключение автоматического компилирования JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/03a184695e028a2d68af37e726969386.png)
![Автоматическая подстановка фраз при редактировании JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/b76afb4cda619626adcde85cef490759.png)
![Просмотр консоли при редактировании JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/02b1805c7a053196637d3d08b9202a3a.png)
![Переключение между документами при редактировании JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/9da190534bd1db6cce02c2b996dd98b1.png)
![Переход к просмотру шаблонов JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/5ebc83dfde032fc9b639e0d858e37939.png)
![Просмотр и управление шаблонами JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/ede43aa86413f61110d7f8a4d700b988.png)
![Сохранение проектов редактирования JavaScript через онлайн-сервис PlayCode](https://cdn.daad.org.ua/images/11490/7f5117058f4e5143533470d064c9d7ad.png)
Спосіб 2: JsFiddle
У онлайн-сервісу JsFiddle є свої особливості: наприклад, користувачеві доступно підключення популярних фреймворків, а також швидке перемикання між мовами, які використовуються для написання коду.
- Опинившись на головній сторінці JsFiddle, можна вибрати одну з заготовок для подальшого програмування або почати писати код з нуля.
- Редактор JS знаходиться знизу і в разі потреби можна змінити його розмір, пересуваючи рамки області. Тут здійснюється основний процес написання коду.
- Задійте меню, що випадає, якщо хочете переключитися на стару версію мови або вибрати інший ЯП.
- Вгорі на два блоки розділені редактори HTML і CSS, взаємодіяти з якими можна в будь-який момент, просто перемикаючись між ними.
- Для перевірки коду використовуйте кнопку &171;Run&187; . На жаль, компіляція в режимі реального часу JsFiddle не підтримує.
- У невеликому вікні консолі праворуч з'являться відомості про успішне компілювання або відобразиться інформація про виниклі помилки під час цього процесу.
- Сам результат буде виведений в окремій області над консоллю.
- Використовуйте спадне меню &171;Settings&187; , якщо хочете змінити зовнішній вигляд редактора, налаштувати консоль, параметри рядків і поведінку онлайн-сервісу.
- У тому ж випадаючому меню, яке відповідає за вибір мови програмування, можна підключити фреймворк для особистих цілей.
![Выбор шаблона перед редактированием JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/1613e03a1e7383bd14772f9be5e45b90.png)
![Редактирование JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/c3e72da214e3b8f77049a9e58c9b8031.png)
![Выбор языка для редактирования JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/d8f05bc0fe9fd5ffb805c1489e5804d7.png)
![Работа над HTML и CSS при редактировании JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/dafcb6794e80dc66117c629e56a62066.png)
![Запуск компилирования проекта JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/a8b4bb9b7c8077efdb25761701e5a131.png)
![Просмотр результата консоли при компилировании JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/0623e57cea0e7e12bd287907d83a807a.png)
![Результат компилирования JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/0d1f65e007d0f775bc98c4ab6824fd08.png)
![Настройки редактирования JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/2203068d4663f9ebc0a1198a7984f3b7.png)
![Подключение фреймворков при редактировании JavaScript через онлайн-сервис JsFiddle](https://cdn.daad.org.ua/images/11490/297b8d13dd136f0f81991a82e6e960af.png)
Якщо ви хочете зберегти проект або отримати додаткові функції редактора, потрібно зареєструватися в JsFiddle. Далі ознайомтеся з тарифними планами і виберіть один з них в тому випадку, коли планується задіяти можливості онлайн-сервісу на постійній основі без будь-яких обмежень.
Спосіб 3: DirtyMarkup
На завершення хочемо поговорити про онлайн-редакторі DirtyMarkup, який значно відрізняється від розібраних вище тим, що він не призначений для написання коду з нуля, а використовується для його приведення до нормального форматування в автоматичному режимі.
- На веб-сайті DirtyMarkup перейдіть у режим &171;JS&187; , натиснувши відповідну кнопку.
- Тепер в сам редактор можна вставити весь код, який повинен бути відформатований.
- Задайте для нього табуляцію, довжину ліній, тип фігурних дужок і додаткові параметри, зазначивши їх галочками.
- Застосуйте параметри редагування, клікнувши &171;Clean&187; .
![Переход к выбору языка редактирования JavaScript через онлайн-сервис DirtyMarkup](https://cdn.daad.org.ua/images/11490/a7205c8c0231463ffc0300101570f5d8.png)
![Вставка содержимого для редактирования JavaScript через онлайн-сервис DirtyMarkup](https://cdn.daad.org.ua/images/11490/d6fa115b9b9f10df97bb85f705029f17.png)
![Настройка содержимого для редактирования JavaScript через онлайн-сервис DirtyMarkup](https://cdn.daad.org.ua/images/11490/3debcb0fbc326932d59936da2cbb6611.png)
![Запуск редактирования JavaScript через онлайн-сервис DirtyMarkup](https://cdn.daad.org.ua/images/11490/048c3f52e51fdab6f461195c9421d290.png)
Залишається тільки скопіювати отриманий вміст в правильному форматуванні, щоб далі використовувати його в середовищі розробки або іншому онлайн-редакторі JavaScript.