# PyScript筆記 ## 前情提要 Anaconda最近釋出的PyScript，可以讓Python寫在HTML裡。 看了教學稍微做了一點筆記。 ## 1. Import PyScript ```html <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> ``` 寫這兩行就等於import好了，不用下載任何套件。 ## 2. 基本使用方法 要寫python的話、 ```html <py-script> </py-script> ``` 上面這個tag要先寫。 直接寫一個hello world XD ```html: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> </body> </html> ``` 執行結果: ![截圖 2022-05-08 23.48.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067829/6e466266-f119-9b8a-e40b-11981467d0c0.png) print的字串直接顯示在網頁上了。 (補充: 官方推薦Chrome，Safari之類的瀏覽器可能會失敗) ## 3. 在HTML裡畫圖 畫圖之前，再提一點點需要的東西。 ### 1.跟Python一樣，要import library時 ```html <py-env> </py-env> ``` 上面這個tag要先寫。 ### 2. pyscript.write() 用pyscript.write()可以把資料寫入特定的id。 ```html pyscript.write(arg1, arg2) arg1: id arg2: 要傳的值 ``` 練習一下: ```html:pyWrite.html <html> <head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> </head> <body> <div id="blue" class="alert alert-primary"></div> <div id="red" class="alert alert-danger"></div> <py-script> pyscript.write("blue", "In blue.") pyscript.write("red", "In red.") </py-script> </body> </html> ``` 執行結果: ![截圖 2022-05-09 00.12.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067829/59fedecc-7a7b-dd49-0c8a-fb901575d935.png) In blue.跟In red.都分別顯示在藍色跟紅色的div了~ 題外話，alert alert-primary/danger是BootStrap的定義來的。 可以參考[這裡](https://getbootstrap.com/docs/4.0/components/alerts/) 最後，用matplotlib畫個圖試試看! ```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> ``` Import PyScript、numpy跟matplotlib ```html <body> <h1>二次函數</h1> <div id="quad"></div> <py-script output="quad"> import matplotlib.pyplot as plt import numpy as np x = x = np.arange(-10, 10, 0.1) y = x*x fig, ax = plt.subplots() ax.plot(x, y) fig </py-script> </body> ``` 注意點↓ ```html <py-script output="quad"> ``` 這寫法是把圖的結果傳到id=quad的div裡面的意思。 跟↓一樣！ ```html pyscript.write('quad', fig) ``` 完整的code ```html:plot.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>二次函數</h1> 　<div id="quad"></div> 　<py-script output="quad"> import matplotlib.pyplot as plt import numpy as np x = x = np.arange(-10, 10, 0.1) y = x*x fig, ax = plt.subplots() ax.plot(x, y) fig 　</py-script> 　</body> </html> ``` 執行結果: ![](https://i.imgur.com/I49NVRz.png) ## 感想 真方便～畫機器學習的結果也能直接應用！ 缺點是載入有點久.. ## 参考 1. https://github.com/pyscript/pyscript/blob/main/GETTING-STARTED.md 2. https://pyscript.net/