Спосіб 1: PlayCode

PlayCode - просунутий редактор коду, що підтримує JavaScript і всі основні функції, властиві повноцінним середах розробки. У ньому ви можете поєднувати розробку на HTML, CSS і JS, перемикаючись між документами в будь-який зручний момент.

Перейти до онлайн-сервісу PlayCode

  1. Для запуску редактора клацніть на кнопці «Open Editor».
  2. Перехід до редагування коду JavaScript через онлайн-сервіс PlayCode

  3. Створиться базовий шаблон, який в разі потреби можна видалити і почати написання скриптів з чистого аркуша в цьому ж блоці редактора.
  4. Перегляд прикладу коду JavaScript через онлайн-сервіс PlayCode

  5. Ви можете змінити розмірів всіх присутніх блоків, що здійснюється шляхом пересування крайней рамки. Підготуйте робочий простір заздалегідь, щоб зручніше було займатися подальшою розробкою.
  6. Зміна розміру областей для редагування JavaScript через онлайн-сервіс PlayCode

  7. Всі зміни, що вносяться відображаються на екрані відразу ж, оскільки за замовчуванням активований режим Live.
  8. Автоматичне компіляція результату редагування JavaScript через онлайн-сервіс PlayCode

  9. Вимкніть його, деактивовано відповідну кнопку, яка розташована праворуч вгорі. Тоді компіляція доведеться запускати самостійно, клацаючи по іконці з трикутником.
  10. Відключення автоматичного компілювання JavaScript через онлайн-сервіс PlayCode

  11. Використовуйте вбудовані підказки для швидкого набору важливих команд. Достатньо написати лише кілька букв, а все інше вміст буде підставлена ​​автоматично. Це ж стосується лапок або скобочек, які проставляються автоматично.
  12. Автоматична підстановка фраз при редагуванні JavaScript через онлайн-сервіс PlayCode

  13. Зліва внизу відображається консоль. Якщо під час обробки коду виникнуть будь-які помилки, там відразу ж з'явиться повідомлення з розбором неточностей.
  14. Перегляд консолі при редагуванні JavaScript через онлайн-сервіс PlayCode

  15. Перемикайтеся між файлами JS, HTML і CSS через ліву панель.
  16. Перемикання між документами при редагуванні JavaScript через онлайн-сервіс PlayCode

  17. Додатково в PlayCode присутні інші шаблони, показані у вигляді простих скриптів або навіть ігор з призначеним для користувача взаємодією. Перейти до них можна шляхом натискання по кнопках справа.
  18. Перехід до перегляду шаблонів JavaScript через онлайн-сервіс PlayCode

  19. Ви відразу ж будете ознайомлені з результатом виведення і зможете вручну відредагувати код, застосувавши його в майбутньому проекті.
  20. Перегляд і управління шаблонами JavaScript через онлайн-сервіс PlayCode

  21. Якщо планується працювати з PlayCode і далі, рекомендується створити новий обліковий запис. Після цього інструменти збереження, публікації та поширення проектів стануть доступними.
  22. Збереження проектів редагування JavaScript через онлайн-сервіс PlayCode

Спосіб 2: JsFiddle

У онлайн-сервісу JsFiddle є свої особливості: наприклад, користувачеві доступно підключення популярних фреймворків, а також швидке перемикання між мовами, які використовуються для написання коду.

Перейти до онлайн-сервісу JsFiddle

  1. Опинившись на головній сторінці JsFiddle, можна вибрати одну із заготовок для подальшого програмування або почати писати код з нуля.
  2. Вибір шаблону перед редагуванням JavaScript через онлайн-сервіс JsFiddle

  3. Редактор JS знаходиться знизу і по необхідності можна змінити його розмір, пересуваючи рамки області. Тут здійснюється основний процес написання коду.
  4. Редагування JavaScript через онлайн-сервіс JsFiddle

  5. Задіюйте меню, що випадає, якщо хочете перемкнутися на стару версію мови або вибрати інший ЯП.
  6. Вибір мови для редагування JavaScript через онлайн-сервіс JsFiddle

  7. Вгорі на два блоки розділені редактори HTML і CSS, взаємодіяти з якими можна в будь-який момент, просто перемикаючись між ними.
  8. Робота над HTML і CSS при редагуванні JavaScript через онлайн-сервіс JsFiddle

  9. Для перевірки коду використовуйте кнопку «Run». На жаль, компіляція в режимі реального часу JsFiddle не підтримує.
  10. Запуск компіляції проекту JavaScript через онлайн-сервіс JsFiddle

  11. У невеликому вікні консолі праворуч з'являться відомості про успішне компіляції або відобразиться інформація про виниклі помилки під час цього процесу.
  12. Перегляд результату консолі при компіляції JavaScript через онлайн-сервіс JsFiddle

  13. Сам результат буде виведений в окремій області над консоллю.
  14. Результат компіляції JavaScript через онлайн-сервіс JsFiddle

  15. Використовуйте меню, що випадає «Settings», Якщо хочете змінити зовнішній вигляд редактора, налаштувати консоль, параметри рядків і поведінку онлайн-сервісу.
  16. Налаштування редагування JavaScript через онлайн-сервіс JsFiddle

  17. У тому ж меню, що випадає, яке відповідає за вибір мови програмування, можна підключити фреймворк для особистих цілей.
  18. Підключення фреймворків при редагуванні JavaScript через онлайн-сервіс JsFiddle

Якщо ви хочете зберегти проект або отримати додаткові функції редактора, потрібно зареєструватися в JsFiddle. Далі ознайомтесь з тарифними планами і виберіть один з них в тому випадку, коли планується задіяти можливості онлайн-сервісу на постійній основі без будь-яких обмежень.

Спосіб 3: DirtyMarkup

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

Перейти до онлайн-сервісу DirtyMarkup

  1. На сайті DirtyMarkup перейдіть в режим «JS», Клацнувши по відповідній кнопці.
  2. Перехід до вибору мови редагування JavaScript через онлайн-сервіс DirtyMarkup

  3. Тепер в сам редактор можна вставити весь код, який повинен бути відформатований.
  4. Вставка вмісту для редагування JavaScript через онлайн-сервіс DirtyMarkup

  5. Задайте для нього табуляцію, довжину ліній, тип фігурних дужок і додаткові параметри, зазначивши їх галочками.
  6. Налаштування вмісту для редагування JavaScript через онлайн-сервіс DirtyMarkup

  7. Застосуйте параметри редагування, клікнувши «Clean».
  8. Запуск редагування JavaScript через онлайн-сервіс DirtyMarkup

Залишається тільки скопіювати отримане вміст в правильне форматування, щоб далі використовувати його в середовищі розробки або іншому онлайн-редакторі JavaScript.