En este artículo, cubriremos cómo podemos crear una página web básica con Pyscript
El Pyscript es un framework/biblioteca de python que nos permite escribir código python dentro de HTML directamente con la ayuda de la etiqueta pyscript. Pyscript es un proyecto nuevo y actualmente está en desarrollo, pero recientemente ha ganado mucha atención. Puede hacer que una página se genere dinámicamente con la ayuda de Python. Veremos la página web básica creada con la biblioteca pyscript en este artículo.
Creación de una plantilla
Crearemos una plantilla básica en HTML en la que agregaremos el marco de pyscript como un enlace y un script a la CDN de pyscript. Puede crear un index.html en una carpeta en la ubicación deseada.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PyScript Demo</title> </head> <body> </body> </html>
Se puede crear una plantilla HTML simple según sus preferencias, la dejaremos con el cuerpo vacío ahora mismo para comenzar una nueva instancia del código pyscript.
Incrustando Python dentro de HTML
Primero necesitamos los archivos de script que nos ayuden a permitir el tiempo de ejecución de python desde el CDN de pyscript. Por lo tanto, tendremos que agregar algunas etiquetas de enlace y la etiqueta de secuencia de comandos que traerá el tiempo de ejecución de Python Pyodide.
<enlace rel=”hoja de estilo” href=”https://pyscript.net/alpha/pyscript.css” />
<script aplazar src=”https://pyscript.net/alpha/pyscript.js”></script>
El primer enlace para la hoja de estilo nos permitirá formatear la salida generada a partir del código python. El siguiente enlace, que es una etiqueta de secuencia de comandos, traerá el archivo fuente de JavaScript que funcionará con el navegador para interactuar con el tiempo de ejecución de Python. Finalmente, podemos usar las etiquetas pyscript para incrustar el código python.
El código de python se puede incrustar agregando dentro de las etiquetas <py-script>. Podemos usar las etiquetas <py-script> para escribir código python. El código Python normal se puede incrustar dentro de las etiquetas <py-script>. Las etiquetas no se cierran automáticamente y, por lo tanto, al igual que otras etiquetas HTML, necesitan una etiqueta de cierre como </py-script>
<py-script>
#python code
</py-script>
El código python dentro de las etiquetas py-script debe estar sangrado, mientras escribe el código python. El formato de la sangría no es estrictamente desde el comienzo de la línea, aunque debe ser coherente en todo momento mientras esté dentro de las etiquetas.
Ejemplo 1:
Aquí, hemos usado un código Python simple para imprimir un nombre de variable. La función de impresión se analiza dentro del pyscript que, a su vez, procesará el python y mostrará el resultado como una etiqueta HTML nativa. Aunque la salida de las etiquetas pyscript es HTML nativo, la generación se realiza con la ayuda de Pyodide y WASM, que genera el HTML nativo a partir de las etiquetas pyscript.
La página web tarda unos segundos en cargarse en su totalidad. Esto se debe a que el código de python debe procesarse y convertirse a un HTML nativo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <title>PyScript Demo</title> </head> <body> <h1>Hello, <py-script> name = "Geeks" print(name) </py-script> </h1> </body> </html>
Producción:
Creación y visualización de listas en Pyscript usando bucle
Podemos generar una lista de elementos en el HTML utilizando una lista de python pura. Simplemente podemos usar la sintaxis de Python para imprimir los elementos de una lista. La salida se generará como una línea distinta, que es el comportamiento predeterminado de la declaración de impresión en pyscript.
Ejemplo 2:
Podemos ver que los elementos de la lista están impresos en la página web utilizando un código Python simple en la etiqueta pyscript incrustada.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<title>PyScript Demo</title>
</head>
<body>
<py-script>
sports = ["Football", "Cricket", "Hockey", "Basketball"]
for sport in sports:
print(f" - {sport}")
</py-script>
</body>
</html>
Producción:
Crear y mostrar un diccionario usando una declaración condicional
Para crear un diccionario en python, crearemos un diccionario simple y mostraremos los pares clave-valor uno por uno usando un bucle for simple.
Ejemplo 3:
Aquí, hemos creado una string y luego crearemos un mapa de frecuencia de cada letra en la string. Para crear un mapa de frecuencia de letras en la string, inicializaremos un diccionario vacío, iteraremos sobre la string y verificaremos si el carácter de la string está presente como clave en un diccionario o no, si está presente lo haremos incremente el valor de la clave como el carácter en la string; de lo contrario, la clave se inicializa en uno.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<title>PyScript Demo</title>
</head>
<body>
<py-script>
name = "GeeksforGeeks"
freq = {}
for s in name:
key = freq.keys()
if s in key:
freq[s] += 1
else:
freq[s] = 1
for k in freq:
print(f"{k} : {freq[k]}")
</py-script>
</body>
</html>
Producción:
Entonces, podemos ver que el diccionario tiene los valores clave como el carácter de las strings y la frecuencia de ese carácter en la string.
Use el servidor HTTP para representar la página pyscript
Incluso podemos usar el servidor HTTP para representar la página pyscript. Podemos hacerlo usando el módulo http.server para representar la página HTML.
python -m http.server
Nota: debe estar en el mismo directorio que su archivo index.html; de lo contrario, debe especificar el directorio para representar el archivo HTML.
python -m http.server -d 'path-to-direcory'
El indicador d se proporciona para ubicar el archivo en el directorio sin cambiar el directorio en la terminal para ejecutar el servidor HTTP. Después de ejecutar el servidor, debe ubicar 127.0.0.1:8000 o localhost:8000 para ver su archivo HTML.