Python Brython библиотека для front-end

Метки: /

В этой статье мы рассмотрим как устроена front-end разработка в Python, а точнее рассмотрим специальную библиотеку для этого, которая называется Brython.

Также посмотрите статью «Python библиотека Delorean», очень интересная библиотека для работы с временим.

Установка Python Brython:

Для установки этой библиотеки есть три способа через CDN, PIP и ещё можно просто скачать специальные файлы, рассмотрим их все.

CDN:

Что бы подключить всё это через CDN, подключите эти файлы:

Через PIP:

Теперь рассмотрим как установить через PIP, для начала скачайте саму библиотеку:

После чего вам надо в пустой папке запустить эту команду:

Таким образом вы создаёте в папке два файла, «brython.js» и «brython_stdlib.js», которые просто подключаете в ваш HTML.

Скачать:

Последний способ, вы можете просто скачать из GitHub проекта Zip архив с этими файлами, по этой ссылке.

После того как вы скачали, из Zip архива берёте файлы «brython.js» и «brython_stdlib.js», перемешаете в папку вашего проекта и подключаете их к HTML.

Примерно вот так:

После этого можете начать работать.

Работа с Python Brython:

Давайте разберём основы работы, для начала стоит сказать, что главное что вам нужно сделать, так это для тега script, указать атрибут type, и его значение должно быть text/python, это очень важно.

Ещё очень важно к тегу body применять атрибут onload со значением brython(), таким образом мы начинаем читать Python код.

Внутри скрипта вы должны импортировать эту библиотеку, так как без неё вы не сможете работать.

Вот вам самый простой пример первой программы:

Как видите здесь мы берём элемент document и кладём в него надпись «Hello !», то есть похоже на JavaScript.

Вот что у нас получилось на экране:

Первый результат работы с python brython

А вот что у нас произошло со самим документом:

Как выглядит DOM после работы

То есть у нас язык Python добавил слова «Hello !» на нашу страницу, всё это происходит благодаря компоненту document. Таким образом вы можете работать с документом как вам надо.

Ещё есть один очень важный компонент этой библиотеки, называется html, он позволяет создавать какие либо HTML теги.

Вот пару примеров работы с ним:

Как видите мы тут компонент html, создаём жирны и курсивный текс, также есть один абзац и ссылка.

Тут мы уже для добавления элемента в документ используем метод attach(), это для тех, кому не нравится синтаксис <=.

Вы можете заметить одну закономерность, для обозначения определённого тега, мы используем метод html, который называется как тот тег который мы хотим создать, только пишем его названия заглавными буквами, и так абсолютно со всеми тегами.

Ещё когда создаёте новый элемент, то первым параметром указываем текст внутри, а последующие атрибуты этого тега, как например у нас с тегом a.

Вот что у нас вывелось на страницу:

Чуть более серьёзная программа на python brython

У нас всё работает так как надо, и появляется тот же текст, что мы и хотели, всё это на Python Brython.

Последние что мы рассмотрим, так это как брать элементы и использовать события.

Вот так мы модифицировали этот код:

Давайте разберём этот код, в начале мы как обычно подключаем всё что нам нужно, из нового тут только alert, потом также создаём элементы, но тут вы можете заметить, что для жирного текста, мы ещё добавляем атрибут id со значением bold.

Потом создаём функцию click_alert(), добавляем в него обязательный параметр ev, который нужен для события, иначе оно не будет работать. Внутри просто вызываем alert() с текстом.

Дальше берём все элементы p, это делаем с помощью document.select("p"), тут важно сказать, что этот метод возвращает именно список всех найденных элементов.

Последние мы через метод bind(), назначаем событие клика для первого абзаца, и для элемента с id="bold", как видите для получения элемента мы ещё можем использовать document, просто в квадратных скобках для этого указываем id нужного нам элемента.

Теперь нажимаем на любой элемент которому мы назначили событие и вот что у нас выводиться:

Отработка событий в python brython

Как видите всё работает так как надо.

Вывод:

В этой статье вы прочитали про библиотеку Python Brython, которая нужна для работы с front-end в браузерах, конечно это ещё не всё, тут были только основы, он может делать ещё очень многое.

Если она вам понравилась, и вы хотите больше о ней узнать, то заходите на официальный сайт проекта по этой ссылке.

Подписываетесь на соц-сети:

Поделится:

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии