Как устроен онлайн-редактор на сайте: ввод, черепашка и ограничения

Тренажёрыобновлено 07.10.202611 мин чтенияесть тренажёр

Онлайн-редактор Python на этой странице запускает код прямо в браузере: ничего не нужно устанавливать, достаточно открыть сайт. В нём работают print и input, черепашья графика, модули random, math и time. Ниже — как им пользоваться, какие клавиши ускоряют работу и где браузерная версия языка ведёт себя иначе, чем установленная на компьютер.

Загружаем…

Что умеет онлайн-редактор Python на сайте

Онлайн-редактор — это окно для кода с кнопкой запуска и панелью вывода, которое работает без установки Python. Он подходит для первых программ, школьных задач и рисунков черепашкой, но не заменяет полноценную среду на компьютере.

Окно состоит из трёх частей, и каждая подписана так же, как в настоящих средах разработки. Слева — поле кода с номерами строк и подсветкой: ключевые слова, строки и числа раскрашены разными цветами, поэтому незакрытую кавычку видно сразу. Сверху — вкладка с именем файла, например main.py, и две кнопки: «Сбросить» и «▶ Запустить». Справа — панель «Вывод», куда попадает всё, что печатает программа. Если в коде есть черепашка, под окном появляется белый холст.

Такой же редактор Python встроен во многие уроки сайта: в статье про первую программу ребёнка он стоит сразу под заголовком, а на страницах с задачами превращается в тренажёр с автопроверкой. Код каждого окна хранится отдельно, поэтому эксперименты на одной странице не сотрут работу на другой.

ВозможностьРаботает в окне на сайтеПример
Вывод текста и чиселДаprint("Привет", 5)
Ввод с клавиатурыДа, через поле под выводомname = input()
Черепашья графикаДа, на холсте под окномimport turtle
Случайные числа и математикаДаrandom.randint(1, 6), math.sqrt(16)
Паузы в программеДаtime.sleep(1)
Чтение и запись файлов на дискеНетopen("data.txt")
Установка библиотекНетpip install

Как запустить программу: кнопки и горячие клавиши

Чтобы запустить код, нажмите «▶ Запустить» или сочетание Ctrl+Enter (на Mac — Cmd+Enter). Пока программа работает, справа написано «выполняется…», а после окончания — «готово» или «ошибка».

Попробуйте прямо сейчас: в редакторе Python вверху страницы уже лежит пример, который считает площадь круга и бросает виртуальный кубик. Нажмите запуск несколько раз — площадь каждый раз одна и та же, а число на кубике меняется. Затем поменяйте радиус с 5 на 10 и снова запустите. Так за минуту видно главное свойство программы: она делает ровно то, что написано, и пересчитывает результат по новым данным.

  • Ctrl+Enter. Запуск без мыши. Удобно, когда правите одну строку и сразу смотрите результат.
  • Tab. Вставляет 4 пробела. Именно такой отступ рекомендует руководство по стилю PEP 8[1], и редактор не смешивает его с символами табуляции.
  • Ctrl+Z и Ctrl+Y. Отмена и повтор правки, как в обычном текстовом редакторе.
  • Ctrl+C и Ctrl+V. Копирование и вставка. Примеры со страниц сайта можно переносить в окно целиком.

Больше сочетаний, полезных в IDLE и других средах, собрано на странице про горячие клавиши программиста. Для начала хватит двух: Ctrl+Enter для запуска и Ctrl+Z для отмены.

Ввод с клавиатуры: как работает input()

Если программа вызывает input(), выполнение останавливается и под панелью вывода появляется поле ввода с кнопкой «Ввод». Программа ждёт, пока вы напишете ответ и нажмёте Enter.

name = input("Как тебя зовут? ")
age = int(input("Сколько тебе лет? "))
print("Привет,", name)
print("Через 10 лет тебе будет", age + 10)

Текст подсказки из скобок печатается в панели вывода, а введённый ответ дописывается следом, как в настоящей консоли. Помните, что input() всегда возвращает строку. Чтобы сложить возраст с числом 10, строку превращают в целое число функцией int(). Если ввести буквы вместо цифр, программа остановится с ошибкой ValueError, а под сообщением появится подсказка на русском со ссылкой на разбор. Подробнее о вводе и разборе нескольких чисел из одной строки рассказывает статья про функцию input в Python.

Если вызовов input() несколько, поле появится столько раз, сколько их выполнится. В задачах с автопроверкой поле не появляется: тренажёр сам подставляет ответы из тестов.

Черепашья графика на белом холсте

