jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-02-27 20:02:17 -05:00
Code Issues Projects Releases Wiki Activity

Rewrite the get started tutorial using the ice cream demo (#985)

Browse Source 
* Rewrite the get started tutorial using the ice cream demo

* Update docs/tutorials/getting-started.md

Co-authored-by: Antonio Cuni <anto.cuni@gmail.com>

* Address Antonio's comments

Co-authored-by: Antonio Cuni <anto.cuni@gmail.com>
This commit is contained in:
Fábio Rosado
2022-12-06 13:47:08 +00:00
committed by GitHub
parent a73c73b814
commit 4337e6833a
3 changed files with 274 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
docs/reference/elements/py-script.md
View File

@@ -10,7 +10,10 @@ The `<py-script>` element lets you execute multi-line Python scripts both inline
## Examples
- Inline `<py-script>` element:
### Inline `<py-script>` element:
Let's execute this multi-line Python script to compute π and print it back onto the page
```html
<html>
<head>
@@ -34,19 +37,75 @@ The `<py-script>` element lets you execute multi-line Python scripts both inline
</html>
```
- `<py-script>` element with `src` attribute:
### Using `<py-script>` element with `src` attribute:
we can also move our python code to its own file and reference it via the `src` attribute.
```python
# compute_pi.py
print("Let's compute π:")
def compute_pi(n):
pi = 2
for i in range(1,n):
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
return pi
pi = compute_pi(100000)
s = f"π is approximately {pi:.3f}"
print(s)
```
Since both compute_pi.py and index.html are in the same directory, we can reference the python file with a relative path.
```html
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<py-config>
[[fetch]]
files =["compute_pi.py"]
</py-config>
</head>
<body>
<py-script src="compute_pi.py"></py-script>
</body>
</html>
```
### Writing into labeled elements
In the example above, we had a single `<py-script>` tag printing
one or more lines onto the page in order. Within the `<py-script>`, you can
use the `Element` class to create a python object for interacting with
page elements. Objects created from the `Element` class provide the `.write()` method
which enables you to send strings into the page elements referenced by those objects.
For example, we'll add some style elements and provide placeholders for
the `<py-script>` tag to write to.
```html
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/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>
<b><p>Today is <u><label id='today'></label></u></p></b>
<br>
<div id="pi" class="alert alert-primary"></div>
<py-script>
import datetime as dt
Element('today').write(dt.date.today().strftime('%A %B %d, %Y'))
def compute_pi(n):
pi = 2
for i in range(1,n):
pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
return pi
pi = compute_pi(100000)
Element('pi').write(f'π is approximately {pi:.3f}')
</py-script>
</body>
</html>
```