JavaScript Sandbox

Search Results

Консоль JavaScript: пишите консольные программы на JavaScript с помощью обучающих библиотек CodeHS, используемых во многих курсах CodeHS.  
Графика на JavaScript: создавайте графические программы на JavaScript с помощью обучающих библиотек CodeHS, используемых во многих курсах CodeHS.
Music in Blockly: используйте блочное кодирование на основе JavaScript для создания музыкальных битов и песен.
Art in Blockly: используйте блочное кодирование для создания цифрового искусства!
Спорт в Blockly: используйте блочное кодирование для кодирования игр, таких как футбол и гольф!  
p5.js: код с реализацией обновленной графической библиотеки на основе обработки на основе JavaScript.
Узел: программные серверные приложения, использующие JavaScript!

JavaScript

Консоль JavaScript: пишите консольные программы на JavaScript с помощью обучающих библиотек CodeHS, используемых во многих курсах CodeHS.

Explore JavaScript Graphics Demos

Цветная краска
Нарисуйте изображение, щелкнув и перетащив мышью! Попробуйте добавить цветовую палитру и варианты кистей, чтобы создавать более сложные иллюстрации.

Карел платформер
Используйте клавиши со стрелками, чтобы перемещать Карела влево и вправо. Попробуйте добавить прыжки, препятствия или бонусы!


Music in Blockly: используйте блочное кодирование на основе JavaScript для создания музыкальных битов и песен.

JSBin

jsbin

JSBin — более простая альтернатива JSFiddle. В нем вы можете редактировать HTML, CSS и JavaScript, просто переключаясь между вкладками на одной странице, а также переключаясь между панелями предварительного просмотра и консоли для максимальной гибкости.

В то время как JSFiddle позволяет связывать внешние ресурсы CSS и JavaScript, JSBin имеет только встроенные библиотеки, которые вы можете использовать. Выбор достаточно широк: от jQuery до React и Angular.

Услуга бесплатна и не требует регистрации, но вам понадобится платный план, если вы хотите настраиваемые вставки, хостинг ресурсов, синхронизацию Dropbox и общедоступный URL-адрес для вашего кода.

Liveweave

liveweave

Liveweave похож на предыдущий редактор, но имеет более приятный интерфейс (хотя наши предпочтения могут отличаться). Как и JSFiddle, Liveweave позволяет работать в режиме реального времени и подключаться к определенным сторонним библиотекам, таким как jQuery.

Но у него есть некоторые уникальные особенности. Например, генератор Lorem Ipsum для генерации текста рыбы в текущей позиции курсора. CSS Explorer предоставляет визуальный редактор WYSIWYG для стилизации. Color Explorer поможет вам найти идеальные цвета. А с помощью векторного редактора вы можете создавать векторную графику для своего веб-сайта.

Онлайн-компиляторы для PHP

  • WritePHPOnline — простой и практичный онлайн-редактор для начинающих PHP. Одно из главных преимуществ компилятора — интуитивно понятный интерфейс.

Онлайн-компилятор WritePHPOnline

Пример кода на WritePHPOnline

  • PHP Sandbox — это простой и легкий в использовании редактор. В песочнице, помимо проверки работоспособности кода, есть дополнительные функции: советы по PHP и пошаговые инструкции по написанию кода. Кроме того, компилятор позволяет загружать написанный вами PHP-код.

Онлайн-компилятор PHP Sandbox

Пример кода в песочнице PHP

Explore Music in Blockly Demos

Ритмы и цвета Вот пример того, как создать свою собственную перкуссионную песню. В этом примере также меняются цвета дисплея.
Art in Blockly: используйте блочное кодирование для создания цифрового искусства!

Explore Art in Blockly Demos


Спорт в Blockly: используйте блочное кодирование для кодирования игр, таких как футбол и гольф.

HTMLhouse

htmlcasa

HTMLhouse — хороший вариант, если вам нужен только HTML, а не CSS или JavaScript. Он ясен и минималистичен. Сервис разделен по вертикали, слева — панель редактирования, справа — превью в реальном времени.

Одна из примечательных особенностей — возможность опубликовать ваш HTML-файл для совместного использования по указанному URL-адресу.

Explore Sports in Blockly Demos

Мини-гольфИспользуйте блочное кодирование, чтобы создать поле для мини-гольфа! Попытайся!
p5.js: Код с основанной на JavaScript реализацией обновленной графической библиотеки на основе Processing.

