В этой статье мы рассмотрим как устроена front-end разработка в Python, а точнее рассмотрим специальную библиотеку для этого, которая называется Brython.
Также посмотрите статью «Python библиотека Delorean», очень интересная библиотека для работы с временим.
Установка Python Brython:
Для установки этой библиотеки есть три способа через CDN, PIP и ещё можно просто скачать специальные файлы, рассмотрим их все.
CDN:
Что бы подключить всё это через CDN, подключите эти файлы:
1 2 | <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script> |
Через PIP:
Теперь рассмотрим как установить через PIP, для начала скачайте саму библиотеку:
1 | pip install brython |
После чего вам надо в пустой папке запустить эту команду:
1 | brython-cli --install |
Таким образом вы создаёте в папке два файла, «brython.js» и «brython_stdlib.js», которые просто подключаете в ваш HTML.
Скачать:
Последний способ, вы можете просто скачать из GitHub проекта Zip архив с этими файлами, по этой ссылке.
После того как вы скачали, из Zip архива берёте файлы «brython.js» и «brython_stdlib.js», перемешаете в папку вашего проекта и подключаете их к HTML.
Примерно вот так:
1 2 | <script type="text/javascript" src="brython.js"></script> <script type="text/javascript" src="brython_stdlib.js"></script> |
После этого можете начать работать.
Работа с Python Brython:
Давайте разберём основы работы, для начала стоит сказать, что главное что вам нужно сделать, так это для тега script, указать атрибут type, и его значение должно быть text/python, это очень важно.
Ещё очень важно к тегу body применять атрибут onload со значением brython(), таким образом мы начинаем читать Python код.
Внутри скрипта вы должны импортировать эту библиотеку, так как без неё вы не сможете работать.
Вот вам самый простой пример первой программы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script> </head> <body onload="brython()"> <script type="text/python"> from browser import document document <= "Hello !" </script> </body> </html> |
Как видите здесь мы берём элемент document и кладём в него надпись «Hello !», то есть похоже на JavaScript.
Вот что у нас получилось на экране:
А вот что у нас произошло со самим документом:
То есть у нас язык Python добавил слова «Hello !» на нашу страницу, всё это происходит благодаря компоненту document. Таким образом вы можете работать с документом как вам надо.
Ещё есть один очень важный компонент этой библиотеки, называется html, он позволяет создавать какие либо HTML теги.
Вот пару примеров работы с ним:
1 2 3 4 5 6 | from browser import document, html document.attach(html.B("Жирный шрифт")) document.attach(html.I("Курсивный шрифт")) document.attach(html.P("Абзац")) document.attach(html.A("Ссылка на Google", href="https://www.google.ru/")) |
Как видите мы тут компонент html, создаём жирны и курсивный текс, также есть один абзац и ссылка.
Тут мы уже для добавления элемента в документ используем метод attach(), это для тех, кому не нравится синтаксис <=.
Вы можете заметить одну закономерность, для обозначения определённого тега, мы используем метод html, который называется как тот тег который мы хотим создать, только пишем его названия заглавными буквами, и так абсолютно со всеми тегами.
Ещё когда создаёте новый элемент, то первым параметром указываем текст внутри, а последующие атрибуты этого тега, как например у нас с тегом a.
Вот что у нас вывелось на страницу:
У нас всё работает так как надо, и появляется тот же текст, что мы и хотели, всё это на Python Brython.
Последние что мы рассмотрим, так это как брать элементы и использовать события.
Вот так мы модифицировали этот код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | # Берём все зависимости from browser import document, html, alert # Создаём новый элемент жирного текста document.attach(html.B("Жирный шрифт", id="bold")) # Создаём новый элемент курсивного текста document.attach(html.I("Курсивный шрифт")) # Создаём новый элемент абзац document.attach(html.P("Абзац")) # Создаём новый элемент ссылка document.attach(html.A("Ссылка на Google", href="https://www.google.ru/")) # Создаём функцию def click_alert(ev): # Создаём alert alert("Клик") # Берём абзацы p = document.select("p") # Создаём событие на первом абзаце p[0].bind("click", click_alert) # Создаём событие на тексте с id bold document["bold"].bind("click", click_alert) |
Давайте разберём этот код, в начале мы как обычно подключаем всё что нам нужно, из нового тут только alert, потом также создаём элементы, но тут вы можете заметить, что для жирного текста, мы ещё добавляем атрибут id со значением bold.
Потом создаём функцию click_alert(), добавляем в него обязательный параметр ev, который нужен для события, иначе оно не будет работать. Внутри просто вызываем alert() с текстом.
Дальше берём все элементы p, это делаем с помощью document.select("p"), тут важно сказать, что этот метод возвращает именно список всех найденных элементов.
Последние мы через метод bind(), назначаем событие клика для первого абзаца, и для элемента с id="bold", как видите для получения элемента мы ещё можем использовать document, просто в квадратных скобках для этого указываем id нужного нам элемента.
Теперь нажимаем на любой элемент которому мы назначили событие и вот что у нас выводиться:
Как видите всё работает так как надо.
Вывод:
В этой статье вы прочитали про библиотеку Python Brython, которая нужна для работы с front-end в браузерах, конечно это ещё не всё, тут были только основы, он может делать ещё очень многое.
Если она вам понравилась, и вы хотите больше о ней узнать, то заходите на официальный сайт проекта по этой ссылке.
Подписываетесь на соц-сети:
Оценка:
Загрузка...