直接在 HTML 中運行 Python 程式

直接在 HTML 的 <head> … </head> 內加入語法後, 執行時直接連至 pyscript.net 使用其 css 與 js。

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

直接在 HTML 中, 將欲執行的 python 原始碼, 前後以<py-script> … </py-script> 包覆即可。

基本上, 會以上簡單的幾個步驟, 就可以在 HTML 的網頁中, 運行 Python 的程式了。接下來, 我再展示簡單的 2 個範例程式, 給各位參考 !!

<html>   
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head>
<body>
<py-script> print('Hello, World!') </py-script>
</body>
</html>

將上面的程式碼, 另存新檔, 例如我的檔名是 test_HelloWorld.html, 然後在瀏覽器上執行它。

<html>   
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head>
<body>
<py-script>print('Hello, World!')</py-script><br>
This is the current date and time, as computed by Python:
<py-script>
from datetime import datetime
now = datetime.now()
now.strftime("%m/%d/%Y, %H:%M:%S")
</py-script>
</body>
</html>

將上面的程式碼, 另存新檔, 例如我的檔名是 test_PyScript_Hello.html, 然後在瀏覽器上執行它。

執行的結果畫面如上圖
<html>   
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- numpy
- matplotlib
</py-env>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
fig, ax = plt.subplots() ax.scatter(x, y)
fig
</py-script>
</body>
</html>

將上面的程式碼, 另存新檔, 例如我的檔名是 test_PyScript_Plot.html, 然後在瀏覽器上執行它。

執行的結果畫面如上圖

是不是很簡單呢 ?? 如此, Python 工程師也可以讓自己的後端程式碼, 輕鬆無痛的呈現在前端的網頁上了。當然, 若能結合一些後台資料庫, 與前端 UI 的設計, 或許從此 Python 工程師在應用開展的路也將更為寬廣了 !!

作者:Yungger 勇哥

若覺得此文真對您有幫助, 點點左上方的拍手圖示, 鼓勵一下。若還想 請喝杯咖啡 鼓勵一下勇哥的繼續創作, 也感謝 😘 😘 !!

Yungger

Maker & Freelancer

--

--

Maker & Freelancer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store