一日一技：拋掉JavaScript，用HTML和Python做網(wǎng)站
有時候，我們的電腦上沒有安裝Python，但你需要驗證一段Python代碼的運行效果。
又有時候，你想做一個網(wǎng)頁，但是你只會HTML和Python。那么如果要做一個帶有一些復(fù)雜邏輯的網(wǎng)頁，只能去學(xué)JavaScript嗎?
其實未必。如果你不考慮網(wǎng)頁美觀的話，你可以用HTML + Python實現(xiàn)一個簡單的網(wǎng)頁。
今天我們要介紹的東西，叫做PyScript，使用它，不需要安裝任何軟件。只要有一個記事本，就能寫一段HTML+Python的代碼。寫完以后，雙擊這個HTML文件，用瀏覽器打開，就能直接看到Python代碼的運行結(jié)果。
假設(shè)我現(xiàn)在要寫一段代碼，使用高效的算法計算斐波那契數(shù)列前10項的值?，F(xiàn)在我已經(jīng)把代碼寫好了，想驗證一下它是否正確：
def fib(n):
if n in [1, 2]:
return 1
a = 1
b = 1
for _ in range(2, n):
a, b = b, a + b
return b
我的電腦上沒有Python，我也不知道任何在線的Python解釋器。怎么辦呢?這個時候，你只需要在這個Python代碼的前后再添加一些HTML代碼，把它保存成一個.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>
def fib(n):
if n in [1, 2]:
return 1
a = 1
b = 1
for _ in range(2, n):
a, b = b, a + b
return b
for i in range(1, 11):
print(f'第{i}項的結(jié)果是：{fib(i)}')
</py-script>
</body>
</html>
保存以后，雙擊這個HTML文件，用瀏覽器打開，就可以看到運行結(jié)果了，如下圖所示：
到目前為止，似乎跟那些在線的Python運行環(huán)境沒什么區(qū)別。但PyScript更厲害的是，它自帶了一些常見的第三方庫，例如numpy或者M(jìn)atplot，甚至它還可以手動安裝第三方庫。
對于它自帶的numpy和matplotlib，可以直接使用標(biāo)簽聲明：
<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>
運行效果如下圖所示：
如果你想安裝第三方庫，只需要去下載這個庫對應(yīng)的.whl文件，把它跟HTML文件放到一起，然后在中使用相對路徑導(dǎo)入就可以了。但經(jīng)過我的測試，導(dǎo)入的requests工作起來有點問題。因此就不多介紹了?？纯垂俜绞欠駮迯?fù)這個bug吧。
PyScript的Github[1]上，給了不少Demo，甚至可以用它來做超級馬里奧的網(wǎng)頁游戲。大家有興趣可以看看。
總結(jié)
目前僅僅從運行Python代碼這個小功能上，PyScript做的比Jupyter還是差遠(yuǎn)了。但是PyScript可以編輯修改HTML元素，這樣它就可以在一定程度上替代JavaScript，從而配合HTML實現(xiàn)一些功能復(fù)雜的網(wǎng)頁。
參考資料
[1]Github: https://github.com/pyscript/pyscript
