Вам понадобится:
Склонируйте проект. Откройте проект в VS Code.
Установите quart: pip install -U quart.
Запустите сервер -- python3.7 server1.py -- и браузер -- http://localhost:5000. Перейдите в первый урок.
В браузере откройте "Инструменты для разработчика", в них найдите JS-консоль. Там вы должны увидеть сообщение "Начали работу!".
Ознакомьтесь с исходных кодом серверной части server1.py и исходных кодом страницы templates/p_1_start.html.
Убедитесь, что вы понимаете, как работает связка веб-страницы и сервера.
Сделайте упражнение в templates/p_1_start.html.
Далее, запустите взамен первого сервера -- второй (server2.py). Ознакомьтесь с комментариями в исходном коде.
Изучите отличия в поведении и функциональности.
Наконец, запустите взамен второго сервера -- третий (server3.py). Ознакомьтесь с комментариями в исходном коде.
Изучите отличия в поведении и функциональности.
Сделайте упражнение в server3.py.
Важно: второй шаг требует выполненного в server3.py упражнения.
Запустите сервер -- python3.7 server3.py -- и браузер -- http://localhost:5000. Перейдите во второй урок.
Реализуйте монотонный счетчик: который умеет только расти. Для этого вспомните разобранную на занятии модель счетчика.
Следуйте указаниям в templates/p_2_inc_counter.html.
Это ваше домашнее задание.
Во-первых, доделайте классную работу и доведите обычный счетчик до рабочего состояния.
Во-вторых, добавьте операцию уменьшения счетчика.
Попробуйте самостоятельно адаптировать заготовку из templates/p_2_inc_counter.html:
- добавить две кнопки -- увеличения и уменьшения счетчика;
- адаптировать тестовый сценарий для нажатия двух кнопок попеременно.
Важно: можно воспользоваться сервером server4.py, так как он содержит всю разработанную ранее функциональность.
Ваша задача -- реализовать функцию расчета списка правок, которые переводят одну строку в другую. Правка -- это операция вставки символа, операция удаления символа и операция замены символа.
Чтобы реализовать функцию расчета списка правок вам нужно модифицировать алгоритм расчета расстояние Левенштейна между двумя строками и добавить в него обратный ход, извлекающий правки.
Сигнатура функции должна быть такая:
function editList(left, right);Исходный код функции должен быть размещен в файле templates/j_editlist.js.
Это нужно, чтобы код можно было переиспользовать на шаге 6.
Остальные подробности -- см. в templates/p_4_editlist.html.
Ваша задача -- реализовать модель документа, поддерживающую операции вставки, удаления и замены, но использующую абсолютное позиционирование символов внутри. Также модель документа должна сериализоваться в пару множеств D1 и D2: D1 -- множество пар (позиция, символ), D2 -- множество удаленных позиций.
Сигнатуры функций модели документа такие:
function public_newDocument();
function public_getContent(document);
function public_serializeState(document); // можно отложить реализацию до 7-го шага
function public_mergeWithSerializedState(document, serializedState); // можно отложить реализацию до 7-го шага
function public_insertAfter(document, index, symbol); // реализация фиксирована, не трогать
function public_remove(document, index); // реализация фиксирована, не трогать
function public_replace(document, index, symbol); // реализация фиксирована, не трогать
function _getPositionByIndex(document, index);
function _allocate(document, begin, end);
function _allocateLeft(document, begin, end);
function _allocateRight(document, begin, end);
function _applyInsert(document, position, symbol);
function _applyRemove(document, position);Исходный код функции должен быть размещен в файле templates/j_treedoc.js.
Это нужно, чтобы код можно было переиспользовать на шаге 6.
Описание функций, указания и другие подробности -- в templates/p_5_treedoc.html.
Ваша задача -- состыковать код из четвертого и пятого шагов.
В заготовке вас ждет интерфейс с текстовым полем. При изменении текстового поля
в нижней части экрана с помощью функции editList из templates/j_editlist.js
пересчитывается список правок между текущим содержимым модели (правая часть экрана)
и текущим содержимым текстового поля (левая часть экрана).
Вам нужно реализовать логику за кнопкой "Перенести в модель", которая приведет содержимое модели к такой же строке, что и в текстовом поле.
Указания и подробности -- см. в templates/p_6_textarea.html.
Ваша задача -- взять наработки с шестого шага и добавить пересылку данных при изменении модели документа.
Код работы с сетью можно позаимствовать из templates/p_1_start.html.
Это задание для самостоятельной разработки.