Спосіб 1: PlayCode
PlayCode - просунутий редактор коду, що підтримує JavaScript і всі основні функції, властиві повноцінним середах розробки. У ньому ви можете поєднувати розробку на HTML, CSS і JS, перемикаючись між документами в будь-який зручний момент.
Перейти до онлайн-сервісу PlayCode
- Для запуску редактора клацніть на кнопці «Open Editor».
- Створиться базовий шаблон, який в разі потреби можна видалити і почати написання скриптів з чистого аркуша в цьому ж блоці редактора.
- Ви можете змінити розмірів всіх присутніх блоків, що здійснюється шляхом пересування крайней рамки. Підготуйте робочий простір заздалегідь, щоб зручніше було займатися подальшою розробкою.
- Всі зміни, що вносяться відображаються на екрані відразу ж, оскільки за замовчуванням активований режим Live.
- Вимкніть його, деактивовано відповідну кнопку, яка розташована праворуч вгорі. Тоді компіляція доведеться запускати самостійно, клацаючи по іконці з трикутником.
- Використовуйте вбудовані підказки для швидкого набору важливих команд. Достатньо написати лише кілька букв, а все інше вміст буде підставлена автоматично. Це ж стосується лапок або скобочек, які проставляються автоматично.
- Зліва внизу відображається консоль. Якщо під час обробки коду виникнуть будь-які помилки, там відразу ж з'явиться повідомлення з розбором неточностей.
- Перемикайтеся між файлами JS, HTML і CSS через ліву панель.
- Додатково в PlayCode присутні інші шаблони, показані у вигляді простих скриптів або навіть ігор з призначеним для користувача взаємодією. Перейти до них можна шляхом натискання по кнопках справа.
- Ви відразу ж будете ознайомлені з результатом виведення і зможете вручну відредагувати код, застосувавши його в майбутньому проекті.
- Якщо планується працювати з PlayCode і далі, рекомендується створити новий обліковий запис. Після цього інструменти збереження, публікації та поширення проектів стануть доступними.
Спосіб 2: JsFiddle
У онлайн-сервісу JsFiddle є свої особливості: наприклад, користувачеві доступно підключення популярних фреймворків, а також швидке перемикання між мовами, які використовуються для написання коду.
Перейти до онлайн-сервісу JsFiddle
- Опинившись на головній сторінці JsFiddle, можна вибрати одну із заготовок для подальшого програмування або почати писати код з нуля.
- Редактор JS знаходиться знизу і по необхідності можна змінити його розмір, пересуваючи рамки області. Тут здійснюється основний процес написання коду.
- Задіюйте меню, що випадає, якщо хочете перемкнутися на стару версію мови або вибрати інший ЯП.
- Вгорі на два блоки розділені редактори HTML і CSS, взаємодіяти з якими можна в будь-який момент, просто перемикаючись між ними.
- Для перевірки коду використовуйте кнопку «Run». На жаль, компіляція в режимі реального часу JsFiddle не підтримує.
- У невеликому вікні консолі праворуч з'являться відомості про успішне компіляції або відобразиться інформація про виниклі помилки під час цього процесу.
- Сам результат буде виведений в окремій області над консоллю.
- Використовуйте меню, що випадає «Settings», Якщо хочете змінити зовнішній вигляд редактора, налаштувати консоль, параметри рядків і поведінку онлайн-сервісу.
- У тому ж меню, що випадає, яке відповідає за вибір мови програмування, можна підключити фреймворк для особистих цілей.
Якщо ви хочете зберегти проект або отримати додаткові функції редактора, потрібно зареєструватися в JsFiddle. Далі ознайомтесь з тарифними планами і виберіть один з них в тому випадку, коли планується задіяти можливості онлайн-сервісу на постійній основі без будь-яких обмежень.
Спосіб 3: DirtyMarkup
На завершення хочемо поговорити про онлайн-редакторі DirtyMarkup, який значно відрізняється від розібраних вище тим, що він не призначений для написання коду з нуля, а використовується для його приведення до нормального форматування в автоматичному режимі.
Перейти до онлайн-сервісу DirtyMarkup
- На сайті DirtyMarkup перейдіть в режим «JS», Клацнувши по відповідній кнопці.
- Тепер в сам редактор можна вставити весь код, який повинен бути відформатований.
- Задайте для нього табуляцію, довжину ліній, тип фігурних дужок і додаткові параметри, зазначивши їх галочками.
- Застосуйте параметри редагування, клікнувши «Clean».
Залишається тільки скопіювати отримане вміст в правильне форматування, щоб далі використовувати його в середовищі розробки або іншому онлайн-редакторі JavaScript.