Черепашья графика — это рисование командами «вперёд», «повернись», «подними перо». Как только в коде встречается import turtle, под окном появляется белый холст шириной 480 и высотой 320 точек с центром в точке (0, 0).

import turtle

t = turtle.Turtle()
t.color("green")
for i in range(5):
    t.forward(100)
    t.right(144)

Эта программа рисует пятиконечную звезду: черепашка пять раз проходит 100 шагов и поворачивает на 144 градуса. Идея пришла из языка Logo, который Сеймур Пейперт в MIT придумал, чтобы дети учились через создание собственных рисунков и программ[2]. Каждый запуск очищает холст и рисует заново, поэтому можно менять числа и сразу сравнивать результат. Чтобы рисунок появлялся быстрее, добавьте t.speed(0). Основные команды модуля разобраны в статье про черепашью графику в Python.

Модули random, math и time

В браузере доступны 3 модуля, которых хватает почти для всех школьных задач: random для случайных чисел, math для математики и time для пауз. Подключаются они как обычно — словом import.

import random
import math
import time

print(random.choice(["камень", "ножницы", "бумага"]))
print(math.sqrt(144), math.pi)
for i in range(3, 0, -1):
    print(i)
    time.sleep(1)
print("Старт!")

Обратный отсчёт здесь идёт с паузой в одну секунду: числа появляются в панели по очереди, а не все сразу. Функция random.choice выбирает случайный элемент списка, поэтому первая строка вывода меняется от запуска к запуску. Модули из интернета, например для работы с таблицами или нейросетями, в браузерной версии не установить: их нет внутри страницы, а команды pip здесь нет. Полный список функций random и math есть в официальной документации Python, и почти все они работают в браузере.

Как устроен запуск: интерпретатор Skulpt

Skulpt — это интерпретатор Python, написанный на JavaScript: он читает ваш код и выполняет его прямо в браузере. На сервер программа не отправляется, поэтому окно работает даже при медленном интернете, если страница уже загрузилась.

У такого устройства есть плюсы и минусы. Плюс — ничего не нужно ставить, а код ребёнка не уходит за пределы компьютера. Поэтому редактор Python на сайте запускается одинаково в школьном классе, дома и в библиотеке. Минус — Skulpt повторяет поведение Python 3 не во всём. Синтаксис языка, описанный в официальной документации Python[3], он понимает в основном так же, но самые новые конструкции и часть стандартной библиотеки ему недоступны. Для школьной программы этого хватает: переменные, условия, циклы, списки, строки, словари и функции работают привычно. Федеральная образовательная программа основного общего образования вводит программирование с 8 класса, и все темы 8–9 классов можно пройти прямо в браузере.

Ещё одно отличие — ограничение времени. Если программа выполняется слишком долго, интерпретатор её останавливает. Это защита от бесконечного цикла: без неё вкладка браузера просто зависла бы. Лимит ограничивает только время, а не длину кода: в редакторе Python можно писать программы на сотни строк. После остановки появится сообщение и подсказка со ссылкой на разбор того, почему цикл не заканчивается.

Черновик, сброс и прогресс

Каждая правка сохраняется в браузере автоматически — это черновик. Если закрыть вкладку и вернуться завтра, в окне будет ваш последний вариант кода, а не исходный пример.

Кнопка «Сбросить» возвращает исходный код страницы и удаляет черновик. Пользуйтесь ею, когда программа запуталась окончательно и хочется начать заново. Если код жалко терять, сначала скопируйте его в текстовый файл. Черновики хранятся только в этом браузере на этом устройстве: на другом компьютере или в режиме инкогнито их не будет. Число запусков кода, решённые задачи и пройденные квизы показывает страница прогресса — и тоже только для текущего браузера.

Чем браузерный Python отличается от обычного

Отличий немного, но о 6 из них стоит знать заранее, чтобы не искать ошибку там, где её нет. Таблица сравнивает окно на сайте с Python, установленным на компьютер.

Что сравниваемОкно на сайтеPython на компьютере
УстановкаНе нужнаНужен установщик и IDLE
Новые конструкции (:=, match)Не поддерживаютсяРаботают в свежих версиях
Файлы на дискеНедоступныДоступны через open()
Сторонние библиотекиНельзя установитьСтавятся командой pip
СкоростьНиже, есть лимит времениВыше, лимита нет
Текст ошибокПохож, иногда корочеПолный Traceback

Если пример из книги не запускается в браузере, проверьте, нет ли в нём модуля или конструкции из второй строки таблицы. Тот же код без изменений обычно работает в установленном Python: синтаксис языка определяет документация Python Software Foundation, а не конкретная программа для запуска. Чтобы поставить его на компьютер, понадобится инструкция по установке и галочка Add to PATH.