JSFiddle

jsfiddle

JSFiddle похож на песочницу, в которой вы можете играть с кодом JavaScript. Видя, как JS взаимодействует с HTML и CSS, вы можете редактировать их прямо в сервисе и наблюдать за результатами изменений здесь.

Преимущество этой службы в том, что вы можете добавлять внешние запросы на боковой панели, что позволяет подключать внешние файлы JS и CSS. Collaborate позволяет вам работать над одним проектом с кем-то еще в режиме реального времени.

Единственным недостатком сервиса является то, что вам нужно нажать кнопку «Выполнить», чтобы обновить панель предварительного просмотра. Но это можно решить, зайдя в настройки и активировав пункт Auto Run Code.

Explore p5.js Demos

3D куб
Зажгите трехмерный куб, используя несколько источников света Попробуйте! Флокирующее поведение
Демонстрация классической симуляции «поведения толпы» Крейга Рейнольдса. Код с https://natureofcode.com/ 
Узел: программирование серверных приложений на примерах JavaScript

Зачем их использовать?

Преимущество таких сервисов в том, что они запускаются непосредственно в браузере, что является лучшим и наиболее подходящим инструментом для кодирования и рендеринга HTML.

html-код

При написании веб-разметки в текстовом редакторе, таком как Notepad ++, вам необходимо сохранить изменения в файле, затем загрузить файл в браузер, затем просмотреть его, а затем вернуться в редактор, чтобы внести дальнейшие изменения. Это скучный и нерациональный процесс!

Почти все сервисы в обзоре можно динамически обновлять при изменении кода. Нет необходимости переключаться между окнами. Вы настраиваете HTML, и изменения вносятся автоматически. Независимо от компьютера, на котором вы работаете, вы можете получить доступ к нужному документу, если у вас есть подключение к Интернету.

HTMLG

htmlg

Другой вариант — HTMLG. Работает так же: панель с кодом и HTML-превью. Однако в этой службе невозможно подключить CSS и JavaScript к HTML, создав один проект. Если вам нужно отредактировать код, написанный на этих языках, вам нужно открыть новую вкладку и отредактировать ее как отдельный проект.

Обратите внимание, что существует ограничение в 300 слов, если вы тестируете веб-страницы с текстом. Чтобы увеличить количество символов и использовать версию без рекламы, вам необходимо приобрести подписку. Платная версия стоит от 5,80 долларов в месяц.

Онлайн-компиляторы для Python

  • Tutorialspoint — один из самых распространенных и быстрых онлайн-компиляторов Python для запуска исходного кода. Поддержка Python 2.0 и 3.0, помощь в выявлении ошибок. Также в Tutorialspoint вы можете скачать свой проект или поделиться им (но для этого вам необходимо зарегистрироваться на сайте). Еще одним преимуществом является то, что интерфейс компилятора можно настраивать, а шрифт увеличивать, чтобы не напрягать глаза и не смотреть на строчные буквы.

Компилятор Online Tutorialspoint

Пример кода на Tutorialspoint

  • Paiza.io — компилятор, поддерживающий Python и другие языки программирования. Предлагает как бесплатную, так и платную версии. Платная версия предоставляет полезные функции для разработки проектов корпоративного уровня, но базовые функции компилятора подходят для простой проверки кода. Интерфейс Paiza доступен на трех языках: испанском, японском и английском. В Paiza вы можете связать учетную запись git и включить код автосинхронизации, сохранить код и отредактировать его в любое удобное время, а также настроить интерфейс компилятора под себя.

Онлайн-компилятор Paiza.io

Пример кода на Paiza.io

  • Online Python — это компилятор с минималистичным дизайном. Поддерживает Python версии 3.8. Особенность этого компилятора в том, что он поддерживает выполнение интерактивных программ, что позволяет вводить данные программы в реальном времени. В компиляторе также есть опция совместного использования кода — вы можете сохранить свой код в облаке и поделиться им с коллегами.

Онлайн-компилятор Python

Пример кода на Python онлайн

Источники

  • https://codehs.com/editor/sandbox/explore/javascript
  • https://geeker.ru/internet/html-js-redaktor-online/
  • https://highload.today/vypolnit-kod-v-brauzere-12-onlajn-kompilyatorov-kotorye-uprostyat-vashu-zhizn/

Оцените статью
Блог о JavaScript