PyScript - A way to run python in your HTML page
Balayogi G
Interdisciplinary enthusiast | Ph.D. Candidate in Computer Science | UGC NET Certified | Human-Computer Interaction | Accessibility | Usable Security | Artificial Intelligence | Computational Security
Have you ever thought of running the Python script on the web without using any complex Python frameworks? Introducing the Pyscript package, which helps execute Python script inside HTML itself. The flow of the blog article is presented below,
Introduction
PyScript is an easy-to-use package for creating interactive web applications and automating complex tasks that require both Python code and HTML output. With PyScript, Python code can be embedded within the HTML files. In this blog, we will explore the key features of PyScript, How to use it, and the benefits of using this package for web development.
Features
PyScript offers a wide range of features to develop interactive web applications. Some of the features include,
Installation
To use PyScript in the HTML code the following codes need to be pasted in the <head> tag of the HTML page.
<link rel="stylesheet" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>>
Demonstration
To begin, I create an HTML page named app.html with the basic tag sections such as head, title and body.
领英推荐
<!DOCTYPE html
<html lang="en">
? <head>
? <meta charset="utf-8" />
? <meta name="viewport" content="width=device-width,initial-scale=1" />
? <title>Simple text display program using PyScript</title>
? </head>
? <body>
? </body>
</html>>
To use PyScript in HTML, I need to add the necessary tags to import the PyScript functionalities. After adding those tags our code will be,?
<!DOCTYPE html
<html lang="en">
? <head>
? <meta charset="utf-8" />
? <meta name="viewport" content="width=device-width,initial-scale=1" />
? <title>Simple text display program using PyScript</title>
? <link rel="stylesheet" />
? <script defer src="https://pyscript.net/latest/pyscript.js"></script>
? </head>
? <body>
? </body>
</html>>
Now we have the basic settings to run Python in HTML. So here I am going to add a button and while clicking the button, a text should appear on the screen. The final version of the code will be,
<!DOCTYPE html
<html lang="en">
? <head>
? <meta charset="utf-8" />
? <meta name="viewport" content="width=device-width,initial-scale=1" />
? <title>Simple text display program using PyScript</title>
? <link rel="stylesheet" />
? <script defer src="https://pyscript.net/latest/pyscript.js"></script>
? </head>
? <body style="text-align: center;">
? ? <h2>Simple Text display with Button click using PyScript</h2><br>
? ? <button py-click="write_to_page()" id="manual">Say Hello</button><br><br><br>
? ? <div id="manual-write" style="text-align: center;"></div>
? ? <py-script>
? ? def write_to_page():
? ? ? manual_div = Element("manual-write")
? ? ? manual_div.element.innerText = "Hello World, This is generated using PyScript"
? ? </py-script>
? </body>
</html>>
So, I used the <py-script> tag to embed the Python code in the HTML code. Now the question is what is in that code? I created a function that will display text on the screen. Just like javascript, we have to identify the element which is needed to be modified. In JavaScript, we use document.getElementById(element-id) likewise in this PyScript, we use Element(element-id) function to identify the element on the web page. Now we can assign the innerText of the element with new text.
In the button, we have to include an attribute called py-click to perform the click operation on the button. Assign the attribute py-click with the name of the Python function write_to_page(). Once the button is clicked, the text will be displayed on the screen as shown below,?
We can perform various complex operations by embedding PyScript such as Data Visualization, Data Analysis, and Machine Learning on the web.
References
CEO | Cloudjet.org Innovations
8 个月Why would anyone use that? Coding on client side should be decreased not extended.