Миф: «Код, который работает в браузере, — ненастоящий Python, ему нельзя учиться». Это не подтверждается: синтаксис и логика те же, программа из окна почти всегда без правок запускается в IDLE. Отличается набор библиотек и скорость, а не язык.

Когда браузерная версия не подходит

Окно на странице не подходит для задач, где нужны файлы, внешние библиотеки или долгие вычисления. В этих 4 случаях лучше установить Python на компьютер.

  • Проект из 2 и более файлов. Здесь одна вкладка, и модули собственного проекта друг друга не увидят.
  • Программа читает 1 или несколько файлов с диска. Функция open() не получит доступ к файлам компьютера.
  • Перебор миллионов вариантов дольше 5–10 секунд. Сработает лимит времени, и программа остановится на середине.
  • Подготовка к компьютерной части ЕГЭ. Часть из 27 заданий выполняется с помощью компьютера, и тренироваться к ним удобнее в установленной среде без лимита времени.

Миф: «Чем мощнее среда разработки, тем быстрее ребёнок научится». Доказательств этому не существует: новичку мешает обилие кнопок и настроек. Первые недели полезнее простое окно, где программа запускается одной клавишей. Создатели Scratch из MIT Media Lab называют такой подход «низкий порог, высокий потолок»: начать легко, а расти можно долго[4].

Чего делать нельзя

Нельзя относиться к черновику в браузере как к надёжному хранилищу: его стирает очистка истории или кнопка «Сбросить». Вот 6 правил, которые берегут и код, и нервы.

  • Нельзя хранить единственную копию большого проекта только в черновике страницы — сохраняйте код в файл.
  • Не следует вставлять в код пароли, адрес и телефон: учебной программе личные данные не нужны.
  • Не стоит запускать while True без выхода и ждать результата — программу остановит лимит времени.
  • Не стоит копировать чужой код без чтения: сначала предскажите, что он выведет, потом запустите.
  • Не допускается смешивать табы и пробелы при вставке кода из других мест — проверьте отступы.
  • Нельзя ждать, что сработают pip и сторонние модули: в браузере доступны только встроенные.

Когда программа всё же падает, сообщение об ошибке — не наказание, а подсказка. Прочитайте тип ошибки и номер строки, исправьте одну вещь и запустите снова. Этот цикл «запустил — прочитал — поправил» и есть основа отладки.

Источники

[1] van Rossum G., Warsaw B., Coghlan N. PEP 8 — Style Guide for Python Code. Python Software Foundation, 2001.

[2] Papert S. Mindstorms: Children, Computers, and Powerful Ideas. New York: Basic Books, 1980.

[3] The Python Tutorial (официальная документация Python 3). Python Software Foundation.

[4] Maloney J., Resnick M., Rusk N., Silverman B., Eastmond E. The Scratch Programming Language and Environment // ACM Transactions on Computing Education. 2010. Vol. 10, № 4. Article 16.

[5] Приказ Минпросвещения России от 18.05.2023 № 370 «Об утверждении федеральной образовательной программы основного общего образования».

[6] ФИПИ. Методические рекомендации для обучающихся по организации индивидуальной подготовки к ОГЭ 2026 года. Информатика. М., 2026.

Вопросы и ответы

Нужна ли регистрация?

Нет. Код запускается сразу после открытия страницы, а черновик и прогресс хранятся в самом браузере без аккаунта.

Работает ли окно с кодом на планшете и телефоне?

Работает, но печатать код на экранной клавиатуре неудобно: трудно ставить скобки, кавычки и отступы. Для регулярных занятий лучше компьютер или планшет с внешней клавиатурой.

Чем редактор Python на сайте отличается от IDLE?

IDLE — стандартная среда, которая ставится вместе с Python на компьютер. Она умеет работать с файлами и любыми библиотеками, а окно на сайте запускается без установки, но ограничено встроенными модулями.

Можно ли готовиться в браузере к школьным урокам?

Да. Федеральная образовательная программа основного общего образования относит к 8–9 классам переменные, ветвления, циклы, строки и одномерные массивы — всё это работает в окне на сайте. На ОГЭ, по материалам ФИПИ, задание 16 можно выполнить на Python, и короткие программы для него удобно сначала проверить здесь.

Почему программа ничего не вывела?

Скорее всего, в ней нет вызова print или он стоит внутри условия, которое не выполнилось. В таком случае в панели появится надпись «(программа ничего не вывела)».

Куда пропал мой код?

Черновик исчезает после нажатия «Сбросить», очистки данных сайта или при открытии страницы в другом браузере. Важные программы копируйте в отдельный файл.